fix

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

@@ -20,7 +20,7 @@ limitations under the License. -->
         <Filter />
       </div>
       <div class="stack">
-        <EBPFStack :type="ComponentType" />
+        <Stack />
       </div>
     </div>
   </div>
@@ -32,8 +32,7 @@ limitations under the License. -->
   import { useSelectorStore } from "@/store/modules/selectors";
   import TaskList from "./components/TaskList.vue";
   import Filter from "./components/Filter.vue";
-  import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
-  import { ComponentType } from "@/views/dashboard/related/ebpf/components/data";
+  import Stack from "./components/Stack.vue";
 
   const asyncProfilingStore = useAsyncProfilingStore();
   const selectorStore = useSelectorStore();

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

@@ -59,7 +59,7 @@ limitations under the License. -->
   );
 
   function changeInstances(options: Option[]) {
-    serviceInstanceIds.value = options.map((d: any) => d.id);
+    serviceInstanceIds.value = options.map((d: Option) => d.value);
   }
 
   function changeEventType(options: Option[]) {
@@ -67,8 +67,11 @@ limitations under the License. -->
   }
 
   async function analyzeProfiling() {
+    const instanceIds = asyncProfilingStore.instances
+      .filter((d: Instance) => (serviceInstanceIds.value ?? []).includes(d.value))
+      .map((d: Instance) => d.id);
     const res = await asyncProfilingStore.getAsyncProfilingAnalyze({
-      instanceIds: serviceInstanceIds.value,
+      instanceIds,
       taskId: asyncProfilingStore.selectedTask.id,
       eventType: (EventsMap as any)[selectedEventType.value],
     });

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

@@ -89,9 +89,8 @@ limitations under the License. -->
       .attr("class", "d3-tip")
       .direction("s")
       .html((d: { data: StackElement } & { parent: { data: StackElement } }) => {
-        const name = d.data.name.replace("<", "&lt;").replace(">", "&gt;");
-        const valStr =
-          asyncProfilingStore.aggregateType === asyncProfilingStore[0].value
+        const name = d.data.codeSignature;
+        const valStr = asyncProfilingStore.aggregateType
           ? `<div class="mb-5">Dump Count: ${d.data.total}</div>`
           : `<div class="mb-5">Duration: ${d.data.total} ns</div>`;
         const rateOfParent =
@@ -114,7 +113,7 @@ limitations under the License. -->
     const list = [];
     for (const tree of asyncProfilingStore.analyzeTrees) {
       for (const ele of tree.elements) {
-        list.push(ele.dumpCount);
+        list.push(ele.total);
       }
     }
     max.value = Math.max(...list);
@@ -136,13 +135,13 @@ limitations under the License. -->
 
     for (const item of copyArr) {
       if (item.parentId === "1") {
-        const val = Number(scale(item.dumpCount).toFixed(4));
+        const val = Number(scale(item.total).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));
+          const val = Number(scale(obj[key].total).toFixed(4));
 
           obj[key].value = val;
           if (item.children) {

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

@@ -95,9 +95,8 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import { useI18n } from "vue-i18n";
   import type { Option } from "@/types/app";
-  import { TableHeader, AggregateTypes, ComponentType } from "./data";
+  import { TableHeader, AggregateTypes } from "./data";
   import { useEbpfStore } from "@/store/modules/ebpf";
-  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
   import type { EBPFProfilingSchedule, Process } from "@/types/ebpf";
   import { ElMessage, ElTable } from "element-plus";
   import { dateFormat } from "@/utils/dateFormat";
@@ -110,7 +109,7 @@ limitations under the License. -->
       default: "",
     },
   });
-  const ebpfStore = props.type === ComponentType ? useContinousProfilingStore() : useEbpfStore();
+  const ebpfStore = useEbpfStore();
   const pageSize = 5;
   const multipleTableRef = ref<InstanceType<typeof ElTable>>();
   const selectedProcesses = ref<string[]>([]);

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

@@ -23,20 +23,13 @@ limitations under the License. -->
   import d3tip from "d3-tip";
   import { flamegraph } from "d3-flame-graph";
   import { useEbpfStore } from "@/store/modules/ebpf";
-  import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
   import type { StackElement } from "@/types/ebpf";
-  import { AggregateTypes, ComponentType } from "./data";
+  import { AggregateTypes } from "./data";
   import "d3-flame-graph/dist/d3-flamegraph.css";
   import { treeForeach } from "@/utils/flameGraph";
 
-  /*global Nullable, defineProps*/
-  const props = defineProps({
-    type: {
-      type: String,
-      default: "",
-    },
-  });
-  const ebpfStore = props.type === ComponentType ? useAsyncProfilingStore() : useEbpfStore();
+  /*global Nullable*/
+  const ebpfStore = useEbpfStore();
   const stackTree = ref<Nullable<StackElement>>(null);
   const selectStack = ref<Nullable<StackElement>>(null);
   const graph = ref<Nullable<HTMLDivElement>>(null);

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

@@ -57,5 +57,3 @@ export const TableHeader = [
   { property: "name", label: "Name" },
   { property: "instanceName", label: "Instance Name" },
 ];
-
-export const ComponentType = "ASYNC_PROFILING";