From 5007c01c3ad11138cc388b100ffc964690da197a Mon Sep 17 00:00:00 2001 From: Fine Date: Tue, 15 Aug 2023 15:59:06 +0800 Subject: [PATCH] feat: update node expressions --- src/hooks/useExpressionsProcessor.ts | 31 +++++++++++++++---- src/store/modules/topology.ts | 17 +++++----- .../configuration/widget/metric/Index.vue | 2 +- .../related/topology/components/Graph.vue | 11 ++++--- .../related/topology/components/Metrics.vue | 5 --- .../related/topology/components/Settings.vue | 24 +++++++++++--- 6 files changed, 62 insertions(+), 28 deletions(-) diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts index 97321be0..91a587f0 100644 --- a/src/hooks/useExpressionsProcessor.ts +++ b/src/hooks/useExpressionsProcessor.ts @@ -314,10 +314,10 @@ export async function useExpressionsQueryPodsMetrics( return expressionParams; } -export function useQueryTopologyExpressionsProcessor(metrics: string[]) { +export function useQueryTopologyExpressionsProcessor(metrics: string[], nodes: Node[]) { const appStore = useAppStoreWithOut(); - function getNodeExpressions(nodes: Node[]) { + function getNodeExpressions() { const conditions: { [key: string]: unknown } = { duration: appStore.durationTime, }; @@ -330,9 +330,11 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[]) { variables.push(`$entity${index}: Entity!`); conditions[`entity${index}`] = entity; const f = metrics.map((name: string, idx: number) => { - variables.push(`$expression${index}${idx}: String!`); - conditions[`expression${index}${idx}`] = name; - return `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; + if (index === 0) { + variables.push(`$expression${idx}: String!`); + conditions[`expression${idx}`] = name; + } + return `expression${index}${idx}: execExpression(expression: $expression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`; }); return f; }); @@ -341,6 +343,23 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[]) { return { queryStr, conditions }; } + function handleExpressionValues(resp: any) { + const obj: any = {}; + for (let idx = 0; idx < nodes.length; idx++) { + for (let index = 0; index < metrics.length; index++) { + const k = "expression" + idx + index; + if (metrics[index]) { + if (!obj[metrics[index]]) { + obj[metrics[index]] = { + values: [], + }; + } + obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: nodes[idx].id }); + } + } + } + return obj; + } - return { getNodeExpressions }; + return { getNodeExpressions, handleExpressionValues }; } diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 6ce9fad0..fa1455c8 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -319,7 +319,6 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } - console.log(res.data.data); this.setNodeMetricValue(res.data.data); return res.data; }, @@ -329,8 +328,7 @@ export const topologyStore = defineStore({ if (res.data.errors) { return res.data; } - console.log(res.data.data); - // this.setNodeMetricValue(res.data.data); + return res.data; }, async getLinkClientMetrics(linkClientMetrics: string[]) { @@ -370,7 +368,6 @@ export const topologyStore = defineStore({ this.setNodeMetricValue({}); return; } - console.log(this.nodes); const ids = this.nodes.map((d: Node) => d.id); if (!ids.length) { return; @@ -388,15 +385,21 @@ export const topologyStore = defineStore({ return; } if (!this.nodes.length) { + this.setNodeMetricValue({}); return; } - const { getNodeExpressions } = useQueryTopologyExpressionsProcessor(expressions); - const param = getNodeExpressions(this.nodes); + const { getNodeExpressions, handleExpressionValues } = useQueryTopologyExpressionsProcessor( + expressions, + this.nodes, + ); + const param = getNodeExpressions(); const res = await this.getNodeExpressionValue(param); - if (res.errors) { ElMessage.error(res.errors); + return; } + const metrics = handleExpressionValues(res.data); + this.setNodeMetricValue(metrics); }, async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) { const res: AxiosResponse = await query(param); diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue index 5882f67e..ac316047 100644 --- a/src/views/dashboard/configuration/widget/metric/Index.vue +++ b/src/views/dashboard/configuration/widget/metric/Index.vue @@ -160,7 +160,7 @@ limitations under the License. --> }, }); const dashboardStore = useDashboardStore(); - const isExpression = ref(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false); + const isExpression = ref(dashboardStore.selectedGrid.metricMode === MetricModes.Expression); const metrics = computed( () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [], ); diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue index 427c004e..a197ec38 100644 --- a/src/views/dashboard/related/topology/components/Graph.vue +++ b/src/views/dashboard/related/topology/components/Graph.vue @@ -184,7 +184,7 @@ limitations under the License. --> const currentNode = ref>(); const diff = computed(() => [(width.value - graphWidth.value - 130) / 2, 100]); const radius = 8; - const isExpression = ref(settings.value.metricMode === MetricModes.Expression ? true : false); + const isExpression = computed(() => settings.value.metricMode === MetricModes.Expression); onMounted(async () => { await nextTick(); @@ -222,7 +222,7 @@ limitations under the License. --> async function update() { if (isExpression.value) { - topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []); + topologyStore.queryNodeExpressions(settings.value.nodeExpressions || []); topologyStore.getLinkClientMetrics(settings.value.linkClientMetrics || []); topologyStore.getLinkServerMetrics(settings.value.linkServerMetrics || []); } else { @@ -240,7 +240,7 @@ limitations under the License. --> function draw() { const node = findMostFrequent(topologyStore.calls); const levels = []; - const nodes = topologyStore.nodes.sort((a: Node, b: Node) => { + const nodes = JSON.parse(JSON.stringify(topologyStore.nodes)).sort((a: Node, b: Node) => { if (a.name.toLowerCase() < b.name.toLowerCase()) { return -1; } @@ -389,7 +389,10 @@ limitations under the License. --> return c && d.isReal ? icons.CUBEERROR : icons.CUBE; } function showNodeTip(event: MouseEvent, data: Node) { - const nodeMetrics: string[] = settings.value.nodeMetrics || []; + const nodeMetrics: string[] = + (settings.value.metricMode === MetricModes.Expression + ? settings.value.nodeExpressions + : settings.value.nodeMetrics) || []; const nodeMetricConfig = settings.value.nodeMetricConfig || []; const html = nodeMetrics.map((m, index) => { const metric = diff --git a/src/views/dashboard/related/topology/components/Metrics.vue b/src/views/dashboard/related/topology/components/Metrics.vue index 3296e13e..9c580784 100644 --- a/src/views/dashboard/related/topology/components/Metrics.vue +++ b/src/views/dashboard/related/topology/components/Metrics.vue @@ -56,15 +56,10 @@ limitations under the License. --> import { useI18n } from "vue-i18n"; import { CalculationOpts } from "../../../data"; import { useDashboardStore } from "@/store/modules/dashboard"; - import type { MetricConfigOpt } from "@/types/dashboard"; import type { Option } from "element-plus/es/components/select-v2/src/select.types"; /*global defineEmits, defineProps */ const props = defineProps({ - currentMetricConfig: { - type: Object as PropType, - default: () => ({ unit: "" }), - }, type: { type: String, default: "" }, metrics: { type: Array as PropType, default: () => [] }, }); diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue index d636240c..e744cbb6 100644 --- a/src/views/dashboard/related/topology/components/Settings.vue +++ b/src/views/dashboard/related/topology/components/Settings.vue @@ -153,7 +153,7 @@ limitations under the License. --> :tags="states.nodeExpressions" :vertical="true" :text="t('addExpressions')" - @change="(param) => changeExpressions({ nodeExpressions: param })" + @change="(param) => changeNodeExpressions({ nodeExpressions: param })" /> const dashboardStore = useDashboardStore(); const topologyStore = useTopologyStore(); const { selectedGrid } = dashboardStore; - const isExpression = ref(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false); + const isExpression = ref(dashboardStore.selectedGrid.metricMode === MetricModes.Expression); const nodeDashboard = selectedGrid.nodeDashboard && selectedGrid.nodeDashboard.length ? selectedGrid.nodeDashboard : ""; const isService = [EntityType[0].value, EntityType[1].value].includes(dashboardStore.entity); @@ -398,6 +398,7 @@ limitations under the License. --> linkServerExpressions: states.linkServerExpressions, linkClientExpressions: states.linkClientExpressions, nodeExpressions: states.nodeExpressions, + metricMode: isExpression.value ? MetricModes.Expression : MetricModes.General, legend: metrics, ...metricConfig, description, @@ -479,12 +480,25 @@ limitations under the License. --> function setConfigType(type: string) { configType.value = type; } - function changeMetricMode() { - console.log(isExpression.value); - } function changeExpressions(params: { [key: string]: string[] }) { const key: string = Object.keys(params || {})[0]; (states as any)[key] = params && params[key]; + updateSettings(); + } + function changeNodeExpressions(params: { [key: string]: string[] }) { + if (!isExpression.value) { + return; + } + states.nodeExpressions = params.nodeExpressions; + updateSettings(); + if (!states.nodeExpressions.length) { + topologyStore.setNodeMetricValue({}); + return; + } + topologyStore.queryNodeExpressions(states.nodeExpressions); + } + function changeMetricMode() { + updateSettings(); }