diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts index 4598528e..40852074 100644 --- a/src/types/ebpf.d.ts +++ b/src/types/ebpf.d.ts @@ -65,6 +65,8 @@ export type StackElement = { stackType: string; value: number; children?: StackElement[]; + rateOfRoot?: string; + rateOfParent: string; }; export type AnalyzationTrees = { id: string; diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue index 7609aba8..d58dfe91 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue +++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue @@ -173,7 +173,7 @@ async function analyzeEBPF() { timeRanges, aggregateType: aggregateType.value, }); - if (res.data.errors) { + if (res.data && res.data.errors) { ElMessage.error(res.data.errors); return; } diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue index b69d62f6..9d8b6ab9 100644 --- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue +++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue @@ -30,6 +30,7 @@ import "d3-flame-graph/dist/d3-flamegraph.css"; /*global Nullable*/ const ebpfStore = useEbpfStore(); const stackTree = ref>(null); +const selectStack = ref>(null); const graph = ref>(null); const flameChart = ref(null); const min = ref(1); @@ -52,6 +53,8 @@ function drawGraph() { symbol: "Virtual Root", dumpCount: 0, stackType: "", + rateOfRoot: "", + rateOfParent: "", }; countRange(); for (const tree of ebpfStore.analyzeTrees) { @@ -81,18 +84,36 @@ function drawGraph() { .title("") .selfValue(false) .inverted(true) + .onClick((d: { data: StackElement }) => { + selectStack.value = d.data; + }) .setColorMapper((d, originalColor) => d.highlight ? "#6aff8f" : originalColor ); const tip = (d3tip as any)() .attr("class", "d3-tip") .direction("w") - .html((d: { data: StackElement }) => { + .html((d: { data: StackElement } & { parent: { data: StackElement } }) => { + const name = d.data.name.replace("<", "<").replace(">", ">"); const valStr = ebpfStore.aggregateType === AggregateTypes[0].value ? `
Dump Count: ${d.data.dumpCount}
` : `
Duration: ${d.data.dumpCount} ns
`; - return `
Symbol: ${d.data.name}
${valStr}`; + const rateOfParent = + (d.parent && + `
Percentage Of Selected: ${ + ( + (d.data.dumpCount / + ((selectStack.value && selectStack.value.dumpCount) || + root.dumpCount)) * + 100 + ).toFixed(3) + "%" + }
`) || + ""; + const rateOfRoot = `
Percentage Of Root: ${ + ((d.data.dumpCount / root.dumpCount) * 100).toFixed(3) + "%" + }
`; + return `
Symbol: ${name}
${valStr}${rateOfParent}${rateOfRoot}`; }) .style("max-width", "500px"); flameChart.value.tooltip(tip); @@ -122,6 +143,7 @@ function processTree(arr: StackElement[]) { obj[item.originId] = item; } const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]); + for (const item of copyArr) { if (item.parentId === "1") { const val = Number(scale(item.dumpCount).toFixed(4));