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',
-        value: `\${${field}}`,
-        map: {
-            '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>`
-        },
+        label: label,
+        value: value,
+        color: color,
     }
 }
 
-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: {
-            '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>`
-        },
+        map: mapData,
     }
 }
 
-function tagsMapping(field) {
+function filterableField(mapping, multiple = false) {
     return {
-        type: 'mapping',
-        value: `\${${field}}`,
-        map: {
-            '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>`
-        },
+        multiple: multiple,
+        options: [
+            ...mapping
+        ]
     }
 }