diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts index f43c649f..987422b8 100644 --- a/src/store/modules/ebpf.ts +++ b/src/store/modules/ebpf.ts @@ -35,6 +35,7 @@ interface EbpfStore { couldProfiling: boolean; tip: string; selectedTask: Recordable; + aggregateType: string; } export const ebpfStore = defineStore({ @@ -48,6 +49,7 @@ export const ebpfStore = defineStore({ couldProfiling: false, tip: "", selectedTask: {}, + aggregateType: "COUNT", }), actions: { setSelectedTask(task: EBPFTaskList) { @@ -131,6 +133,7 @@ export const ebpfStore = defineStore({ timeRanges: Array<{ start: number; end: number }>; aggregateType: string; }) { + this.aggregateType = params.aggregateType; if (!params.scheduleIdList.length) { return new Promise((resolve) => resolve({})); } diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue index adccea90..b69d62f6 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue +++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue @@ -24,6 +24,7 @@ import d3tip from "d3-tip"; import { flamegraph } from "d3-flame-graph"; import { useEbpfStore } from "@/store/modules/ebpf"; import { StackElement } from "@/types/ebpf"; +import { AggregateTypes } from "./data"; import "d3-flame-graph/dist/d3-flamegraph.css"; /*global Nullable*/ @@ -86,10 +87,13 @@ function drawGraph() { const tip = (d3tip as any)() .attr("class", "d3-tip") .direction("w") - .html( - (d: { data: StackElement }) => - `
Symbol: ${d.data.name}
Dump Count: ${d.data.dumpCount}
` - ) + .html((d: { data: StackElement }) => { + const valStr = + ebpfStore.aggregateType === AggregateTypes[0].value + ? `
Dump Count: ${d.data.dumpCount}
` + : `
Duration: ${d.data.dumpCount} ns
`; + return `
Symbol: ${d.data.name}
${valStr}`; + }) .style("max-width", "500px"); flameChart.value.tooltip(tip); d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);