feature(web): 优化 web 界面显示
时间字段展示、集群展示等
This commit is contained in:
@@ -1,9 +1,27 @@
|
||||
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) {
|
||||
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() {
|
||||
@@ -70,6 +88,10 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
|
||||
{
|
||||
name: 'queueName',
|
||||
label: '队列名称',
|
||||
width: 130,
|
||||
type: 'tooltip-wrapper',
|
||||
body: '${TRUNCATE(queueName, 20)}',
|
||||
content: '${queueName}',
|
||||
},
|
||||
{
|
||||
label: '当前容量',
|
||||
@@ -91,7 +113,6 @@ function yarnQueueCrud(clusters = undefined, queueNames = undefined) {
|
||||
color: "#dc3545"
|
||||
}
|
||||
],
|
||||
width: 1300,
|
||||
},
|
||||
{
|
||||
label: '进度',
|
||||
@@ -172,14 +193,16 @@ function yarnCrudColumns() {
|
||||
{
|
||||
name: 'name',
|
||||
label: '名称',
|
||||
fixed: 'left',
|
||||
className: 'nowrap',
|
||||
...copyField('name')
|
||||
},
|
||||
{
|
||||
name: 'cluster',
|
||||
label: '集群',
|
||||
width: 50,
|
||||
width: 65,
|
||||
align: 'center',
|
||||
type: 'tpl',
|
||||
tpl: '<span class="label label-info">${cluster}</span>'
|
||||
},
|
||||
{
|
||||
label: '用户',
|
||||
@@ -192,19 +215,14 @@ function yarnCrudColumns() {
|
||||
{
|
||||
name: 'startedTime',
|
||||
label: '启动时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('startedTime', 'startTimeFromNow'),
|
||||
...timeAndFrom('startedTime', 'startTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
canAccessSuperData: false,
|
||||
},
|
||||
{
|
||||
name: 'finishedTime',
|
||||
label: '停止时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('finishedTime', 'finishTimeFromNow'),
|
||||
...timeAndFrom('finishedTime', 'finishTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
canAccessSuperData: false,
|
||||
@@ -498,7 +516,7 @@ function simpleYarnDialog(cluster, title, filterField) {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
@@ -735,7 +753,7 @@ function tableMetaDialog() {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
@@ -743,7 +761,7 @@ function tableMetaDialog() {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -21,7 +21,7 @@ function queueCrud(name) {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
@@ -72,7 +72,9 @@ function queueTab() {
|
||||
title: '压缩队列',
|
||||
tab: [
|
||||
queueCrud('compaction-queue-pre'),
|
||||
yarnQueueCrud('b1', 'datalake'),
|
||||
queueCrud('compaction-queue-b1'),
|
||||
yarnQueueCrud('b5', 'ten_iap.datalake'),
|
||||
queueCrud('compaction-queue-b5'),
|
||||
],
|
||||
}
|
||||
|
||||
@@ -16,9 +16,7 @@ function runningTable(name) {
|
||||
{
|
||||
name: 'createTime',
|
||||
label: '创建时间',
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('createTime', 'createTimeFromNow', undefined, false),
|
||||
align: 'center',
|
||||
...timeAndFrom('createTime', 'createTimeFromNow', undefined, false),
|
||||
width: 70,
|
||||
},
|
||||
]
|
||||
|
||||
@@ -75,7 +75,7 @@ function tableTab() {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
@@ -83,7 +83,7 @@ function tableTab() {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
},
|
||||
],
|
||||
@@ -120,6 +120,7 @@ function tableTab() {
|
||||
type: 'wrapper',
|
||||
fixed: 'left',
|
||||
size: 'none',
|
||||
className: 'nowrap',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
@@ -156,46 +157,34 @@ function tableTab() {
|
||||
align: 'center',
|
||||
...mappingField('syncRunning', tableRunningStateMapping),
|
||||
className: 'bg-green-50',
|
||||
width: 140,
|
||||
width: 75,
|
||||
},
|
||||
{
|
||||
name: 'source_start_time',
|
||||
label: '同步启动时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
|
||||
...timeAndFrom('syncState.sourceStartTime', 'syncState.sourceStartTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_checkpoint_time',
|
||||
label: '同步心跳时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
|
||||
...timeAndFrom('syncState.sourceCheckpointTime', 'syncState.sourceCheckpointTimeFromNow', '未启动'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_publish_time',
|
||||
label: '源端发布时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
|
||||
...timeAndFrom('syncState.sourcePublishTime', 'syncState.sourcePublishTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
name: 'source_operation_time',
|
||||
label: '源端业务时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
|
||||
...timeAndFrom('syncState.sourceOperationTime', 'syncState.sourceOperationTimeFromNow', '无增量'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
@@ -204,7 +193,7 @@ function tableTab() {
|
||||
align: 'center',
|
||||
...mappingField('compactionRunning', tableRunningStateMapping),
|
||||
className: 'bg-cyan-50',
|
||||
width: 140,
|
||||
width: 75,
|
||||
},
|
||||
{
|
||||
name: 'compaction_status',
|
||||
@@ -226,21 +215,15 @@ function tableTab() {
|
||||
{
|
||||
name: 'compaction_start_time',
|
||||
label: '压缩启动时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
|
||||
...timeAndFrom('syncState.compactionStartTime', 'syncState.compactionStartTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
{
|
||||
name: 'compaction_finish_time',
|
||||
label: '压缩完成时间',
|
||||
width: 140,
|
||||
type: 'tpl',
|
||||
tpl: timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
|
||||
...timeAndFrom('syncState.compactionFinishTime', 'syncState.compactionFinishTimeFromNow'),
|
||||
sortable: true,
|
||||
align: 'center',
|
||||
className: 'bg-cyan-50',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -101,7 +101,7 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
@@ -109,7 +109,7 @@ function yarnTab(cluster, title, queueNames = 'root', searchName = undefined) {
|
||||
{
|
||||
type: 'pagination',
|
||||
layout: ['pager', 'perPage'],
|
||||
maxButtons: 8,
|
||||
maxButtons: 5,
|
||||
showPageInput: false,
|
||||
}
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user