diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 2c425c93..893506e7 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -42,6 +42,7 @@ interface TopologyState { nodeMetricValue: MetricVal; linkServerMetrics: MetricVal; linkClientMetrics: MetricVal; + hierarchyNodeMetrics: MetricVal; hierarchyServiceNode: Nullable; } @@ -60,6 +61,7 @@ export const topologyStore = defineStore({ nodeMetricValue: {}, linkServerMetrics: {}, linkClientMetrics: {}, + hierarchyNodeMetrics: {}, }), actions: { setNode(node: Node) { @@ -169,8 +171,8 @@ export const topologyStore = defineStore({ this.hierarchyServiceCalls = callList; this.hierarchyServiceNodes = Array.from(nodesMap).flat(); }, - setNodeMetricValue(m: MetricVal) { - this.nodeMetricValue = m; + setHierarchyNodeMetricValue(m: MetricVal) { + this.hierarchyNodeMetrics = m; }, setLinkServerMetrics(m: MetricVal) { this.linkServerMetrics = m; @@ -178,6 +180,9 @@ export const topologyStore = defineStore({ setLinkClientMetrics(m: MetricVal) { this.linkClientMetrics = m; }, + setNodeValue(m: MetricVal) { + this.nodeMetricValue = m; + }, setLegendValues(expressions: string, data: { [key: string]: any }) { for (let idx = 0; idx < this.nodes.length; idx++) { for (let index = 0; index < expressions.length; index++) { @@ -568,6 +573,28 @@ export const topologyStore = defineStore({ this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {}); return res.data; }, + async queryHierarchyNodeExpressions(expressions: string[]) { + if (!expressions.length) { + this.setHierarchyNodeMetricValue({}); + return; + } + if (!this.hierarchyServiceNodes.length) { + this.setHierarchyNodeMetricValue({}); + return; + } + const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( + expressions, + this.hierarchyServiceNodes, + ); + const param = getExpressionQuery(); + const res = await this.getNodeExpressionValue(param); + if (res.errors) { + ElMessage.error(res.errors); + return; + } + const metrics = handleExpressionValues(res.data); + this.setHierarchyNodeMetricValue(metrics); + }, }, }); diff --git a/src/views/dashboard/related/topology/config/HierarchySettings.vue b/src/views/dashboard/related/topology/config/HierarchySettings.vue index 3ac8a76d..9f82ac6f 100644 --- a/src/views/dashboard/related/topology/config/HierarchySettings.vue +++ b/src/views/dashboard/related/topology/config/HierarchySettings.vue @@ -49,6 +49,7 @@ limitations under the License. --> import type { Option } from "@/types/app"; import { useDashboardStore } from "@/store/modules/dashboard"; import { useTopologyStore } from "@/store/modules/topology"; + import Metrics from "./Metrics.vue"; const emits = defineEmits(["update"]); const { t } = useI18n(); @@ -77,12 +78,21 @@ limitations under the License. --> function changeNodeExpressions(param: string[]) { currentConfig.value.nodeExpressions = param; + updateSettings(); } function updateSettings() { + const { hierarchyServicesConfig } = dashboardStore.selectedGrid; + const index = hierarchyServicesConfig.findIndex( + (d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer, + ); + if (index < 0) { + return; + } + hierarchyServicesConfig[index] = currentConfig.value; const param = { ...dashboardStore.selectedGrid, - hierarchyServicesConfig: currentConfig.value, + hierarchyServicesConfig, }; dashboardStore.selectWidget(param); dashboardStore.setConfigs(param); diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue index 1201f346..de657676 100644 --- a/src/views/dashboard/related/topology/service/HierarchyMap.vue +++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue @@ -96,7 +96,7 @@ limitations under the License. -->
- +
@@ -128,7 +128,7 @@ limitations under the License. --> const props = defineProps({ config: { type: Object as PropType, - default: () => ({ graph: {} }), + default: () => ({}), }, }); const { t } = useI18n(); @@ -143,7 +143,6 @@ limitations under the License. --> const graph = ref>(null); const settings = ref(props.config); const showSetting = ref(false); - const graphConfig = computed(() => props.config.graph || {}); const topologyLayout = ref({}); const popover = ref>(null); const graphWidth = ref(100); @@ -188,11 +187,16 @@ limitations under the License. --> } async function update() { + topologyStore.queryHierarchyNodeExpressions(settings.value.hierarchyServicesConfig || []); // await initLegendMetrics(); draw(); popover.value = d3.select("#popover"); } + function updateSettings(config: any) { + settings.value = config; + } + function draw() { const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []); diff --git a/src/views/dashboard/related/topology/service/utils/layout.ts b/src/views/dashboard/related/topology/service/utils/layout.ts index c42a4ded..d0a20fde 100644 --- a/src/views/dashboard/related/topology/service/utils/layout.ts +++ b/src/views/dashboard/related/topology/service/utils/layout.ts @@ -191,22 +191,17 @@ export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) { } return levels; } -export function changeNode( - d: { x: number; y: number }, - currentNode: Nullable, - topologyLayout: any, - radius: number, -) { +export function changeNode(d: { x: number; y: number }, currentNode: Nullable, layout: any, radius: number) { if (!currentNode) { return; } - for (const node of topologyLayout.nodes) { + for (const node of layout.nodes) { if (node.id === currentNode.id) { node.x = d.x; node.y = d.y; } } - for (const call of topologyLayout.calls) { + for (const call of layout.calls) { if (call.sourceObj.id === currentNode.id) { call.sourceObj.x = d.x; call.sourceObj.y = d.y; @@ -230,5 +225,5 @@ export function changeNode( call.targetY = pos[1].y; } } - return computeCallPos(topologyLayout.value.calls, radius); + return computeCallPos(layout.calls, radius); }