From 6eae3c294d0cb6642ddcb367e2cbc4ecb6c7f0cf Mon Sep 17 00:00:00 2001 From: Feynman Date: Thu, 18 Dec 2025 16:02:15 +0800 Subject: [PATCH 1/2] feat: enhance QPS data handling with additional metrics and improve UI components --- packages/component/src/TimeSelect.vue | 4 +- .../dag/src/components/monitor/LeftSider.vue | 159 +++++++++++++++--- .../monitor/components/Frequency.vue | 2 +- .../monitor/components/LineChart.vue | 31 +++- packages/i18n/src/locale/lang/en.js | 4 + packages/i18n/src/locale/lang/zh-CN.js | 4 + packages/i18n/src/locale/lang/zh-TW.js | 4 + 7 files changed, 178 insertions(+), 30 deletions(-) diff --git a/packages/component/src/TimeSelect.vue b/packages/component/src/TimeSelect.vue index 5d49ec407..025f7b146 100644 --- a/packages/component/src/TimeSelect.vue +++ b/packages/component/src/TimeSelect.vue @@ -244,6 +244,8 @@ export default { return } this.period = value + + return findOne }, getPeriod(value) { @@ -341,7 +343,7 @@ export default { } .picker__item { - padding: 0 8px; + padding-right: 8px; border-radius: 4px; //&:hover { diff --git a/packages/dag/src/components/monitor/LeftSider.vue b/packages/dag/src/components/monitor/LeftSider.vue index 999699b04..f78122a55 100644 --- a/packages/dag/src/components/monitor/LeftSider.vue +++ b/packages/dag/src/components/monitor/LeftSider.vue @@ -13,9 +13,9 @@ import dayjs from 'dayjs' import { cloneDeep } from 'lodash-es' import { mapGetters } from 'vuex' import { $emit } from '../../../utils/gogocodeTransfer' -import Frequency from './components/Frequency' -import InitialList from './components/InitialList' -import LineChart from './components/LineChart' +import Frequency from './components/Frequency.vue' +import InitialList from './components/InitialList.vue' +import LineChart from './components/LineChart.vue' export default { name: 'LeftSider', @@ -128,6 +128,17 @@ export default { }, ], }, + qpsColors: [ + '#5470c6', + '#91cc75', + '#fac858', + '#ee6666', + '#73c0de', + '#3ba272', + '#fc8452', + '#9a60b4', + '#ea7ccc', + ], } }, computed: { @@ -154,6 +165,15 @@ export default { const outputQps = data.outputQps?.map(Math.abs) const inputSizeQps = data.inputSizeQps?.map(Math.abs) const outputSizeQps = data.outputSizeQps?.map(Math.abs) + const inputQps95th = data.inputQps95th + const inputQps99th = data.inputQps99th + const outputQps95th = data.outputQps95th + const outputQps99th = data.outputQps99th + const inputSizeQps95th = data.inputSizeQps95th + const inputSizeQps99th = data.inputSizeQps99th + const outputSizeQps95th = data.outputSizeQps95th + const outputSizeQps99th = data.outputSizeQps99th + // 计算距离增量时间点，最近的时间点 const milestone = this.dataflow.attrs?.milestone || {} const snapshotDoneAt = milestone.SNAPSHOT?.end @@ -167,8 +187,6 @@ export default { } }) - const countValues = [inputQps, outputQps] - const sizeValues = [inputSizeQps, outputSizeQps] let unit = '5s' switch (interval) { @@ -185,11 +203,51 @@ export default { unit = 'd' break } - const name = [ + + const countNames = [ i18n.t('public_time_avg_input', { unit }), i18n.t('public_time_avg_output', { unit }), ] + const sizeNames = [ + i18n.t('public_time_avg_input', { unit }), + i18n.t('public_time_avg_output', { unit }), + ] + + const countValues = [inputQps, outputQps] + const countP95Values = [ + inputQps95th, + outputQps95th, + inputQps99th, + outputQps99th, + ] + const sizeValues = [inputSizeQps, outputSizeQps] + const sizeP95Values = [ + inputSizeQps95th, + outputSizeQps95th, + inputSizeQps99th, + outputSizeQps99th, + ] + const p95Names = [ + i18n.t('public_time_avg_input_95th'), + i18n.t('public_time_avg_output_95th'), + i18n.t('public_time_avg_input_99th'), + i18n.t('public_time_avg_output_99th'), + ] + + countP95Values.forEach((values, i) => { + if (values?.some((v) => v !== null)) { + countValues.push(values) + countNames.push(p95Names[i]) + } + }) + sizeP95Values.forEach((values, i) => { + if (values?.some((v) => v !== null)) { + sizeValues.push(values) + sizeNames.push(p95Names[i]) + } + }) + if (interval > 5000) { countValues.push( data.maxInputQps?.map(Math.abs), @@ -199,17 +257,24 @@ export default { data.maxInputSizeQps?.map(Math.abs), data.maxOutputSizeQps?.map(Math.abs), ) - name.push( + const names = [ i18n.t('public_time_max_input', { unit }), i18n.t('public_time_max_output', { unit }), - ) + ] + countNames.push(...names) + sizeNames.push(...names) } const opt = { x: time, - name, value: [], zoomValue: 10, + serieOptions: Array.from({ length: 8 }).fill( + { + areaStyle: undefined, + }, + 2, + ), } if (this.dataflow.type === 'initial_sync+cdc') { @@ -234,13 +299,19 @@ export default { return { count: Object.assign(cloneDeep(opt), { value: countValues, + name: countNames, }), size: Object.assign(cloneDeep(opt), { value: sizeValues, + name: sizeNames, }), } }, + // allQpsMap() { + // const qpsMap = this.qpsMap + // }, + // 处理耗时 delayData() { const data = this.quota.samples?.lineChartData?.[0] @@ -475,7 +546,14 @@ export default { methods: { changeTimeSelect(val, isTime, source) { this.$emit('changeTimeSelect', val, isTime, source) - this.timeSelectLabel = this.$refs.timeSelect?.getPeriod()?.label + // this.timeSelectLabel = this.$refs.timeSelect?.getPeriod()?.label + + this.isUpdatingTimeSelect = true + this.$refs.dialogTimeSelect?.setPeriod(val) + + setTimeout(() => { + this.isUpdatingTimeSelect = false + }, 10) }, changeFrequency(val) { @@ -634,6 +712,17 @@ export default { } map[this.$route.name]?.(this.dataflow.id) }, + + onChangeDialogTimeSelect(val, isTime, source) { + if (this.isUpdatingTimeSelect) { + return + } + const selected = this.$refs.timeSelect?.setPeriod(val) + + if (selected) { + this.$emit('changeTimeSelect', val, isTime, source) + } + }, }, emits: ['load-data', 'verifyDetails', 'changeTimeSelect', 'changeFrequency'], } @@ -941,7 +1030,7 @@ export default { +
info - - count - size - +
+ +
+ {{ $t('public_event_incremental_delay') }} +
+
+ {{ $t('packages_dag_monitor_leftsider_chulihaoshim') }} +
diff --git a/packages/dag/src/components/monitor/components/Frequency.vue b/packages/dag/src/components/monitor/components/Frequency.vue index cbfdb7bdc..063a1657c 100644 --- a/packages/dag/src/components/monitor/components/Frequency.vue +++ b/packages/dag/src/components/monitor/components/Frequency.vue @@ -136,7 +136,7 @@ export default { } .picker__item { - padding: 0 8px; + padding-right: 8px; border-radius: 4px; } diff --git a/packages/dag/src/components/monitor/components/LineChart.vue b/packages/dag/src/components/monitor/components/LineChart.vue index a76119261..a06e8aca6 100644 --- a/packages/dag/src/components/monitor/components/LineChart.vue +++ b/packages/dag/src/components/monitor/components/LineChart.vue @@ -91,18 +91,28 @@ export default { this.min = 0 this.minNotZero = 0 - const { x, value, name, markLine, yAxisMax } = this.data + const { + x, + value, + name, + markLine, + yAxisMax, + serieOptions = [], + } = this.data const { limit } = this const series = [] if (Array.isArray(value?.[0])) { value.forEach((el, index) => { series.push( - this.getSeriesItem( - el || [], - index, - name?.[index], - markLine?.[index], + Object.assign( + this.getSeriesItem( + el || [], + index, + name?.[index], + markLine?.[index], + ), + serieOptions[index], ), ) }) @@ -169,6 +179,7 @@ export default { if (this.end === 100) { const isEmptyData = options.series.every((t) => !t.data.length) + console.log('options.series', options.series) this.extend = Object.assign( {}, { @@ -192,6 +203,9 @@ export default { getOptions() { const { canScale, max, minNotZero } = this const result = { + legend: { + show: false, + }, tooltip: { borderRadius: 12, trigger: 'axis', @@ -364,9 +378,12 @@ export default { show: false, }, lineStyle: { - color: this.color[index], + // color: this.color[index], width: 1, }, + itemStyle: { + color: this.color[index], + }, areaStyle: { color: this.color[index], opacity: 0.1, diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js index 2e83578f3..c52ba3cad 100644 --- a/packages/i18n/src/locale/lang/en.js +++ b/packages/i18n/src/locale/lang/en.js @@ -219,6 +219,10 @@ export default { public_time_output: 'Output', public_time_avg_output: 'Output (Avg/{unit})', public_time_max_output: 'Output (Max/{unit})', + public_time_avg_input_95th: 'Input P95', + public_time_avg_output_95th: 'Output P95', + public_time_avg_input_99th: 'Input P99', + public_time_avg_output_99th: 'Output P99', public_time_five_min: 'The last five minutes', public_time_ten_min: 'The last ten minutes', public_time_thirty_min: 'The last thirty minutes', diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js index 687baeae8..0b0c3dc25 100644 --- a/packages/i18n/src/locale/lang/zh-CN.js +++ b/packages/i18n/src/locale/lang/zh-CN.js @@ -220,6 +220,10 @@ export default { public_time_output: '输出', public_time_avg_output: '输出 (平均/{unit})', public_time_max_output: '输出 (最大/{unit})', + public_time_avg_input_95th: '输入 95 分位', + public_time_avg_output_95th: '输出 95 分位', + public_time_avg_input_99th: '输入 99 分位', + public_time_avg_output_99th: '输出 99 分位', public_time_five_min: '最近五分钟', public_time_ten_min: '最近十分钟', public_time_thirty_min: '最近三十分钟', diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js index fc0135899..e9f9d4d03 100644 --- a/packages/i18n/src/locale/lang/zh-TW.js +++ b/packages/i18n/src/locale/lang/zh-TW.js @@ -219,6 +219,10 @@ export default { public_time_output: '輸出', public_time_avg_output: '輸出 (平均/{unit})', public_time_max_output: '輸出 (最大/{unit})', + public_time_avg_input_95th: '輸入 (95%)', + public_time_avg_output_95th: '輸出 (95%)', + public_time_avg_input_99th: '輸入 (99%)', + public_time_avg_output_99th: '輸出 (99%)', public_time_five_min: '最近五分鐘', public_time_ten_min: '最近十分鐘', public_time_thirty_min: '最近三十分鐘', From 9fa52d72b6f701687b91c2324614771c3de852b5 Mon Sep 17 00:00:00 2001 From: Feynman Date: Thu, 18 Dec 2025 16:47:20 +0800 Subject: [PATCH 2/2] feat: add P95 and P99 metrics to incremental delay chart and enhance localization support --- .../dag/src/components/monitor/LeftSider.vue | 48 +++++++++++++++---- packages/i18n/src/locale/lang/en.js | 2 + packages/i18n/src/locale/lang/zh-CN.js | 2 + packages/i18n/src/locale/lang/zh-TW.js | 2 + 4 files changed, 44 insertions(+), 10 deletions(-) diff --git a/packages/dag/src/components/monitor/LeftSider.vue b/packages/dag/src/components/monitor/LeftSider.vue index f78122a55..d04e8e083 100644 --- a/packages/dag/src/components/monitor/LeftSider.vue +++ b/packages/dag/src/components/monitor/LeftSider.vue @@ -308,10 +308,6 @@ export default { } }, - // allQpsMap() { - // const qpsMap = this.qpsMap - // }, - // 处理耗时 delayData() { const data = this.quota.samples?.lineChartData?.[0] @@ -338,7 +334,8 @@ export default { } } - const { replicateLag = [] } = data + const name = [i18n.t('public_event_incremental_delay')] + const { replicateLag = [], replicateLag95th, replicateLag99th } = data const open = this.dataflow.alarmSettings?.find( (t) => t.key === 'TASK_INCREMENT_DELAY', )?.open @@ -348,10 +345,26 @@ export default { )?.ms || 0 : 60 * 1000 const max = Math.max(...replicateLag) + const value = [replicateLag] + if (replicateLag95th?.some((v) => v !== null)) { + value.push(replicateLag95th) + name.push(i18n.t('public_event_incremental_delay_95th')) + } + if (replicateLag99th?.some((v) => v !== null)) { + value.push(replicateLag99th) + name.push(i18n.t('public_event_incremental_delay_99th')) + } return { x: time, - value: replicateLag, + name, + value, yAxisMax: Math.max(delay, max), + serieOptions: Array.from({ length: 3 }).fill( + { + areaStyle: undefined, + }, + 1, + ), } }, @@ -1067,7 +1080,7 @@ export default { -
+
{{ $t('public_event_incremental_delay') }}
-
+
{{ $t('packages_dag_monitor_leftsider_chulihaoshim') }}