From 6e8e00512d4f6188ac74450adc14df405c9fd5be Mon Sep 17 00:00:00 2001 From: Fine Date: Fri, 12 Jan 2024 18:49:00 +0800 Subject: [PATCH] fix: update --- src/graphql/fragments/topology.ts | 17 ++++++++ src/graphql/query/topology.ts | 2 + src/store/modules/topology.ts | 39 +++++++++++++++---- src/types/topology.d.ts | 1 + .../related/topology/components/Graph.vue | 13 ++++--- .../topology/components/utils/layout.ts | 18 +++++++-- 6 files changed, 74 insertions(+), 16 deletions(-) diff --git a/src/graphql/fragments/topology.ts b/src/graphql/fragments/topology.ts index 232931e5..327c1408 100644 --- a/src/graphql/fragments/topology.ts +++ b/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 + } + `, +}; diff --git a/src/graphql/query/topology.ts b/src/graphql/query/topology.ts index e4062819..37d48135 100644 --- a/src/graphql/query/topology.ts +++ b/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}}`; diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 9aae1028..b555aa9e 100644 --- a/src/store/modules/topology.ts +++ b/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 upperObj = { ...relation.upperInstance, key: upperId, id: upperKey }; + const lowerLevel: any = + 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 upperObj = { ...relation.upperService, key: upperId, id: upperKey }; + const lowerLevel: any = + 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[]) { diff --git a/src/types/topology.d.ts b/src/types/topology.d.ts index ff87c5e9..bcc8659c 100644 --- a/src/types/topology.d.ts +++ b/src/types/topology.d.ts @@ -50,6 +50,7 @@ export interface Node { x?: number; y?: number; level?: number; + l?: number; } export interface ServiceHierarchy { diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 6ba2e68c..7d6719a0 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/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, 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({}); const graphWidth = ref(100); const currentNode = ref>(null); - const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 0]); - const radius = 4; + const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 20]); + 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 }) => { diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts index d1a417c1..cf2017d2 100644 --- a/src/views/dashboard/related/topology/components/utils/layout.ts +++ b/src/views/dashboard/related/topology/components/utils/layout.ts @@ -229,7 +229,6 @@ export function changeNode(d: { x: number; y: number }, currentNode: Nullable 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; +}