fix: display errors and ready to CR

src/types/ebpf.d.ts

@@ -89,6 +89,8 @@ export type TraceProfilingElement = {
   children?: TraceProfilingElement[];
   rateOfRoot?: string;
   rateOfParent: string;
+  duration: number;
+  durationChildExcluded: number;
 };
 export type AnalyzationTrees = {
   id: string;

src/utils/flameGraph.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+
+export function treeForeach(tree: any, func: (node: any) => void) {
+  for (const data of tree) {
+    data.children && treeForeach(data.children, func);
+    func(data);
+  }
+  return tree;
+}

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

@@ -28,6 +28,7 @@ limitations under the License. -->
   import type { StackElement } from "@/types/ebpf";
   import { AggregateTypes } from "./data";
   import "d3-flame-graph/dist/d3-flamegraph.css";
+  import { treeForeach } from "@/utils/flameGraph";
 
   /*global Nullable, defineProps*/
   const props = defineProps({
@@ -180,14 +181,6 @@ limitations under the License. -->
     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,
     () => {

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

@@ -21,7 +21,7 @@ limitations under the License. -->
     <div class="item">
       <SpanTree @loading="loadTrees" @displayMode="setDisplayMode" />
       <div class="thread-stack">
-        <div id="graph-stack" ref="graph" />
+        <div id="graph-stack" ref="graph" v-show="displayMode == 'flame'" />
         <StackTable
           v-show="displayMode == 'tree'"
           v-if="profileStore.analyzeTrees.length"
@@ -47,7 +47,7 @@ limitations under the License. -->
   import { flamegraph } from "d3-flame-graph";
   import * as d3 from "d3";
   import d3tip from "d3-tip";
-  import { AggregateTypes } from "@/views/dashboard/related/ebpf/components/data";
+  import { treeForeach } from "@/utils/flameGraph";
   const stackTree = ref<Nullable<TraceProfilingElement>>(null);
   const selectStack = ref<Nullable<TraceProfilingElement>>(null);
   const graph = ref<Nullable<HTMLDivElement>>(null);
@@ -84,6 +84,8 @@ limitations under the License. -->
       stackType: "",
       rateOfRoot: "",
       rateOfParent: "",
+      duration: 0,
+      durationChildExcluded: 0,
     };
     countRange();
     for (const tree of profileStore.analyzeTrees) {
@@ -122,10 +124,9 @@ limitations under the License. -->
       .direction("s")
       .html((d: { data: TraceProfilingElement } & { parent: { data: TraceProfilingElement } }) => {
         const name = d.data.name.replace("<", "&lt;").replace(">", "&gt;");
-        const valStr =
+        const dumpCount = `<div class="mb-5">Dump Count: ${d.data.count}</div>`;
-          profileStore.aggregateType === AggregateTypes[0].value
+        const duration = `<div class="mb-5">Duration: ${d.data.duration} ns</div>`;
-            ? `<div class="mb-5">Dump Count: ${d.data.count}</div>`
+        const durationChildExcluded = `<div class="mb-5">DurationChildExcluded: ${d.data.durationChildExcluded} ns</div>`;
-            : `<div class="mb-5">Duration: ${d.data.count} ns</div>`;
         const rateOfParent =
           (d.parent &&
             `<div class="mb-5">Percentage Of Selected: ${
@@ -135,7 +136,7 @@ limitations under the License. -->
         const rateOfRoot = `<div class="mb-5">Percentage Of Root: ${
           ((d.data.count / root.count) * 100).toFixed(3) + "%"
         }</div>`;
-        return `<div class="mb-5 name">CodeSignature: ${name}</div>${valStr}${rateOfParent}${rateOfRoot}`;
+        return `<div class="mb-5 name">CodeSignature: ${name}</div>${dumpCount}${duration}${durationChildExcluded}${rateOfParent}${rateOfRoot}`;
       })
       .style("max-width", "400px");
     flameChart.value.tooltip(tip);
@@ -198,14 +199,6 @@ limitations under the License. -->
     return res;
   }
 
-  function treeForeach(tree: TraceProfilingElement[], func: (node: TraceProfilingElement) => void) {
-    for (const data of tree) {
-      data.children && treeForeach(data.children, func);
-      func(data);
-    }
-    return tree;
-  }
-
   watch(
     () => profileStore.analyzeTrees,
     () => {

src/views/dashboard/related/profile/components/SpanTree.vue

@@ -21,7 +21,7 @@ limitations under the License. -->
         size="small"
         :value="dataMode"
         :options="ProfileDataMode"
-        placeholder="Select whether the data contains Children"
+        placeholder="Please select a profile data mode"
         @change="spanModeChange"
         class="mr-10"
       />
@@ -29,7 +29,7 @@ limitations under the License. -->
         size="small"
         :value="displayMode"
         :options="ProfileDisplayMode"
-        placeholder="Select how to display the profiling data"
+        placeholder="Please select a profile display mode"
         @change="selectDisplayMode"
         class="mr-10"
       />

src/views/dashboard/related/profile/components/data.ts

@@ -14,14 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const ProfileDataMode: any[] = [
+export const ProfileDataMode = [
   { label: "Include Children", value: "include" },
   { label: "Exclude Children", value: "exclude" },
-];
+] as const;
-export const ProfileDisplayMode: any[] = [
+export const ProfileDisplayMode = [
   { label: "Tree Graph", value: "tree" },
   { label: "Flame Graph", value: "flame" },
-];
+] as const;
 export const NewTaskField = {
   service: { key: "", label: "None" },
   monitorTime: { key: "0", label: "monitor now" },