feat: update

src/graphql/fragments/topology.ts

@@ -120,7 +120,7 @@ export const HierarchyServiceTopology = {
 export const HierarchyInstanceTopology = {
   variable: "$instanceId: ID!, $layer: String!",
   query: `
-  HierarchyInstanceTopology: getInstanceHierarchy(instanceId: $instanceId, layer: $layer) {
+  hierarchyInstanceTopology: getInstanceHierarchy(instanceId: $instanceId, layer: $layer) {
     relations {
       upperInstance {
         id

src/store/modules/topology.ts

@@ -17,7 +17,7 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import type { Service } from "@/types/selector";
-import type { Node, Call } from "@/types/topology";
+import type { Node, Call, HierarchyNode, ServiceHierarchy, InstanceHierarchy } from "@/types/topology";
 import graphql from "@/graphql";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -35,9 +35,14 @@ interface TopologyState {
   call: Nullable<Call>;
   calls: Call[];
   nodes: Node[];
+  hierarchyServiceCalls: Call[];
+  hierarchyServiceNodes: HierarchyNode[];
+  hierarchyInstanceCalls: Call[];
+  hierarchyInstanceNodes: HierarchyNode[];
   nodeMetricValue: MetricVal;
   linkServerMetrics: MetricVal;
   linkClientMetrics: MetricVal;
+  hierarchyServiceNode: Nullable<Node>;
 }
 
 export const topologyStore = defineStore({
@@ -45,8 +50,13 @@ export const topologyStore = defineStore({
   state: (): TopologyState => ({
     calls: [],
     nodes: [],
+    hierarchyServiceCalls: [],
+    hierarchyServiceNodes: [],
+    hierarchyInstanceCalls: [],
+    hierarchyInstanceNodes: [],
     node: null,
     call: null,
+    hierarchyServiceNode: null,
     nodeMetricValue: {},
     linkServerMetrics: {},
     linkClientMetrics: {},
@@ -58,6 +68,9 @@ export const topologyStore = defineStore({
     setLink(link: Call) {
       this.call = link;
     },
+    setHierarchyServiceNode(node: HierarchyNode) {
+      this.hierarchyServiceNode = node;
+    },
     setInstanceTopology(data: { nodes: Node[]; calls: Call[] }) {
       for (const call of data.calls) {
         for (const node of data.nodes) {
@@ -106,6 +119,56 @@ export const topologyStore = defineStore({
       this.calls = calls;
       this.nodes = nodes;
     },
+    setHierarchyInstanceTopology(data: InstanceHierarchy) {
+      const relations = data.relations || [];
+      const nodesMap = new Map();
+      const callList = [];
+
+      for (const relation of relations) {
+        const upperId = relation.upperInstance.id;
+        const lowerId = relation.lowerInstance.id;
+        if (!nodesMap.get(upperId)) {
+          nodesMap.set(upperId, relation.upperInstance);
+        }
+        if (!nodesMap.get(lowerId)) {
+          nodesMap.set(lowerId, relation.lowerInstance);
+        }
+        callList.push({
+          source: upperId,
+          target: lowerId,
+          id: `${upperId}->${lowerId}`,
+          sourceObj: relation.upperInstance,
+          targetObj: relation.lowerInstance,
+        });
+      }
+      this.hierarchyInstanceCalls = callList;
+      this.hierarchyInstanceNodes = Array.from(nodesMap).flat();
+    },
+    setHierarchyServiceTopology(data: ServiceHierarchy) {
+      const relations = data.relations || [];
+      const nodesMap = new Map();
+      const callList = [];
+
+      for (const relation of relations) {
+        const upperId = relation.upperService.id;
+        const lowerId = relation.lowerService.id;
+        if (!nodesMap.get(upperId)) {
+          nodesMap.set(upperId, relation.upperService);
+        }
+        if (!nodesMap.get(lowerId)) {
+          nodesMap.set(lowerId, relation.lowerService);
+        }
+        callList.push({
+          source: upperId,
+          target: lowerId,
+          id: `${upperId}->${lowerId}`,
+          sourceObj: relation.upperService,
+          targetObj: relation.lowerService,
+        });
+      }
+      this.hierarchyServiceCalls = callList;
+      this.hierarchyServiceNodes = Array.from(nodesMap).flat();
+    },
     setNodeMetricValue(m: MetricVal) {
       this.nodeMetricValue = m;
     },
@@ -482,23 +545,25 @@ export const topologyStore = defineStore({
       return res.data;
     },
     async getHierarchyServiceTopology(params: { serviceId: string; layer: string }) {
-      if (!params.serviceId || !params.layer) {
+      if (!(params.serviceId && params.layer)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("getHierarchyServiceTopology").params(params);
       if (res.data.errors) {
         return res.data;
       }
+      this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {});
       return res.data;
     },
     async getHierarchyInstanceTopology(params: { instanceId: string; layer: string }) {
-      if (!params.instanceId || !params.layer) {
+      if (!(params.instanceId && params.layer)) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql.query("getHierarchyServiceTopology").params(params);
+      const res: AxiosResponse = await graphql.query("getHierarchyInstanceTopology").params(params);
       if (res.data.errors) {
         return res.data;
       }
+      this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
       return res.data;
     },
   },

src/types/topology.d.ts

@@ -31,6 +31,12 @@ export interface Call {
   targetY?: number;
   targetX?: number;
 }
+export interface HierarchyNode {
+  id: string;
+  name: string;
+  layer: string;
+  level?: number;
+}
 export interface Node {
   id: string;
   name: string;
@@ -43,3 +49,27 @@ export interface Node {
   y?: number;
   level?: number;
 }
+
+export interface ServiceHierarchy {
+  relations: HierarchyServiceRelation[];
+}
+
+export interface HierarchyServiceRelation {
+  upperService: HierarchyRelated;
+  lowerService: HierarchyRelated;
+}
+
+type HierarchyRelated = {
+  id: string;
+  name: string;
+  layer: string;
+};
+
+export interface InstanceHierarchy {
+  relations: HierarchyInstanceRelation[];
+}
+
+export interface HierarchyInstanceRelation {
+  upperInstance: HierarchyRelated;
+  lowerInstance: HierarchyRelated;
+}

src/views/dashboard/related/topology/components/HierarchyMap.vue

@@ -153,8 +153,7 @@ limitations under the License. -->
     svg.value.call(zoom(d3, graph.value, diff.value));
   }
   async function freshNodes() {
-    topologyStore.setNode(null);
+    topologyStore.setHierarchyServiceNode(null);
-    topologyStore.setLink(null);
     const resp = await getTopology();
     loading.value = false;
 
@@ -287,9 +286,8 @@ limitations under the License. -->
   function handleNodeClick(event: MouseEvent, d: Node & { x: number; y: number }) {
     event.stopPropagation();
     hideTip();
-    topologyStore.setNode(d);
+    topologyStore.setHierarchyServiceNode(d);
-    topologyStore.setLink(null);
+    // handleGoDashboard(d.name);
-    handleGoDashboard(d.name);
   }
   function handleGoDashboard(name: string) {
     const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
@@ -314,8 +312,7 @@ limitations under the License. -->
     width.value = dom.width;
   }
   function svgEvent() {
-    topologyStore.setNode(null);
+    topologyStore.setHierarchyServiceNode(null);
-    topologyStore.setLink(null);
     dashboardStore.selectWidget(props.config);
   }