update content

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

@@ -15,17 +15,24 @@ limitations under the License. -->
 <template>
   <div class="flex-h content">
     <TaskList />
-    <div class="vis-graph ml-5">Profiling</div>
+    <div class="vis-graph ml-5">
+      <div class="filter">
+        <Filter />
+      </div>
+      <div class="stack">
+        <EBPFStack :type="ComponentType" />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { onMounted } from "vue";
-  import type { PropType } from "vue";
-  import { useI18n } from "vue-i18n";
   import { ElMessage } from "element-plus";
-
   import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
   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";
 
   const asyncProfilingStore = useAsyncProfilingStore();
 
@@ -35,14 +42,6 @@ limitations under the License. -->
       ElMessage.error(resp.errors);
     }
   });
-  /* global defineProps */
-  defineProps({
-    config: {
-      type: Object as PropType<any>,
-      default: () => ({}),
-    },
-  });
-  const { t } = useI18n();
 </script>
 <style lang="scss" scoped>
   .content {
@@ -59,9 +58,16 @@ limitations under the License. -->
     width: calc(100% - 330px);
   }
 
-  .text {
+  .stack {
     width: 100%;
-    text-align: center;
-    margin-top: 30px;
+    overflow: auto;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+  }
+
+  .filter {
+    height: 90px;
+    border-bottom: 1px solid $disabled-color;
+    padding-right: 10px;
   }
 </style>

src/views/dashboard/related/continuous-profiling/data.ts

@@ -29,8 +29,6 @@ export const TargetTypes = [
   { label: "NETWORK", value: "NETWORK" },
 ];
 
-export const ComponentType = "CONTINOUS_PROFILING";
-
 export const HeaderLabels = [
   { value: "triggeredCount", label: "Triggered Count", width: 150 },
   { value: "lastTriggerTime", label: "Last Trigger Time", width: 170 },

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

@@ -23,10 +23,9 @@ limitations under the License. -->
   import d3tip from "d3-tip";
   import { flamegraph } from "d3-flame-graph";
   import { useEbpfStore } from "@/store/modules/ebpf";
-  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
-  import { ComponentType } from "@/views/dashboard/related/continuous-profiling/data";
+  import { useAsyncProfilingStore } from "@/store/modules/async-profiling";
   import type { StackElement } from "@/types/ebpf";
-  import { AggregateTypes } from "./data";
+  import { AggregateTypes, ComponentType } from "./data";
   import "d3-flame-graph/dist/d3-flamegraph.css";
   import { treeForeach } from "@/utils/flameGraph";
 
@@ -37,7 +36,7 @@ limitations under the License. -->
       default: "",
     },
   });
-  const ebpfStore = props.type === ComponentType ? useContinousProfilingStore() : useEbpfStore();
+  const ebpfStore = props.type === ComponentType ? useAsyncProfilingStore() : 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,3 +57,5 @@ export const TableHeader = [
   { property: "name", label: "Name" },
   { property: "instanceName", label: "Instance Name" },
 ];
+
+export const ComponentType = "ASYNC_PROFILING";