Fix Async Profiling widget (#438)

src/views/dashboard/related/async-profiling/components/Filter.vue

@@ -43,14 +43,25 @@ limitations under the License. -->
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
   import type { Instance } from "@/types/selector";
   import type { Option } from "@/types/app";
-  import { EventsMap } from "./data";
+  import { EventsMap, ProfilingEvents, JFREventType } from "./data";
 
   const { t } = useI18n();
   const asyncProfilingStore = useAsyncProfilingStore();
   const serviceInstanceIds = ref<string[]>([]);
   const selectedEventType = ref<string>("");
   const eventTypes = computed(() =>
-    (asyncProfilingStore.selectedTask.events ?? []).map((d: string) => ({ label: d, value: d })),
+    (asyncProfilingStore.selectedTask.events ?? [])
+      .map((d: string) => {
+        if (d === ProfilingEvents[1]) {
+          return [
+            { label: JFREventType.OBJECT_ALLOCATION_IN_NEW_TLAB, value: JFREventType.OBJECT_ALLOCATION_IN_NEW_TLAB },
+            { label: JFREventType.OBJECT_ALLOCATION_OUTSIDE_TLAB, value: JFREventType.OBJECT_ALLOCATION_OUTSIDE_TLAB },
+          ];
+        }
+
+        return { label: d, value: d };
+      })
+      .flat(),
   );
   const instances = computed(() =>
     asyncProfilingStore.instances.filter((d: Instance) =>
@@ -98,7 +109,7 @@ limitations under the License. -->
   }
 
   .filter-events {
-    width: 200px;
+    width: 300px;
     margin-right: 10px;
   }
 </style>

src/views/dashboard/related/async-profiling/components/NewTask.vue

@@ -119,8 +119,8 @@ limitations under the License. -->
     duration.value = val;
   }
 
-  function changeInstances(options: Option[]) {
+  function changeInstances(options: { id: string }[]) {
-    serviceInstanceIds.value = options.map((d: Option) => d.value);
+    serviceInstanceIds.value = options.map((d: { id: string }) => d.id);
   }
 
   function disableEvents(item: string) {

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

@@ -54,7 +54,7 @@ limitations under the License. -->
       <div>
         <h5 class="mb-10">{{ t("task") }}.</h5>
         <div class="mb-10 clear item">
-          <span class="g-sm-4 grey">{{ t("id") }}:</span>
+          <span class="g-sm-4 grey">ID:</span>
           <span class="g-sm-8 wba">{{ asyncProfilingStore.selectedTask.id }}</span>
         </div>
         <div class="mb-10 clear item">
@@ -157,8 +157,10 @@ limitations under the License. -->
   }
 
   async function changeTask(item: TaskListItem) {
-    asyncProfilingStore.setSelectedTask(item);
+    if (item.id !== asyncProfilingStore.selectedTask.id) {
-    asyncProfilingStore.setAnalyzeTrees([]);
+      asyncProfilingStore.setAnalyzeTrees([]);
+      asyncProfilingStore.setSelectedTask(item);
+    }
     service.value = (selectorStore.services.filter((s: Service) => s.id === item.serviceId)[0] ?? {}).label;
     const res = await asyncProfilingStore.getTaskLogs({ taskId: item.id });
 

src/views/dashboard/related/async-profiling/components/data.ts

@@ -29,7 +29,8 @@ export enum EventsMap {
   CTIMER = "EXECUTION_SAMPLE",
   ITIMER = "EXECUTION_SAMPLE",
   LOCK = "LOCK",
-  ALLOC = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
+  OBJECT_ALLOCATION_IN_NEW_TLAB = "OBJECT_ALLOCATION_IN_NEW_TLAB",
+  OBJECT_ALLOCATION_OUTSIDE_TLAB = "OBJECT_ALLOCATION_OUTSIDE_TLAB",
 }
 
 export enum JFREventType {

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

@@ -52,7 +52,7 @@ limitations under the License. -->
     if (!ebpfStore.analyzeTrees.length) {
       return (stackTree.value = null);
     }
-    const root: StackElement = {
+    let root: StackElement = {
       parentId: "0",
       originId: "1",
       name: "Virtual Root",
@@ -66,21 +66,28 @@ limitations under the License. -->
       rateOfParent: "",
     };
     countRange();
-    for (const tree of ebpfStore.analyzeTrees) {
+    if (props.type === ComponentType) {
-      const ele = processTree(tree.elements);
+      const elements = processTree(ebpfStore.analyzeTrees[0].elements);
-      root.children && root.children.push(ele);
+      stackTree.value = elements;
+      root = { ...root, ...elements };
+    } else {
+      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 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()
@@ -165,9 +172,9 @@ limitations under the License. -->
       obj[item.originId] = item;
     }
     const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
-
+    const condition = props.type === ComponentType ? "0" : "1";
     for (const item of copyArr) {
-      if (item.parentId === "1") {
+      if (item.parentId === condition) {
         const val = Number(scale(item.dumpCount).toFixed(4));
         res = item;
         res.value = val;