diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index 91a587f0..c97b6a77 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -23,6 +23,7 @@ import { useAppStoreWithOut } from "@/store/modules/app"; import type { MetricConfigOpt } from "@/types/dashboard"; import type { Instance, Endpoint, Service } from "@/types/selector"; import type { Node, Call } from "@/types/topology"; +import { MetricCatalog } from "@/views/dashboard/data"; export async function useExpressionsQueryProcessor(config: Indexable) { function expressionsGraphqlPods() { @@ -314,18 +315,20 @@ export async function useExpressionsQueryPodsMetrics( return expressionParams; } -export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: Node[]) { +export function useQueryTopologyExpressionsProcessor(metrics: string[], source: any[], scope: string) { const appStore = useAppStoreWithOut(); - function getNodeExpressions() { + function getNodeExpressionQuery() { const conditions: { [key: string]: unknown } = { duration: appStore.durationTime, }; const variables: string[] = [`$duration: Duration!`]; - const fragmentList = nodes.map((d: Node, index: number) => { + const fragmentList = source.map((d: any, index: number) => { const entity = { - serviceName: d.name, + serviceName: d.sourceObj ? d.sourceObj.name : d.name, normal: true, + destNormal: true, + destServiceName: (d.targetObj && d.targetObj.name) || undefined, }; variables.push(`$entity${index}: Entity!`); conditions[`entity${index}`] = entity; @@ -343,9 +346,9 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: N return { queryStr, conditions }; } - function handleExpressionValues(resp: any) { + function handleExpressionValues(resp: { [key: string]: any }) { const obj: any = {}; - for (let idx = 0; idx < nodes.length; idx++) { + for (let idx = 0; idx < source.length; idx++) { for (let index = 0; index < metrics.length; index++) { const k = "expression" + idx + index; if (metrics[index]) { @@ -354,12 +357,12 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: N values: [], }; } - obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: nodes[idx].id }); + obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: source[idx].id }); } } } return obj; } - return { getNodeExpressions, handleExpressionValues }; + return { getNodeExpressionQuery, handleExpressionValues }; } diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index fa1455c8..7df684ab 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -26,6 +26,7 @@ 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 }[] }; @@ -352,6 +353,7 @@ export const topologyStore = defineStore({ this.setLinkServerMetrics({}); return; } + console.log(this.calls); const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id); if (!idsS.length) { return; @@ -363,6 +365,33 @@ export const topologyStore = defineStore({ ElMessage.error(res.errors); } }, + async getLinkExpressions(expressions: string[], type: string) { + if (!expressions.length) { + this.setLinkServerMetrics({}); + return; + } + const calls = this.calls.filter((i: Call) => i.detectPoints.includes(type)); + if (!calls.length) { + return; + } + const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( + expressions, + calls, + MetricCatalog.SERVICE_RELATION, + ); + const param = getNodeExpressionQuery(); + const res = await this.getNodeExpressionValue(param); + if (res.errors) { + ElMessage.error(res.errors); + return; + } + const metrics = handleExpressionValues(res.data); + if (type === "SERVER") { + this.setLinkServerMetrics(metrics); + } else { + this.setLinkClientMetrics(metrics); + } + }, async queryNodeMetrics(nodeMetrics: string[]) { if (!nodeMetrics.length) { this.setNodeMetricValue({}); @@ -388,11 +417,12 @@ export const topologyStore = defineStore({ this.setNodeMetricValue({}); return; } - const { getNodeExpressions, handleExpressionValues } = useQueryTopologyExpressionsProcessor( + const { getNodeExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( expressions, this.nodes, + "", ); - const param = getNodeExpressions(); + const param = getNodeExpressionQuery(); const res = await this.getNodeExpressionValue(param); if (res.errors) { ElMessage.error(res.errors); @@ -427,6 +457,7 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } + console.log(res.data.data); this.setLinkServerMetrics(res.data.data); return res.data; }, diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index a197ec38..1847398a 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -415,10 +415,16 @@ limitations under the License. --> .html(tipHtml); } function showLinkTip(event: MouseEvent, data: Call) { - const linkClientMetrics: string[] = settings.value.linkClientMetrics || []; + const linkClientMetrics: string[] = + settings.value.metricMode === MetricModes.Expression + ? settings.value.linkClientExpressions + : settings.value.linkClientMetrics || []; const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || []; const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || []; - const linkServerMetrics: string[] = settings.value.linkServerMetrics || []; + const linkServerMetrics: string[] = + settings.value.metricMode === MetricModes.Expression + ? settings.value.linkServerExpressions + : settings.value.linkServerMetrics || []; const htmlServer = linkServerMetrics.map((m, index) => { const metric = topologyStore.linkServerMetrics[m].values.find( (val: { id: string; value: unknown }) => val.id === data.id, diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index e744cbb6..11c57cb6 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -52,7 +52,7 @@ limitations under the License. --> :tags="states.linkServerExpressions" :vertical="true" :text="t('addExpressions')" - @change="(param) => changeExpressions({ linkServerExpressions: param })" + @change="(param) => changeLinkServerExpressions({ linkServerExpressions: param })" /> :tags="states.linkClientExpressions" :vertical="true" :text="t('addExpressions')" - @change="(param) => changeExpressions({ linkClientExpressions: param })" + @change="(param) => changeLinkClientExpressions({ linkClientExpressions: param })" /> import { useDashboardStore } from "@/store/modules/dashboard"; import { useTopologyStore } from "@/store/modules/topology"; import { ElMessage } from "element-plus"; - import { MetricCatalog, ScopeType, MetricConditions } from "../../../data"; + import { + MetricCatalog, + ScopeType, + MetricConditions, + EntityType, + LegendOpt, + MetricsType, + MetricModes, + } from "../../../data"; import type { Option } from "@/types/app"; import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor"; import type { Node } from "@/types/topology"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; - import { EntityType, LegendOpt, MetricsType, MetricModes } from "../../../data"; import Metrics from "./Metrics.vue"; /*global defineEmits */ @@ -427,6 +434,30 @@ limitations under the License. --> } topologyStore.getLinkServerMetrics(states.linkServerMetrics); } + function changeLinkServerExpressions(params: { [key: string]: string[] }) { + if (!isExpression.value) { + return; + } + states.linkServerExpressions = params.linkServerExpressions; + updateSettings(); + if (!states.linkServerExpressions.length) { + topologyStore.setLinkServerMetrics({}); + return; + } + topologyStore.getLinkExpressions(states.linkServerExpressions, "SERVER"); + } + function changeLinkClientExpressions(params: { [key: string]: string[] }) { + if (!isExpression.value) { + return; + } + states.linkClientExpressions = params.linkClientExpressions; + updateSettings(); + if (!states.linkClientExpressions.length) { + topologyStore.changeLinkClientMetrics({}); + return; + } + topologyStore.getLinkExpressions(states.linkClientExpressions, "CLIENT"); + } function updateLinkClientMetrics(options: Option[] | any) { const opt = options.map((d: Option) => d.value); const index = states.linkClientMetrics.findIndex((d: any) => !opt.includes(d));