fix stack graph

src/store/modules/ebpf.ts

@@ -118,10 +118,9 @@ export const ebpfStore = defineStore({
       this.eBPFSchedules = eBPFSchedules;
       if (!eBPFSchedules.length) {
         this.eBPFSchedules = [];
-        this.analyzeTrees = [];
-
         return res.data;
       }
+      this.analyzeTrees = [];
       return res.data;
     },
     async getEBPFAnalyze(params: {
@@ -136,13 +135,12 @@ export const ebpfStore = defineStore({
         this.analyzeTrees = [];
         return res.data;
       }
-      const { analysisEBPFResult, tip } = res.data.data;
-      if (tip) {
+      const { analysisEBPFResult } = res.data.data;
+      if (!analysisEBPFResult) {
         this.analyzeTrees = [];
         return res.data;
       }
-
-      if (!analysisEBPFResult) {
+      if (analysisEBPFResult.tip) {
         this.analyzeTrees = [];
         return res.data;
       }

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

@@ -17,9 +17,11 @@ limitations under the License. -->
     <TaskList />
     <div class="vis-graph ml-5">
       <EBPFSchedules />
+      <div class="stack">
         <EBPFStack />
       </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import TaskList from "./components/TaskList.vue";
@@ -36,4 +38,9 @@ import EBPFStack from "./components/EBPFStack.vue";
   height: 100%;
   width: calc(100% - 300px);
 }
+
+.stack {
+  width: 100%;
+  overflow: auto;
+}
 </style>

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

@@ -78,7 +78,7 @@ const labels = ref<Option[]>([{ label: "All", value: "0" }]);
 const processes = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(date).format(pattern);
+  new Date(dayjs(date).format(pattern));
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);
@@ -131,7 +131,7 @@ async function analyzeEBPF() {
     return;
   }
   if (res.data.analysisEBPFResult.tip) {
-    ElMessage.info(res.data.analysisEBPFResult.tip);
+    ElMessage.error(res.data.analysisEBPFResult.tip);
   }
 }
 
@@ -158,6 +158,8 @@ function visTimeline() {
   const items: any = new DataSet(schedules);
   const options = {
     height: 250,
+    width: "100%",
+    locale: "en",
   };
   if (!timeline.value) {
     return;

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

@@ -81,10 +81,12 @@ function processTree(arr: StackElement[]) {
       min = item.dumpCount;
     }
   }
-  const scale = d3.scaleLinear().domain([min, max]).range([1, 150]);
+  const scale = d3.scaleLinear().domain([min, max]).range([1, 200]);
   for (const item of copyArr) {
     if (item.parentId === "0") {
+      const val = Number(scale(item.dumpCount).toFixed(4));
       res = item;
+      res.value = val;
     }
     for (const key in obj) {
       if (item.originId === obj[key].parentId) {
@@ -105,9 +107,10 @@ function processTree(arr: StackElement[]) {
       for (const child of node.children) {
         val = child.value + val;
       }
-      node.value = val;
+      node.value = node.value < val ? val : node.value;
     }
   });
+
   return res;
 }