From ac57b229fc8967e4024e307145f699af1d278e33 Mon Sep 17 00:00:00 2001 From: Fine0830 Date: Thu, 23 Nov 2023 16:37:26 +0800 Subject: [PATCH] feat: enhance topology layout and fix calls metrics (#344) --- src/store/modules/dashboard.ts | 1 + src/styles/theme.scss | 4 +++ src/views/dashboard/data.ts | 4 +++ .../related/topology/components/Graph.vue | 30 ++++++++++++------- .../topology/components/PodTopology.vue | 6 ++-- .../related/topology/components/Settings.vue | 5 ++-- 6 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index c2c32da5..5fd55921 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -179,6 +179,7 @@ export const dashboardStore = defineStore({ newItem.graph = { showDepth: true, }; + newItem.metricMode = MetricModes.Expression; } if (ControlsTypes.includes(type)) { newItem.h = 32; diff --git a/src/styles/theme.scss b/src/styles/theme.scss index e41085c3..12b1bbed 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -157,6 +157,10 @@ $active-background: var(--el-color-primary); $font-size-smaller: 12px; $font-size-normal: 14px; +.opt:hover { + background-color: var(--sw-list-hover) !important; +} + .el-loading-mask { background-color: var(--theme-background); } diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts index 3b503638..16f84074 100644 --- a/src/views/dashboard/data.ts +++ b/src/views/dashboard/data.ts @@ -345,3 +345,7 @@ export enum MetricModes { Expression = "Expression", General = "General", } +export enum CallTypes { + Server = "SERVER", + Client = "CLIENT", +} diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 3e732ba4..29aa7322 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -140,7 +140,7 @@ limitations under the License. --> import { useSelectorStore } from "@/store/modules/selectors"; import { useTopologyStore } from "@/store/modules/topology"; import { useDashboardStore } from "@/store/modules/dashboard"; - import { EntityType, DepthList, MetricModes } from "../../../data"; + import { EntityType, DepthList, MetricModes, CallTypes } from "../../../data"; import router from "@/router"; import { ElMessage } from "element-plus"; import Settings from "./Settings.vue"; @@ -224,8 +224,8 @@ limitations under the License. --> async function update() { if (settings.value.metricMode === MetricModes.Expression) { topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []); - topologyStore.getLinkExpressions(settings.value.linkClientExpressions || []); - topologyStore.getLinkExpressions(settings.value.linkServerExpressions || []); + topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client); + topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server); } else { topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []); topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); @@ -239,10 +239,9 @@ limitations under the License. --> setNodeTools(settings.value.nodeDashboard); } - function draw() { - const node = findMostFrequent(topologyStore.calls); - const levels = []; - const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => { + function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) { + const node = findMostFrequent(calls); + const nodes = JSON.parse(JSON.stringify(nodeList)).sort((a: Node, b: Node) => { if (a.name.toLowerCase() < b.name.toLowerCase()) { return -1; } @@ -254,15 +253,14 @@ limitations under the License. --> const index = nodes.findIndex((n: Node) => n.type === "USER"); let key = index; if (index < 0) { - const idx = nodes.findIndex((n: Node) => n.id === node.id); - key = idx; + key = nodes.findIndex((n: Node) => n.id === node.id); } levels.push([nodes[key]]); nodes.splice(key, 1); for (const level of levels) { const a = []; for (const l of level) { - for (const n of topologyStore.calls) { + for (const n of calls) { if (n.target === l.id) { const i = nodes.findIndex((d: Node) => d.id === n.source); if (i > -1) { @@ -283,6 +281,18 @@ limitations under the License. --> levels.push(a); } } + if (nodes.length) { + const ids = nodes.map((d: Node) => d.id); + const links = calls.filter((item: Call) => ids.includes(item.source) || ids.includes(item.target)); + const list = computeLevels(links, nodes, []); + levels = list.map((subArrayA, index) => subArrayA.concat(levels[index])); + } + return levels; + } + + function draw() { + const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []); + topologyLayout.value = layout(levels, topologyStore.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/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue index 40812b14..3d445895 100644 --- a/src/views/dashboard/related/topology/components/PodTopology.vue +++ b/src/views/dashboard/related/topology/components/PodTopology.vue @@ -69,7 +69,7 @@ limitations under the License. --> import { useDashboardStore } from "@/store/modules/dashboard"; import { useSelectorStore } from "@/store/modules/selectors"; import { useAppStoreWithOut } from "@/store/modules/app"; - import { EntityType, DepthList, MetricModes } from "../../../data"; + import { EntityType, DepthList, MetricModes, CallTypes } from "../../../data"; import { ElMessage } from "element-plus"; import Sankey from "./Sankey.vue"; import Settings from "./Settings.vue"; @@ -121,8 +121,8 @@ limitations under the License. --> width.value = dom.width - 5; if (settings.value.metricMode === MetricModes.Expression) { topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []); - topologyStore.getLinkExpressions(settings.value.linkClientExpressions || []); - topologyStore.getLinkExpressions(settings.value.linkServerExpressions || []); + topologyStore.getLinkExpressions(settings.value.linkClientExpressions || [], CallTypes.Client); + topologyStore.getLinkExpressions(settings.value.linkServerExpressions || [], CallTypes.Server); } else { topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []); diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index 5fbea92b..be20080a 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -277,6 +277,7 @@ limitations under the License. --> LegendOpt, MetricsType, MetricModes, + CallTypes, } from "../../../data"; import type { Option } from "@/types/app"; import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; @@ -515,7 +516,7 @@ limitations under the License. --> topologyStore.setLinkServerMetrics({}); return; } - topologyStore.getLinkExpressions(states.linkServerExpressions, "SERVER"); + topologyStore.getLinkExpressions(states.linkServerExpressions, CallTypes.Server); } function changeLinkClientExpressions(param: string[]) { if (!isExpression.value) { @@ -527,7 +528,7 @@ limitations under the License. --> topologyStore.changeLinkClientMetrics({}); return; } - topologyStore.getLinkExpressions(states.linkClientExpressions, "CLIENT"); + topologyStore.getLinkExpressions(states.linkClientExpressions, CallTypes.Client); } function updateLinkClientMetrics(options: Option[] | any) { const opt = options.map((d: Option) => d.value);