feat: add topology

src/store/modules/continous-profiling.ts

@@ -15,17 +15,12 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { ElMessage } from "element-plus";
-import { useAppStoreWithOut } from "@/store/modules/app";
-import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
 import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
 import type { EBPFTaskList, EBPFProfilingSchedule, AnalyzationTrees } from "@/types/ebpf";
 import type { Instance } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
-import dateFormatStep from "@/utils/dateFormat";
-import getLocalTime from "@/utils/localtime";
 
 interface ContinousProfilingState {
   strategyList: Array<Recordable<StrategyItem>>;
@@ -145,95 +140,6 @@ export const continousProfilingStore = defineStore({
       }
       return res.data;
     },
-    async getTopology() {
-      const networkProfilingStore = useNetworkProfilingStore();
-      const appStore = useAppStoreWithOut();
-      networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
-      const { taskStartTime, fixedTriggerDuration } = this.selectedTask;
-      const startTime =
-        fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
-      let endTime = taskStartTime + fixedTriggerDuration * 1000;
-      if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
-        endTime = new Date().getTime();
-      }
-      const resp = await networkProfilingStore.getProcessTopology({
-        serviceInstanceId: this.instance.id || "",
-        duration: {
-          start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
-          end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
-          step: appStore.duration.step,
-        },
-      });
-      if (resp.errors) {
-        ElMessage.error(resp.errors);
-      }
-      return resp;
-    },
-    async getEBPFSchedules(params: { taskId: string }) {
-      if (!params.taskId) {
-        return new Promise((resolve) => resolve({}));
-      }
-      params.taskId = "71d96efb81b0be93b1322be1b17334c87d45d6216e299504a778264f94692d1b";
-      const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
-
-      if (res.data.errors) {
-        this.eBPFSchedules = [];
-        return res.data;
-      }
-      this.ebpftTips = "";
-      const { eBPFSchedules } = res.data.data;
-
-      this.eBPFSchedules = eBPFSchedules;
-      if (!eBPFSchedules.length) {
-        this.eBPFSchedules = [];
-        this.analyzeTrees = [];
-      }
-      return res.data;
-    },
-    async getEBPFAnalyze(params: {
-      scheduleIdList: string[];
-      timeRanges: Array<{ start: number; end: number }>;
-      aggregateType: string;
-    }) {
-      this.aggregateType = params.aggregateType;
-      if (!params.scheduleIdList.length) {
-        return new Promise((resolve) => resolve({}));
-      }
-      if (!params.timeRanges.length) {
-        return new Promise((resolve) => resolve({}));
-      }
-      const res: AxiosResponse = await graphql.query("getEBPFResult").params(params);
-
-      if (res.data.errors) {
-        this.analyzeTrees = [];
-        return res.data;
-      }
-      const { analysisEBPFResult } = res.data.data;
-      this.ebpftTips = analysisEBPFResult.tip;
-      if (!analysisEBPFResult) {
-        this.analyzeTrees = [];
-        return res.data;
-      }
-      if (analysisEBPFResult.tip) {
-        this.analyzeTrees = [];
-        return res.data;
-      }
-      this.analyzeTrees = analysisEBPFResult.trees;
-      return res.data;
-    },
-    async preAnalyzeTask() {
-      if (this.selectedStrategy.type === "NETWORK") {
-        const networkProfilingStore = useNetworkProfilingStore();
-        await networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
-        return;
-      }
-      const res = await this.getEBPFSchedules({
-        taskId: this.selectedTask.taskId,
-      });
-      if (res.errors) {
-        ElMessage.error(res.errors);
-      }
-    },
   },
 });
 

src/store/modules/task-timeline.ts

