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

update tooltip content

Browse Source
This commit is contained in:
Fine 2024-11-28 15:34:16 +08:00
parent 545e02f67c
commit c2e551e13e
4 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/related/async-profiling/Content.vue
View File

@ -33,7 +33,7 @@ limitations under the License. -->
import TaskList from "./components/TaskList.vue";
import Filter from "./components/Filter.vue";
import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
import { ComponentType } from "@/views/dashboard/related/ebpf/components/data";
import { ComponentType } from "./components/data";
const asyncProfilingStore = useAsyncProfilingStore();
const selectorStore = useSelectorStore();

11
src/views/dashboard/related/async-profiling/components/data.ts
View File

@ -38,3 +38,14 @@ export enum EventsMap {
LOCK = "JAVA_MONITOR_ENTER",
ALLOC = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
}
export enum JFREventType {
EXECUTION_SAMPLE = "EXECUTION_SAMPLE",
JAVA_MONITOR_ENTER = "JAVA_MONITOR_ENTER",
THREAD_PARK = "THREAD_PARK",
OBJECT_ALLOCATION_IN_NEW_TLAB = "OBJECT_ALLOCATION_IN_NEW_TLAB",
OBJECT_ALLOCATION_OUTSIDE_TLAB = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
PROFILER_LIVE_OBJECT = "PROFILER_LIVE_OBJECT",
}
export const ComponentType = "ASYNC_PROFILING";

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

@ -25,7 +25,8 @@ limitations under the License. -->
import { useEbpfStore } from "@/store/modules/ebpf";
import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
import type { StackElement } from "@/types/ebpf";
import { AggregateTypes, ComponentType } from "./data";
import { AggregateTypes } from "./data";
import { JFREventType, ComponentType } from "@/views/dashboard/related/async-profiling/components/data";
import "d3-flame-graph/dist/d3-flamegraph.css";
import { treeForeach } from "@/utils/flameGraph";
@ -101,10 +102,7 @@ limitations under the License. -->
.direction("s")
.html((d: { data: StackElement } & { parent: { data: StackElement } }) => {
const name = d.data.name.replace("<", "&lt;").replace(">", "&gt;");
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>`;
const valStr = tooltipContent(d.data);
const rateOfParent =
(d.parent &&
`<div class="mb-5">Percentage Of Selected: ${
@ -124,6 +122,26 @@ limitations under the License. -->
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
}
function tooltipContent(item: StackElement) {
if (props.type === ComponentType) {
if (!ebpfStore.analyzeTrees.length) {
return;
}
const { type } = ebpfStore.analyzeTrees[0];
if ([JFREventType.JAVA_MONITOR_ENTER, JFREventType.THREAD_PARK].includes(type)) {
return `<div class="mb-5">Duration: ${item.dumpCount} ms</div>`;
}
if (type === JFREventType.EXECUTION_SAMPLE) {
return `<div class="mb-5">Count: ${item.dumpCount}</div>`;
}
return `<div class="mb-5">Memory: ${item.dumpCount} byte</div>`;
}
ebpfStore.aggregateType === AggregateTypes[0].value
? `<div class="mb-5">Dump Count: ${item.dumpCount}</div>`
: `<div class="mb-5">Duration: ${item.dumpCount} ns</div>`;
}
function countRange() {
const list = [];
for (const tree of ebpfStore.analyzeTrees) {

2
src/views/dashboard/related/ebpf/components/data.ts
View File

@ -57,5 +57,3 @@ export const TableHeader = [
{ property: "name", label: "Name" },
{ property: "instanceName", label: "Instance Name" },
];
export const ComponentType = "ASYNC_PROFILING";