feat: add flame graph

src/store/modules/task-timeline.ts

@@ -22,9 +22,11 @@ import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import type { EBPFTaskList } from "@/types/ebpf";
 import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
+import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+import { useEbpfStore } from "@/store/modules/ebpf";
 import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
-
+import { TargetTypes } from "@/views/dashboard/related/continuous-profiling/data";
 interface taskTimelineState {
   loading: boolean;
   taskList: EBPFTaskList[];
@@ -74,6 +76,23 @@ export const taskTimelineStore = defineStore({
       // await this.getGraphData();
       return res.data;
     },
+    async getGraphData() {
+      let res: any = {};
+      const continousProfilingStore = useContinousProfilingStore();
+
+      if (continousProfilingStore.selectedStrategy.type === TargetTypes[2].value) {
+        res = await this.getTopology();
+      } else {
+        const ebpfStore = useEbpfStore();
+        res = await ebpfStore.getEBPFSchedules({
+          taskId: this.selectedTask.taskId,
+        });
+      }
+
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
     async getTopology() {
       const networkProfilingStore = useNetworkProfilingStore();
       const appStore = useAppStoreWithOut();

src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue

@@ -19,7 +19,14 @@ limitations under the License. -->
       {{ t("noData") }}
     </div>
   </div>
-  <div class="content" v-else>flame</div>
+  <div class="content" v-else>
+    <div class="schedules">
+      <EBPFSchedules />
+    </div>
+    <div class="item">
+      <EBPFStack />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
@@ -28,6 +35,8 @@ limitations under the License. -->
   import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
   import { TargetTypes } from "../../continuous-profiling/data";
   import ProcessTopology from "@/views/dashboard/related/network-profiling/components/ProcessTopology.vue";
+  import EBPFSchedules from "@/views/dashboard/related/ebpf/components/EBPFSchedules.vue";
+  import EBPFStack from "@/views/dashboard/related/ebpf/components/EBPFStack.vue";
 
   /*global defineProps */
   defineProps({
@@ -55,4 +64,17 @@ limitations under the License. -->
     text-align: center;
     margin-top: 30px;
   }
+
+  .item {
+    width: 100%;
+    overflow: auto;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+  }
+
+  .schedules {
+    height: 90px;
+    border-bottom: 1px solid #ccc;
+    padding-right: 10px;
+  }
 </style>

src/views/dashboard/related/task-timeline/components/Timeline.vue

@@ -117,11 +117,12 @@ limitations under the License. -->
       },
     };
     visGraph.value = new Timeline(timeline.value, items, options);
-    visGraph.value.on("select", (properties: { items: number[] }) => {
+    visGraph.value.on("select", async (properties: { items: number[] }) => {
       dashboardStore.selectWidget(props.data);
-      const index = items[0];
+      const index = properties.items[0];
-      taskTimelineStore.setSelectedTask(taskList[index]);
+      const task = taskList[index];
-      taskTimelineStore.getTopology();
+      await taskTimelineStore.setSelectedTask(task);
+      await taskTimelineStore.getGraphData();
     });
   }