refactor(web): 将表操作放在表详情中
This commit is contained in:
@@ -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'},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user