refactor(web): 优化 mapping 字段的构建
使用固定的方法生成 mapping 字段，保证格式统一
This commit is contained in:
@@ -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
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user