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; couldProfiling: boolean;
tip: string; tip: string;
selectedTask: Recordable<EBPFTaskList>; selectedTask: Recordable<EBPFTaskList>;
aggregateType: string;
} }
export const ebpfStore = defineStore({ export const ebpfStore = defineStore({
@ -48,6 +49,7 @@ export const ebpfStore = defineStore({
couldProfiling: false, couldProfiling: false,
tip: "", tip: "",
selectedTask: {}, selectedTask: {},
aggregateType: "COUNT",
}), }),
actions: { actions: {
setSelectedTask(task: EBPFTaskList) { setSelectedTask(task: EBPFTaskList) {
@ -131,6 +133,7 @@ export const ebpfStore = defineStore({
timeRanges: Array<{ start: number; end: number }>; timeRanges: Array<{ start: number; end: number }>;
aggregateType: string; aggregateType: string;
}) { }) {
this.aggregateType = params.aggregateType;
if (!params.scheduleIdList.length) { if (!params.scheduleIdList.length) {
return new Promise((resolve) => resolve({})); 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 { flamegraph } from "d3-flame-graph";
import { useEbpfStore } from "@/store/modules/ebpf"; import { useEbpfStore } from "@/store/modules/ebpf";
import { StackElement } from "@/types/ebpf"; import { StackElement } from "@/types/ebpf";
import { AggregateTypes } from "./data";
import "d3-flame-graph/dist/d3-flamegraph.css"; import "d3-flame-graph/dist/d3-flamegraph.css";
/*global Nullable*/ /*global Nullable*/
@ -86,10 +87,13 @@ function drawGraph() {
const tip = (d3tip as any)() const tip = (d3tip as any)()
.attr("class", "d3-tip") .attr("class", "d3-tip")
.direction("w") .direction("w")
.html( .html((d: { data: StackElement }) => {
(d: { data: StackElement }) => const valStr =
`<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>` 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"); .style("max-width", "500px");
flameChart.value.tooltip(tip); flameChart.value.tooltip(tip);
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value); d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);