From ca1cb51a2ad29fabdbffadde2604c268aedc2cad Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Thu, 4 May 2023 11:07:18 +0800 Subject: [PATCH] =?UTF-8?q?refactor(web):=20=E5=B0=86=E8=A1=A8=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=E6=94=BE=E5=9C=A8=E8=A1=A8=E8=AF=A6=E6=83=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/static/components/common.js | 311 +++++++++++++++++- .../resources/static/components/table-tab.js | 300 ----------------- 2 files changed, 309 insertions(+), 302 deletions(-) diff --git a/service-web/src/main/resources/static/components/common.js b/service-web/src/main/resources/static/components/common.js index 73a8523..60bc9d9 100644 --- a/service-web/src/main/resources/static/components/common.js +++ b/service-web/src/main/resources/static/components/common.js @@ -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'}, { diff --git a/service-web/src/main/resources/static/components/table-tab.js b/service-web/src/main/resources/static/components/table-tab.js index f01da15..d0c5eb4 100644 --- a/service-web/src/main/resources/static/components/table-tab.js +++ b/service-web/src/main/resources/static/components/table-tab.js @@ -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), - }, - ] - }, - ] - } - } - }, - ] - } ] } ]