From 55d9df3cbb4e4967f590c86b5ba2fb1e1865631a Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 10 Jan 2024 14:54:23 +0800
Subject: [PATCH] fix: config

---
 src/components/Tags.vue                       |  2 +-
 .../topology/config/HierarchySettings.vue     | 57 +++++++++++--------
 .../related/topology/service/HierarchyMap.vue | 16 +++---
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/components/Tags.vue b/src/components/Tags.vue
index 90fb670c..64495430 100644
--- a/src/components/Tags.vue
+++ b/src/components/Tags.vue
@@ -72,7 +72,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .input-name {
-    width: 300px;
+    width: 250px;
   }
 
   .vertical {
diff --git a/src/views/dashboard/related/topology/config/HierarchySettings.vue b/src/views/dashboard/related/topology/config/HierarchySettings.vue
index dc773f44..8f903951 100644
--- a/src/views/dashboard/related/topology/config/HierarchySettings.vue
+++ b/src/views/dashboard/related/topology/config/HierarchySettings.vue
@@ -24,21 +24,25 @@ limitations under the License. -->
       @change="changeLayer"
       class="inputs"
     />
-    <div class="label">{{ t("nodeMetrics") }}</div>
-    <el-popover placement="left" :width="400" trigger="click">
-      <template #reference>
-        <span>
-          <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
-        </span>
-      </template>
-      <Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
-    </el-popover>
-    <Tags
-      :tags="currentConfig.nodeExpressions"
-      :vertical="true"
-      :text="t('addExpressions')"
-      @change="(param) => changeNodeExpressions(param)"
-    />
+    <div class="label" v-if="currentConfig.layer">
+      <span>{{ t("nodeMetrics") }}</span>
+      <el-popover placement="left" :width="400" trigger="click">
+        <template #reference>
+          <span>
+            <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
+          </span>
+        </template>
+        <Metrics :type="'hierarchyServicesConfig'" :isExpression="true" @update="updateSettings" />
+      </el-popover>
+    </div>
+    <div v-if="currentConfig.layer">
+      <Tags
+        :tags="currentConfig.nodeExpressions"
+        :vertical="true"
+        :text="t('addExpressions')"
+        @change="(param) => changeNodeExpressions(param)"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -59,8 +63,8 @@ limitations under the License. -->
   const topologyStore = useTopologyStore();
   const selectorStore = useSelectorStore();
   const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
-  const layers = ref<Option[]>([]);
   const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig[0] || {});
+  const layers = ref<Option[]>([]);
 
   onMounted(() => {
     setLayers();
@@ -69,27 +73,34 @@ limitations under the License. -->
     const hierarchyServicesConfig = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
     const layer = opt[0].value;
 
-    currentConfig.value = hierarchyServicesConfig.value.find((d: HierarchyServicesConfig) => d.layer === layer) || {};
+    currentConfig.value = hierarchyServicesConfig.find((d: HierarchyServicesConfig) => d.layer === layer) || { layer };
   }
 
   function changeNodeExpressions(param: string[]) {
     currentConfig.value.nodeExpressions = param;
     updateSettings();
+    if (!param.length) {
+      topologyStore.setHierarchyServiceNode({});
+      return;
+    }
+    topologyStore.queryHierarchyNodeExpressions(param);
   }
 
   function updateSettings() {
-    const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
-    const index = hierarchyServicesConfig.findIndex(
-      (d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer,
-    );
+    const config = dashboardStore.selectedGrid.hierarchyServicesConfig || [];
+    const index = config.findIndex((d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer);
     if (index < 0) {
-      return;
+      config.push(currentConfig.value);
+    } else {
+      config[index] = currentConfig.value;
     }
-    hierarchyServicesConfig[index] = currentConfig.value;
+
+    const hierarchyServicesConfig = config.filter((d: HierarchyServicesConfig) => d.layer && d.nodeExpressions);
     const param = {
       ...dashboardStore.selectedGrid,
       hierarchyServicesConfig,
     };
+
     dashboardStore.selectWidget(param);
     dashboardStore.setConfigs(param);
     emits("update", param);
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index 16eb86da..d4e73cfa 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -215,6 +215,7 @@ limitations under the License. -->
 
   function showConfig() {
     showSetting.value = !showSetting.value;
+    dashboardStore.selectWidget(props.config);
   }
 
   async function initLegendMetrics() {
@@ -261,22 +262,19 @@ 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.metricMode === MetricModes.Expression
-        ? settings.value.nodeExpressions
-        : settings.value.nodeMetrics) || [];
+    const nodeMetrics: string[] = settings.value.nodeExpressions;
     const nodeMetricConfig = settings.value.nodeMetricConfig || [];
     const html = nodeMetrics.map((m, index) => {
       const metric =
-        topologyStore.nodeMetricValue[m].values.find((val: { id: string; value: unknown }) => val.id === data.id) || {};
+        topologyStore.hierarchyNodeMetrics[m].values.find(
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        ) || {};
       const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
       const v = aggregation(metric.value, opt);
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || "unknown"}</div>`;
+      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${v} ${opt.unit || ""}</div>`;
     });
     const tipHtml = [
-      `<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 class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
       ...html,
     ].join(" ");