From e0bc912e123d13d5aa489802037d411222400f99 Mon Sep 17 00:00:00 2001 From: Fine Date: Mon, 8 Jan 2024 17:59:06 +0800 Subject: [PATCH] feat: update --- src/graphql/fragments/topology.ts | 2 +- src/store/modules/topology.ts | 73 ++++++++++++++++++- src/types/topology.d.ts | 30 ++++++++ .../topology/components/HierarchyMap.vue | 11 +-- 4 files changed, 104 insertions(+), 12 deletions(-) diff --git a/src/graphql/fragments/topology.ts b/src/graphql/fragments/topology.ts index 5d387fa8..232931e5 100644 --- a/src/graphql/fragments/topology.ts +++ b/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 diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 666d717c..58dd7ef6 100644 --- a/src/store/modules/topology.ts +++ b/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; calls: Call[]; nodes: Node[]; + hierarchyServiceCalls: Call[]; + hierarchyServiceNodes: HierarchyNode[]; + hierarchyInstanceCalls: Call[]; + hierarchyInstanceNodes: HierarchyNode[]; nodeMetricValue: MetricVal; linkServerMetrics: MetricVal; linkClientMetrics: MetricVal; + hierarchyServiceNode: Nullable; } 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; }, }, diff --git a/src/types/topology.d.ts b/src/types/topology.d.ts index 91df9452..8d16d449 100644 --- a/src/types/topology.d.ts +++ b/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; +} diff --git a/src/views/dashboard/related/topology/components/HierarchyMap.vue b/src/views/dashboard/related/topology/components/HierarchyMap.vue index c5d1419e..dc3177ae 100644 --- a/src/views/dashboard/related/topology/components/HierarchyMap.vue +++ b/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.setLink(null); + topologyStore.setHierarchyServiceNode(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.setLink(null); - handleGoDashboard(d.name); + topologyStore.setHierarchyServiceNode(d); + // 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.setLink(null); + topologyStore.setHierarchyServiceNode(null); dashboardStore.selectWidget(props.config); }