refactor(web): 将表操作放在表详情中

This commit is contained in:
2023-05-04 11:07:18 +08:00
parent 105fb9fade
commit ca1cb51a2a
2 changed files with 309 additions and 302 deletions

View File

@@ -168,7 +168,7 @@ function simpleYarnDialog(mode, title) {
actions: [],
size: 'xl',
body: [
{
/*{
type: 'service',
body: [
{
@@ -182,7 +182,7 @@ function simpleYarnDialog(mode, title) {
visibleOn: '${1 == 2}',
},
],
},
},*/
{
type: 'crud',
api: {
@@ -200,6 +200,7 @@ function simpleYarnDialog(mode, title) {
precise: true,
}
},
affixHeader: false,
interval: 10000,
syncLocation: false,
silentPolling: true,
@@ -360,6 +361,312 @@ function tableMetaDialog() {
showCloseButton: false,
size: 'lg',
body: [
{
type: 'wrapper',
size: 'none',
body: [
{
type: 'tpl',
className: 'block font-bold mb-2',
tpl: '常用操作',
},
{
type: 'button-group',
tiled: true,
buttons: [
{
label: '同步情况',
type: 'action',
actionType: 'dialog',
dialog: simpleYarnDialog('sync', '同步详情')
},
{
label: '压缩情况',
type: 'action',
actionType: 'dialog',
dialog: simpleYarnDialog('compaction', '压缩详情')
},
{
type: 'button',
label: '时间线',
actionType: 'dialog',
dialog: {
title: 'Hudi 表时间线',
actions: [],
size: 'lg',
body: {
type: 'crud',
api: {
method: 'get',
url: '${base}/hudi/timeline/list',
data: {
page: '${page|default:undefined}',
count: '${perPage|default:undefined}',
order: '${orderBy|default:undefined}',
direction: '${orderDir|default:undefined}',
flink_job_id: '${flinkJobId|default:undefined}',
alias: '${tableMeta.alias|default:undefined}',
filter_type: '${filter_type|default:undefined}'
},
defaultParams: {
filter_type: 'active',
},
},
syncLocation: false,
silentPolling: true,
stopAutoRefreshWhenModalIsOpen: true,
resizable: false,
perPage: 10,
headerToolbar: [
"reload",
{
type: 'pagination',
layout: ['pager', 'perPage'],
maxButtons: 8,
showPageInput: false,
},
],
footerToolbar: [
{
type: 'pagination',
layout: ['pager', 'perPage'],
maxButtons: 8,
showPageInput: false,
},
],
columns: [
{
name: 'timestamp',
label: '时间点',
width: 150,
sortable: true,
},
{
name: 'filter_action',
label: '类型',
width: 100,
...mappingField('action', hudiTimelineActionMapping),
filterable: filterableField(hudiTimelineActionMapping, false),
},
{
name: 'filter_state',
label: ' 状态',
width: 80,
align: 'center',
...mappingField('state', hudiTimelineStateMapping),
filterable: filterableField(hudiTimelineStateMapping, true),
},
{
name: 'fileName',
label: '文件名',
},
{
name: 'filter_type',
label: '来源',
width: 60,
align: 'center',
...mappingField('type', hudiTimelineTypeMapping),
filterable: filterableField(hudiTimelineTypeMapping, true),
},
],
}
}
},
{
type: 'button',
label: 'Pulsar 队列',
actionType: 'dialog',
dialog: {
title: '队列详情',
actions: [],
size: 'lg',
body: {
type: 'service',
api: {
method: 'get',
url: '${base}/pulsar/topic',
data: {
pulsar_url: '${tableMeta.pulsarAddress|default:undefined}',
topic: '${tableMeta.topic|default:undefined}',
}
},
body: [
{
type: 'property',
title: '基本信息',
items: [
{label: 'Topic', content: copyField('detail.name'), span: 2},
{label: '最末位移', content: copyField('detail.lastMessageId')},
],
},
{type: 'divider'},
{
type: 'property',
title: '指标信息',
column: 4,
items: [
{label: '入队列消息速率', content: '${detail.state.messageRateIn}'},
{label: '出队列消息速率', content: '${detail.state.messageRateOut}'},
{label: '入队列消息吞吐量', content: '${detail.state.messageThroughputIn}'},
{label: '出队列消息吞吐量', content: '${detail.state.messageThroughputOut}'},
{label: '入队列消息数量', content: '${detail.state.messageInCounter}'},
{label: '出队列消息数量', content: '${detail.state.messageOutCounter}'},
{label: '入队列消息字节数', content: '${detail.state.byteInCounter}'},
{label: '出队列消息字节数', content: '${detail.state.byteOutCounter}'},
{label: '存储消息大小', content: '${detail.state. storageSize}'},
{label: '积压消息大小', content: '${detail.state.backlogSize}'},
{label: '平均消息大小', content: '${detail.state.averageMessageSize}'},
],
},
{type: 'divider'},
{
type: 'table',
title: '消费者们',
source: '${detail.subscriptionStateVOS}',
itemAction: {
type: 'action',
actionType: 'dialog',
dialog: {
title: '详情',
closeOnEsc: true,
closeOnOutside: true,
showCloseButton: false,
actions: [],
size: 'md',
body: [
{
type: 'property',
column: 1,
items: [
{label: '在此订阅上传递的消息的总速率(msg/s)', content: '${messageRateOut}'},
{label: '此订阅提供的总吞吐量(字节/秒)', content: '${messageThroughputOut}'},
{label: '传送给消费者的总字节数(字节)', content: '${bytesOutCounter}'},
{label: '传递给消费者的消息总数(msg)', content: '${messageOutCounter}'},
{label: '此订阅上重新传递的消息的总速率(msg/s)', content: '${messageRateRedeliver}'},
{label: '分块消息调度速率', content: '${chunkedMessageRate}'},
{label: '积压的大小(字节)', content: '${backlogSize}'},
{label: '积压中不包含延迟消息的消息数', content: '${messageBacklogNoDelayed}'},
{label: '验证订阅是否由于达到未确认消息的阈值而被阻止', content: '${blockedSubscriptionOnUnackedMessages}'},
{label: '当前正在跟踪的延迟消息数', content: '${messageDelayed}'},
{label: '订阅的未确认消息数', content: '${unackedMessages}'},
{label: '单个活跃消费者订阅处于活跃状态的消费者名称(故障转移、独占)', content: '${activeConsumerName}'},
{label: '此订阅上过期的消息总速率(msg/s)', content: '${messageRateExpired}'},
{label: '此订阅上过期的消息总数', content: '${totalMessageExpired}'},
{
label: '最后一条消息过期时间',
content: {
type: 'tpl',
tpl: '${lastExpireTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次接收的消费流命令时间',
content: {
type: 'tpl',
tpl: '${lastConsumedFlowTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次消费消息时间',
content: {
type: 'tpl',
tpl: '${lastConsumedTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次确认消息时间',
content: {
type: 'tpl',
tpl: '${lastAckedTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{label: '此订阅是持久订阅还是临时订阅', content: '${durable}'},
{label: '标记订阅状态在不同区域之间保持同步', content: '${replicated}'},
]
},
]
}
},
columns: [
{
name: 'name',
label: "订阅名称",
...copyField('name')
},
{
name: 'type',
label: '订阅类型',
fixed: 'right',
...mappingField('type', subscriptionTypeMapping)
},
{name: 'messageBacklog', label: '积压', fixed: 'right'},
]
},
{type: 'divider'},
{
type: 'table',
title: '生产者们',
source: '${detail.state.publishers}',
itemAction: {
type: 'action',
actionType: 'dialog',
dialog: {
title: '详情',
closeOnEsc: true,
closeOnOutside: true,
showCloseButton: false,
actions: [],
size: 'md',
body: [
{
type: 'property',
column: 1,
items: [
{label: '发布消息速率(msg/s)', content: '${messageRateIn}'},
{label: '发布消息吞吐量(字节/秒)', content: '${messageThroughputIn}'},
{label: '消息平均大小(字节)', content: '${averageMessageSize}'},
{label: '接收到的分块消息总数(msg)', content: '${chunkedMessageRate}'},
{label: '生产者地址', content: '${address}'},
{label: '客户端版本', content: '${clientVersion}'},
]
},
]
}
},
columns: [
{
name: 'producerId',
label: "ID",
width: 50,
},
{
name: 'producerName',
label: "名称",
...copyField('producerName'),
},
{
name: 'connectedSince',
label: "连接时间",
type: 'tpl',
tpl: '${connectedSince}'
},
{
name: 'accessMode',
label: '发布类型',
fixed: 'right',
...mappingField('accessMode', publishTypeMapping),
},
]
},
]
}
}
},
]
},
]
},
{type: 'divider'},
flinkJobProperty('flinkJobId', 'flinkJob.name', 'flinkJob.runMode'),
{type: 'divider'},
{

View File

@@ -227,306 +227,6 @@ function tableTab() {
align: 'center',
className: 'bg-cyan-50',
},
{
type: "operation",
label: "操作",
width: 160,
fixed: 'right',
buttons: [
{
label: '同步',
type: 'action',
level: 'link',
actionType: 'dialog',
dialog: simpleYarnDialog('sync', '同步详情')
},
{
label: '压缩',
type: 'action',
level: 'link',
actionType: 'dialog',
dialog: simpleYarnDialog('compaction', '压缩详情')
},
{
label: '时间线',
type: 'action',
level: 'link',
actionType: 'dialog',
dialog: {
title: 'Hudi 表时间线',
actions: [],
size: 'lg',
body: {
type: 'crud',
api: {
method: 'get',
url: '${base}/hudi/timeline/list',
data: {
page: '${page|default:undefined}',
count: '${perPage|default:undefined}',
order: '${orderBy|default:undefined}',
direction: '${orderDir|default:undefined}',
flink_job_id: '${flinkJobId|default:undefined}',
alias: '${tableMeta.alias|default:undefined}',
filter_type: '${filter_type|default:undefined}'
},
defaultParams: {
filter_type: 'active',
},
},
syncLocation: false,
silentPolling: true,
stopAutoRefreshWhenModalIsOpen: true,
resizable: false,
perPage: 10,
headerToolbar: [
"reload",
{
type: 'pagination',
layout: ['pager', 'perPage'],
maxButtons: 8,
showPageInput: false,
},
],
footerToolbar: [
{
type: 'pagination',
layout: ['pager', 'perPage'],
maxButtons: 8,
showPageInput: false,
},
],
columns: [
{
name: 'timestamp',
label: '时间点',
width: 150,
sortable: true,
},
{
name: 'filter_action',
label: '类型',
width: 100,
...mappingField('action', hudiTimelineActionMapping),
filterable: filterableField(hudiTimelineActionMapping, false),
},
{
name: 'filter_state',
label: ' 状态',
width: 80,
align: 'center',
...mappingField('state', hudiTimelineStateMapping),
filterable: filterableField(hudiTimelineStateMapping, true),
},
{
name: 'fileName',
label: '文件名',
},
{
name: 'filter_type',
label: '来源',
width: 60,
align: 'center',
...mappingField('type', hudiTimelineTypeMapping),
filterable: filterableField(hudiTimelineTypeMapping, true),
},
],
}
}
},
{
label: '队列',
type: 'action',
level: 'link',
actionType: 'dialog',
dialog: {
title: '队列详情',
actions: [],
size: 'lg',
body: {
type: 'service',
api: {
method: 'get',
url: '${base}/pulsar/topic',
data: {
pulsar_url: '${tableMeta.pulsarAddress|default:undefined}',
topic: '${tableMeta.topic|default:undefined}',
}
},
body: [
{
type: 'property',
title: '基本信息',
items: [
{label: 'Topic', content: copyField('detail.name'), span: 2},
{label: '最末位移', content: copyField('detail.lastMessageId')},
],
},
{type: 'divider'},
{
type: 'property',
title: '指标信息',
column: 4,
items: [
{label: '入队列消息速率', content: '${detail.state.messageRateIn}'},
{label: '出队列消息速率', content: '${detail.state.messageRateOut}'},
{label: '入队列消息吞吐量', content: '${detail.state.messageThroughputIn}'},
{label: '出队列消息吞吐量', content: '${detail.state.messageThroughputOut}'},
{label: '入队列消息数量', content: '${detail.state.messageInCounter}'},
{label: '出队列消息数量', content: '${detail.state.messageOutCounter}'},
{label: '入队列消息字节数', content: '${detail.state.byteInCounter}'},
{label: '出队列消息字节数', content: '${detail.state.byteOutCounter}'},
{label: '存储消息大小', content: '${detail.state. storageSize}'},
{label: '积压消息大小', content: '${detail.state.backlogSize}'},
{label: '平均消息大小', content: '${detail.state.averageMessageSize}'},
],
},
{type: 'divider'},
{
type: 'table',
title: '消费者们',
source: '${detail.subscriptionStateVOS}',
itemAction: {
type: 'action',
actionType: 'dialog',
dialog: {
title: '详情',
closeOnEsc: true,
closeOnOutside: true,
showCloseButton: false,
actions: [],
size: 'md',
body: [
{
type: 'property',
column: 1,
items: [
{label: '在此订阅上传递的消息的总速率(msg/s)', content: '${messageRateOut}'},
{label: '此订阅提供的总吞吐量(字节/秒)', content: '${messageThroughputOut}'},
{label: '传送给消费者的总字节数(字节)', content: '${bytesOutCounter}'},
{label: '传递给消费者的消息总数(msg)', content: '${messageOutCounter}'},
{label: '此订阅上重新传递的消息的总速率(msg/s)', content: '${messageRateRedeliver}'},
{label: '分块消息调度速率', content: '${chunkedMessageRate}'},
{label: '积压的大小(字节)', content: '${backlogSize}'},
{label: '积压中不包含延迟消息的消息数', content: '${messageBacklogNoDelayed}'},
{label: '验证订阅是否由于达到未确认消息的阈值而被阻止', content: '${blockedSubscriptionOnUnackedMessages}'},
{label: '当前正在跟踪的延迟消息数', content: '${messageDelayed}'},
{label: '订阅的未确认消息数', content: '${unackedMessages}'},
{label: '单个活跃消费者订阅处于活跃状态的消费者名称(故障转移、独占)', content: '${activeConsumerName}'},
{label: '此订阅上过期的消息总速率(msg/s)', content: '${messageRateExpired}'},
{label: '此订阅上过期的消息总数', content: '${totalMessageExpired}'},
{
label: '最后一条消息过期时间',
content: {
type: 'tpl',
tpl: '${lastExpireTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次接收的消费流命令时间',
content: {
type: 'tpl',
tpl: '${lastConsumedFlowTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次消费消息时间',
content: {
type: 'tpl',
tpl: '${lastConsumedTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{
label: '上次确认消息时间',
content: {
type: 'tpl',
tpl: '${lastAckedTimestamp|date:YYYY-MM-DD HH\\:mm\\:ss:x}',
}
},
{label: '此订阅是持久订阅还是临时订阅', content: '${durable}'},
{label: '标记订阅状态在不同区域之间保持同步', content: '${replicated}'},
]
},
]
}
},
columns: [
{
name: 'name',
label: "订阅名称",
...copyField('name')
},
{
name: 'type',
label: '订阅类型',
fixed: 'right',
...mappingField('type', subscriptionTypeMapping)
},
{name: 'messageBacklog', label: '积压', fixed: 'right'},
]
},
{type: 'divider'},
{
type: 'table',
title: '生产者们',
source: '${detail.state.publishers}',
itemAction: {
type: 'action',
actionType: 'dialog',
dialog: {
title: '详情',
closeOnEsc: true,
closeOnOutside: true,
showCloseButton: false,
actions: [],
size: 'md',
body: [
{
type: 'property',
column: 1,
items: [
{label: '发布消息速率(msg/s)', content: '${messageRateIn}'},
{label: '发布消息吞吐量(字节/秒)', content: '${messageThroughputIn}'},
{label: '消息平均大小(字节)', content: '${averageMessageSize}'},
{label: '接收到的分块消息总数(msg)', content: '${chunkedMessageRate}'},
{label: '生产者地址', content: '${address}'},
{label: '客户端版本', content: '${clientVersion}'},
]
},
]
}
},
columns: [
{
name: 'producerId',
label: "ID",
width: 50,
},
{
name: 'producerName',
label: "名称",
...copyField('producerName'),
},
{
name: 'connectedSince',
label: "连接时间",
type: 'tpl',
tpl: '${connectedSince}'
},
{
name: 'accessMode',
label: '发布类型',
fixed: 'right',
...mappingField('accessMode', publishTypeMapping),
},
]
},
]
}
}
},
]
}
]
}
]