feat: update topology

src/store/modules/continous-profiling.ts

@@ -25,6 +25,8 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
 import { EBPFProfilingTriggerType } from "../data";
+import dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
 
 interface ContinousProfilingState {
   strategyList: Array<Recordable<StrategyItem>>;
@@ -35,6 +37,7 @@ interface ContinousProfilingState {
   errorReason: string;
   processes: Process[];
   instances: Instance[];
+  instance: Nullable<Instance>;
   eBPFSchedules: EBPFProfilingSchedule[];
   currentSchedule: EBPFProfilingSchedule | Record<string, never>;
   analyzeTrees: AnalyzationTrees[];
@@ -58,6 +61,7 @@ export const continousProfilingStore = defineStore({
     currentSchedule: {},
     analyzeTrees: [],
     aggregateType: "COUNT",
+    instance: null,
   }),
   actions: {
     setSelectedStrategy(task: Recordable<StrategyItem>) {
@@ -72,6 +76,9 @@ export const continousProfilingStore = defineStore({
     setAnalyzeTrees(tree: AnalyzationTrees[]) {
       this.analyzeTrees = tree;
     },
+    setCurrentInstance(instance: Nullable<Instance>) {
+      this.instance = instance;
+    },
     async setContinuousProfilingPolicy(
       serviceId: string,
       targets: {
@@ -145,12 +152,21 @@ export const continousProfilingStore = defineStore({
         networkProfilingStore.setLinks([]);
         this.eBPFSchedules = [];
         this.analyzeTrees = [];
+        this.selectedTask = {};
+        return;
       }
       this.selectedTask = this.taskList[0] || {};
       this.setselectedTask(this.selectedTask);
-      this.preAnalyzeTask();
+      await this.getGraphData();
       return res.data;
     },
+    async getGraphData() {
+      if (this.selectedStrategy.type === "NETWORK") {
+        await this.getTopology();
+      } else {
+        await this.preAnalyzeTask();
+      }
+    },
     async getServiceInstances(serviceId: string): Promise<Nullable<AxiosResponse>> {
       if (!serviceId) {
         return null;
@@ -161,6 +177,7 @@ export const continousProfilingStore = defineStore({
       });
       if (!res.data.errors) {
         this.instances = res.data.data.pods || [];
+        this.instance = this.instances[0] || null;
       }
       return res.data;
     },
@@ -177,6 +194,30 @@ 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({}));

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

@@ -37,15 +37,15 @@ limitations under the License. -->
                 <span>
                   {{ `${cause.type}: ${getURI(cause.uri)}${cause.uri.threshold}>=${cause.uri.current}` }}
                 </span>
-                <a class="profile-view r" @click="viewDetail = true">
-                  <Icon iconName="view" size="middle" />
-                </a>
               </div>
               <div class="ell sm">
                 <span class="mr-10 sm">{{ dateFormat(i.taskStartTime) }}</span>
                 <span class="mr-10 sm">
                   {{ dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000) }}
                 </span>
+                <span class="profile-view r" @click="viewDetail = true">
+                  <Icon iconName="view" size="middle" />
+                </span>
               </div>
             </td>
           </tr>
@@ -63,12 +63,7 @@ limitations under the License. -->
   import type { EBPFTaskList } from "@/types/ebpf";
   import TaskDetails from "../../components/TaskDetails.vue";
   import { dateFormat } from "@/utils/dateFormat";
-  import { ElMessage } from "element-plus";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
-  import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
-  import { TargetTypes } from "../data";
-  import dateFormatStep from "@/utils/dateFormat";
-  import getLocalTime from "@/utils/localtime";
 
   const { t } = useI18n();
   const continousProfilingStore = useContinousProfilingStore();
@@ -76,31 +71,9 @@ limitations under the License. -->
 
   async function changeTask(item: EBPFTaskList) {
     continousProfilingStore.setselectedTask(item);
-    continousProfilingStore.preAnalyzeTask();
+    continousProfilingStore.getGraphData();
   }
 
-  // async function getTopology() {
-  //   const { taskStartTime, fixedTriggerDuration } = networkProfilingStore.selectedNetworkTask;
-  //   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: instanceId.value,
-  //     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;
-  // }
-
   function getURI(uri: { uriRegex: string; uriPath: string }) {
     return uri ? `(${uri.uriRegex || ""} | ${uri.uriPath || ""})` : "";
   }
@@ -163,7 +136,6 @@ limitations under the License. -->
     color: #3d444f;
     padding: 1px 3px;
     border-radius: 2px;
-    font-size: 12px;
+    font-size: 10px;
-    float: right;
   }
 </style>