feat: update expressions config

src/components/Tags.vue

@@ -31,7 +31,7 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-  import { nextTick, ref } from "vue";
+  import { nextTick, ref, watch } from "vue";
   import type { PropType } from "vue";
   import { ElInput } from "element-plus";
 
@@ -69,6 +69,13 @@ limitations under the License. -->
     inputValue.value = "";
     emits("change", dynamicTags.value);
   };
+
+  watch(
+    () => props.tags,
+    () => {
+      dynamicTags.value = props.tags || [];
+    },
+  );
 </script>
 <style lang="scss" scoped>
   .input-name {

src/store/modules/topology.ts

@@ -42,7 +42,7 @@ interface TopologyState {
   nodeMetricValue: MetricVal;
   linkServerMetrics: MetricVal;
   linkClientMetrics: MetricVal;
-  hierarchyNodeMetrics: MetricVal;
+  hierarchyNodeMetrics: { [key: string]: MetricVal };
   hierarchyServiceNode: Nullable<Node>;
 }
 
@@ -185,8 +185,8 @@ export const topologyStore = defineStore({
         this.hierarchyServiceNodes.push(d);
       }
     },
-    setHierarchyNodeMetricValue(m: MetricVal) {
+    setHierarchyNodeMetricValue(m: MetricVal, layer: string) {
-      this.hierarchyNodeMetrics = m;
+      this.hierarchyNodeMetrics[layer] = m;
     },
     setLinkServerMetrics(m: MetricVal) {
       this.linkServerMetrics = m;
@@ -590,19 +590,17 @@ export const topologyStore = defineStore({
       this.setInstanceTopology(res.data.data.hierarchyInstanceTopology || {});
       return res.data;
     },
-    async queryHierarchyNodeExpressions(expressions: string[]) {
+    async queryHierarchyNodeExpressions(expressions: string[], layer: string) {
+      const nodes = this.hierarchyServiceNodes.filter((n: Node) => n.layer === layer);
       if (!expressions.length) {
-        this.setHierarchyNodeMetricValue({});
+        this.setHierarchyNodeMetricValue({}, layer);
         return;
       }
       if (!this.hierarchyServiceNodes.length) {
-        this.setHierarchyNodeMetricValue({});
+        this.setHierarchyNodeMetricValue({}, layer);
         return;
       }
-      const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
+      const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(expressions, nodes);
-        expressions,
-        this.hierarchyServiceNodes,
-      );
       const param = getExpressionQuery();
       const res = await this.getNodeExpressionValue(param);
       if (res.errors) {
@@ -610,7 +608,7 @@ export const topologyStore = defineStore({
         return;
       }
       const metrics = handleExpressionValues(res.data);
-      this.setHierarchyNodeMetricValue(metrics);
+      this.setHierarchyNodeMetricValue(metrics, layer);
     },
   },
 });

src/types/dashboard.d.ts

@@ -83,6 +83,10 @@ export type MetricConfigOpt = {
   detailLabel?: string;
 };
 
+export interface HierarchyServicesConfigMap {
+  [key: string]: HierarchyServicesConfig;
+}
+
 export interface HierarchyServicesConfig {
   layer: string;
   nodeExpressions: string[];

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

@@ -32,12 +32,12 @@ limitations under the License. -->
             <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
-        <Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
+        <Metrics :type="'hierarchyServicesConfig'" :layer="currentConfig.layer" @update="updateSettings" />
       </el-popover>
     </div>
     <div v-if="currentConfig.layer">
       <Tags
-        :tags="currentConfig.nodeExpressions"
+        :tags="currentConfig.nodeExpressions || []"
         :vertical="true"
         :text="t('addExpressions')"
         @change="(param) => changeNodeExpressions(param)"
@@ -46,10 +46,10 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref } from "vue";
+  import { onMounted, ref, reactive } from "vue";
   import { useI18n } from "vue-i18n";
   import { ElMessage } from "element-plus";
-  import type { HierarchyServicesConfig } from "@/types/dashboard";
+  import type { HierarchyServicesConfig, MetricConfigOpt } from "@/types/dashboard";
   import type { Node } from "@/types/topology";
   import type { Option } from "@/types/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
@@ -63,7 +63,7 @@ limitations under the License. -->
   const topologyStore = useTopologyStore();
   const selectorStore = useSelectorStore();
   const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
-  const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
+  const currentConfig = reactive<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
   const layers = ref<Option[]>([]);
 
   onMounted(() => {
@@ -72,27 +72,31 @@ limitations under the License. -->
   function changeLayer(opt: Option[]) {
     const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
     const layer = opt[0].value;
-
+    const config = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || {};
-    currentConfig.value = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || { layer };
+    currentConfig.layer = layer;
+    currentConfig.nodeExpressions = config.nodeExpressions || [];
   }
 
   function changeNodeExpressions(param: string[]) {
-    currentConfig.value.nodeExpressions = param;
+    currentConfig.nodeExpressions = param;
     updateSettings();
     if (!param.length) {
-      topologyStore.setHierarchyServiceNode({});
+      topologyStore.setHierarchyServiceNode({}, currentConfig.layer);
       return;
     }
-    topologyStore.queryHierarchyNodeExpressions(param);
+    topologyStore.queryHierarchyNodeExpressions(param, currentConfig.layer);
   }
 
-  function updateSettings() {
+  function updateSettings(metricConfig?: { [key: string]: MetricConfigOpt[] }) {
+    if (metricConfig) {
+      currentConfig.expressionsConfig = Object.values(metricConfig)[0];
+    }
     const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
-    const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer);
+    const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.layer);
     if (index < 0) {
-      config.push(currentConfig.value);
+      config.push(JSON.parse(JSON.stringify(currentConfig)));
     } else {
-      config[index] = currentConfig.value;
+      config[index] = JSON.parse(JSON.stringify(currentConfig));
     }
 
     const hierarchyServicesConfig = config.filter((d: HierarchyServicesConfig) => d.layer && d.nodeExpressions);

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

@@ -63,6 +63,7 @@ limitations under the License. -->
   const props = defineProps({
     type: { type: String, default: "" },
     isExpression: { type: Boolean, default: true },
+    layer: { type: String, default: "" },
   });
   const { t } = useI18n();
   const emit = defineEmits(["update"]);
@@ -76,7 +77,12 @@ limitations under the License. -->
       linkClientMetrics,
       nodeExpressions,
       nodeMetrics,
+      hierarchyServicesConfig,
     } = dashboardStore.selectedGrid;
+    let item: any = {};
+    if (hierarchyServicesConfig && props.layer) {
+      item = hierarchyServicesConfig.find((d: any) => d.layer === props.layer) || {};
+    }
     switch (props.type) {
       case "linkServerMetricConfig":
         metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
@@ -87,6 +93,9 @@ limitations under the License. -->
       case "nodeMetricConfig":
         metrics = props.isExpression ? nodeExpressions : nodeMetrics;
         break;
+      case "hierarchyServicesConfig":
+        metrics = item.nodeExpressions || [];
+        break;
     }
     return metrics || [];
   });
@@ -105,7 +114,11 @@ limitations under the License. -->
   const currentIndex = ref<number>(0);
   const getMetricConfig = computed(() => {
     let config = [];
-
+    const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
+    let item: any = {};
+    if (hierarchyServicesConfig && props.layer) {
+      item = hierarchyServicesConfig.find((d: any) => d.layer === props.layer) || {};
+    }
     switch (props.type) {
       case "linkServerMetricConfig":
         config = dashboardStore.selectedGrid.linkServerMetricConfig;
@@ -116,6 +129,9 @@ limitations under the License. -->
       case "nodeMetricConfig":
         config = dashboardStore.selectedGrid.nodeMetricConfig;
         break;
+      case "hierarchyServicesConfig":
+        config = item.expressionsConfig || [];
+        break;
     }
     return config || [];
   });

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

@@ -123,6 +123,7 @@ limitations under the License. -->
   import zoom from "@/views/dashboard/related/components/utils/zoom";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
   import HierarchySettings from "../config/HierarchySettings.vue";
+  import type { HierarchyServicesConfig } from "@/types/dashboard";
 
   /*global Nullable, defineProps */
   const props = defineProps({
@@ -262,11 +263,13 @@ limitations under the License. -->
     return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
   }
   function showNodeTip(event: MouseEvent, data: Node) {
-    const nodeMetrics: string[] = settings.value.nodeExpressions;
+    const config: HierarchyServicesConfig =
-    const nodeMetricConfig = settings.value.nodeMetricConfig || [];
+      (settings.value.hierarchyServicesConfig || []).find((d: HierarchyServicesConfig) => d.layer === data.layer) || {};
-    const html = nodeMetrics.map((m, index) => {
+    const exprssions = config.nodeExpressions || [];
+    const nodeMetricConfig = config.expressionsConfig || [];
+    const html = exprssions.map((m, index) => {
       const metric =
-        topologyStore.hierarchyNodeMetrics[m].values.find(
+        topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
           (val: { id: string; value: unknown }) => val.id === data.id,
         ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};