fix: change metrics config, fix tab routes (#345)

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,
+          });
         }
       }
     }

src/router/layer.ts

@@ -52,7 +52,7 @@ function layerDashboards() {
       route.children.push(d);
       const tab = {
         name: `${child.name}ActiveTabIndex`,
-        path: `/${child.name}/tab/:activeTabIndex`,
+        path: `/${child.path}/tab/:activeTabIndex`,
         component: () => import("@/views/Layer.vue"),
         meta: {
           notShow: true,

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

@@ -189,7 +189,9 @@ limitations under the License. -->
 
   onMounted(async () => {
     await nextTick();
+    setTimeout(() => {
       init();
+    }, 10);
   });
   async function init() {
     const dom = document.querySelector(".topology")?.getBoundingClientRect() || {

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) => {
+  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 };
     });
-  const metricList = ref<Option[]>(m.length ? m : [{ label: "", value: "" }]);
+    return 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;

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
+        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
-          :type="configType"
-          :metrics="isExpression ? states.linkServerExpressions : states.linkServerMetrics"
-          @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
+          <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
-            :type="configType"
-            :metrics="isExpression ? states.linkClientExpressions : states.linkClientMetrics"
-            @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
+        <Metrics :type="configType" :isExpression="isExpression" @update="updateSettings" />
-          :type="configType"
-          :metrics="isExpression ? states.nodeExpressions : states.nodeMetrics"
-          @update="updateSettings"
-        />
       </el-popover>
     </div>
     <div v-if="isExpression">