refactor: update MetricOptions

src/views/dashboard/graphs/EndpointList.vue

@@ -29,17 +29,12 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table
-      v-loading="chartLoading"
-      :data="endpoints"
-      style="width: 100%; height: 320px; overflow: auto"
-    >
+    <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
       <el-table-column label="Endpoints">
         <template #default="scope">
           <router-link
-            target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/Endpoint/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -84,6 +79,7 @@ import { Endpoint } from "@/types/selector";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import Line from "./Line.vue";
+import { EntityType } from "../data";
 
 /*global defineProps */
 defineProps({
@@ -126,7 +122,7 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
     const params = await useQueryPodsMetrics(
       currentPods,
       dashboardStore.selectedGrid,
-      "Endpoint"
+      EntityType[2].value
     );
     const json = await dashboardStore.fetchMetricValue(params);
 

src/views/dashboard/graphs/InstanceList.vue

@@ -29,16 +29,12 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table
-      v-loading="chartLoading"
-      :data="instances"
-      style="width: 100%; height: 320px; overflow: auto"
-    >
+    <el-table v-loading="chartLoading" :data="instances" style="width: 100%">
       <el-table-column label="Service Instances">
         <template #default="scope">
           <router-link
             class="link"
-            :to="`/dashboard/${scope.row.layer}/ServiceInstance/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${selectorStore.currentService.id}/${scope.row.id}/${config.dashboardName}`"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
             {{ scope.row.label }}
@@ -83,6 +79,7 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { InstanceListConfig } from "@/types/dashboard";
 import { Instance } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import { EntityType } from "../data";
 
 /*global defineProps */
 defineProps({
@@ -124,7 +121,7 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
     const params = await useQueryPodsMetrics(
       currentInstances,
       dashboardStore.selectedGrid,
-      "ServiceInstance"
+      EntityType[3].value
     );
     const json = await dashboardStore.fetchMetricValue(params);
 

src/views/dashboard/graphs/ServiceList.vue

@@ -29,17 +29,12 @@ limitations under the License. -->
         </template>
       </el-input>
     </div>
-    <el-table
-      v-loading="chartLoading"
-      :data="services"
-      style="width: 100%; height: 320px; overflow: auto"
-    >
+    <el-table v-loading="chartLoading" :data="services" style="width: 100%">
       <el-table-column label="Services">
         <template #default="scope">
           <router-link
-            target="_blank"
             class="link"
-            :to="`/dashboard/${scope.row.layer}/Service/${selectorStore.currentService.value}/${config.dashboardName}`"
+            :to="`/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${selectorStore.currentService.id}/${config.dashboardName}`"
             :key="1"
             :style="{ fontSize: `${config.fontSize}px` }"
           >
@@ -85,6 +80,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { Service } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
+import { EntityType } from "../data";
 
 /*global defineProps */
 defineProps({
@@ -124,7 +120,7 @@ async function queryServiceMetrics(currentServices: Service[]) {
     const params = await useQueryPodsMetrics(
       currentServices,
       dashboardStore.selectedGrid,
-      "Service"
+      EntityType[0].value
     );
     const json = await dashboardStore.fetchMetricValue(params);