refactor(web): 优化 mapping 字段的构建

使用固定的方法生成 mapping 字段，保证格式统一

service-web/src/main/resources/static/components/common.js

@@ -256,7 +256,7 @@ function flinkJobProperty(id, name, runMode) {
             {
                 label: '任务模式',
                 content: {
-                    ...runModeMapping(`${runMode}`)
+                    ...mappingItem(`${runMode}`, runModeMapping),
                 }
             },
         ],
@@ -382,7 +382,7 @@ function tableMetaDialog() {
                         content: {
                             type: 'each',
                             source: '${SPLIT(tableMeta.tags, ",")}',
-                            items: tagsMapping('item')
+                            items: mappingField('item', tagsMapping),
                         },
                         span: 3,
                     },
@@ -392,7 +392,7 @@ function tableMetaDialog() {
                         content: copyField('tableMeta.pulsarAddress', '复制地址', 130),
                         span: 3
                     },
-                    {label: '过滤模式', content: filterModeMapping('tableMeta.filterType')},
+                    {label: '过滤模式', content: mappingField('tableMeta.filterType', filterModeMapping)},
                     {label: '过滤字段', content: '${tableMeta.filterField}', span: 2},
                     {
                         label: '过滤内容',
@@ -413,7 +413,7 @@ function tableMetaDialog() {
                 type: 'property',
                 title: 'Hudi 配置',
                 items: [
-                    {label: '表类型', content: hudiTableTypeMapping('tableMeta.hudi.targetTableType')},
+                    {label: '表类型', content: mappingField('tableMeta.hudi.targetTableType', hudiTableTypeMapping)},
                     {label: '库名', content: copyField('tableMeta.hudi.targetDataSource', '复制库名')},
                     {label: '表名', content: copyField('tableMeta.hudi.targetTable', '复制表名')},
                     {
@@ -564,144 +564,105 @@ function tableMetaDialog() {
     }
 }
 
-function runModeMapping(field) {
+function mappingItem(label, value, color = 'bg-info') {
     return {
-        type: 'mapping',
+        label: label,
-        value: `\${${field}}`,
+        value: value,
-        map: {
+        color: color,
-            'ONE_IN_ONE': "<span class='label bg-pink-300'>1对1</span>",
-            'ALL_IN_ONE': "<span class='label bg-purple-300'>1对多</span>",
-            'ALL_IN_ONE_BY_TABLE': "<span class='label bg-cyan-300'>按表1对多</span>",
-            'ALL_IN_ONE_BY_SCHEMA': "<span class='label bg-indigo-300'>按库1对多</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
     }
 }
 
-function compactionStatusMapping(field) {
+let runModeMapping = [
+    mappingItem('1对1', 'ONE_IN_ONE', 'bg-pink-300'),
+    mappingItem('1对多', 'ALL_IN_ONE', 'bg-purple-300'),
+    mappingItem('按表1对多', 'ALL_IN_ONE_BY_TABLE', 'bg-cyan-300'),
+    mappingItem('按库1对多', 'ALL_IN_ONE_BY_SCHEMA', 'bg-indigo-300'),
+]
+
+let compactionStatusMapping = [
+    mappingItem('调度', 'SCHEDULE'),
+    mappingItem('开始', 'START', 'bg-primary'),
+    mappingItem('完成', 'FINISH', 'bg-success'),
+    mappingItem('失败', 'FAIL', 'bg-danger'),
+]
+
+let tagsMapping = [
+    mappingItem('不压缩', 'NO_COMPACT'),
+    mappingItem('备份Pulsar消息', 'PULSAR_BACKUP'),
+    mappingItem('无预合并', 'NO_PRE_COMBINE'),
+    mappingItem('不忽略写日志错误', 'NO_IGNORE_FAILED'),
+    mappingItem('取消算子合并', 'DISABLE_CHAINING'),
+    mappingItem('跟踪压缩op_ts', 'TRACE_LATEST_OP_TS'),
+]
+
+let hudiTableTypeMapping = [
+    mappingItem('MOR', 'MERGE_ON_READ'),
+    mappingItem('COW', 'COPY_ON_WRITE'),
+]
+
+let filterModeMapping = [
+    mappingItem('无', 'NONE', 'bg-pink-500'),
+    mappingItem('包含模式', 'INCLUDE', 'bg-purple-500'),
+    mappingItem('排除模式', 'EXCLUDE', 'bg-cyan-500'),
+]
+
+let subscriptionTypeMapping = [
+    mappingItem('独占', 'Exclusive', 'bg-pink-500'),
+    mappingItem('共享', 'Shared', 'bg-purple-500'),
+    mappingItem('灾备', 'Failover', 'bg-cyan-500'),
+    mappingItem('Key', 'Key_Shared', 'bg-green-500'),
+]
+
+let publishTypeMapping = [
+    mappingItem('共享', 'Shared', 'bg-pink-500'),
+    mappingItem('独占', 'Exclusive', 'bg-purple-500'),
+    mappingItem('等待独占', 'WaiteForExclusive', 'bg-cyan-500'),
+]
+
+let hudiTimelineActionMapping = [
+    mappingItem('Commit', 'commit'),
+    mappingItem('Delta Commit', 'deltacommit'),
+    mappingItem('Clean', 'clean', 'bg-cyan-500'),
+    mappingItem('Rollback', 'rollback', 'label-danger'),
+    mappingItem('Savepoint', 'savepoint'),
+    mappingItem('Replace Commit', 'replacecommit', 'label-warning'),
+    mappingItem('Compaction', 'compaction', 'bg-purple-500'),
+    mappingItem('Restore', 'restore', 'label-warning'),
+    mappingItem('Indexing', 'indexing'),
+    mappingItem('Schema Commit', 'schemacommit', 'label-warning'),
+]
+
+let hudiTimelineStateMapping = [
+    mappingItem('已提交', 'REQUESTED'),
+    mappingItem('操作中', 'INFLIGHT', 'label-warning'),
+    mappingItem('已完成', 'COMPLETED', 'label-success'),
+    mappingItem('错误', 'INVALID', 'label-danger'),
+]
+
+let hudiTimelineTypeMapping = [
+    mappingItem('活跃', 'active'),
+    mappingItem('归档', 'archive', 'bg-gray-300'),
+]
+
+function mappingField(field, mapping) {
+    let mapData = {
+        '*': `<span class='label bg-gray-300'>\${${field}}</span>`,
+    }
+    mapping.forEach(item => {
+        mapData[item['value']] = `<span class='label ${item['color']}'>${item['label']}</span>`
+    })
     return {
         type: 'mapping',
         value: `\${${field}}`,
-        map: {
+        map: mapData,
-            'SCHEDULE': "<span class='label bg-info'>调度</span>",
-            'START': "<span class='label'>开始</span>",
-            'FINISH': "<span class='label bg-success'>完成</span>",
-            'FAIL': "<span class='label bg-danger'>失败</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
     }
 }
 
-function tagsMapping(field) {
+function filterableField(mapping, multiple = false) {
     return {
-        type: 'mapping',
+        multiple: multiple,
-        value: `\${${field}}`,
+        options: [
-        map: {
+            ...mapping
-            'NO_COMPACT': "<span class='label bg-info'>不压缩</span>",
+        ]
-            'PULSAR_BACKUP': "<span class='label bg-info'>备份Pulsar消息</span>",
-            'NO_PRE_COMBINE': "<span class='label bg-info'>无预合并</span>",
-            'NO_IGNORE_FAILED': "<span class='label bg-info'>不忽略写日志错误</span>",
-            'DISABLE_CHAINING': "<span class='label bg-info'>取消算子合并</span>",
-            'TRACE_LATEST_OP_TS': "<span class='label bg-info'>跟踪压缩op_ts</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function hudiTableTypeMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'MERGE_ON_READ': "<span class='label bg-info'>MOR</span>",
-            'COPY_ON_WRITE': "<span class='label bg-info'>COW</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function filterModeMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'NONE': "<span class='label bg-pink-500'>无</span>",
-            'INCLUDE': "<span class='label bg-purple-500'>包含模式</span>",
-            'EXCLUDE': "<span class='label bg-cyan-500'>排除模式</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function subscriptionTypeMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'Exclusive': "<span class='label bg-pink-500'>独占</span>",
-            'Shared': "<span class='label bg-purple-500'>共享</span>",
-            'Failover': "<span class='label bg-cyan-500'>灾备</span>",
-            'Key_Shared': "<span class='label bg-green-500'>Key</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function publishTypeMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'Shared': "<span class='label bg-pink-500'>共享</span>",
-            'Exclusive': "<span class='label bg-purple-500'>独占</span>",
-            'WaiteForExclusive': "<span class='label bg-cyan-500'>等待独占</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function hudiTimelineActionMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'commit': "<span class='label label-info'>Commit</span>",
-            'deltacommit': "<span class='label label-info'>Delta Commit</span>",
-            'clean': "<span class='label label-info'>Clean</span>",
-            'rollback': "<span class='label label-danger'>Rollback</span>",
-            'savepoint': "<span class='label label-info'>Savepoint</span>",
-            'replacecommit': "<span class='label label-warning'>Replace Commit</span>",
-            'compaction': "<span class='label label-success'>Compaction</span>",
-            'restore': "<span class='label label-warning'>Restore</span>",
-            'indexing': "<span class='label label-info'>Indexing</span>",
-            'schemacommit': "<span class='label label-warning'>Schema Commit</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function hudiTimelineStateMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'REQUESTED': "<span class='label label-info'>已提交</span>",
-            'INFLIGHT': "<span class='label label-warning'>操作中</span>",
-            'COMPLETED': "<span class='label label-success'>已完成</span>",
-            'INVALID': "<span class='label label-danger'>错误</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
-    }
-}
-
-function hudiTimelineTypeMapping(field) {
-    return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            'active': "<span class='label label-info'>活跃</span>",
-            'archive': "<span class='label bg-gray-300'>归档</span>",
-            '*': `<span class='label bg-gray-300'>\${${field}}</span>`
-        },
     }
 }

service-web/src/main/resources/static/components/table-tab.js

@@ -147,16 +147,8 @@ function tableTab() {
                                 label: '表类型',
                                 width: 60,
                                 align: 'center',
-                                ...runModeMapping('flinkJob.runMode'),
+                                ...mappingField('flinkJob.runMode', runModeMapping),
-                                filterable: {
+                                filterable: filterableField(runModeMapping, true)
-                                    multiple: true,
-                                    options: [
-                                        {label: '1对1', value: 'ONE_IN_ONE'},
-                                        {label: '1对多', value: 'ALL_IN_ONE'},
-                                        {label: '按表1对多', value: 'ALL_IN_ONE_BY_TABLE'},
-                                        {label: '按库1对多', value: 'ALL_IN_ONE_BY_SCHEMA'},
-                                    ]
-                                }
                             },
                             {
                                 name: 'source_start_time',
@@ -203,7 +195,7 @@ function tableTab() {
                                 label: '压缩状态',
                                 width: 60,
                                 align: 'center',
-                                ...compactionStatusMapping('syncState.compactionStatus'),
+                                ...mappingField('syncState.compactionStatus', compactionStatusMapping),
                                 className: 'bg-cyan-50',
                                 /*filterable: {
                                     multiple: true,
@@ -238,7 +230,7 @@ function tableTab() {
                             {
                                 type: "operation",
                                 label: "操作",
-                                width: 120,
+                                width: 160,
                                 fixed: 'right',
                                 buttons: [
                                     {
@@ -270,9 +262,12 @@ function tableTab() {
                                                     method: 'get',
                                                     url: '${base}/hudi/timeline/list',
                                                     data: {
-                                                        flink_job_id: '${flinkJobId}',
+                                                        flink_job_id: '${flinkJobId|default:undefined}',
-                                                        alias: '${tableMeta.alias}',
+                                                        alias: '${tableMeta.alias|default:undefined}',
-                                                        filter_type: 'active'
+                                                        filter_type: '${filter_type|default:undefined}'
+                                                    },
+                                                    defaultParams: {
+                                                        filter_type: 'active',
                                                     },
                                                 },
                                                 syncLocation: false,
@@ -280,25 +275,34 @@ function tableTab() {
                                                     {
                                                         name: 'timestamp',
                                                         label: '时间点',
+                                                        width: 150,
                                                     },
                                                     {
-                                                        name: 'action',
+                                                        name: 'filter_action',
                                                         label: '类型',
-                                                        ...hudiTimelineActionMapping('action'),
+                                                        width: 100,
+                                                        ...mappingField('action', hudiTimelineActionMapping),
+                                                        filterable: filterableField(hudiTimelineActionMapping, false),
                                                     },
                                                     {
-                                                        name: 'state',
+                                                        name: 'filter_state',
                                                         label: ' 状态',
-                                                        ...hudiTimelineStateMapping('state'),
+                                                        width: 100,
+                                                        align: 'center',
+                                                        ...mappingField('state', hudiTimelineStateMapping),
+                                                        filterable: filterableField(hudiTimelineStateMapping, true),
                                                     },
                                                     {
                                                         name: 'fileName',
                                                         label: '文件名',
                                                     },
                                                     {
-                                                        name: 'type',
+                                                        name: 'filter_type',
                                                         label: '来源',
-                                                        ...hudiTimelineTypeMapping('type'),
+                                                        width: 60,
+                                                        align: 'center',
+                                                        ...mappingField('type', hudiTimelineTypeMapping),
+                                                        filterable: filterableField(hudiTimelineTypeMapping, true),
                                                     },
                                                 ],
                                             }
@@ -430,7 +434,7 @@ function tableTab() {
                                                                 name: 'type',
                                                                 label: '订阅类型',
                                                                 fixed: 'right',
-                                                                ...subscriptionTypeMapping('type')
+                                                                ...mappingField('type', subscriptionTypeMapping)
                                                             },
                                                             {name: 'messageBacklog', label: '积压', fixed: 'right'},
                                                         ]
@@ -487,7 +491,7 @@ function tableTab() {
                                                                 name: 'accessMode',
                                                                 label: '发布类型',
                                                                 fixed: 'right',
-                                                                ...publishTypeMapping('accessMode'),
+                                                                ...mappingField('accessMode', publishTypeMapping),
                                                             },
                                                         ]
                                                     },