From 784c2e97b820a31cc3a13cb36dda3d0f6c038d8d Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Thu, 12 May 2022 20:57:37 +0800
Subject: [PATCH] feat: support multiple trees for the flame graph (#86)

---
 src/store/modules/ebpf.ts                     |  2 +-
 src/views/components/ConditionTags.vue        | 10 ++-
 .../related/ebpf/components/EBPFStack.vue     | 61 ++++++++++++++-----
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/ebpf.ts b/src/store/modules/ebpf.ts
index 897abf12..c27adcf7 100644
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -153,7 +153,7 @@ export const ebpfStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      this.analyzeTrees = analysisEBPFResult.trees[0].elements;
+      this.analyzeTrees = analysisEBPFResult.trees;
       return res.data;
     },
   },
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index c85ada38..34e60fa4 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -78,11 +78,12 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { useLogStore } from "@/store/modules/log";
 import { ElMessage } from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 /*global Nullable, defineEmits, defineProps */
 const emit = defineEmits(["update"]);
@@ -91,6 +92,7 @@ const props = defineProps({
 });
 const traceStore = useTraceStore();
 const logStore = useLogStore();
+const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const tags = ref<string>("");
 const tagsList = ref<string[]>([]);
@@ -176,6 +178,12 @@ function showClick() {
     dropdownTag.value.handleOpen();
   }
 }
+watch(
+  () => appStore.durationTime,
+  () => {
+    fetchTagKeys();
+  }
+);
 </script>
 <style lang="scss" scoped>
 .trace-tags {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index d2776e3a..1e3532d6 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import { flamegraph } from "d3-flame-graph";
@@ -31,6 +31,8 @@ const ebpfStore = useEbpfStore();
 const stackTree = ref<Nullable<StackElement>>(null);
 const graph = ref<Nullable<HTMLDivElement>>(null);
 const flameChart = ref<any>(null);
+const min = ref<number>(1);
+const max = ref<number>(1);
 
 function drawGraph() {
   if (flameChart.value) {
@@ -39,8 +41,33 @@ function drawGraph() {
   if (!ebpfStore.analyzeTrees.length) {
     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;
   flameChart.value = flamegraph()
     .width(w - 15)
@@ -65,27 +92,31 @@ function drawGraph() {
   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[]) {
-  const copyArr = JSON.parse(JSON.stringify(arr));
+  const copyArr = (window as any).structuredClone(arr);
   const obj: any = {};
   let res = null;
-  let min = 1;
-  let max = 1;
   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;
     delete item.id;
     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) {
-    if (item.parentId === "0") {
+    if (item.parentId === "1") {
       const val = Number(scale(item.dumpCount).toFixed(4));
       res = item;
       res.value = val;