feat: update node expressions

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!`);
+        if (index === 0) {
-        conditions[`expression${index}${idx}`] = name;
+          variables.push(`$expression${idx}: String!`);
-        return `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+          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 };
 }

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 { getNodeExpressions, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
-      const param = getNodeExpressions(this.nodes);
+        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);

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -160,7 +160,7 @@ limitations under the License. -->
     },
   });
   const dashboardStore = useDashboardStore();
-  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
+  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression);
   const metrics = computed(
     () => (isExpression.value ? dashboardStore.selectedGrid.expressions : dashboardStore.selectedGrid.metrics) || [],
   );

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

@@ -184,7 +184,7 @@ limitations under the License. -->
   const currentNode = ref<Nullable<Node>>();
   const diff = computed(() => [(width.value - graphWidth.value - 130) / 2, 100]);
   const radius = 8;
-  const isExpression = ref<boolean>(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 =

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<MetricConfigOpt>,
-      default: () => ({ unit: "" }),
-    },
     type: { type: String, default: "" },
     metrics: { type: Array as PropType<string[]>, default: () => [] },
   });

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 })"
       />
     </div>
     <Selector
@@ -236,7 +236,7 @@ limitations under the License. -->
   const dashboardStore = useDashboardStore();
   const topologyStore = useTopologyStore();
   const { selectedGrid } = dashboardStore;
-  const isExpression = ref<boolean>(dashboardStore.selectedGrid.metricMode === MetricModes.Expression ? true : false);
+  const isExpression = ref<boolean>(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();
   }
 </script>
 <style lang="scss" scoped>