lanyuanxiaoyao/hudi-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature(web): 优化 web 界面显示

Browse Source 
时间字段展示、集群展示等
This commit is contained in:
兰缘小妖
2023-06-01 14:02:18 +08:00
parent 001e8d3e5f
commit 7768b427aa
5 changed files with 51 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/components/common.js
View File

@@ -1,9 +1,27 @@
function timeAndFrom(field, fromNow, emptyText = '未停止', showSource = true) { function timeAndFrom(field, fromNow, emptyText = '未停止', showSource = true) {
let tpl = "<span class='font-bold'>${" + fromNow + "}</span>" let tpl = "${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('<span class=\"font-bold\">'," + fromNow + ",'</span>'))}"
if (showSource) { if (showSource) {
tpl = tpl + "<br> ${IF(" + field + " === 0, '(" + emptyText + ")', CONCATENATE('(',DATETOSTR(DATE(" + field + ")),')'))}" return {
align: 'center',
width: 80,
type: 'tooltip-wrapper',
content: "${DATETOSTR(DATE(" + field + "))}",
inline: true,
className: 'mr-2',
disabledOn: `\${${field} === 0}`,
body: {
type: 'tpl',
tpl: tpl,
}
}
} else {
return {
align: 'center',
width: 140,
type: 'tpl',
tpl: "${DATETOSTR(DATE(" + field + "))}",
}
} }
return tpl
} }
function applicationLogDialog() { function applicationLogDialog() {
@@ -70,6 +88,10 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
{ {
name: 'queueName', name: 'queueName',
label: '队列名称', label: '队列名称',
width: 130,
type: 'tooltip-wrapper',
body: '${TRUNCATE(queueName, 20)}',
content: '${queueName}',
}, },
{ {
label: '当前容量', label: '当前容量',
@@ -91,7 +113,6 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
color: "#dc3545" color: "#dc3545"
} }
], ],
width: 1300,
}, },
{ {
label: '进度', label: '进度',
@@ -172,14 +193,16 @@ function yarnCrudColumns() {
{ {
name: 'name', name: 'name',
label: '名称', label: '名称',
fixed: 'left', className: 'nowrap',
...copyField('name') ...copyField('name')
}, },
{ {
name: 'cluster', name: 'cluster',
label: '集群', label: '集群',
width: 50, width: 65,
align: 'center', align: 'center',
type: 'tpl',
tpl: '<span class="label label-info">${cluster}</span>'
}, },
{ {
label: '用户', label: '用户',
@@ -192,19 +215,14 @@ function yarnCrudColumns() {
{ {
name: 'startedTime', name: 'startedTime',
label: '启动时间', label: '启动时间',
width: 140, ...timeAndFrom('startedTime', 'startTimeFromNow'),
type: 'tpl',
tpl: timeAndFrom('startedTime', 'startTimeFromNow'),
sortable: true, sortable: true,
align: 'center',
canAccessSuperData: false, canAccessSuperData: false,
}, },
{ {
name: 'finishedTime', name: 'finishedTime',
label: '停止时间', label: '停止时间',
width: 140, ...timeAndFrom('finishedTime', 'finishTimeFromNow'),
type: 'tpl',
tpl: timeAndFrom('finishedTime', 'finishTimeFromNow'),
sortable: true, sortable: true,
align: 'center', align: 'center',
canAccessSuperData: false, canAccessSuperData: false,
@@ -498,7 +516,7 @@ function simpleYarnDialog(cluster, title, filterField) {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
} }
], ],
@@ -735,7 +753,7 @@ function tableMetaDialog() {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
}, },
], ],
@@ -743,7 +761,7 @@ function tableMetaDialog() {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
}, },
], ],

4
web/components/queue-tab.js
View File

