fix: update

src/graphql/fragments/topology.ts

@@ -108,11 +108,13 @@ export const HierarchyServiceTopology = {
         id
         name
         layer
+        normal
       }
       lowerService {
         id
         name
         layer
+        normal
       }
     }
   }`,
@@ -126,12 +128,27 @@ export const HierarchyInstanceTopology = {
         id
         name
         layer
+        normal
+        serviceName
+        serviceId
       }
       lowerInstance {
         id
         name
         layer
+        normal
+        serviceName
+        serviceId
       }
     }
   }`,
 };
+
+export const ListLayerLevels = {
+  query: `
+  levels: listLayerLevels {
+    layer
+    level
+  }
+  `,
+};

src/graphql/query/topology.ts

@@ -21,6 +21,7 @@ import {
   ProcessTopology,
   HierarchyServiceTopology,
   HierarchyInstanceTopology,
+  ListLayerLevels,
 } from "../fragments/topology";
 
 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
@@ -29,3 +30,4 @@ export const getServicesTopology = `query queryData(${ServicesTopology.variable}
 export const getProcessTopology = `query queryData(${ProcessTopology.variable}) {${ProcessTopology.query}}`;
 export const getHierarchyInstanceTopology = `query queryData(${HierarchyInstanceTopology.variable}) {${HierarchyInstanceTopology.query}}`;
 export const getHierarchyServiceTopology = `query queryData(${HierarchyServiceTopology.variable}) {${HierarchyServiceTopology.query}}`;
+export const queryListLayerLevels = `query queryLayerLevels {${ListLayerLevels.query}}`;

src/store/modules/topology.ts

@@ -120,7 +120,7 @@ export const topologyStore = defineStore({
       this.calls = calls;
       this.nodes = nodes;
     },
-    setHierarchyInstanceTopology(data: InstanceHierarchy) {
+    setHierarchyInstanceTopology(data: InstanceHierarchy, levels: { layer: string; level: number }[]) {
       const relations = data.relations || [];
       const nodesMap = new Map();
       const callList = [];
@@ -130,8 +130,12 @@ export const topologyStore = defineStore({
         const lowerId = relation.lowerInstance.id;
         const lowerKey = `${lowerId}-${relation.lowerInstance.layer}`;
         const upperKey = `${upperId}-${relation.upperInstance.layer}`;
-        const lowerObj = { ...relation.lowerInstance, key: lowerId, id: lowerKey };
+        const lowerLevel: any =
-        const upperObj = { ...relation.upperInstance, key: upperId, id: upperKey };
+          levels.find((l: { layer: string; level: number }) => l.layer === relation.lowerInstance.layer) || {};
+        const upperLevel: any =
+          levels.find((l: { layer: string; level: number }) => l.layer === relation.upperInstance.layer) || {};
+        const lowerObj = { ...relation.lowerInstance, key: lowerId, id: lowerKey, l: lowerLevel.level };
+        const upperObj = { ...relation.upperInstance, key: upperId, id: upperKey, l: upperLevel.level };
         if (!nodesMap.get(upperKey)) {
           nodesMap.set(upperKey, upperObj);
         }
@@ -152,7 +156,7 @@ export const topologyStore = defineStore({
         this.hierarchyInstanceNodes.push(d);
       }
     },
-    setHierarchyServiceTopology(data: ServiceHierarchy) {
+    setHierarchyServiceTopology(data: ServiceHierarchy, levels: { layer: string; level: number }[]) {
       const relations = data.relations || [];
       const nodesMap = new Map();
       const callList = [];
@@ -162,8 +166,12 @@ export const topologyStore = defineStore({
         const lowerId = relation.lowerService.id;
         const lowerKey = `${lowerId}-${relation.lowerService.layer}`;
         const upperKey = `${upperId}-${relation.upperService.layer}`;
-        const lowerObj = { ...relation.lowerService, key: lowerId, id: lowerKey };
+        const lowerLevel: any =
-        const upperObj = { ...relation.upperService, key: upperId, id: upperKey };
+          levels.find((l: { layer: string; level: number }) => l.layer === relation.lowerService.layer) || {};
+        const upperLevel: any =
+          levels.find((l: { layer: string; level: number }) => l.layer === relation.upperService.layer) || {};
+        const lowerObj = { ...relation.lowerService, key: lowerId, id: lowerKey, l: lowerLevel.level };
+        const upperObj = { ...relation.upperService, key: upperId, id: upperKey, l: upperLevel.level };
         if (!nodesMap.get(upperKey)) {
           nodesMap.set(upperKey, upperObj);
         }
@@ -578,7 +586,17 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {});
+      const resp = await this.getListLayerLevels();
+      if (resp.errors) {
+        return resp;
+      }
+      const levels = resp.data.levels || [];
+      this.setHierarchyServiceTopology(res.data.data.hierarchyServiceTopology || {}, levels);
+      return res.data;
+    },
+    async getListLayerLevels() {
+      const res: AxiosResponse = await graphql.query("queryListLayerLevels").params({});
+
       return res.data;
     },
     async getHierarchyInstanceTopology() {
@@ -594,7 +612,12 @@ export const topologyStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.setHierarchyInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
+      const resp = await this.getListLayerLevels();
+      if (resp.errors) {
+        return resp;
+      }
+      const levels = resp.data.levels || [];
+      this.setHierarchyInstanceTopology(res.data.data.hierarchyInstanceTopology || {}, levels);
       return res.data;
     },
     async queryHierarchyExpressions(expressions: string[], nodes: Node[]) {

src/types/topology.d.ts

@@ -50,6 +50,7 @@ export interface Node {
   x?: number;
   y?: number;
   level?: number;
+  l?: number;
 }
 
 export interface ServiceHierarchy {

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

@@ -78,7 +78,7 @@ limitations under the License. -->
   import type { Node, Call } from "@/types/topology";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import icons from "@/assets/img/icons";
-  import { changeNode, computeLevels, hierarchy } from "./utils/layout";
+  import { changeNode, computeHierarchyLevels, hierarchy } from "./utils/layout";
   import zoom from "@/views/dashboard/related/components/utils/zoom";
 
   /*global Nullable, defineProps */
@@ -99,6 +99,10 @@ limitations under the License. -->
       type: Array as PropType<Call[]>,
       default: () => [],
     },
+    layerLevels: {
+      type: Array as PropType<{ layer: string; level: number }[]>,
+      default: () => [],
+    },
   });
   const emits = defineEmits(["showNodeTip", "handleNodeClick", "hideTip", "getNodeMetrics"]);
   const dashboardStore = useDashboardStore();
@@ -109,8 +113,8 @@ limitations under the License. -->
   const topologyLayout = ref<any>({});
   const graphWidth = ref<number>(100);
   const currentNode = ref<Nullable<Node>>(null);
-  const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 0]);
+  const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 20]);
-  const radius = 4;
+  const radius = 10;
 
   async function init() {
     const dom = document.querySelector(".hierarchy-related")?.getBoundingClientRect() || {
@@ -127,8 +131,7 @@ limitations under the License. -->
   }
 
   function draw() {
-    const levels = computeLevels(props.calls, props.nodes, []);
+    const levels = computeHierarchyLevels(props.nodes);
-
     topologyLayout.value = hierarchy(levels, props.calls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {

src/views/dashboard/related/topology/components/utils/layout.ts

@@ -229,7 +229,6 @@ export function changeNode(d: { x: number; y: number }, currentNode: Nullable<No
 }
 export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
   // precompute level depth
-  console.log(levels);
   levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
 
   const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
@@ -237,7 +236,7 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
   const padding = 30;
   const node_height = 120;
   const node_width = 100;
-  const bundle_width = 14;
+  const bundle_width = 10;
   const metro_d = 4;
   for (const n of nodes) {
     n.width = 5 * metro_d;
@@ -247,7 +246,7 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
   let x_offset = 0;
   for (const level of levels) {
     x_offset = 0;
-    y_offset += 5 * bundle_width;
+    y_offset += 3 * bundle_width;
     for (const l of level) {
       const n: any = l;
       for (const call of calls) {
@@ -270,3 +269,16 @@ export function hierarchy(levels: Node[][], calls: Call[], radius: number) {
 
   return { nodes, layout, calls: computeCallPos(calls, radius) };
 }
+export function computeHierarchyLevels(nodes: Node[]) {
+  const levelsNum: number[] = nodes.map((d: Node) => d.l || 0);
+  const list = [...new Set(levelsNum)];
+  const sortedArr = list.sort((a, b) => a - b);
+  const nodesList = [];
+
+  for (const min of sortedArr) {
+    const arr = nodes.filter((d) => d.l === min);
+    nodesList.push(arr);
+  }
+
+  return nodesList;
+}