@@ -15,11 +15,15 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
 import { store } from "@/store";
 import graphql from "@/graphql";
 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 dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
 
 interface taskTimelineState {
   loading: boolean;
@@ -70,6 +74,96 @@ export const taskTimelineStore = defineStore({
       // await this.getGraphData();
       return res.data;
     },
+    async getTopology() {
+      const networkProfilingStore = useNetworkProfilingStore();
+      const appStore = useAppStoreWithOut();
+      networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
+      const { taskStartTime, fixedTriggerDuration } = this.selectedTask;
+      const startTime =
+        fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
+      let endTime = taskStartTime + fixedTriggerDuration * 1000;
+      if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
+        endTime = new Date().getTime();
+      }
+      const resp = await networkProfilingStore.getProcessTopology({
+        serviceInstanceId: this.instance.id || "",
+        duration: {
+          start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
+          end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
+          step: appStore.duration.step,
+        },
+      });
+      if (resp.errors) {
+        ElMessage.error(resp.errors);
+      }
+      return resp;
+    },
+
+    async getEBPFSchedules(params: { taskId: string }) {
+      if (!params.taskId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      // params.taskId = "71d96efb81b0be93b1322be1b17334c87d45d6216e299504a778264f94692d1b";
+      const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
+
+      if (res.data.errors) {
+        this.eBPFSchedules = [];
+        return res.data;
+      }
+      this.ebpftTips = "";
+      const { eBPFSchedules } = res.data.data;
+
+      this.eBPFSchedules = eBPFSchedules;
+      if (!eBPFSchedules.length) {
+        this.eBPFSchedules = [];
+        this.analyzeTrees = [];
+      }
+      return res.data;
+    },
+    async getEBPFAnalyze(params: {
+      scheduleIdList: string[];
+      timeRanges: Array<{ start: number; end: number }>;
+      aggregateType: string;
+    }) {
+      this.aggregateType = params.aggregateType;
+      if (!params.scheduleIdList.length) {
+        return new Promise((resolve) => resolve({}));
+      }
+      if (!params.timeRanges.length) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql.query("getEBPFResult").params(params);
+
+      if (res.data.errors) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      const { analysisEBPFResult } = res.data.data;
+      this.ebpftTips = analysisEBPFResult.tip;
+      if (!analysisEBPFResult) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      if (analysisEBPFResult.tip) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      this.analyzeTrees = analysisEBPFResult.trees;
+      return res.data;
+    },
+    async preAnalyzeTask() {
+      if (this.selectedStrategy.type === "NETWORK") {
+        const networkProfilingStore = useNetworkProfilingStore();
+        await networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
+        return;
+      }
+      const res = await this.getEBPFSchedules({
+        taskId: this.selectedTask.taskId,
+      });
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
   },
 });
 

src/types/continous-profiling.d.ts

@@ -1,4 +1,3 @@
-import { MonitorType } from "./../views/dashboard/related/continuous-profiling/data";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with

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

@@ -13,10 +13,21 @@ 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. -->
 <template>
-  <div class="content"> profiling </div>
+  <div class="content" v-if="continousProfilingStore.selectedStrategy.type === TargetTypes[2].value">
+    <process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
+    <div class="text" v-else>
+      {{ t("noData") }}
+    </div>
+  </div>
+  <div class="content" v-else>flame</div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+  import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
+  import { TargetTypes } from "../../continuous-profiling/data";
+  import ProcessTopology from "@/views/dashboard/related/network-profiling/components/ProcessTopology.vue";
 
   /*global defineProps */
   defineProps({
@@ -25,9 +36,23 @@ limitations under the License. -->
       default: () => ({}),
     },
   });
+  const { t } = useI18n();
+  const continousProfilingStore = useContinousProfilingStore();
+  const networkProfilingStore = useNetworkProfilingStore();
 </script>
 <style lang="scss" scoped>
   .content {
     width: 100%;
+    height: calc(100% - 30px);
+    flex-grow: 2;
+    min-width: 700px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .text {
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
   }
 </style>

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

@@ -121,6 +121,7 @@ limitations under the License. -->
       dashboardStore.selectWidget(props.data);
       const index = items[0];
       taskTimelineStore.setSelectedTask(taskList[index]);
+      taskTimelineStore.getTopology();
     });
   }