fix: update process widget and query process metrics (#145)

src/hooks/useProcessor.ts

@@ -46,6 +46,7 @@ export function useQueryProcessor(config: any) {
     "ServiceRelation",
     "ServiceInstanceRelation",
     "EndpointRelation",
+    "ProcessRelation",
   ].includes(dashboardStore.entity);
   if (isRelation && !selectorStore.currentDestService) {
     return;
@@ -93,28 +94,40 @@ export function useQueryProcessor(config: any) {
             dashboardStore.entity === "All"
               ? undefined
               : selectorStore.currentService.normal,
-          serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
+          serviceInstanceName: [
+            "ServiceInstance",
+            "ServiceInstanceRelation",
+            "ProcessRelation",
+          ].includes(dashboardStore.entity)
             ? selectorStore.currentPod && selectorStore.currentPod.value
             : undefined,
           endpointName: dashboardStore.entity.includes("Endpoint")
             ? selectorStore.currentPod && selectorStore.currentPod.value
             : undefined,
+          processName: dashboardStore.entity.includes("Process")
+            ? selectorStore.currentProcess && selectorStore.currentProcess.value
+            : undefined,
           destNormal: isRelation
             ? selectorStore.currentDestService.normal
             : undefined,
           destServiceName: isRelation
             ? selectorStore.currentDestService.value
             : undefined,
-          destServiceInstanceName:
-            dashboardStore.entity === "ServiceInstanceRelation"
-              ? selectorStore.currentDestPod &&
-                selectorStore.currentDestPod.value
+          destServiceInstanceName: [
+            "ServiceInstanceRelation",
+            "ProcessRelation",
+          ].includes(dashboardStore.entity)
+            ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
             : undefined,
           destEndpointName:
             dashboardStore.entity === "EndpointRelation"
               ? selectorStore.currentDestPod &&
                 selectorStore.currentDestPod.value
               : undefined,
+          destProcessName: dashboardStore.entity.includes("ProcessRelation")
+            ? selectorStore.currentDestProcess &&
+              selectorStore.currentDestProcess.value
+            : undefined,
         },
       };
     }

src/views/dashboard/graphs/ServiceList.vue

@@ -82,6 +82,7 @@ import type { PropType } from "vue";
 import { ServiceListConfig } from "@/types/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import { Service } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
@@ -111,6 +112,7 @@ const props = defineProps({
 });
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
+const appStore = useAppStoreWithOut();
 const chartLoading = ref<boolean>(false);
 const pageSize = 10;
 const services = ref<Service[]>([]);
@@ -273,6 +275,14 @@ watch(
     queryServiceMetrics(services.value);
   }
 );
