fix: remove metrics for unreal nodes (#385)

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);

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) {

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 = [
+    let tipHtml = `<div class="mb-5"><span class="grey">name: </span>${
-      `<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>`,
+    }</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`;
-      ...html,
+    if (data.isReal) {
-    ].join(" ");
+      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,