feat: query metrics for topology

src/graphql/fragments/topology.ts

@@ -117,3 +117,79 @@ export const InstanceTopology = {
   }
 `,
 };
+export const TopoMetric = {
+  variable: "$ids: [ID!]!",
+  query: `
+  sla: getValues(metric: {
+    name: "service_sla"
+    ids: $ids
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }
+  nodeCpm: getValues(metric: {
+    name: "service_cpm"
+    ids: $ids
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }
+  nodeLatency: getValues(metric: {
+    name: "service_resp_time"
+    ids: $ids
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }`,
+};
+export const TopoServiceMetric = {
+  variable: "$idsS: [ID!]!",
+  query: `
+  cpmS: getValues(metric: {
+    name: "service_relation_server_cpm"
+    ids: $idsS
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }
+  latencyS: getValues(metric: {
+    name: "service_relation_server_resp_time"
+    ids: $idsS
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }`,
+};
+
+export const TopoClientMetric = {
+  variable: "$idsC: [ID!]!",
+  query: `
+  cpmC: getValues(metric: {
+    name: "service_relation_client_cpm"
+    ids: $idsC
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }
+  latencyC: getValues(metric: {
+    name: "service_relation_client_resp_time"
+    ids: $idsC
+  }, duration: $duration) {
+    values {
+      id
+      value
+    }
+  }`,
+};

src/graphql/query/topology.ts

@@ -19,9 +19,22 @@ import {
   EndpointTopology,
   ServiceTopology,
   GlobalTopology,
+  TopoMetric,
+  TopoServiceMetric,
+  TopoClientMetric,
 } from "../fragments/topology";
 
 export const getGlobalTopology = `query queryData(${GlobalTopology.variable}) {${GlobalTopology.query}}`;
 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getServiceTopology = `query queryData(${ServiceTopology.variable}) {${ServiceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
+export const queryTopoInfo = `query queryTopoInfo(
+  ${GlobalTopology.variable},
+  ${TopoMetric.variable},
+  ${TopoServiceMetric.variable},
+  ${TopoClientMetric.variable})
+    {
+      ${TopoMetric.query},
+      ${TopoServiceMetric.query},
+      ${TopoClientMetric.query}
+    }`;

src/store/modules/topology.ts

@@ -45,9 +45,79 @@ export const topologyStore = defineStore({
       this.call = link;
     },
     setTopology(data: { nodes: Node[]; calls: Call[] }) {
+      console.log(data);
       this.nodes = data.nodes;
       this.calls = data.calls;
     },
+    async setMetrics(data: { nodes: Node[]; calls: Call[] }, params: any) {
+      const ids = data.nodes.map((i: Node) => i.id);
+      const idsC = data.calls
+        .filter((i: Call) => i.detectPoints.includes("CLIENT"))
+        .map((b: any) => b.id);
+      const idsS = data.calls
+        .filter((i: Call) => i.detectPoints.includes("SERVER"))
+        .map((b: any) => b.id);
+      const res: AxiosResponse = await graphql
+        .query("queryTopoInfo")
+        .params({ ...params, ids, idsC, idsS });
+      const resInfo = res.data.data;
+      if (!resInfo.sla) {
+        return this.setTopology(data);
+      }
+      for (let i = 0; i < resInfo.sla.values.length; i += 1) {
+        for (let j = 0; j < data.nodes.length; j += 1) {
+          if (data.nodes[j].id === resInfo.sla.values[i].id) {
+            data.nodes[j] = {
+              ...data.nodes[j],
+              isGroupActive: true,
+              sla: resInfo.sla.values[i].value
+                ? resInfo.sla.values[i].value / 100
+                : -1,
+              cpm: resInfo.nodeCpm.values[i]
+                ? resInfo.nodeCpm.values[i].value
+                : -1,
+              latency: resInfo.nodeLatency.values[i]
+                ? resInfo.nodeLatency.values[i].value
+                : -1,
+            };
+          }
+        }
+      }
+      if (!resInfo.cpmC) {
+        return this.setTopology(data);
+      }
+      for (let i = 0; i < resInfo.cpmC.values.length; i += 1) {
+        for (let j = 0; j < data.calls.length; j += 1) {
+          if (data.calls[j].id === resInfo.cpmC.values[i].id) {
+            data.calls[j] = {
+              ...data.calls[j],
+              isGroupActive: true,
+              cpm: resInfo.cpmC.values[i] ? resInfo.cpmC.values[i].value : "",
+              latency: resInfo.latencyC.values[i]
+                ? resInfo.latencyC.values[i].value
+                : "",
+            };
+          }
+        }
+      }
+      if (!resInfo.cpmS) {
+        return this.setTopology(data);
+      }
+      for (let i = 0; i < resInfo.cpmS.values.length; i += 1) {
+        for (let j = 0; j < data.calls.length; j += 1) {
+          if (data.calls[j].id === resInfo.cpmS.values[i].id) {
+            data.calls[j] = {
+              ...data.calls[j],
+              cpm: resInfo.cpmS.values[i] ? resInfo.cpmS.values[i].value : "",
+              latency: resInfo.latencyS.values[i]
+                ? resInfo.latencyS.values[i].value
+                : "",
+            };
+          }
+        }
+      }
+      this.setTopology(data);
+    },
     async getServiceTopology() {
       const serviceId = useSelectorStore().currentService.id;
       const duration = useAppStoreWithOut().durationTime;
@@ -58,7 +128,7 @@ export const topologyStore = defineStore({
           duration,
         });
       if (!res.data.errors) {
-        this.setTopology(res.data.data.topology);
+        this.setMetrics(res.data.data.topology, { duration });
       }
       return res.data;
     },
@@ -70,7 +140,7 @@ export const topologyStore = defineStore({
           duration,
         });
       if (!res.data.errors) {
-        this.setTopology(res.data.data.topology);
+        this.setMetrics(res.data.data.topology, { duration });
       }
       return res.data;
     },

src/types/topology.d.ts

@@ -24,6 +24,8 @@ export interface Call {
   detectPoints: string[];
   type?: string;
   sourceObj?: any;
+  isGroupActive?: boolean;
+  latency?: number;
 }
 export interface Node {
   apdex: number;
@@ -38,4 +40,6 @@ export interface Node {
   sla: number;
   type: string;
   isReal: boolean;
+  isGroupActive?: boolean;
+  latency?: number;
 }

src/views/dashboard/related/topology/Graph.vue

@@ -17,7 +17,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
@@ -25,8 +24,8 @@ import zoom from "./utils/zoom";
 import { simulationInit, simulationSkip } from "./utils/simulation";
 import nodeElement from "./utils/nodeElement";
 import { linkElement, anchorElement } from "./utils/linkElement";
-import tool from "./utils/tool";
+// import tool from "./utils/tool";
-import topoLegend from "./utils/legend";
+// import topoLegend from "./utils/legend";
 import { Node, Call } from "@/types/topology";
 import { useTopologyStore } from "@/store/modules/topology";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -257,7 +256,7 @@ onBeforeUnmount(() => {
     stroke-width: 3px !important;
     stroke-dasharray: 13 7;
     fill: none;
-    animation: topo-dash 1s linear infinite !important;
+    animation: topo-dash 0.5s linear infinite !important;
   }
 
   .topo-line-anchor {