feature(web): 优化 web 界面显示

时间字段展示、集群展示等

web/components/common.js

@@ -1,9 +1,27 @@
 function timeAndFrom(field, fromNow, emptyText = '未停止', showSource = true) {
-    let tpl = "<span class='font-bold'>${" + fromNow + "}</span>"
+    let tpl = "${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('<span class=\"font-bold\">'," + fromNow + ",'</span>'))}"
     if (showSource) {
-        tpl = tpl + "<br> ${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('(',DATETOSTR(DATE(" + field + ")),')'))}"
+        return {
+            align: 'center',
+            width: 80,
+            type: 'tooltip-wrapper',
+            content: "${DATETOSTR(DATE(" + field + "))}",
+            inline: true,
+            className: 'mr-2',
+            disabledOn: `\${${field} === 0}`,
+            body: {
+                type: 'tpl',
+                tpl: tpl,
+            }
+        }
+    } else {
+        return {
+            align: 'center',
+            width: 140,
+            type: 'tpl',
+            tpl: "${DATETOSTR(DATE(" + field + "))}",
+        }
     }
-    return tpl
 }
 
 function applicationLogDialog() {
@@ -70,6 +88,10 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
             {
                 name: 'queueName',
                 label: '队列名称',
+                width: 130,
+                type: 'tooltip-wrapper',
+                body: '${TRUNCATE(queueName, 20)}',
+                content: '${queueName}',
             },
             {
                 label: '当前容量',
@@ -91,7 +113,6 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
                         color: "#dc3545"
                     }
                 ],
-                width: 1300,
             },
             {
                 label: '进度',
@@ -172,14 +193,16 @@ function yarnCrudColumns() {
         {
             name: 'name',
             label: '名称',
-            fixed: 'left',
+            className: 'nowrap',
             ...copyField('name')
         },
         {
             name: 'cluster',
             label: '集群',
-            width: 50,
+            width: 65,
             align: 'center',
+            type: 'tpl',
+            tpl: '<span class="label label-info">${cluster}</span>'
         },
         {
             label: '用户',
@@ -192,19 +215,14 @@ function yarnCrudColumns() {
         {
             name: 'startedTime',
             label: '启动时间',
-            width: 140,
-            type: 'tpl',
-            tpl: timeAndFrom('startedTime', 'startTimeFromNow'),
+            ...timeAndFrom('startedTime', 'startTimeFromNow'),
             sortable: true,
-            align: 'center',
             canAccessSuperData: false,
         },
         {
             name: 'finishedTime',
             label: '停止时间',
-            width: 140,
-            type: 'tpl',
-            tpl: timeAndFrom('finishedTime', 'finishTimeFromNow'),
+            ...timeAndFrom('finishedTime', 'finishTimeFromNow'),
             sortable: true,
             align: 'center',
             canAccessSuperData: false,
@@ -498,7 +516,7 @@ function simpleYarnDialog(cluster, title, filterField) {
                     {
                         type: 'pagination',
                         layout: ['pager', 'perPage'],
-                        maxButtons: 8,
+                        maxButtons: 5,
                         showPageInput: false,
                     }
                 ],
@@ -735,7 +753,7 @@ function tableMetaDialog() {
                                             {
                                                 type: 'pagination',
                                                 layout: ['pager', 'perPage'],
-                                                maxButtons: 8,
+                                                maxButtons: 5,
                                                 showPageInput: false,
                                             },
                                         ],
@@ -743,7 +761,7 @@ function tableMetaDialog() {
                                             {
                                                 type: 'pagination',
                                                 layout: ['pager', 'perPage'],
-                                                maxButtons: 8,
+                                                maxButtons: 5,
                                                 showPageInput: false,
                                             },
                                         ],