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,23 +26,65 @@ 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: 'service',
+                className: 'inline',
+                api: {
+                    method: 'get',
+                    url: `\${base}/overview/yarn-cluster`,
+                    data: {
+                        cluster: cluster,
+                        queue: yarnQueue,
+                    },
+                    adaptor: function (payload, response) {
+                        let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity']).toFixed(0)
+                        let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity']).toFixed(0)
+                        return {
+                            ...payload,
+                            data: {
+                                ...payload.data,
+                                rootUsed: rootUsed,
+                                rootUsedColor: color(rootUsed),
+                                targetUsed: targetUsed,
+                                targetUsedColor: color(targetUsed),
+                            }
+                        }
+                    }
+                },
+                interval: 10000,
+                silentPolling: true,
+                body: [
+                    '(',
+                    {
+                        type: 'tpl',
+                        tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
+                    },
+                    ',',
+                    {
+                        type: 'tpl',
+                        tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 3)}%</span>',
+                    },
+                    ')'
+                ],
+            },
             '(',
             {
                 type: 'tpl',
-                tpl: '<span class="font-bold">${PADSTART(total, 3)}</span>',
+                tpl: "<span class='font-bold white-space-pre'>${PADSTART(total, 4)}</span>",
             },
             ',',
             {
                 type: 'tpl',
-                tpl: '<span class="font-bold text-cyan-300">${PADSTART(scheduling, 3)}</span>',
+                tpl: "<span class='font-bold text-cyan-300'>${PADSTART(scheduling, 2)}</span>",
             },
             ',',
             {
@@ -48,64 +101,9 @@ function overviewYarnJob(cluster, search, queue, yarnQueue) {
     }
 }
 
-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: {
-            method: 'get',
-            url: `\${base}/overview/yarn-cluster`,
-            data: {
-                cluster: cluster,
-                queue: queue,
-            },
-            adaptor: function (payload, response) {
-                let rootUsed = (payload['data']['root']['usedCapacity'] * 100 / payload['data']['root']['capacity']).toFixed(0)
-                let targetUsed = (payload['data']['target']['absoluteUsedCapacity'] * 100 / payload['data']['target']['absoluteMaxCapacity']).toFixed(0)
-                return {
-                    ...payload,
-                    data: {
-                        ...payload.data,
-                        rootUsed: rootUsed,
-                        rootUsedColor: color(rootUsed),
-                        targetUsed: targetUsed,
-                        targetUsedColor: color(targetUsed),
-                    }
-                }
-            }
-        },
-        interval: 10000,
-        silentPolling: true,
-        body: [
-            '(',
-            {
-                type: 'tpl',
-                className: 'font-bold',
-                tpl: '<span class="font-bold ${rootUsedColor}">${PADSTART(ROUND(rootUsed), 3)}%</span>',
-            },
-            ',',
-            {
-                type: 'tpl',
-                tpl: '<span class="font-bold ${targetUsedColor}">${PADSTART(ROUND(targetUsed), 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>',
                     },
                 ]
             }