feat: update legend expressions

src/hooks/useExpressionsProcessor.ts

@@ -358,7 +358,7 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], instance
         serviceInstanceName,
         endpointName,
         destServiceName,
-        destNormal: true,
+        destNormal: destServiceName ? true : undefined,
         destServiceInstanceName,
         destEndpointName,
       };

src/views/dashboard/related/topology/components/Graph.vue

@@ -397,6 +397,13 @@ limitations under the License. -->
     if (!legend.length) {
       return icons.CUBE;
     }
+    if (settings.value.metricMode === MetricModes.Expression) {
+      let c = true;
+      for (const l of legend) {
+        c = c && !!Number(d[l.name]);
+      }
+      return c && d.isReal ? icons.CUBEERROR : icons.CUBE;
+    }
     let c = true;
     for (const l of legend) {
       if (l.condition === "<") {

src/views/dashboard/related/topology/components/Settings.vue

@@ -204,33 +204,34 @@ limitations under the License. -->
         placeholder="Please input a expression"
         @change="changeLegend(LegendOpt.NAME, $event, index)"
         size="small"
-        class="item"
+        class="legend-inputs"
-      />
-      <Selector
-        v-else
-        class="item"
-        :value="metric.name"
-        :options="states.nodeMetricList"
-        size="small"
-        placeholder="Select a metric"
-        @change="changeLegend(LegendOpt.NAME, $event, index)"
-      />
-      <Selector
-        class="input-small"
-        :value="metric.condition"
-        :options="MetricConditions"
-        size="small"
-        placeholder="Select a condition"
-        @change="changeLegend(LegendOpt.CONDITION, $event, index)"
-      />
-      <el-input
-        v-model="metric.value"
-        placeholder="Please input a value"
-        type="number"
-        @change="changeLegend(LegendOpt.VALUE, $event, index)"
-        size="small"
-        class="item"
       />
+      <span v-else>
+        <Selector
+          class="item"
+          :value="metric.name"
+          :options="states.nodeMetricList"
+          size="small"
+          placeholder="Select a metric"
+          @change="changeLegend(LegendOpt.NAME, $event, index)"
+        />
+        <Selector
+          class="input-small"
+          :value="metric.condition"
+          :options="MetricConditions"
+          size="small"
+          placeholder="Select a condition"
+          @change="changeLegend(LegendOpt.CONDITION, $event, index)"
+        />
+        <el-input
+          v-model="metric.value"
+          placeholder="Please input a value"
+          type="number"
+          @change="changeLegend(LegendOpt.VALUE, $event, index)"
+          size="small"
+          class="item"
+        />
+      </span>
       <span>
         <Icon class="cp delete" iconName="remove_circle_outline" size="middle" @click="deleteMetric(index)" />
         <Icon
@@ -439,7 +440,13 @@ limitations under the License. -->
     updateSettings();
   }
   function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
-    const metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
+    let metrics = [];
+    if (isExpression.value) {
+      metrics = legend.value.filter((d: any) => d.name);
+    } else {
+      metrics = legend.value.filter((d: any) => d.name && d.value && d.condition);
+    }
+
     const param = {
       ...dashboardStore.selectedGrid,
       linkDashboard: states.linkDashboard,
@@ -600,6 +607,11 @@ limitations under the License. -->
     width: 355px;
   }
 
+  .legend-inputs {
+    margin-top: 8px;
+    width: 310px;
+  }
+
   .item {
     width: 130px;
     margin-top: 5px;