diff --git a/service-web/src/main/resources/static/components/common.js b/service-web/src/main/resources/static/components/common.js index 5697370..06cb9a8 100644 --- a/service-web/src/main/resources/static/components/common.js +++ b/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': "1对1", - 'ALL_IN_ONE': "1对多", - 'ALL_IN_ONE_BY_TABLE': "按表1对多", - 'ALL_IN_ONE_BY_SCHEMA': "按库1对多", - '*': `\${${field}}` - }, + 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 = { + '*': `\${${field}}`, + } + mapping.forEach(item => { + mapData[item['value']] = `${item['label']}` + }) return { type: 'mapping', value: `\${${field}}`, - map: { - 'SCHEDULE': "调度", - 'START': "开始", - 'FINISH': "完成", - 'FAIL': "失败", - '*': `\${${field}}` - }, + map: mapData, } } -function tagsMapping(field) { +function filterableField(mapping, multiple = false) { return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'NO_COMPACT': "不压缩", - 'PULSAR_BACKUP': "备份Pulsar消息", - 'NO_PRE_COMBINE': "无预合并", - 'NO_IGNORE_FAILED': "不忽略写日志错误", - 'DISABLE_CHAINING': "取消算子合并", - 'TRACE_LATEST_OP_TS': "跟踪压缩op_ts", - '*': `\${${field}}` - }, - } -} - -function hudiTableTypeMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'MERGE_ON_READ': "MOR", - 'COPY_ON_WRITE': "COW", - '*': `\${${field}}` - }, - } -} - -function filterModeMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'NONE': "", - 'INCLUDE': "包含模式", - 'EXCLUDE': "排除模式", - '*': `\${${field}}` - }, - } -} - -function subscriptionTypeMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'Exclusive': "独占", - 'Shared': "共享", - 'Failover': "灾备", - 'Key_Shared': "Key", - '*': `\${${field}}` - }, - } -} - -function publishTypeMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'Shared': "共享", - 'Exclusive': "独占", - 'WaiteForExclusive': "等待独占", - '*': `\${${field}}` - }, - } -} - -function hudiTimelineActionMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'commit': "Commit", - 'deltacommit': "Delta Commit", - 'clean': "Clean", - 'rollback': "Rollback", - 'savepoint': "Savepoint", - 'replacecommit': "Replace Commit", - 'compaction': "Compaction", - 'restore': "Restore", - 'indexing': "Indexing", - 'schemacommit': "Schema Commit", - '*': `\${${field}}` - }, - } -} - -function hudiTimelineStateMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'REQUESTED': "已提交", - 'INFLIGHT': "操作中", - 'COMPLETED': "已完成", - 'INVALID': "错误", - '*': `\${${field}}` - }, - } -} - -function hudiTimelineTypeMapping(field) { - return { - type: 'mapping', - value: `\${${field}}`, - map: { - 'active': "活跃", - 'archive': "归档", - '*': `\${${field}}` - }, + multiple: multiple, + options: [ + ...mapping + ] } } diff --git a/service-web/src/main/resources/static/components/table-tab.js b/service-web/src/main/resources/static/components/table-tab.js index 4450559..d4f71dd 100644 --- a/service-web/src/main/resources/static/components/table-tab.js +++ b/service-web/src/main/resources/static/components/table-tab.js @@ -147,16 +147,8 @@ function tableTab() { label: '表类型', width: 60, align: 'center', - ...runModeMapping('flinkJob.runMode'), - filterable: { - 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'}, - ] - } + ...mappingField('flinkJob.runMode', runModeMapping), + filterable: filterableField(runModeMapping, true) }, { 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}', - alias: '${tableMeta.alias}', - filter_type: 'active' + flink_job_id: '${flinkJobId|default:undefined}', + alias: '${tableMeta.alias|default:undefined}', + 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), }, ] },