From a5bba26587dccc9683840653ed278be87f753d1c Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Sun, 26 Nov 2023 12:27:36 +0800
Subject: [PATCH] fix: metrics config

---
 src/hooks/useExpressionsProcessor.ts          |  5 ++-
 .../related/topology/components/Metrics.vue   | 39 ++++++++++++++-----
 .../related/topology/components/Settings.vue  | 18 ++-------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/hooks/useExpressionsProcessor.ts b/src/hooks/useExpressionsProcessor.ts
index 3ddf8662..fb7f4a3c 100644
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -389,7 +389,10 @@ export function useQueryTopologyExpressionsProcessor(metrics: string[], instance
               values: [],
             };
           }
-          obj[metrics[index]].values.push({ value: resp[k].results[0].values[0].value, id: instances[idx].id });
+          obj[metrics[index]].values.push({
+            value: resp[k].results[0] && resp[k].results[0].values[0].value,
+            id: instances[idx].id,
+          });
         }
       }
     }
diff --git a/src/views/dashboard/related/topology/components/Metrics.vue b/src/views/dashboard/related/topology/components/Metrics.vue
index aeffa3b2..2660d865 100644
--- a/src/views/dashboard/related/topology/components/Metrics.vue
+++ b/src/views/dashboard/related/topology/components/Metrics.vue
@@ -54,7 +54,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
   import { ref, computed, watch } from "vue";
-  import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { CalculationOpts, MetricModes } from "../../../data";
   import { useDashboardStore } from "@/store/modules/dashboard";
@@ -63,15 +62,40 @@ limitations under the License. -->
   /*global defineEmits, defineProps */
   const props = defineProps({
     type: { type: String, default: "" },
-    metrics: { type: Array as PropType<string[]>, default: () => [] },
+    isExpression: { type: Boolean, default: true },
   });
   const { t } = useI18n();
   const emit = defineEmits(["update"]);
   const dashboardStore = useDashboardStore();
-  const m = props.metrics.map((d: string) => {
-    return { label: d, value: d };
+  const getMetrics = computed(() => {
+    let metrics = [];
+    const {
+      linkServerExpressions,
+      linkServerMetrics,
+      linkClientExpressions,
+      linkClientMetrics,
+      nodeExpressions,
+      nodeMetrics,
+    } = dashboardStore.selectedGrid;
+    switch (props.type) {
+      case "linkServerMetricConfig":
+        metrics = props.isExpression ? linkServerExpressions : linkServerMetrics;
+        break;
+      case "linkClientMetricConfig":
+        metrics = props.isExpression ? linkClientExpressions : linkClientMetrics;
+        break;
+      case "nodeMetricConfig":
+        metrics = props.isExpression ? nodeExpressions : nodeMetrics;
+        break;
+    }
+    return metrics || [];
+  });
+  const metricList = computed(() => {
+    const m = getMetrics.value.map((d: string) => {
+      return { label: d, value: d };
+    });
+    return m.length ? m : [{ label: "", value: "" }];
   });
-  const metricList = ref<Option[]>(m.length ? m : [{ label: "", value: "" }]);
   const currentMetric = ref<string>(metricList.value[0].value);
   const currentConfig = ref<{ unit: string; calculation: string; label: string }>({
     unit: "",
@@ -81,6 +105,7 @@ limitations under the License. -->
   const currentIndex = ref<number>(0);
   const getMetricConfig = computed(() => {
     let config = [];
+
     switch (props.type) {
       case "linkServerMetricConfig":
         config = dashboardStore.selectedGrid.linkServerMetricConfig;
@@ -120,10 +145,6 @@ limitations under the License. -->
   watch(
     () => props.type,
     () => {
-      const m = props.metrics.map((d: string) => {
-        return { label: d, value: d };
-      });
-      metricList.value = m.length ? m : [{ label: "", value: "" }];
       currentMetric.value = metricList.value[0].value;
       const config = getMetricConfig.value || [];
       currentIndex.value = 0;
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index be20080a..16b970c9 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -49,11 +49,7 @@ limitations under the License. -->
             <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
-        <Metrics
-          :type="configType"
-          :metrics="isExpression ? states.linkServerExpressions : states.linkServerMetrics"
-          @update="updateSettings"
-        />
+        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
       </el-popover>
     </div>
     <div v-if="isExpression">
@@ -88,11 +84,7 @@ limitations under the License. -->
               <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
             </span>
           </template>
-          <Metrics
-            :type="configType"
-            :metrics="isExpression ? states.linkClientExpressions : states.linkClientMetrics"
-            @update="updateSettings"
-          />
+          <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
         </el-popover>
       </div>
       <div v-if="isExpression">
@@ -168,11 +160,7 @@ limitations under the License. -->
             <Icon class="cp ml-5" iconName="mode_edit" size="middle" />
           </span>
         </template>
-        <Metrics
-          :type="configType"
-          :metrics="isExpression ? states.nodeExpressions : states.nodeMetrics"
-          @update="updateSettings"
-        />
+        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
       </el-popover>
     </div>
     <div v-if="isExpression">