feat: update ebpf graph

src/store/modules/continous-profiling.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
@@ -137,8 +138,6 @@ export const continousProfilingStore = defineStore({
         return res.data;
       }
       this.taskList = res.data.data.queryEBPFTasks || [];
-      this.selectedTask = this.taskList[0] || {};
-      this.setselectedTask(this.selectedTask);
       if (!this.taskList.length) {
         const networkProfilingStore = useNetworkProfilingStore();
         networkProfilingStore.seNodes([]);
@@ -146,6 +145,9 @@ export const continousProfilingStore = defineStore({
         this.eBPFSchedules = [];
         this.analyzeTrees = [];
       }
+      this.selectedTask = this.taskList[0] || {};
+      this.setselectedTask(this.selectedTask);
+      this.preAnalyzeTask();
       return res.data;
     },
     async getServiceInstances(serviceId: string): Promise<Nullable<AxiosResponse>> {
@@ -178,6 +180,7 @@ export const continousProfilingStore = defineStore({
       if (!params.taskId) {
         return new Promise((resolve) => resolve({}));
       }
+      params.taskId = "71d96efb81b0be93b1322be1b17334c87d45d6216e299504a778264f94692d1b";
       const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
 
       if (res.data.errors) {
@@ -225,6 +228,19 @@ export const continousProfilingStore = defineStore({
       this.analyzeTrees = analysisEBPFResult.trees;
       return res.data;
     },
+    async preAnalyzeTask() {
+      if (this.selectedStrategy.type === "NETWORK") {
+        const networkProfilingStore = useNetworkProfilingStore();
+        await networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
+        return;
+      }
+      const res = await this.getEBPFSchedules({
+        taskId: this.selectedTask.taskId,
+      });
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
   },
 });
 

src/views/dashboard/related/continuous-profiling/Content.vue

@@ -40,24 +40,4 @@ limitations under the License. -->
     height: calc(100% - 30px);
     width: 100%;
   }
-
-  .vis-graph {
-    height: 100%;
-    flex-grow: 2;
-    min-width: 700px;
-    overflow: auto;
-  }
-
-  .item {
-    width: 100%;
-    overflow: auto;
-    height: calc(100% - 100px);
-    padding-bottom: 10px;
-  }
-
-  .schedules {
-    height: 90px;
-    border-bottom: 1px solid #ccc;
-    padding-right: 10px;
-  }
 </style>

src/views/dashboard/related/continuous-profiling/components/EBPFStack.vue

@@ -0,0 +1,211 @@
+<!-- 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 id="graph-stack" ref="graph">
+    <span class="tip" v-show="ebpfStore.tip">{{ ebpfStore.tip }}</span>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from "vue";
+  import * as d3 from "d3";
+  import d3tip from "d3-tip";
+  import { flamegraph } from "d3-flame-graph";
+  import { useEbpfStore } from "@/store/modules/ebpf";
+  import type { StackElement } from "@/types/ebpf";
+  import "d3-flame-graph/dist/d3-flamegraph.css";
+
+  /*global Nullable*/
+  const ebpfStore = useEbpfStore();
+  const stackTree = ref<Nullable<StackElement>>(null);
+  const selectStack = 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);
+  const AggregateTypes = [
+    { label: "Count", value: "COUNT" },
+    { label: "Duration", value: "DURATION" },
+  ];
+
+  function drawGraph() {
+    if (flameChart.value) {
+      flameChart.value.destroy();
+    }
+    if (!ebpfStore.analyzeTrees.length) {
+      return (stackTree.value = null);
+    }
+    const root: StackElement = {
+      parentId: "0",
+      originId: "1",
+      name: "Virtual Root",
+      children: [],
+      value: 0,
+      id: "1",
+      symbol: "Virtual Root",
+      dumpCount: 0,
+      stackType: "",
+      rateOfRoot: "",
+      rateOfParent: "",
+    };
+    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 width = (graph.value && graph.value.getBoundingClientRect().width) || 0;
+    const w = width < 800 ? 802 : width;
+    flameChart.value = flamegraph()
+      .width(w - 15)
+      .cellHeight(18)
+      .transitionDuration(750)
+      .minFrameSize(1)
+      .transitionEase(d3.easeCubic as any)
+      .sort(true)
+      .title("")
+      .selfValue(false)
+      .inverted(true)
+      .onClick((d: { data: StackElement }) => {
+        selectStack.value = d.data;
+      })
+      .setColorMapper((d, originalColor) => (d.highlight ? "#6aff8f" : originalColor));
+    const tip = (d3tip as any)()
+      .attr("class", "d3-tip")
+      .direction("w")
+      .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 rateOfParent =
+          (d.parent &&
+            `<div class="mb-5">Percentage Of Selected: ${
+              (
+                (d.data.dumpCount / ((selectStack.value && selectStack.value.dumpCount) || root.dumpCount)) *
+                100
+              ).toFixed(3) + "%"
+            }</div>`) ||
+          "";
+        const rateOfRoot = `<div class="mb-5">Percentage 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");
+    flameChart.value.tooltip(tip);
+    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 obj: any = {};
+    let res = null;
+    for (const item of copyArr) {
+      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;
+    }
+    const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
+
+    for (const item of copyArr) {
+      if (item.parentId === "1") {
+        const val = Number(scale(item.dumpCount).toFixed(4));
+        res = item;
+        res.value = val;
+      }
+      for (const key in obj) {
+        if (item.originId === obj[key].parentId) {
+          const val = Number(scale(obj[key].dumpCount).toFixed(4));
+
+          obj[key].value = val;
+          if (item.children) {
+            item.children.push(obj[key]);
+          } else {
+            item.children = [obj[key]];
+          }
+        }
+      }
+    }
+    treeForeach([res], (node: StackElement) => {
+      if (node.children) {
+        let val = 0;
+        for (const child of node.children) {
+          val = child.value + val;
+        }
+        node.value = node.value < val ? val : node.value;
+      }
+    });
+
+    return res;
+  }
+
+  function treeForeach(tree: StackElement[], func: (node: StackElement) => void) {
+    for (const data of tree) {
+      data.children && treeForeach(data.children, func);
+      func(data);
+    }
+    return tree;
+  }
+
+  watch(
+    () => ebpfStore.analyzeTrees,
+    () => {
+      drawGraph();
+    },
+  );
+</script>
+<style>
+  #graph-stack {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .tip {
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    color: red;
+    margin-top: 20px;
+  }
+
+  .name {
+    word-wrap: break-word;
+  }
+</style>

src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue

@@ -34,15 +34,15 @@ limitations under the License. -->
         placeholder="Select a process"
         @change="changeProcess"
       />
-      <el-button type="primary" size="small" @click="analyzeTask">
+      <!-- <el-button type="primary" size="small" @click="analyzeTask">
         {{ t("analysis") }}
-      </el-button>
+      </el-button> -->
     </div>
-    <div v-if="continousProfilingStore.selectedTask.type">
+    <div v-if="continousProfilingStore.selectedStrategy.type">
       <div
         class="vis-graph-topology ml-5"
         v-loading="networkProfilingStore.loadNodes"
-        v-if="continousProfilingStore.selectedTask.type === TargetTypes[2].value"
+        v-if="continousProfilingStore.selectedStrategy.type === TargetTypes[2].value"
       >
         <process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
         <div class="text" v-else>
@@ -64,17 +64,13 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  import { ElMessage } from "element-plus";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
-  import { useAppStoreWithOut } from "@/store/modules/app";
   import ProcessTopology from "@/views/dashboard/related/network-profiling/components/ProcessTopology.vue";
   import EBPFSchedules from "@/views/dashboard/related/ebpf/components/EBPFSchedules.vue";
   import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
   import { TargetTypes, ComponentType } from "../data";
-  import dateFormatStep from "@/utils/dateFormat";
-  import getLocalTime from "@/utils/localtime";
 
   /*global defineProps */
   defineProps({
@@ -85,7 +81,6 @@ limitations under the License. -->
   });
   const continousProfilingStore = useContinousProfilingStore();
   const networkProfilingStore = useNetworkProfilingStore();
-  const appStore = useAppStoreWithOut();
   const selectorStore = useSelectorStore();
   const { t } = useI18n();
   const processId = ref<string>("");
@@ -99,43 +94,6 @@ limitations under the License. -->
     processId.value = opt[0].id;
   }
 
-  async function analyzeTask() {
-    if (continousProfilingStore.selectedTask.type === TargetTypes[2].value) {
-      await networkProfilingStore.setSelectedNetworkTask(continousProfilingStore.selectedTask);
-      await getTopology();
-
-      return;
-    }
-    const res = await continousProfilingStore.getEBPFSchedules({
-      taskId: continousProfilingStore.selectedTask.taskId,
-    });
-    if (res.errors) {
-      ElMessage.error(res.errors);
-    }
-  }
-
-  async function getTopology() {
-    const { taskStartTime, fixedTriggerDuration } = networkProfilingStore.selectedNetworkTask;
-    const startTime =
-      fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
-    let endTime = taskStartTime + fixedTriggerDuration * 1000;
-    if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
-      endTime = new Date().getTime();
-    }
-    const resp = await networkProfilingStore.getProcessTopology({
-      serviceInstanceId: instanceId.value,
-      duration: {
-        start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
-        end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
-        step: appStore.duration.step,
-      },
-    });
-    if (resp.errors) {
-      ElMessage.error(resp.errors);
-    }
-    return resp;
-  }
-
   async function getSelectors() {
     const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";
 
@@ -174,11 +132,17 @@ limitations under the License. -->
   }
 
   .vis-graph-topology {
-    height: 100%;
+    height: calc(100% - 20px);
     flex-grow: 2;
     min-width: 700px;
     overflow: hidden;
     position: relative;
     width: calc(100% - 330px);
   }
+
+  .policy-graph {
+    height: calc(100% - 20px);
+    flex-grow: 2;
+    overflow: auto;
+  }
 </style>

src/views/dashboard/related/continuous-profiling/components/PolicyList.vue

@@ -144,7 +144,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .profile-task-list {
     width: 300px;
-    height: calc(100% - 10px);
+    height: 48%;
     overflow: auto;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }

src/views/dashboard/related/continuous-profiling/components/TaskList.vue

@@ -60,10 +60,15 @@ limitations under the License. -->
 <script lang="ts" setup>
   // import { ref } from "vue";
   import { useI18n } from "vue-i18n";
-  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import type { EBPFTaskList } from "@/types/ebpf";
   // import TaskDetails from "../../components/TaskDetails.vue";
   import { dateFormat } from "@/utils/dateFormat";
+  import { ElMessage } from "element-plus";
+  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+  import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
+  import { TargetTypes } from "../data";
+  import dateFormatStep from "@/utils/dateFormat";
+  import getLocalTime from "@/utils/localtime";
 
   const { t } = useI18n();
   const continousProfilingStore = useContinousProfilingStore();
@@ -71,8 +76,31 @@ limitations under the License. -->
 
   async function changeTask(item: EBPFTaskList) {
     continousProfilingStore.setselectedTask(item);
+    continousProfilingStore.preAnalyzeTask();
   }
 
+  // async function getTopology() {
+  //   const { taskStartTime, fixedTriggerDuration } = networkProfilingStore.selectedNetworkTask;
+  //   const startTime =
+  //     fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
+  //   let endTime = taskStartTime + fixedTriggerDuration * 1000;
+  //   if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
+  //     endTime = new Date().getTime();
+  //   }
+  //   const resp = await networkProfilingStore.getProcessTopology({
+  //     serviceInstanceId: instanceId.value,
+  //     duration: {
+  //       start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
+  //       end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
+  //       step: appStore.duration.step,
+  //     },
+  //   });
+  //   if (resp.errors) {
+  //     ElMessage.error(resp.errors);
+  //   }
+  //   return resp;
+  // }
+
   function getURI(uri: { uriRegex: string; uriPath: string }) {
     return uri ? `(${uri.uriRegex || ""} | ${uri.uriPath || ""})` : "";
   }
@@ -80,7 +108,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .profile-task-list {
     width: 300px;
-    height: calc(100% - 10px);
+    height: 48%;
     overflow: auto;
     border-right: 1px solid rgba(0, 0, 0, 0.1);
   }

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

@@ -42,7 +42,7 @@ limitations under the License. -->
       />
       <el-popover placement="bottom" :width="680" trigger="click" :persistent="false">
         <template #reference>
-          <el-button type="primary" size="small">
+          <el-button size="small">
             {{ t("processSelect") }}
           </el-button>
         </template>