@@ -21,7 +21,7 @@ function queueCrud(name) {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager'], layout: ['pager'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
} }
], ],
@@ -72,7 +72,9 @@ function queueTab() {
title: '压缩队列', title: '压缩队列',
tab: [ tab: [
queueCrud('compaction-queue-pre'), queueCrud('compaction-queue-pre'),
yarnQueueCrud('b1', 'datalake'),
queueCrud('compaction-queue-b1'), queueCrud('compaction-queue-b1'),
yarnQueueCrud('b5', 'ten_iap.datalake'),
queueCrud('compaction-queue-b5'), queueCrud('compaction-queue-b5'),
], ],
} }

4
web/components/running-tab.js
View File

@@ -16,9 +16,7 @@ function runningTable(name) {
{ {
name: 'createTime', name: 'createTime',
label: '创建时间', label: '创建时间',
type: 'tpl', ...timeAndFrom('createTime', 'createTimeFromNow', undefined, false),
tpl: timeAndFrom('createTime', 'createTimeFromNow', undefined, false),
align: 'center',
width: 70, width: 70,
}, },
] ]

39
web/components/table-tab.js
View File

@@ -75,7 +75,7 @@ function tableTab() {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
}, },
], ],
@@ -83,7 +83,7 @@ function tableTab() {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
}, },
], ],
@@ -120,6 +120,7 @@ function tableTab() {
type: 'wrapper', type: 'wrapper',
fixed: 'left', fixed: 'left',
size: 'none', size: 'none',
className: 'nowrap',
body: [ body: [
{ {
type: 'action', type: 'action',
@@ -156,46 +157,34 @@ function tableTab() {
align: 'center', align: 'center',
...mappingField('syncRunning', tableRunningStateMapping), ...mappingField('syncRunning', tableRunningStateMapping),
className: 'bg-green-50', className: 'bg-green-50',
width: 140, width: 75,
}, },
{ {
name: 'source_start_time', name: 'source_start_time',
label: '同步启动时间', label: '同步启动时间',
width: 140, ...timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
type: 'tpl',
tpl: timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-green-50', className: 'bg-green-50',
}, },
{ {
name: 'source_checkpoint_time', name: 'source_checkpoint_time',
label: '同步心跳时间', label: '同步心跳时间',
width: 140, ...timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
type: 'tpl',
tpl: timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-green-50', className: 'bg-green-50',
}, },
{ {
name: 'source_publish_time', name: 'source_publish_time',
label: '源端发布时间', label: '源端发布时间',
width: 140, ...timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
type: 'tpl',
tpl: timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-green-50', className: 'bg-green-50',
}, },
{ {
name: 'source_operation_time', name: 'source_operation_time',
label: '源端业务时间', label: '源端业务时间',
width: 140, ...timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
type: 'tpl',
tpl: timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-green-50', className: 'bg-green-50',
}, },
{ {
@@ -204,7 +193,7 @@ function tableTab() {
align: 'center', align: 'center',
...mappingField('compactionRunning', tableRunningStateMapping), ...mappingField('compactionRunning', tableRunningStateMapping),
className: 'bg-cyan-50', className: 'bg-cyan-50',
width: 140, width: 75,
}, },
{ {
name: 'compaction_status', name: 'compaction_status',
@@ -226,21 +215,15 @@ function tableTab() {
{ {
name: 'compaction_start_time', name: 'compaction_start_time',
label: '压缩启动时间', label: '压缩启动时间',
width: 140, ...timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
type: 'tpl',
tpl: timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-cyan-50', className: 'bg-cyan-50',
}, },
{ {
name: 'compaction_finish_time', name: 'compaction_finish_time',
label: '压缩完成时间', label: '压缩完成时间',
width: 140, ...timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
type: 'tpl',
tpl: timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
sortable: true, sortable: true,
align: 'center',
className: 'bg-cyan-50', className: 'bg-cyan-50',
}, },
] ]

4
web/components/yarn-tab.js
View File

@@ -101,7 +101,7 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
} }
], ],
@@ -109,7 +109,7 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
{ {
type: 'pagination', type: 'pagination',
layout: ['pager', 'perPage'], layout: ['pager', 'perPage'],
maxButtons: 8, maxButtons: 5,
showPageInput: false, showPageInput: false,
} }
], ],