diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Bar.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Bar.vue new file mode 100644 index 0000000000..9427f00004 --- /dev/null +++ b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Bar.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Base.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Base.vue new file mode 100644 index 0000000000..e8224cf816 --- /dev/null +++ b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Base.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Circle.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Circle.vue new file mode 100644 index 0000000000..bff89ea61f --- /dev/null +++ b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Circle.vue @@ -0,0 +1,20 @@ + + + \ No newline at end of file diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Line.vue b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Line.vue new file mode 100644 index 0000000000..1f26ffa70b --- /dev/null +++ b/web-ui/arthasWebConsole/all/ui/ui/src/components/charts/Line.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/echart.d.ts b/web-ui/arthasWebConsole/all/ui/ui/src/echart.d.ts new file mode 100644 index 0000000000..d223b43f7a --- /dev/null +++ b/web-ui/arthasWebConsole/all/ui/ui/src/echart.d.ts @@ -0,0 +1,47 @@ +import * as echarts from "echarts"; +import { + DatasetComponentOption, + DataZoomComponentOption, + GridComponentOption, + LegendComponentOption, + TitleComponentOption, + ToolboxComponentOption, + TooltipComponentOption, +} from "echarts/components"; +import { + BarSeriesOption, + LineSeriesOption, + PieSeriesOption, +} from "echarts/charts"; +type LineChartOption = echarts.ComposeOption< + | TooltipComponentOption + | TitleComponentOption + | DatasetComponentOption + | LineSeriesOption + | TitleComponentOption + | ToolboxComponentOption + | TooltipComponentOption + | GridComponentOption + | LegendComponentOption + | DataZoomComponentOption + | LineSeriesOption +>; + +type BarChartOption = echarts.ComposeOption< + | TooltipComponentOption + | TitleComponentOption + | DatasetComponentOption + | BarSeriesOption + | DataZoomComponentOption + | LegendComponentOption + | GridComponentOption + | ToolboxComponentOption +>; + +type CircleChartOption = echarts.ComposeOption< + | TooltipComponentOption + | TitleComponentOption + | DatasetComponentOption + | PieSeriesOption + | LegendComponentOption +>; diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue index b00a13acaa..1c6d567437 100644 --- a/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue +++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/DashBoard.vue @@ -3,51 +3,17 @@ import machine from '@/machines/consoleMachine'; import { fetchStore } from '@/stores/fetch'; import { publicStore } from '@/stores/public'; import { useInterpret, useMachine } from '@xstate/vue'; -import { onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue'; -import * as echarts from 'echarts/core'; -import { - TooltipComponent, - TooltipComponentOption, - LegendComponent, - LegendComponentOption, - DatasetComponentOption, - GridComponentOption, - ToolboxComponentOption, - GridComponent, - ToolboxComponent -} from 'echarts/components'; -import { - BarChart, - BarSeriesOption, - LineChart, - LineSeriesOption, - PieChart, - PieSeriesOption -} from 'echarts/charts'; -import { - LabelLayout, UniversalTransition -} from 'echarts/features'; -import { - SVGRenderer -} from 'echarts/renderers'; -import { dispose, ECharts } from 'echarts/core'; +import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'; import permachine from '@/machines/perRequestMachine'; - -type EChartsOption = echarts.ComposeOption< - DatasetComponentOption | PieSeriesOption -> -type GcEChartsOption = echarts.ComposeOption< - ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | BarSeriesOption | LineSeriesOption -> +import Bar from '@/components/charts/Bar.vue'; +import { BarChartOption, CircleChartOption } from '@/echart'; +import Circle from '@/components/charts/Circle.vue'; const fetchS = fetchStore() const { getCommonResEffect } = publicStore() const dashboadM = useInterpret(permachine) const dashboadResM = useMachine(machine) const loop = fetchS.pullResultsLoop(dashboadResM) const toMb = (b: number) => Math.floor(b / 1024 / 1024) -const gcInfos = reactive(new Map()) -const memoryInfo = reactive(new Map()) -const threads = reactive(new Map()) const runtimeInfo = reactive(new Map()) const pri = ref(3) const publiC = publicStore() @@ -66,70 +32,235 @@ const keyList: (keyof ThreadStats)[] = [ ] let dashboardId = -1 -let heapChart: ECharts -let nonheapChart: ECharts -let bufferPoolChart: ECharts -let gcChart: ECharts -const clearChart = (...charts: ECharts[]) => { - charts.forEach(chart => { - if (chart !== null && chart !== undefined) chart.dispose() - }) -} + +const colors = ['#5470C6', '#91CC75']; +const gcChartContext = reactive<{ xData: string[], collectionCount: number[], collectionTime: number[] }>({ + xData: [], + collectionCount: [], + collectionTime: [] +}) +const gcoption = reactive({ + color: colors, + title:{ + text: "GC", + }, + grid: { + right: '20%' + }, + legend: { + data: ['collectionCount', 'collectionTime'] + }, + xAxis: [{ + type: 'category', + axisTick: { + alignWithLabel: true + }, + data: gcChartContext.xData + }], + yAxis: [ + { + type: 'value', + name: 'collectionCount', + position: 'left', + alignTicks: true, + axisLine: { + show: true, + lineStyle: { + color: colors[0] + } + }, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: 'collectionTime', + position: 'right', + alignTicks: true, + axisLine: { + show: true, + lineStyle: { + color: colors[1] + } + }, + axisLabel: { + formatter: '{value} ms' + } + }, + ], + series: [ + { + name: 'collectionCount', + type: 'bar', + data: gcChartContext.collectionCount + }, + { + name: 'collectionTime', + type: 'bar', + yAxisIndex: 1, + data: gcChartContext.collectionTime + }, + ] +}); +const bufferPoolContext = reactive<{ + data: { + value: number, name: string, + }[] +}>({ + data: [] +}) +const heapoptionContext = reactive<{ + data: { + value: number, name: string, + }[] +}>({ + data: [] +}) +const nonheapContext = reactive<{ + data: { + value: number, name: string, + }[] +}>({ + data: [] +}) +const heapoption = reactive({ + title:{ + text:"heap" + }, + tooltip: { + trigger: 'item', + formatter: '{b}:{c}M {d}' + }, + legend: { + top: 'center', + left: 'right', + orient: "vertical" + }, + series: [ + { + type: 'pie', + radius: ['40%', '70%'], + center:['35%','50%'], + avoidLabelOverlap: true, + label: { + show: false, + position: 'center', + }, + labelLine: { + show: false + }, + data: heapoptionContext.data + } + ] +}); +const nonheapoption = reactive({ + title:{ + text:"nonheap" + }, + tooltip: { + trigger: 'item', + formatter: '{b}:{c}M' + }, + legend: { + top: 'center', + left: 'right', + orient: "vertical" + }, + series: [ + { + type: 'pie', + radius: ['40%', '70%'], + center:['35%','50%'], + avoidLabelOverlap: false, + label: { + show: false, + position: 'center', + formatter: '{b}:{c}M' + }, + labelLine: { + show: false + }, + data: nonheapContext.data + } + ] +}); +const bufferPooloption = reactive({ + title: { + text: "buffer_pool" + }, + tooltip: { + trigger: 'item', + formatter: '{c}M' + }, + legend: { + top: 'center', + left: 'right', + orient: 'vertical' + }, + series: [ + { + type: 'pie', + radius: ['40%', '70%'], + center:['35%','50%'], + avoidLabelOverlap: true, + label: { + show: false, + position: 'outside', + }, + labelLine: { + show: false + }, + data: bufferPoolContext.data + } + ] +}); const transformMemory = (result: ArthasResResult) => { if (result.type === "dashboard") { - const heaparr: { value: number, name: string }[] = [ - ] + // const heaparr: { value: number, name: string }[] = [ + // ] + heapoptionContext.data.length = 0 result.memoryInfo.heap.filter(v => v.name !== "heap").forEach(v => { const arr: string[] = [] - arr.push('max : ' + toMb(v.max)) - arr.push('total : ' + toMb(v.total)) - arr.push('used : ' + toMb(v.used)) + // arr.push('max : ' + toMb(v.max)) + // arr.push('total : ' + toMb(v.total)) + // arr.push('used : ' + toMb(v.used)) const usage: number = (v.max > 0 ? (v.used / v.max) : (v.used / v.total)) * 100 - heaparr.push({ value: toMb(v.used), name: `${v.name}(${usage.toFixed(2)}%)` }) + heapoptionContext.data.push({ value: toMb(v.used), name: `${v.name}(${usage.toFixed(2)}%)` }) - arr.push(usage + '%') + // arr.push(usage + '%') - memoryInfo.set(v.name, arr) + // memoryInfo.set(v.name, arr) }) - heaparr.push({ + heapoptionContext.data.push({ value: Math.floor((result.memoryInfo.heap[0].max > 0 ? (result.memoryInfo.heap[0].max - result.memoryInfo.heap[0].used) : (result.memoryInfo.heap[0].total - result.memoryInfo.heap[0].used)) / 1024 / 1024), name: "free", }) - heapChart && heapChart.setOption({ - series: { - data: heaparr - } - } as EChartsOption) + // heapoptionContext.data = heaparr - const nonheaparr: { - value: number, name: string, - }[] = [] + nonheapContext.data.length = 0 result.memoryInfo.nonheap.filter(v => v.name !== "nonheap").forEach(v => { const arr: string[] = [] - arr.push('max : ' + toMb(v.max)) - arr.push('total : ' + toMb(v.total)) - arr.push('used : ' + toMb(v.used)) + // arr.push('max : ' + toMb(v.max)) + // arr.push('total : ' + toMb(v.total)) + // arr.push('used : ' + toMb(v.used)) const usage: number = (v.used / v.total) * 100 - nonheaparr.push({ value: toMb(v.used), name: `${v.name}(${usage.toFixed(2)}%)` }) + nonheapContext.data.push({ value: toMb(v.used), name: `${v.name}(${usage.toFixed(2)}%)` }) - arr.push(usage * 100 + '%') + // arr.push(usage * 100 + '%') - memoryInfo.set(v.name, arr) + // memoryInfo.set(v.name, arr) }) - nonheapChart && nonheapChart.setOption({ series: { data: nonheaparr } } as EChartsOption) + // nonheapChart && nonheapChart.setOption({ series: { data: nonheaparr } } as EChartsOption) - const bufferPoolarr: { - value: number, name: string, - }[] = [] + bufferPoolContext.data.length = 0 result.memoryInfo.buffer_pool.filter(v => v.name !== "buffer_pool;").forEach(v => { - bufferPoolarr.push({ value: toMb(v.used), name: `${v.name}` }) - + bufferPoolContext.data.push({ value: toMb(v.used), name: `${v.name}` }) }) - bufferPoolChart && bufferPoolChart.setOption({ series: { data: bufferPoolarr } } as EChartsOption) } } const transformThread = (result: ArthasResResult, end: number) => { @@ -144,34 +275,14 @@ const transformThread = (result: ArthasResResult, end: number) => { } const transformGc = (result: ArthasResResult) => { if (result.type !== "dashboard") return; - const gcCountData: number[] = [] - - const gcTimeData: number[] = [] - const gcxdata: string[] = [] + gcChartContext.xData.length = 0 + gcChartContext.collectionCount.length = 0 + gcChartContext.collectionTime.length = 0 result.gcInfos.forEach(v => { - // gcInfos.set(v.name, [v.collectionCount.toString(), v.collectionTime.toString()]) - gcxdata.push(v.name) - gcCountData.push(v.collectionCount) - gcTimeData.push(v.collectionTime) + gcChartContext.xData.push(v.name) + gcChartContext.collectionCount.push(v.collectionCount) + gcChartContext.collectionTime.push(v.collectionTime) }) - gcChart.setOption({ - xAxis: { - type: 'category', - axisTick: { - alignWithLabel: true - }, - // prettier-ignore - data: gcxdata - }, series: [{ - name: "collectionCount", - type: 'bar', - data: gcCountData - }, { - name: "collectionTime", - type: 'bar', - data: gcTimeData - }] - } as GcEChartsOption) } const setPri = publiC.inputDialogFactory( pri, @@ -193,17 +304,14 @@ getCommonResEffect(dashboadResM, body => { const result = body.results.find(v => v.type === "dashboard" && v.jobId === dashboardId) if (result && result.type === "dashboard") { - memoryInfo.clear() transformMemory(result) runtimeInfo.clear() transformRuntimeInfo(result) - threads.clear() tableResults.length = 0 transformThread(result, pri.value) - gcInfos.clear() transformGc(result) } } @@ -231,212 +339,9 @@ onBeforeMount(async () => { ) }) -// 处理dom -onMounted(() => { - // init - - const clearDom = (...doms: HTMLElement[]) => { - doms.forEach(dom => { - dispose(dom) - }) - } - clearChart(nonheapChart, heapChart, bufferPoolChart, gcChart) - const heapDom = document.getElementById('heapMemory')! - const nonheapDom = document.getElementById('nonheapMemory')! - const bufferPoolDom = document.getElementById('bufferPoolMemory')! - const gcDom = document.getElementById('gc-info')! - clearDom(heapDom, nonheapDom, bufferPoolDom, gcDom) - echarts.use( - [TooltipComponent, LegendComponent, PieChart, SVGRenderer, LabelLayout, ToolboxComponent, GridComponent, BarChart, LineChart, UniversalTransition] - ); - - - - const heapoption: EChartsOption = { - tooltip: { - trigger: 'item', - formatter: '{b}:{c}M {d}' - }, - legend: { - top: '5%', - left: 'center' - }, - series: [ - { - name: 'heap memory', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: true, - label: { - show: false, - position: 'center', - }, - labelLine: { - show: false - }, - data: [ - ] - } - ] - }; - const nonheapoption: EChartsOption = { - tooltip: { - trigger: 'item', - formatter: '{b}:{c}M' - }, - legend: { - top: '5%', - left: 'center' - }, - series: [ - { - name: 'nonheap memory', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center', - formatter: '{b}:{c}M' - }, - labelLine: { - show: false - }, - data: [ - ] - } - ] - }; - const bufferPooloption: EChartsOption = { - tooltip: { - trigger: 'item', - formatter: '{c}M' - }, - legend: { - top: '5%', - left: 'center' - }, - series: [ - { - name: 'buffer_pool memory', - type: 'pie', - radius: ['40%', '70%'], - avoidLabelOverlap: true, - label: { - show: false, - position: 'outside', - }, - labelLine: { - show: false - }, - data: [ - { - value: 0, - name: '', - } - ] - } - ] - }; - const colors = ['#5470C6', '#91CC75']; - const gcoption: GcEChartsOption = { - color: colors, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross' - } - }, - grid: { - right: '20%' - }, - legend: { - data: ['collectionCount', 'collectionTime'] - }, - xAxis: [ - { - type: 'category', - axisTick: { - alignWithLabel: true - }, - // prettier-ignore - data: [] - } - ], - toolbox: { - feature: { - dataView: { show: true, readOnly: true }, - } - }, - yAxis: [ - { - type: 'value', - name: 'collectionCount', - position: 'left', - alignTicks: true, - axisLine: { - show: true, - lineStyle: { - color: colors[0] - } - }, - axisLabel: { - formatter: '{value}' - } - }, - { - type: 'value', - name: 'collectionTime', - position: 'right', - alignTicks: true, - axisLine: { - show: true, - lineStyle: { - color: colors[1] - } - }, - axisLabel: { - formatter: '{value} ms' - } - }, - ], - series: [ - { - name: 'collectionCount', - type: 'bar', - data: [ - ] - }, - { - name: 'collectionTime', - type: 'bar', - yAxisIndex: 1, - data: [ - ] - }, - ] - }; - - - heapChart = echarts.init(heapDom); - heapoption && heapChart.setOption(heapoption); - nonheapChart = echarts.init(nonheapDom); - nonheapoption && nonheapChart.setOption(nonheapoption); - - bufferPoolChart = echarts.init(bufferPoolDom); - bufferPooloption && bufferPoolChart.setOption(bufferPooloption); - - // gcInfosChart - - gcChart = echarts.init(gcDom); - - - gcoption && gcChart.setOption(gcoption); -}) onBeforeUnmount(async () => { loop.close() - clearChart(nonheapChart, heapChart, bufferPoolChart, gcChart) }) @@ -453,22 +358,21 @@ onBeforeUnmount(async () => {
-
+ +
-
+ +
-
+
- - -
-
-
+
+
diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue index 9bf1634a6b..76febb35ae 100644 --- a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue +++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Monitor.vue @@ -10,45 +10,12 @@ import { import MethodInput from '@/components/input/MethodInput.vue'; import machine from '@/machines/consoleMachine'; import { fetchStore } from '@/stores/fetch'; -import { onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue'; +import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'; import Enhancer from '@/components/show/Enhancer.vue'; import { publicStore } from '@/stores/public'; -import * as echarts from 'echarts/core'; -import { - TitleComponent, - TitleComponentOption, - ToolboxComponent, - ToolboxComponentOption, - TooltipComponent, - TooltipComponentOption, - GridComponent, - GridComponentOption, - LegendComponent, - LegendComponentOption, - DataZoomComponent, - DataZoomComponentOption -} from 'echarts/components'; -import { - BarChart, - BarSeriesOption, - LineChart, - LineSeriesOption -} from 'echarts/charts'; -import { - UniversalTransition -} from 'echarts/features'; -import { - SVGRenderer -} from 'echarts/renderers'; -import { ECharts } from 'echarts/core'; - -echarts.use( - [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, BarChart, LineChart, SVGRenderer, UniversalTransition] -); - -type EChartsOption = echarts.ComposeOption< - TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | DataZoomComponentOption | BarSeriesOption | LineSeriesOption -> +import LineVue from "@/components/charts/Line.vue" +import Bar from '@/components/charts/Bar.vue'; +import { BarChartOption, LineChartOption } from '@/echart'; const pollingM = useMachine(machine) const fetchS = fetchStore() const { pullResultsLoop, getCommonResEffect } = fetchS @@ -69,29 +36,28 @@ const averageRT = ref({ }) const chartContext: { - count: number, - myChart?: ECharts, - costChart?: ECharts, categories: string[], data: number[], - cur: number, - max: number, successData: number[], - failureData: number[] -} = { - max: 0, - cur: 0, - count: 40, - myChart: undefined, - costChart: undefined, + failureData: number[], + dataZoom: Record +} = reactive({ categories: [], data: [], successData: [], failureData: [], -} -// for (let i = 0; i < chartContext.count; i++) { chartContext.categories[i] = i + 1 } + dataZoom: { + type: "inside", + minValueSpan: 10, + maxValueSpan: 10, + start: 50, + end: 100, + throttle: 0, + zoomLock: true + } +}) -const chartOption = { +const chartOption = reactive({ tooltip: { trigger: 'axis', axisPointer: { @@ -102,12 +68,7 @@ const chartOption = { } }, legend: {}, - toolbox: { - show: true, - feature: { - dataView: { readOnly: false }, - } - }, + dataZoom: chartContext.dataZoom, xAxis: [ { type: 'category', @@ -129,20 +90,20 @@ const chartOption = { name: 'success', type: 'bar', stack: 'count', - data: [], + data: chartContext.successData, }, { name: 'failure', type: 'bar', stack: "count", - data: [], + data: chartContext.failureData, itemStyle: { color: "#ff0000", } }, ] -}; -const costOption = { +}); +const costOption = reactive({ tooltip: { trigger: 'axis', axisPointer: { @@ -152,109 +113,50 @@ const costOption = { } } }, - legend: {}, - toolbox: { - show: true, - feature: { - dataView: { readOnly: false }, - } + legend: { }, - xAxis: [ - { - type: 'category', - data: chartContext.categories, - axisLabel: { - formatter(value: string) { - return value.split(" ")[1] - } + dataZoom: chartContext.dataZoom, + // toolbox: { + // show: true, + // feature: { + // dataView: { readOnly: false }, + // } + // }, + xAxis: { + type: 'category', + data: chartContext.categories, + axisLabel: { + formatter(value: string) { + return value.split(" ")[1] } } - ], - yAxis: [ - { - type: 'value', - scale: true, - name: 'rt(ms)', - min: 0, - } - ], - series: [ - { - name: 'rt', - type: 'line', - data: chartContext.data - } - ] -} -const updateChart = (data: MonitorData) => { - while (chartContext.cur > chartContext.count) { - chartContext.data.shift() - chartContext.successData.shift() - chartContext.failureData.shift() - chartContext.categories.shift() - chartContext.cur-- + }, + yAxis: { + type: 'value', + scale: true, + name: 'rt(ms)', + min: 0, + }, + series: { + name: 'rt', + type: 'line', + data: chartContext.data } +}) +const updateChart = (data: MonitorData) => { chartContext.data.push(data.cost / data.total) chartContext.failureData.push(data.failed) chartContext.successData.push(data.success) chartContext.categories.push(data.timestamp) - chartContext.cur++ - chartContext.myChart!.setOption({ - xAxis: [ - { - data: chartContext.categories - } - ], - series: [{ - data: chartContext.successData - }, { - data: chartContext.failureData - } - ] - }) - chartContext.costChart!.setOption({ - xAxis: [ - { - data: chartContext.categories - } - ], - series: [ - { - data: chartContext.data - } - ] - }) } const resetChart = () => { chartContext.data.length = 0 chartContext.failureData.length = 0 chartContext.successData.length = 0 - chartContext.myChart!.setOption({ - xAxis: [ - { - data: chartContext.categories - } - ], - series: [{ - data: chartContext.successData - }, { - data: chartContext.failureData - } - ] - }) - chartContext.costChart!.setOption({ - xAxis: [ - { - data: chartContext.categories - } - ], - series: [ - { - data: chartContext.data - } - ] - }) + enhancer.value = undefined + averageRT.value.totalCost = 0 + averageRT.value.totalCount = 0 } const transform = (result: ArthasResResult) => { if (result.type === "monitor") { @@ -286,21 +188,11 @@ onBeforeMount(() => { fetchS.asyncInit() pollingM.send("INIT") }) -onMounted(() => { - const chartDom = document.getElementById('monitorchart')!; - chartContext.myChart = echarts.init(chartDom); - chartOption && chartContext.myChart.setOption(chartOption) - chartContext.costChart = echarts.init(document.getElementById('monitorchartcost')!); - chartOption && chartContext.costChart.setOption(costOption) -}) onBeforeUnmount(() => { loop.close() }) const submit = async (data: { classItem: Item, methodItem: Item, conditon: string }) => { - enhancer.value = undefined - // tableResults.length = 0 - averageRT.value.totalCost =0 - averageRT.value.totalCount = 0 + resetChart() let condition = data.conditon.trim() == "" ? "" : `'${data.conditon.trim()}'` let cycle = `-c ${cycleV.value}` fetchS.baseSubmit(fetchM, { @@ -321,10 +213,10 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin {{ mode.name }} - +
{{ am.name }}
@@ -332,13 +224,14 @@ const submit = async (data: { classItem: Item, methodItem: Item, conditon: strin
- + -
-
- + + + + diff --git a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue index a9a545a07e..fdfe9d3fff 100644 --- a/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue +++ b/web-ui/arthasWebConsole/all/ui/ui/src/views/async/Tt.vue @@ -8,42 +8,12 @@ import { onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, } from 'vue'; import CmdResMenu from '@/components/show/CmdResMenu.vue'; import Enhancer from '@/components/show/Enhancer.vue'; import { publicStore } from '@/stores/public'; -import * as echarts from 'echarts/core'; -import { - TitleComponent, - TitleComponentOption, - ToolboxComponent, - ToolboxComponentOption, - TooltipComponent, - TooltipComponentOption, - GridComponent, - GridComponentOption, - LegendComponent, - LegendComponentOption, - DataZoomComponent, - DataZoomComponentOption -} from 'echarts/components'; -import { - BarChart, - BarSeriesOption, - LineChart, - LineSeriesOption -} from 'echarts/charts'; -import { - UniversalTransition -} from 'echarts/features'; -import { - SVGRenderer -} from 'echarts/renderers'; -import { ECharts, number } from 'echarts/core'; +import LineVue from '@/components/charts/Line.vue'; +import { LineChartOption } from '@/echart'; -echarts.use( - [TitleComponent, ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, BarChart, LineChart, SVGRenderer, UniversalTransition] -); - -type EChartsOption = echarts.ComposeOption< - TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | DataZoomComponentOption | BarSeriesOption | LineSeriesOption -> +// type EChartsOption = echarts.ComposeOption< +// TitleComponentOption | ToolboxComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption | DataZoomComponentOption | BarSeriesOption | LineSeriesOption +// > const pollingM = useMachine(machine) const fetchS = fetchStore() const { pullResultsLoop, getPullResultsEffect } = fetchS @@ -72,21 +42,13 @@ const tableResults = reactive([] as Map[]) type tfkey = keyof TimeFragment const chartContext: { - count: number, - myChart?: ECharts, categories: number[], data: number[], - cur: number, - max: number, -} = { - max: 0, - cur: 0, - count: 20, - myChart: undefined, +} = reactive({ categories: [], data: [] -} -const chartOption = { +}) +const chartOption = reactive({ tooltip: { trigger: 'axis', axisPointer: { @@ -96,67 +58,47 @@ const chartOption = { } } }, - legend: {}, + legend: { + }, + dataZoom: { + type: "inside", + minValueSpan:30, + maxValueSpan:30, + start: 50, + end: 100, + throttle:0, + zoomLock: true + }, toolbox: { show: true, feature: { dataView: { readOnly: false }, } }, - xAxis: [ - { - type: 'category', - boundaryGap: true, - data: chartContext.categories - } - ], - yAxis: [ - { - type: 'value', - scale: true, - name: 'cost(ms)', - max: 0, - min: 0, - boundaryGap: [0.2, 0.2] - } - ], - series: [ - { - name: 'cost', - type: 'bar', - xAxisIndex: 0, - yAxisIndex: 0, - data: chartContext.data - } - ] -}; -const updateChart = (tf: TimeFragment) => { - while (chartContext.cur > chartContext.count) { - chartContext.data.shift() - chartContext.categories.shift() - chartContext.cur-- + xAxis: { + type: 'category', + boundaryGap: true, + data: chartContext.categories + }, + yAxis: + { + type: 'value', + scale: true, + name: 'cost(ms)', + min: 0, + boundaryGap: [0.2, 0.2] + }, + series: { + name: 'cost', + type: 'line', + xAxisIndex: 0, + yAxisIndex: 0, + data: chartContext.data } +}); +const updateChart = (tf: TimeFragment) => { chartContext.data.push(tf.cost) chartContext.categories.push(tf.index) - chartContext.cur++ - chartContext.max = Math.max(...chartContext.data) - chartContext.myChart!.setOption({ - xAxis: [ - { - data: chartContext.categories - } - ], - yAxis: [ - { - max: chartContext.max, - } - ], - series: [ - { - data: chartContext.data - } - ] - }); } const transform = (tf: TimeFragment) => { const map = new Map() @@ -200,14 +142,6 @@ onBeforeMount(() => { pollingM.send("INIT") fetchS.asyncInit() }) -onMounted(() => { - const chartDom = document.getElementById('ttchart')!; - chartContext.myChart = echarts.init(chartDom); - chartContext.myChart.on("click", e => { - console.dir(e) - }) - chartOption && chartContext.myChart.setOption(chartOption) -}) onBeforeUnmount(() => { loop.close() }) @@ -230,10 +164,13 @@ const alltt = () => fetchS.baseSubmit(fetchM, { let result = (res as CommonRes).body.results[0] trigerRes.clear() tableResults.length = 0 + // 因为要all 所以清空之前的记录 + chartContext.categories.length = 0 + chartContext.data.length = 0 + if (result.type === "tt") { result.timeFragmentList.forEach(tf => { tableResults.unshift(transform(tf)) - }) } }) @@ -317,7 +254,7 @@ const searchTt = () => {
-
+