+watch(
+  () => appStore.durationTime,
+  () => {
+    if (dashboardStore.entity === EntityType[1].value) {
+      queryServices();
+    }
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/related/network-profiling/components/Graph/linkProcess.ts

@@ -27,6 +27,9 @@ export const linkElement = (graph: any) => {
         [d.target.x, d.target.y - 5],
         0.5
       );
+      if (d.lowerArc) {
+        controlPos[1] = -controlPos[1];
+      }
       return (
         "M" +
         d.source.x +
@@ -57,6 +60,9 @@ export const anchorElement = (graph: any, funcs: any, tip: any) => {
         [d.target.x, d.target.y - 5],
         0.5
       );
+      if (d.lowerArc) {
+        controlPos[1] = -controlPos[1];
+      }
       const p = quadraticBezier(
         0.5,
         { x: d.source.x, y: d.source.y - 5 },

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -107,14 +107,7 @@ function drawGraph() {
   width.value = dom.width;
   svg.value.attr("height", height.value).attr("width", width.value);
   tip.value = (d3tip as any)().attr("class", "d3-tip").offset([-8, 0]);
-  const outNodes = networkProfilingStore.nodes.filter(
-    (d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id
-  );
-  if (outNodes.length) {
-    diff.value[0] = (dom.width - radius * 4) / 2 + radius;
-  } else {
   diff.value[0] = (dom.width - radius * 2) / 2 + radius;
-  }
   graph.value = svg.value
     .append("g")
     .attr("class", "svg-graph")
@@ -162,13 +155,17 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
   }
   return poly;
 }
-
-function getArcPoint(angle: number, radius: number) {
+function getCirclePoint(radius: number, p = 1) {
+  const data = [];
   const origin = [0, 0];
-  const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180);
-  const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180);
-
-  return [x1, y1];
+  for (let index = 0; index < 360; index = index + p) {
+    if (index < 230 || index > 310) {
+      let x = radius * Math.cos((Math.PI * 2 * index) / 360);
+      let y = radius * Math.sin((Math.PI * 2 * index) / 360);
+      data.push([x + origin[0], y + origin[1]]);
+    }
+  }
+  return data;
 }
 function createLayout() {
   if (!node.value || !link.value) {
@@ -205,7 +202,7 @@ function createLayout() {
     .attr("fill", "#000")
     .attr("text-anchor", "middle")
     .attr("x", 0)
-    .attr("y", p.radius)
+    .attr("y", p.radius - 15)
     .text(() => selectorStore.currentPod.label);
   const nodeArr = networkProfilingStore.nodes.filter(
     (d: ProcessNode) => d.isReal || d.name === "UNKNOWN_LOCAL"
@@ -270,21 +267,16 @@ function createLayout() {
   const outNodes = networkProfilingStore.nodes.filter(
     (d: ProcessNode) => !(d.isReal || d.name === "UNKNOWN_LOCAL")
   );
-  let angle = 10;
-  let r = 230;
+  const interval = 30;
+  let r = 250;
+  let pointArr = getCirclePoint(r, interval);
   for (let v = 0; v < outNodes.length; v++) {
-    const pos = getArcPoint(angle, r); // angle is [-120, 120]
-    outNodes[v].x = pos[0];
-    outNodes[v].y = pos[1];
-    angle = angle + 20;
-    if (angle * (v + 1) > 120) {
-      angle = -10;
-      r = r + 60;
-    }
-    if (angle * (v + 1) < -120) {
-      r = r + 60;
-      angle = 10;
+    if (!pointArr[v]) {
+      r = r + 80;
+      pointArr = [...pointArr, ...getCirclePoint(r, interval)];
     }
+    outNodes[v].x = pointArr[v][0];
+    outNodes[v].y = pointArr[v][1];
   }
   drawTopology([...nodeArr, ...outNodes]);
 }
@@ -305,15 +297,11 @@ function drawTopology(nodeArr: any[]) {
   // line element
   const obj = {} as any;
   const calls = networkProfilingStore.calls.reduce((prev: any[], next: any) => {
-    if (
-      !(
-        obj[next.sourceId + next.targetId] && obj[next.targetId + next.sourceId]
-      )
-    ) {
-      obj[next.sourceId + next.targetId] = true;
-      obj[next.targetId + next.sourceId] = true;
-      prev.push(next);
+    if (obj[next.targetId + next.sourceId]) {
+      next.lowerArc = true;
     }
+    obj[next.sourceId + next.targetId] = true;
+    prev.push(next);
     return prev;
   }, []);
 

src/views/dashboard/related/network-profiling/components/Tasks.vue

@@ -66,10 +66,10 @@ limitations under the License. -->
                     dateFormat(i.taskStartTime + i.fixedTriggerDuration * 1000)
                   }}
                 </span>
-                <span class="ml-10" @click="viewDetail = true">
+                <span class="new-task" @click="viewDetail = true">
                   <Icon iconName="view" size="middle" />
                 </span>
-                <span class="ml-5" v-if="index === 0 && inProcess">
+                <span class="reload" v-if="index === 0 && inProcess">
                   <Icon iconName="retry" :loading="true" size="middle" />
                 </span>
               </div>
@@ -107,7 +107,9 @@ const appStore = useAppStoreWithOut();
 const viewDetail = ref<boolean>(false);
 /*global Nullable */
 const intervalFn = ref<Nullable<any>>(null);
-const inProcess = ref<boolean>(true);
+const intervalKeepAlive = ref<Nullable<any>>(null);
+const inProcess = ref<boolean>(false);
+
 fetchTasks();
 
 async function changeTask(item: EBPFTaskList) {
@@ -157,6 +159,7 @@ async function getTopology() {
   }
   if (!inProcess.value) {
     intervalFn.value && clearInterval(intervalFn.value);
+    intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
   }
   return resp;
 }
@@ -184,19 +187,31 @@ async function createTask() {
   }
   await fetchTasks();
 }
-async function enableInterval() {
+function enableInterval() {
+  intervalFn.value = setInterval(getTopology, 30000);
+}
+
+function networkInterval() {
+  intervalKeepAlive.value = setInterval(keepAliveNetwork, 60000);
+}
+
+async function keepAliveNetwork() {
   const res = await networkProfilingStore.keepNetworkProfiling(
     networkProfilingStore.selectedNetworkTask.taskId
   );
   if (res.errors) {
+    intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
     return ElMessage.error(res.errors);
   }
-  if (networkProfilingStore.aliveNetwork) {
-    intervalFn.value = setInterval(getTopology, 60000);
+  if (!networkProfilingStore.aliveNetwork) {
+    intervalFn.value && clearInterval(intervalFn.value);
+    intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
   }
 }
+
 async function fetchTasks() {
   intervalFn.value && clearInterval(intervalFn.value);
+  intervalKeepAlive.value && clearInterval(intervalKeepAlive.value);
   const serviceId =
     (selectorStore.currentService && selectorStore.currentService.id) || "";
   const serviceInstanceId =
@@ -210,9 +225,14 @@ async function fetchTasks() {
   if (res.errors) {
     return ElMessage.error(res.errors);
   }
+  if (!networkProfilingStore.networkTasks.length) {
+    return;
+  }
   await getTopology();
   if (inProcess.value) {
     enableInterval();
+    networkInterval();
+    keepAliveNetwork();
   }
 }
 
@@ -236,7 +256,7 @@ watch(
 }
 
 .profile-td {
-  padding: 10px 0 10px 10px;
+  padding: 10px 5px 10px 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
 
   &.selected {
@@ -270,7 +290,7 @@ watch(
 }
 
 .profile-t-tool {
-  padding: 5px 10px;
+  padding: 10px 5px 10px 10px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background: #f3f4f9;
   width: 100%;
@@ -279,4 +299,8 @@ watch(
 .new-task {
   float: right;
 }
+
+.reload {
+  margin-left: 30px;
+}
 </style>