feat: add switch to control dashboard mode (#31)

src/views/dashboard/graphs/EndpointList.vue

@@ -33,17 +33,13 @@ limitations under the License. -->
       <el-table v-loading="chartLoading" :data="endpoints" style="width: 100%">
         <el-table-column label="Endpoints">
           <template #default="scope">
-            <router-link
+            <span
               class="link"
-              :to="`/dashboard/${dashboardStore.layerId}/${
-                EntityType[2].value
-              }/${selectorStore.currentService.id}/${
-                scope.row.id
-              }/${config.dashboardName.split(' ').join('-')}`"
+              @click="clickEndpoint"
               :style="{ fontSize: `${config.fontSize}px` }"
             >
               {{ scope.row.label }}
-            </router-link>
+            </span>
           </template>
         </el-table-column>
         <el-table-column
@@ -94,6 +90,8 @@ import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import Line from "./Line.vue";
 import Card from "./Card.vue";
 import { EntityType } from "../data";
+import router from "@/router";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global defineProps */
 const props = defineProps({
@@ -159,6 +157,20 @@ async function queryEndpointMetrics(currentPods: Endpoint[]) {
   }
   endpoints.value = currentPods;
 }
+function clickEndpoint(scope: any) {
+  const d = getDashboard({
+    name: props.config.dashboardName,
+    layer: dashboardStore.layerId,
+    entity: EntityType[2].value,
+  });
+  dashboardStore.setEntity(EntityType[2].value);
+  dashboardStore.setCurrentDashboard(d);
+  router.push(
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
+      scope.row.id
+    }/${d.name.split(" ").join("-")}`
+  );
+}
 function changePage(pageIndex: number) {
   endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
 }

src/views/dashboard/graphs/InstanceList.vue

@@ -33,17 +33,13 @@ limitations under the License. -->
       <el-table v-loading="chartLoading" :data="instances" style="width: 100%">
         <el-table-column label="Service Instances">
           <template #default="scope">
-            <router-link
+            <span
               class="link"
-              :to="`/dashboard/${dashboardStore.layerId}/${
-                EntityType[3].value
-              }/${selectorStore.currentService.id}/${
-                scope.row.id
-              }/${config.dashboardName.split(' ').join('-')}`"
+              @click="clickInstance"
               :style="{ fontSize: `${config.fontSize}px` }"
             >
               {{ scope.row.label }}
-            </router-link>
+            </span>
           </template>
         </el-table-column>
         <el-table-column
@@ -94,6 +90,8 @@ import { InstanceListConfig } from "@/types/dashboard";
 import { Instance } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
+import router from "@/router";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global defineProps */
 const props = defineProps({
@@ -164,6 +162,21 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
   instances.value = currentInstances;
 }
 
+function clickInstance(scope: any) {
+  const d = getDashboard({
+    name: props.config.dashboardName,
+    layer: dashboardStore.layerId,
+    entity: EntityType[3].value,
+  });
+  dashboardStore.setCurrentDashboard(d);
+  dashboardStore.setEntity(d.entity);
+  router.push(
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
+      scope.row.id
+    }/${d.name.split(" ").join("-")}`
+  );
+}
+
 function changePage(pageIndex: number) {
   instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
 }

src/views/dashboard/graphs/ServiceList.vue

@@ -45,16 +45,13 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column label="Service Names">
           <template #default="scope">
-            <router-link
+            <span
               class="link"
-              :to="`/dashboard/${dashboardStore.layerId}/${
-                EntityType[0].value
-              }/${scope.row.id}/${config.dashboardName.split(' ').join('-')}`"
-              :key="1"
               :style="{ fontSize: `${config.fontSize}px` }"
+              @click="clickService(scope)"
             >
               {{ scope.row.label }}
-            </router-link>
+            </span>
           </template>
         </el-table-column>
         <el-table-column
@@ -105,6 +102,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import { Service } from "@/types/selector";
 import { useQueryPodsMetrics, usePodsSource } from "@/hooks/useProcessor";
 import { EntityType } from "../data";
+import router from "@/router";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global defineProps */
 const props = defineProps({
@@ -173,6 +172,21 @@ async function queryServices() {
   }
   queryServiceMetrics(services.value);
 }
+
+function clickService(scope: any) {
+  const d = getDashboard({
+    name: props.config.dashboardName,
+    layer: dashboardStore.layerId,
+    entity: EntityType[0].value,
+  });
+  dashboardStore.setCurrentDashboard(d);
+  dashboardStore.setEntity(d.entity);
+  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name
+    .split(" ")
+    .join("-")}`;
+
+  router.push(path);
+}
 async function queryServiceMetrics(currentServices: Service[]) {
   const { metrics } = props.config;