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

add multiple tree

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-12 20:47:09 +08:00
parent a052d69f36
commit e2ca2e9f12
2 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -153,7 +153,7 @@ export const ebpfStore = defineStore({
this.analyzeTrees = []; this.analyzeTrees = [];
return res.data; return res.data;
} }
this.analyzeTrees = analysisEBPFResult.trees[0].elements; this.analyzeTrees = analysisEBPFResult.trees;
return res.data; return res.data;
}, },
}, },

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

@ -18,7 +18,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch, computed } from "vue";
import * as d3 from "d3"; import * as d3 from "d3";
import d3tip from "d3-tip"; import d3tip from "d3-tip";
import { flamegraph } from "d3-flame-graph"; import { flamegraph } from "d3-flame-graph";
@ -31,6 +31,8 @@ const ebpfStore = useEbpfStore();
const stackTree = ref<Nullable<StackElement>>(null); const stackTree = ref<Nullable<StackElement>>(null);
const graph = ref<Nullable<HTMLDivElement>>(null); const graph = ref<Nullable<HTMLDivElement>>(null);
const flameChart = ref<any>(null); const flameChart = ref<any>(null);
const min = ref<number>(1);
const max = ref<number>(1);
function drawGraph() { function drawGraph() {
if (flameChart.value) { if (flameChart.value) {
@ -39,8 +41,33 @@ function drawGraph() {
if (!ebpfStore.analyzeTrees.length) { if (!ebpfStore.analyzeTrees.length) {
return (stackTree.value = null); return (stackTree.value = null);
} }
stackTree.value = processTree(ebpfStore.analyzeTrees); const root: StackElement = {
parentId: "0",
originId: "1",
name: "Virtual Root",
children: [],
value: 0,
id: "1",
symbol: "Virtual Root",
dumpCount: 0,
stackType: "",
};
countRange();
for (const tree of ebpfStore.analyzeTrees) {
const ele = processTree(tree.elements);
root.children && root.children.push(ele);
}
const param = (root.children || []).reduce(
(prev: number[], curr: StackElement) => {
prev[0] += curr.value;
prev[1] += curr.dumpCount;
return prev;
},
[0, 0]
);
root.value = param[0];
root.dumpCount = param[1];
stackTree.value = root;
const w = (graph.value && graph.value.getBoundingClientRect().width) || 10; const w = (graph.value && graph.value.getBoundingClientRect().width) || 10;
flameChart.value = flamegraph() flameChart.value = flamegraph()
.width(w - 15) .width(w - 15)
@ -65,27 +92,31 @@ function drawGraph() {
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value); d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
} }
function countRange() {
const list = [];
for (const tree of ebpfStore.analyzeTrees) {
for (const ele of tree.elements) {
list.push(ele.dumpCount);
}
}
max.value = Math.max(...list);
min.value = Math.min(...list);
}
function processTree(arr: StackElement[]) { function processTree(arr: StackElement[]) {
const copyArr = JSON.parse(JSON.stringify(arr)); const copyArr = (window as any).structuredClone(arr);
const obj: any = {}; const obj: any = {};
let res = null; let res = null;
let min = 1;
let max = 1;
for (const item of copyArr) { for (const item of copyArr) {
item.originId = item.id; item.parentId = String(Number(item.parentId) + 1);
item.originId = String(Number(item.id) + 1);
item.name = item.symbol; item.name = item.symbol;
delete item.id; delete item.id;
obj[item.originId] = item; obj[item.originId] = item;
if (item.dumpCount > max) {
max = item.dumpCount;
}
if (item.dumpCount < min) {
min = item.dumpCount;
}
} }
const scale = d3.scaleLinear().domain([min, max]).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 === "0") { if (item.parentId === "1") {
const val = Number(scale(item.dumpCount).toFixed(4)); const val = Number(scale(item.dumpCount).toFixed(4));
res = item; res = item;
res.value = val; res.value = val;