refactor(web): 优化页面显示和信息获取

web/components/overview-tab.js

@@ -1,3 +1,14 @@
+function color(number) {
+    let color = 'text-success'
+    if (number > 30) {
+        color = 'text-primary'
+    }
+    if (number > 90) {
+        color = 'text-danger'
+    }
+    return color
+}
+
 function overviewYarnJob(cluster, search, queue, yarnQueue) {
     return {
         className: 'font-mono',
@@ -15,52 +26,16 @@ function overviewYarnJob(cluster, search, queue, yarnQueue) {
                 type: 'service',
                 className: 'inline ml-2',
                 api: `\${base}/overview/queue?queue=compaction-queue-${cluster}`,
+                interval: 10000,
+                silentPolling: true,
                 body: [
                     {
                         type: 'tpl',
-                        tpl: '${PADSTART(size, 2)}',
+                        tpl: "${PADSTART(size, 2)}",
                     }
                 ]
             },
-            overviewYarnCluster(cluster, yarnQueue),
-            '(',
             {
-                type: 'tpl',
-                tpl: '<span class="font-bold">${PADSTART(total, 3)}</span>',
-            },
-            ',',
-            {
-                type: 'tpl',
-                tpl: '<span class="font-bold text-cyan-300">${PADSTART(scheduling, 3)}</span>',
-            },
-            ',',
-            {
-                type: 'tpl',
-                tpl: '<span class="font-bold text-success">${PADSTART(running, 3)}</span>',
-            },
-            ',',
-            {
-                type: 'tpl',
-                tpl: '<span class="font-bold text-danger">${PADSTART(failure, 3)}</span>',
-            },
-            ')',
-        ]
-    }
-}
-
-function color(number) {
-    let color = 'text-success'
-    if (number > 30) {
-        color = 'text-primary'
-    }
-    if (number > 80) {
-        color = 'text-danger'
-    }
-    return color
-}
-
-function overviewYarnCluster(cluster, queue) {
-    return {
                 type: 'service',
                 className: 'inline',
                 api: {
@@ -68,7 +43,7 @@ function overviewYarnCluster(cluster, queue) {
                     url: `\${base}/overview/yarn-cluster`,
                     data: {
                         cluster: cluster,
-                queue: queue,
+                        queue: yarnQueue,
                     },
                     adaptor: function (payload, response) {
                         let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity']).toFixed(0)
@@ -91,7 +66,6 @@ function overviewYarnCluster(cluster, queue) {
                     '(',
                     {
                         type: 'tpl',
-                className: 'font-bold',
                         tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
                     },
                     ',',
@@ -101,11 +75,35 @@ function overviewYarnCluster(cluster, queue) {
                     },
                     ')'
                 ],
+            },
+            '(',
+            {
+                type: 'tpl',
+                tpl: "<span class='font-bold white-space-pre'>${PADSTART(total, 4)}</span>",
+            },
+            ',',
+            {
+                type: 'tpl',
+                tpl: "<span class='font-bold text-cyan-300'>${PADSTART(scheduling, 2)}</span>",
+            },
+            ',',
+            {
+                type: 'tpl',
+                tpl: '<span class="font-bold text-success">${PADSTART(running, 3)}</span>',
+            },
+            ',',
+            {
+                type: 'tpl',
+                tpl: '<span class="font-bold text-danger">${PADSTART(failure, 3)}</span>',
+            },
+            ')',
+        ]
     }
 }
 
 function overviewTab() {
     return {
+        className: 'white-space-pre',
         title: '概览',
         tab: [
             {
@@ -135,7 +133,7 @@ function overviewTab() {
                     '<br>',
                     {
                         type: 'tpl',
-                        tpl: 'Hudi表：<span class="font-bold mr-1">${hudi_total}</span>',
+                        tpl: '湖底表：<span class="font-bold mr-1">${hudi_total}</span>',
                     },
                     '<br>',
                     {
@@ -172,6 +170,8 @@ function overviewTab() {
             {
                 type: 'service',
                 api: '${base}/overview/version',
+                interval: 10000,
+                silentPolling: true,
                 body: [
                     '版本：',
                     {
@@ -180,18 +180,18 @@ function overviewTab() {
                         tpl: '${version}',
                     },
                     '<br/>',
-                    '<span class="italic text-gray-500 my-2">未接收,未跨天</span>',
+                    '<span class="italic text-gray-500 my-2">未接收, 未跨天</span>',
                     '<br/>',
                     '重点表：',
                     {
                         type: 'tpl',
-                        tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.focus, 3)},${PADSTART(unSchedule.focus, 3)}</span>',
+                        tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.focus, 3)}, ${PADSTART(unSchedule.focus, 3)}</span>',
                     },
                     '<br/>',
                     '普通表：',
                     {
                         type: 'tpl',
-                        tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)},${PADSTART(unSchedule.normal, 3)}</span>',
+                        tpl: '<span class="font-bold font-mono">${PADSTART(unReceive.normal, 3)}, ${PADSTART(unSchedule.normal, 3)}</span>',
                     },
                 ]
             }