From 2c0d03cbd27aa03f59fa6cd70bf0bfedf3903c72 Mon Sep 17 00:00:00 2001 From: Fine Date: Wed, 10 Jan 2024 12:30:02 +0800 Subject: [PATCH] fix: update --- src/store/modules/topology.ts | 35 +++++++++++++------ .../related/topology/service/HierarchyMap.vue | 33 +++-------------- .../related/topology/service/ServiceMap.vue | 1 - 3 files changed, 29 insertions(+), 40 deletions(-) diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 893506e7..03d14830 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -144,7 +144,10 @@ export const topologyStore = defineStore({ }); } this.hierarchyInstanceCalls = callList; - this.hierarchyInstanceNodes = Array.from(nodesMap).flat(); + this.hierarchyInstanceNodes = []; + for (const d of nodesMap.values()) { + this.hierarchyInstanceNodes.push(d); + } }, setHierarchyServiceTopology(data: ServiceHierarchy) { const relations = data.relations || []; @@ -154,22 +157,29 @@ export const topologyStore = defineStore({ for (const relation of relations) { const upperId = relation.upperService.id; const lowerId = relation.lowerService.id; - if (!nodesMap.get(upperId)) { - nodesMap.set(upperId, relation.upperService); + 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 }; + if (!nodesMap.get(upperKey)) { + nodesMap.set(upperKey, upperObj); } - if (!nodesMap.get(lowerId)) { - nodesMap.set(lowerId, relation.lowerService); + if (!nodesMap.get(lowerKey)) { + nodesMap.set(lowerKey, lowerObj); } callList.push({ - source: upperId, - target: lowerId, - id: `${upperId}->${lowerId}`, - sourceObj: relation.upperService, - targetObj: relation.lowerService, + source: lowerKey, + target: upperKey, + id: `${upperKey}->${lowerKey}`, + sourceObj: upperObj, + targetObj: lowerObj, }); } this.hierarchyServiceCalls = callList; - this.hierarchyServiceNodes = Array.from(nodesMap).flat(); + this.hierarchyServiceNodes = []; + for (const d of nodesMap.values()) { + this.hierarchyServiceNodes.push(d); + } }, setHierarchyNodeMetricValue(m: MetricVal) { this.hierarchyNodeMetrics = m; @@ -180,6 +190,9 @@ export const topologyStore = defineStore({ setLinkClientMetrics(m: MetricVal) { this.linkClientMetrics = m; }, + setNodeMetricValue(m: MetricVal) { + this.nodeMetricValue = m; + }, setNodeValue(m: MetricVal) { this.nodeMetricValue = m; }, diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue index 8e6e1e8a..03d64fb3 100644 --- a/src/views/dashboard/related/topology/service/HierarchyMap.vue +++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue @@ -147,7 +147,7 @@ limitations under the License. --> const popover = ref>(null); const graphWidth = ref(100); const currentNode = ref>(null); - const diff = computed(() => [(width.value - graphWidth.value) / 2, 0]); + const diff = computed(() => [(width.value - graphWidth.value - 120) / 2, 0]); const radius = 8; onMounted(async () => { @@ -166,17 +166,11 @@ limitations under the License. --> svg.value = d3.select(".hierarchy-services-svg"); graph.value = d3.select(".hierarchy-services-graph"); loading.value = true; - const json = await selectorStore.fetchServices(dashboardStore.layerId); - if (json.errors) { - ElMessage.error(json.errors); - return; - } await freshNodes(); svg.value.call(zoom(d3, graph.value, diff.value)); } async function freshNodes() { topologyStore.setHierarchyServiceNode(null); - // const resp = await getTopology(); const resp = await topologyStore.getHierarchyServiceTopology(); loading.value = false; @@ -257,31 +251,14 @@ limitations under the License. --> } function getNodeStatus(d: any) { - const { legend, legendMQE } = settings.value; - if (settings.value.metricMode === MetricModes.Expression) { - if (!legendMQE) { - return icons.CUBE; - } - if (!legendMQE.expression) { - return icons.CUBE; - } - return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE; - } - if (!legend) { + const { legendMQE } = settings.value; + if (!legendMQE) { return icons.CUBE; } - if (!legend.length) { + if (!legendMQE.expression) { return icons.CUBE; } - let c = true; - for (const l of legend) { - if (l.condition === "<") { - c = c && d[l.name] < Number(l.value); - } else { - c = c && d[l.name] > Number(l.value); - } - } - return c && d.isReal ? icons.CUBEERROR : icons.CUBE; + return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE; } function showNodeTip(event: MouseEvent, data: Node) { const nodeMetrics: string[] = diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue index 9dc61b68..d0f6f8c7 100644 --- a/src/views/dashboard/related/topology/service/ServiceMap.vue +++ b/src/views/dashboard/related/topology/service/ServiceMap.vue @@ -447,7 +447,6 @@ limitations under the License. --> } async function handleHierarchyRelatedServices() { hierarchyRelated.value = true; - handleInspect(); } async function handleInspect() { const id = topologyStore.node.id;