github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-14 17:05:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

update tooltips

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-26 11:20:41 +08:00
parent f445c5e6c8
commit c2a7f842c8
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/store/modules/ebpf.ts
View File

@ -35,6 +35,7 @@ interface EbpfStore {
couldProfiling: boolean;
tip: string;
selectedTask: Recordable<EBPFTaskList>;
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({}));
}

12
src/views/dashboard/related/ebpf/components/EBPFStack.vue
View File

@ -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 }) =>
`<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
)
.html((d: { data: StackElement }) => {
const valStr =
ebpfStore.aggregateType === AggregateTypes[0].value
? `<div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
: `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`;
return `<div class="mb-5 name">Symbol: ${d.data.name}</div>${valStr}`;
})
.style("max-width", "500px");
flameChart.value.tooltip(tip);
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);