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

add rates

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-30 16:59:41 +08:00
parent 74cb089271
commit 4f05b20f74
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/types/ebpf.d.ts vendored
View File

@ -65,6 +65,8 @@ export type StackElement = {
stackType: string; stackType: string;
value: number; value: number;
children?: StackElement[]; children?: StackElement[];
rateOfRoot?: string;
rateOfParent: string;
}; };
export type AnalyzationTrees = { export type AnalyzationTrees = {
id: string; id: string;

2
src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
View File

@ -173,7 +173,7 @@ async function analyzeEBPF() {
timeRanges, timeRanges,
aggregateType: aggregateType.value, aggregateType: aggregateType.value,
}); });
if (res.data.errors) { if (res.data && res.data.errors) {
ElMessage.error(res.data.errors); ElMessage.error(res.data.errors);
return; return;
} }

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

@ -52,6 +52,8 @@ function drawGraph() {
symbol: "Virtual Root", symbol: "Virtual Root",
dumpCount: 0, dumpCount: 0,
stackType: "", stackType: "",
rateOfRoot: "",
rateOfParent: "",
}; };
countRange(); countRange();
for (const tree of ebpfStore.analyzeTrees) { for (const tree of ebpfStore.analyzeTrees) {
@ -87,12 +89,27 @@ 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((d: { data: StackElement }) => { .html((d: { data: StackElement } & { parent: { data: StackElement } }) => {
const name = d.data.name.replace("<", "&lt;").replace(">", "&gt;");
const valStr = const valStr =
ebpfStore.aggregateType === AggregateTypes[0].value ebpfStore.aggregateType === AggregateTypes[0].value
? `<div class="mb-5">Dump Count: ${d.data.dumpCount}</div>` ? `<div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
: `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`; : `<div class="mb-5">Duration: ${d.data.dumpCount} ns</div>`;
return `<div class="mb-5 name">Symbol: ${d.data.name}</div>${valStr}`; const rateOfParent =
(d.parent &&
`<div class="mb-5">Rate Of Parent: ${
((d.data.dumpCount / d.parent.data.dumpCount) * 100).toFixed(3) +
"%"
}</div>`) ||
"";
const rateOfRoot =
(d.parent &&
`<div class="mb-5">Rate Of Root: ${
((d.data.dumpCount / root.dumpCount) * 100).toFixed(3) + "%"
}</div>`) ||
"";
return `<div class="mb-5 name">Symbol: ${name}</div>${valStr}${rateOfParent}${rateOfRoot}`;
}) })
.style("max-width", "500px"); .style("max-width", "500px");
flameChart.value.tooltip(tip); flameChart.value.tooltip(tip);
@ -122,6 +139,7 @@ function processTree(arr: StackElement[]) {
obj[item.originId] = item; obj[item.originId] = item;
} }
const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]); const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
for (const item of copyArr) { for (const item of copyArr) {
if (item.parentId === "1") { if (item.parentId === "1") {
const val = Number(scale(item.dumpCount).toFixed(4)); const val = Number(scale(item.dumpCount).toFixed(4));