This is an automated email from the ASF dual-hosted git repository. wusheng pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push: new e0bbe99b fix: remove metrics for unreal nodes (#385) e0bbe99b is described below commit e0bbe99b6c23686648a84296243f3b2d3c9032a2 Author: Fine0830 <fanxue0...@gmail.com> AuthorDate: Fri Apr 12 13:25:34 2024 +0800 fix: remove metrics for unreal nodes (#385) --- src/store/modules/topology.ts | 7 ++--- .../dashboard/related/topology/config/Settings.vue | 6 ++++- .../related/topology/service/ServiceMap.vue | 31 ++++++++++++++-------- 3 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts index 1a399134..66354f01 100644 --- a/src/store/modules/topology.ts +++ b/src/store/modules/topology.ts @@ -226,11 +226,12 @@ export const topologyStore = defineStore({ this.nodeMetricValue = m; }, setLegendValues(expressions: string, data: { [key: string]: any }) { - for (let idx = 0; idx < this.nodes.length; idx++) { + const nodeArr = this.nodes.filter((d: Node) => d.isReal); + for (let idx = 0; idx < nodeArr.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); + nodeArr[idx][expressions[index]] = Number(data[k].results[0].values[0].value); } } } @@ -485,7 +486,7 @@ export const topologyStore = defineStore({ } const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor( expressions, - this.nodes, + this.nodes.filter((d: Node) => d.isReal), ); const param = getExpressionQuery(); const res = await this.getNodeExpressionValue(param); diff --git a/src/views/dashboard/related/topology/config/Settings.vue b/src/views/dashboard/related/topology/config/Settings.vue index 1d231a9f..6c0e0841 100644 --- a/src/views/dashboard/related/topology/config/Settings.vue +++ b/src/views/dashboard/related/topology/config/Settings.vue @@ -163,6 +163,7 @@ limitations under the License. --> import type { Option } from "@/types/app"; import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor"; import type { DashboardItem, MetricConfigOpt } from "@/types/dashboard"; + import type { Node } from "@/types/topology"; import Metrics from "./Metrics.vue"; /*global defineEmits */ @@ -243,7 +244,10 @@ limitations under the License. --> async function setLegend() { updateSettings(); const expression = dashboardStore.selectedGrid.legendMQE && dashboardStore.selectedGrid.legendMQE.expression; - const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes); + const { getExpressionQuery } = useQueryTopologyExpressionsProcessor( + [expression], + topologyStore.nodes.filter((d: Node) => d.isReal), + ); const param = getExpressionQuery(); const res = await topologyStore.getNodeExpressionValue(param); if (res.errors) { diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue index 10433cca..72547435 100644 --- a/src/views/dashboard/related/topology/service/ServiceMap.vue +++ b/src/views/dashboard/related/topology/service/ServiceMap.vue @@ -285,7 +285,10 @@ limitations under the License. --> if (!expression) { return; } - const { getExpressionQuery } = useQueryTopologyExpressionsProcessor([expression], topologyStore.nodes); + const { getExpressionQuery } = useQueryTopologyExpressionsProcessor( + [expression], + topologyStore.nodes.filter((d: Node) => d.isReal), + ); const param = getExpressionQuery(); const res = await topologyStore.getNodeExpressionValue(param); if (res.errors) { @@ -314,17 +317,16 @@ limitations under the License. --> topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id)) || {}; const opt: MetricConfigOpt = nodeMetricConfig[index] || {}; - return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value} ${ + return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${ opt.unit || "unknown" }</div>`; }); - const tipHtml = [ - `<div class="mb-5"><span class="grey">name: </span>${ - data.name - }</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`, - ...html, - ].join(" "); - + let tipHtml = `<div class="mb-5"><span class="grey">name: </span>${ + data.name + }</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`; + if (data.isReal) { + tipHtml = [tipHtml, ...html].join(" "); + } tooltip.value .style("top", event.offsetY + 10 + "px") .style("left", event.offsetX + 10 + "px") @@ -520,14 +522,21 @@ limitations under the License. --> } function initNodeMenus() { items.value = [ - { id: "hierarchyServices", title: "Hierarchy Services", func: handleHierarchyRelatedServices }, + { + id: "hierarchyServices", + title: "Hierarchy Services", + func: handleHierarchyRelatedServices, + }, { id: "inspect", title: "Inspect", func: handleInspect }, { id: "alerting", title: "Alerting", func: handleGoAlerting }, ]; if (!currentNode.value) { return; } - const diffLayers = currentNode.value.layers.filter((l: string) => l !== dashboardStore.layerId); + const diffLayers = currentNode.value.layers.filter( + (l: string) => l !== dashboardStore.layerId && l !== "UNDEFINED", + ); + for (const l of diffLayers) { items.value.push({ id: l,