feature(web): 优化 yarn 页面显示

web/components/common.js

@@ -184,17 +184,10 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
 function yarnCrudColumns() {
     return [
         {
-            name: 'id',
-            label: 'ID',
-            width: 250,
-            fixed: 'left',
-            ...copyField('id')
-        },
-        {
-            name: 'name',
             label: '名称',
             className: 'nowrap',
-            ...copyField('name')
+            type: 'tpl',
+            tpl: "${IF(syncApplication, '<span class=\"rounded-xl label label-primary\">S</span>', IF(compactionApplication, '<span class=\"rounded-xl label label-primary\">C</span>', ''))}${IF(hudiApplication, '<span class=\"mx-2\"/>', '')}${IF(syncApplication, flinkJobName, IF(compactionApplication, alias, name))}",
         },
         {
             name: 'cluster',
@@ -212,21 +205,6 @@ function yarnCrudColumns() {
             content: '${user}',
             align: 'center',
         },
-        {
-            name: 'startedTime',
-            label: '启动时间',
-            ...timeAndFrom('startedTime', 'startTimeFromNow'),
-            sortable: true,
-            canAccessSuperData: false,
-        },
-        {
-            name: 'finishedTime',
-            label: '停止时间',
-            ...timeAndFrom('finishedTime', 'finishTimeFromNow'),
-            sortable: true,
-            align: 'center',
-            canAccessSuperData: false,
-        },
         {
             name: 'state',
             label: '运行状态',
@@ -258,7 +236,8 @@ function yarnCrudColumns() {
                     {label: '被停止', value: 'KILLED'},
                 ]
             }
-        }, {
+        },
+        {
             name: 'finalStatus',
             label: '最终状态',
             width: 70,
@@ -284,11 +263,26 @@ function yarnCrudColumns() {
                 ]
             }
         },
+        {
+            name: 'startedTime',
+            label: '启动时间',
+            ...timeAndFrom('startedTime', 'startTimeFromNow'),
+            sortable: true,
+            canAccessSuperData: false,
+        },
+        {
+            name: 'finishedTime',
+            label: '停止时间',
+            ...timeAndFrom('finishedTime', 'finishTimeFromNow'),
+            sortable: true,
+            align: 'center',
+            canAccessSuperData: false,
+        },
         {
             type: "operation",
             label: "操作",
-            width: 100,
             fixed: 'right',
+            className: 'nowrap',
             buttons: [
                 /*{
                     disabled: true,
@@ -325,10 +319,36 @@ function yarnCrudColumns() {
                         ]
                     }
                 },*/
+                {
+                    visibleOn: 'flinkJobId',
+                    label: 'FID',
+                    type: 'action',
+                    actionType: 'copy',
+                    content: '${flinkJobId}',
+                    level: 'link',
+                    tooltip: '${flinkJobId}'
+                },
+                {
+                    visibleOn: 'alias',
+                    label: 'ALIAS',
+                    type: 'action',
+                    actionType: 'copy',
+                    content: '${alias}',
+                    level: 'link',
+                    tooltip: '${alias}'
+                },
+                {
+                    label: 'ID',
+                    type: 'action',
+                    actionType: 'copy',
+                    content: '${id}',
+                    level: 'link',
+                    tooltip: '${id}'
+                },
                 {
                     disabledOn: '${trackingUrl == null}',
                     disabledTip: '无应用页面',
-                    label: "应用页面",
+                    label: "页面",
                     type: "action",
                     level: "link",
                     tooltip: '打开应用页面: ${trackingUrl}',

web/components/queue-tab.js

@@ -36,6 +36,7 @@ function queueCrud(name) {
             {
                 name: 'data.alias',
                 label: '别名',
+                className: 'nowrap',
                 ...copyField('data.alias')
             },
             {
@@ -49,19 +50,21 @@ function queueCrud(name) {
                 name: 'priority',
                 label: '优先级',
                 width: 60,
+                align: 'center',
                 type: 'tpl',
                 tpl: '<span class="label bg-info">${priority}</span>'
             },
             {
                 name: 'data.comment',
                 label: '备注',
-                width: 150,
+                className: 'nowrap',
             },
             {
                 name: 'createTime',
                 label: '任务提交时间',
                 ...time('createTime'),
                 width: 140,
+                fixed: 'right'
             },
         ]
     }

web/components/table-tab.js

@@ -91,7 +91,8 @@ function tableTab() {
                             {
                                 label: 'Flink job id',
                                 width: 170,
-                                fixed: 'left', type: 'wrapper',
+                                fixed: 'left',
+                                type: 'wrapper',
                                 size: 'none',
                                 body: [
                                     {

web/components/yarn-tab.js

@@ -41,13 +41,6 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
                         affixHeader: false,
                         syncLocation: false,
                         silentPolling: true,
-                        itemBadge: {
-                            text: 'Hudi',
-                            mode: 'ribbon',
-                            position: 'top-left',
-                            level: 'info',
-                            visibleOn: 'this.hudiApplication'
-                        },
                         filter: {
                             mode: 'inline',
                             title: '任务筛选',