process tree

src/store/modules/ebpf.ts

@@ -122,12 +122,6 @@ export const ebpfStore = defineStore({
 
         return res.data;
       }
-      // if (eBPFSchedules[0]) {
-      //   this.currentSchedule = eBPFSchedules[0];
-      //   this.getEBPFAnalyze({ scheduleIdList: eBPFSchedules[0].segmentId });
-      // } else {
-      //   this.currentSchedule = null;
-      // }
       return res.data;
     },
     async getEBPFAnalyze(params: {
@@ -142,17 +136,17 @@ export const ebpfStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      const { analyze, tip } = res.data.data;
+      const { analysisEBPFResult, tip } = res.data.data;
       if (tip) {
         this.analyzeTrees = [];
         return res.data;
       }
 
-      if (!analyze) {
+      if (!analysisEBPFResult) {
         this.analyzeTrees = [];
         return res.data;
       }
-      this.analyzeTrees = analyze.trees;
+      this.analyzeTrees = analysisEBPFResult.trees[0].elements;
       return res.data;
     },
   },

src/views/dashboard/related/ebpf/Content.vue

@@ -17,14 +17,14 @@ limitations under the License. -->
     <TaskList />
     <div class="vis-graph ml-5">
       <EBPFSchedules />
-      <EBPFTree />
+      <EBPFStack />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import TaskList from "./components/TaskList.vue";
 import EBPFSchedules from "./components/EBPFSchedules.vue";
-import EBPFTree from "./components/EBPFTree.vue";
+import EBPFStack from "./components/EBPFStack.vue";
 </script>
 <style lang="scss" scoped>
 .content {

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -65,7 +65,7 @@ import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
 import { DataSet, Timeline } from "vis-timeline/standalone";
 import "vis-timeline/styles/vis-timeline-graph2d.css";
-import type { ElTable } from "element-plus";
+import { ElMessage, ElTable } from "element-plus";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
@@ -133,6 +133,13 @@ async function analyzeEBPF() {
     scheduleIdList,
     timeRanges,
   });
+  if (res.data.errors) {
+    ElMessage.error(res.data.errors);
+    return;
+  }
+  if (res.data.analysisEBPFResult.tip) {
+    ElMessage.info(res.data.analysisEBPFResult.tip);
+  }
 }
 
 function visTimeline() {

src/views/dashboard/related/ebpf/components/EBPFStack.vue

@@ -0,0 +1,58 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div>tree</div>
+</template>
+<script lang="ts" setup>
+import { watch } from "vue";
+import { useEbpfStore } from "@/store/modules/ebpf";
+
+const ebpfStore = useEbpfStore();
+
+function sortArr(arr: any[]) {
+  const copyArr = JSON.parse(JSON.stringify(arr));
+  const obj: any = {};
+  const res = [];
+  for (const item of copyArr) {
+    obj[item.id] = item;
+  }
+  for (const item of copyArr) {
+    if (item.parentId === "0") {
+      item.name = item.symbol;
+      item.value = item.dumpCount;
+      res.push(item);
+    }
+    for (const key in obj) {
+      if (item.id === obj[key].parentId) {
+        obj[key].name = obj[key].symbol;
+        obj[key].value = obj[key].dumpCount;
+        if (item.children) {
+          item.children.push(obj[key]);
+        } else {
+          item.children = [obj[key]];
+        }
+      }
+    }
+  }
+  console.log(res);
+  return res;
+}
+watch(
+  () => ebpfStore.analyzeTrees,
+  () => {
+    sortArr(ebpfStore.analyzeTrees);
+  }
+);
+</script>

src/views/dashboard/related/ebpf/components/EBPFTree.vue

@@ -1,17 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License. -->
-<template>
-  <div>tree</div>
-</template>