feat: query topology

src/graphql/fragments/topology.ts

@@ -17,7 +17,7 @@
 export const ServiceTopology = {
   variable: "$duration: Duration!, $serviceId: ID!",
   query: `
-  topo: getServiceTopology(duration: $duration, serviceId: $serviceId) {
+  topology: getServiceTopology(duration: $duration, serviceId: $serviceId) {
     nodes {
       id
       name
@@ -37,7 +37,7 @@ export const ServiceTopology = {
 export const GlobalTopology = {
   variable: "$duration: Duration!",
   query: `
-  topo: getGlobalTopology(duration: $duration) {
+  topology: getGlobalTopology(duration: $duration) {
     nodes {
       id
       name
@@ -57,7 +57,7 @@ export const GlobalTopology = {
 export const ServicesTopology = {
   variable: "$duration: Duration!, $serviceIds: [ID!]!",
   query: `
-  topo: getServicesTopology(duration: $duration, serviceIds: $serviceIds) {
+  topology: getServicesTopology(duration: $duration, serviceIds: $serviceIds) {
     nodes {
       id
       name
@@ -77,7 +77,7 @@ export const ServicesTopology = {
 export const EndpointTopology = {
   variable: ["$endpointId: ID!", "$duration: Duration!"],
   query: `
-  endpointTopology: getEndpointDependencies(endpointId: $endpointId, duration: $duration) {
+  topology: getEndpointDependencies(endpointId: $endpointId, duration: $duration) {
     nodes {
       id
       name
@@ -98,7 +98,7 @@ export const InstanceTopology = {
   variable:
     "$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
   query: `
-  topo: getServiceInstanceTopology(clientServiceId: $clientServiceId,
+  topology: getServiceInstanceTopology(clientServiceId: $clientServiceId,
     serverServiceId: $serverServiceId, duration: $duration) {
     nodes {
       id

src/graphql/index.ts

@@ -19,8 +19,14 @@ import { cancelToken } from "@/utils/cancelToken";
 import * as app from "./query/app";
 import * as selector from "./query/selector";
 import * as dashboard from "./query/dashboard";
+import * as topology from "./query/topology";
 
-const query: { [key: string]: string } = { ...app, ...selector, ...dashboard };
+const query: { [key: string]: string } = {
+  ...app,
+  ...selector,
+  ...dashboard,
+  ...topology,
+};
 class Graph {
   private queryData = "";
   public query(queryData: string) {

src/store/modules/topology.ts

@@ -17,6 +17,10 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import { Node, Call } from "@/types/topology";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface TopologyState {
   node: Node | null;
@@ -40,9 +44,65 @@ export const topologyStore = defineStore({
     setLink(link: Call) {
       this.call = link;
     },
-    setTopology(nodes: Node[], links: Call[]) {
-      this.nodes = nodes;
-      this.calls = links;
+    setTopology(data: { nodes: Node[]; links: Call[] }) {
+      this.nodes = data.nodes;
+      this.calls = data.links;
+    },
+    async getServiceTopology() {
+      const serviceId = useSelectorStore().currentService.id;
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getServiceTopology")
+        .params({
+          serviceId,
+          duration,
+        });
+      if (!res.data.errors) {
+        this.setTopology(res.data.data.topology);
+      }
+      return res.data;
+    },
+    async getGlobalTopology() {
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getGlobalTopology")
+        .params({
+          duration,
+        });
+      if (!res.data.errors) {
+        this.setTopology(res.data.data.topology);
+      }
+      return res.data;
+    },
+    async getEndpointTopology() {
+      const endpointId = useSelectorStore().currentPod.id;
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getEndpointTopology")
+        .params({
+          endpointId,
+          duration,
+        });
+      if (!res.data.errors) {
+        this.setTopology(res.data.data.topology);
+      }
+      return res.data;
+    },
+    async getInstanceTopology() {
+      const serverServiceId = useSelectorStore().currentService.id;
+      const clientServiceId = useSelectorStore().currentDestService.id;
+      const duration = useAppStoreWithOut().durationTime;
+      const res: AxiosResponse = await graphql
+        .query("getInstanceTopology")
+        .params({
+          clientServiceId,
+          serverServiceId,
+          duration,
+        });
+      if (!res.data.errors) {
+        this.setTopology(res.data.data.topology);
+      }
+      return res.data;
     },
   },
 });

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

@@ -29,6 +29,8 @@ import tool from "./utils/tool";
 import topoLegend from "./utils/legend";
 import { Node, Call } from "@/types/topology";
 import { useTopologyStore } from "@/store/modules/topology";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { EntityType } from "../../data";
 
 /*global defineProps, Nullable */
 const props = defineProps({
@@ -41,6 +43,7 @@ const props = defineProps({
 });
 const { t } = useI18n();
 const topologyStore = useTopologyStore();
+const dashboardStore = useDashboardStore();
 // const height = ref<number>(600);
 const simulation = ref<any>("");
 const svg = ref<Nullable<any>>(null);
@@ -53,6 +56,7 @@ const anchor = ref<any>(null);
 const tools = ref<any>(null);
 
 onMounted(() => {
+  getTopology();
   window.addEventListener("resize", resize);
   svg.value = d3
     .select(chart.value)
@@ -75,6 +79,22 @@ onMounted(() => {
   //   { icon: "" },
   // ]);
 });
+async function getTopology() {
+  switch (dashboardStore.layer) {
+    case EntityType[0].value:
+      await topologyStore.getServiceTopology();
+      break;
+    case EntityType[1].value:
+      await topologyStore.getGlobalTopology();
+      break;
+    case EntityType[2].value:
+      await topologyStore.getEndpointTopology();
+      break;
+    case EntityType[3].value:
+      await topologyStore.getInstanceTopology();
+      break;
+  }
+}
 function resize() {
   svg.value.attr("height", chart.value.clientHeight);
 }