feat: add node expressions

src/store/modules/topology.ts

@@ -42,6 +42,7 @@ interface TopologyState {
   nodeMetricValue: MetricVal;
   linkServerMetrics: MetricVal;
   linkClientMetrics: MetricVal;
+  hierarchyNodeMetrics: MetricVal;
   hierarchyServiceNode: Nullable<Node>;
 }
 
@@ -60,6 +61,7 @@ export const topologyStore = defineStore({
     nodeMetricValue: {},
     linkServerMetrics: {},
     linkClientMetrics: {},
+    hierarchyNodeMetrics: {},
   }),
   actions: {
     setNode(node: Node) {
@@ -169,8 +171,8 @@ export const topologyStore = defineStore({
       this.hierarchyServiceCalls = callList;
       this.hierarchyServiceNodes = Array.from(nodesMap).flat();
     },
-    setNodeMetricValue(m: MetricVal) {
-      this.nodeMetricValue = m;
+    setHierarchyNodeMetricValue(m: MetricVal) {
+      this.hierarchyNodeMetrics = m;
     },
     setLinkServerMetrics(m: MetricVal) {
       this.linkServerMetrics = m;
@@ -178,6 +180,9 @@ export const topologyStore = defineStore({
     setLinkClientMetrics(m: MetricVal) {
       this.linkClientMetrics = m;
     },
+    setNodeValue(m: MetricVal) {
+      this.nodeMetricValue = m;
+    },
     setLegendValues(expressions: string, data: { [key: string]: any }) {
       for (let idx = 0; idx < this.nodes.length; idx++) {
         for (let index = 0; index < expressions.length; index++) {
@@ -568,6 +573,28 @@ export const topologyStore = defineStore({
       this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
       return res.data;
     },
+    async queryHierarchyNodeExpressions(expressions: string[]) {
+      if (!expressions.length) {
+        this.setHierarchyNodeMetricValue({});
+        return;
+      }
+      if (!this.hierarchyServiceNodes.length) {
+        this.setHierarchyNodeMetricValue({});
+        return;
+      }
+      const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
+        expressions,
+        this.hierarchyServiceNodes,
+      );
+      const param = getExpressionQuery();
+      const res = await this.getNodeExpressionValue(param);
+      if (res.errors) {
+        ElMessage.error(res.errors);
+        return;
+      }
+      const metrics = handleExpressionValues(res.data);
+      this.setHierarchyNodeMetricValue(metrics);
+    },
   },
 });
 

src/views/dashboard/related/topology/config/HierarchySettings.vue

@@ -49,6 +49,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useTopologyStore } from "@/store/modules/topology";
+  import Metrics from "./Metrics.vue";
 
   const emits = defineEmits(["update"]);
   const { t } = useI18n();
@@ -77,12 +78,21 @@ limitations under the License. -->
 
   function changeNodeExpressions(param: string[]) {
     currentConfig.value.nodeExpressions = param;
+    updateSettings();
   }
 
   function updateSettings() {
+    const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
+    const index = hierarchyServicesConfig.findIndex(
+      (d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer,
+    );
+    if (index < 0) {
+      return;
+    }
+    hierarchyServicesConfig[index] = currentConfig.value;
     const param = {
       ...dashboardStore.selectedGrid,
-      hierarchyServicesConfig: currentConfig.value,
+      hierarchyServicesConfig,
     };
     dashboardStore.selectWidget(param);
     dashboardStore.setConfigs(param);

src/views/dashboard/related/topology/service/HierarchyMap.vue

@@ -96,7 +96,7 @@ limitations under the License. -->
       </span>
     </div>
     <div class="setting" v-if="showSetting && dashboardStore.editMode">
-      <hierarchy-settings />
+      <hierarchy-settings @update="updateSettings" />
     </div>
   </div>
 </template>
@@ -128,7 +128,7 @@ limitations under the License. -->
   const props = defineProps({
     config: {
       type: Object as PropType<any>,
-      default: () => ({ graph: {} }),
+      default: () => ({}),
     },
   });
   const { t } = useI18n();
@@ -143,7 +143,6 @@ limitations under the License. -->
   const graph = ref<Nullable<any>>(null);
   const settings = ref<any>(props.config);
   const showSetting = ref<boolean>(false);
-  const graphConfig = computed(() => props.config.graph || {});
   const topologyLayout = ref<any>({});
   const popover = ref<Nullable<any>>(null);
   const graphWidth = ref<number>(100);
@@ -188,11 +187,16 @@ limitations under the License. -->
   }
 
   async function update() {
+    topologyStore.queryHierarchyNodeExpressions(settings.value.hierarchyServicesConfig || []);
     // await initLegendMetrics();
     draw();
     popover.value = d3.select("#popover");
   }
 
+  function updateSettings(config: any) {
+    settings.value = config;
+  }
+
   function draw() {
     const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
 

src/views/dashboard/related/topology/service/utils/layout.ts

@@ -191,22 +191,17 @@ export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
   }
   return levels;
 }
-export function changeNode(
-  d: { x: number; y: number },
-  currentNode: Nullable<Node>,
-  topologyLayout: any,
-  radius: number,
-) {
+export function changeNode(d: { x: number; y: number }, currentNode: Nullable<Node>, layout: any, radius: number) {
   if (!currentNode) {
     return;
   }
-  for (const node of topologyLayout.nodes) {
+  for (const node of layout.nodes) {
     if (node.id === currentNode.id) {
       node.x = d.x;
       node.y = d.y;
     }
   }
-  for (const call of topologyLayout.calls) {
+  for (const call of layout.calls) {
     if (call.sourceObj.id === currentNode.id) {
       call.sourceObj.x = d.x;
       call.sourceObj.y = d.y;
@@ -230,5 +225,5 @@ export function changeNode(
       call.targetY = pos[1].y;
     }
   }
-  return computeCallPos(topologyLayout.value.calls, radius);
+  return computeCallPos(layout.calls, radius);
 }