From 26a055ef2257726b7057518380e92e9743e92984 Mon Sep 17 00:00:00 2001 From: Fine Date: Sun, 20 Aug 2023 15:19:15 +0800 Subject: [PATCH] fix: legend expressions --- src/hooks/useExpressionsProcessor.ts | 8 ++--- src/store/modules/topology.ts | 13 +++++++-- src/types/components.d.ts | 1 - .../related/topology/components/Graph.vue | 29 ++++++++++++++----- .../related/topology/components/Settings.vue | 24 +++++++++++---- 5 files changed, 53 insertions(+), 22 deletions(-) diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index c97b6a77..db7590cb 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -315,7 +315,7 @@ export async function useExpressionsQueryPodsMetrics( return expressionParams; } -export function useQueryTopologyExpressionsProcessor(metrics: string[], source: any[], scope: string) { +export function useQueryTopologyExpressionsProcessor(metrics: string[], instances: any[]) { const appStore = useAppStoreWithOut(); function getNodeExpressionQuery() { @@ -323,7 +323,7 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], source: duration: appStore.durationTime, }; const variables: string[] = [`$duration: Duration!`]; - const fragmentList = source.map((d: any, index: number) => { + const fragmentList = instances.map((d: any, index: number) => { const entity = { serviceName: d.sourceObj ? d.sourceObj.name : d.name, normal: true, @@ -348,7 +348,7 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], source: } function handleExpressionValues(resp: { [key: string]: any }) { const obj: any = {}; - for (let idx = 0; idx < source.length; idx++) { + for (let idx = 0; idx < instances.length; idx++) { for (let index = 0; index < metrics.length; index++) { const k = "expression" + idx + index; if (metrics[index]) { @@ -357,7 +357,7 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], source: values: [], }; } - obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: source[idx].id }); + obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: instances[idx].id }); } } } diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index b3d76588..d2224ebc 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -26,7 +26,6 @@ import query from "@/graphql/fetch"; import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor"; import { ElMessage } from "element-plus"; -import { MetricCatalog } from "@/views/dashboard/data"; interface MetricVal { [key: string]: { values: { id: string; value: unknown }[] }; @@ -116,6 +115,16 @@ export const topologyStore = defineStore({ setLinkClientMetrics(m: MetricVal) { this.linkClientMetrics = 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++) { + const k = "expression" + idx + index; + if (expressions[index]) { + this.nodes[idx][expressions[index]] = Number(data[k].results[0].values[0].value); + } + } + } + }, async getDepthServiceTopology(serviceIds: string[], depth: number) { const res = await this.getServicesTopology(serviceIds); if (depth > 1) { @@ -376,7 +385,6 @@ export const topologyStore = defineStore({ const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( expressions, calls, - MetricCatalog.SERVICE_RELATION, ); const param = getNodeExpressionQuery(); const res = await this.getNodeExpressionValue(param); @@ -419,7 +427,6 @@ export const topologyStore = defineStore({ const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( expressions, this.nodes, - "", ); const param = getNodeExpressionQuery(); const res = await this.getNodeExpressionValue(param); diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 08bd9fc6..0ab1e1bf 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -37,7 +37,6 @@ declare module '@vue/runtime-core' { ElTooltip: typeof import('element-plus/es')['ElTooltip'] Graph: typeof import('./../components/Graph.vue')['default'] Icon: typeof import('./../components/Icon.vue')['default'] - 'Icon copy': typeof import('./../components/Icon copy.vue')['default'] Loading: typeof import('element-plus/es')['ElLoadingDirective'] Radio: typeof import('./../components/Radio.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 1847398a..4fec682e 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -153,6 +153,7 @@ limitations under the License. --> import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; import { layout, circleIntersection, computeCallPos } from "./utils/layout"; import zoom from "../../components/utils/zoom"; + import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor"; /*global Nullable, defineProps */ const props = defineProps({ @@ -184,7 +185,6 @@ limitations under the License. --> const currentNode = ref>(); const diff = computed(() => [(width.value - graphWidth.value - 130) / 2, 100]); const radius = 8; - const isExpression = computed(() => settings.value.metricMode === MetricModes.Expression); onMounted(async () => { await nextTick(); @@ -221,10 +221,10 @@ limitations under the License. --> } async function update() { - if (isExpression.value) { + if (settings.value.metricMode === MetricModes.Expression) { topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []); - topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); - topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []); + topologyStore.getLinkExpressions(settings.value.linkClientExpressions || []); + topologyStore.getLinkExpressions(settings.value.linkServerExpressions || []); } else { topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []); topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); @@ -237,6 +237,7 @@ limitations under the License. --> tooltip.value = d3.select("#tooltip"); setNodeTools(settings.value.nodeDashboard); } + function draw() { const node = findMostFrequent(topologyStore.calls); const levels = []; @@ -360,16 +361,28 @@ limitations under the License. --> } async function initLegendMetrics() { - const ids = topologyStore.nodes.map((d: Node) => d.id); const names = props.config.legend.map((d: any) => d.name); - if (names.length && ids.length) { - const param = await useQueryTopologyMetrics(names, ids); - const res = await topologyStore.getLegendMetrics(param); + if (settings.value.metricMode === MetricModes.Expression) { + const { getNodeExpressionQuery } = useQueryTopologyExpressionsProcessor(names, topologyStore.nodes); + const param = getNodeExpressionQuery(); + const res = await topologyStore.getNodeExpressionValue(param); if (res.errors) { ElMessage.error(res.errors); + } else { + topologyStore.setLegendValues(names, res.data); + } + } else { + const ids = topologyStore.nodes.map((d: Node) => d.id); + if (names.length && ids.length) { + const param = await useQueryTopologyMetrics(names, ids); + const res = await topologyStore.getLegendMetrics(param); + if (res.errors) { + ElMessage.error(res.errors); + } } } } + function getNodeStatus(d: any) { const legend = settings.value.legend; if (!legend) { diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index 4c565dac..e62c07ef 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -202,7 +202,6 @@ limitations under the License. --> v-if="isExpression" v-model="metric.name" placeholder="Please input a expression" - type="number" @change="changeLegend(LegendOpt.NAME, $event, index)" size="small" class="item" @@ -270,6 +269,7 @@ limitations under the License. --> } from "../../../data"; import type { Option } from "@/types/app"; import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; + import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor"; import type { Node } from "@/types/topology"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; import Metrics from "./Metrics.vue"; @@ -372,18 +372,30 @@ limitations under the License. --> } async function setLegend() { updateSettings(); - const ids = topologyStore.nodes.map((d: Node) => d.id); const names = dashboardStore.selectedGrid.legend.map((d: any) => d.name); if (!names.length) { emit("updateNodes"); return; } - const param = await useQueryTopologyMetrics(names, ids); - const res = await topologyStore.getLegendMetrics(param); + if (isExpression.value) { + const { getNodeExpressionQuery } = useQueryTopologyExpressionsProcessor(names, topologyStore.nodes); + const param = getNodeExpressionQuery(); + const res = await topologyStore.getNodeExpressionValue(param); + if (res.errors) { + ElMessage.error(res.errors); + } else { + topologyStore.setLegendValues(names, res.data); + } + } else { + const ids = topologyStore.nodes.map((d: Node) => d.id); + const param = await useQueryTopologyMetrics(names, ids); + const res = await topologyStore.getLegendMetrics(param); - if (res.errors) { - ElMessage.error(res.errors); + if (res.errors) { + ElMessage.error(res.errors); + } } + emit("updateNodes"); } function changeNodeDashboard(opt: any) {