reset current dashboard

src/hooks/useDashboardsSession.ts

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default function getDashboard(param: {
+  name: string;
+  layer: string;
+  entity: string;
+}) {
+  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
+  const dashboard = list.find(
+    (d: { name: string; layer: string; entity: string }) =>
+      d.name === param.name &&
+      d.entity === param.entity &&
+      d.layer === param.layer
+  );
+
+  return dashboard;
+}

src/views/dashboard/graphs/EndpointList.vue

@@ -91,6 +91,7 @@ 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({
@@ -157,11 +158,17 @@ 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/${dashboardStore.layerId}/${EntityType[2].value}/${
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      selectorStore.currentService.id
+      scope.row.id
-    }/${scope.row.id}/${props.config.dashboardName.split(" ").join("-")}`
+    }/${d.name.split(" ").join("-")}`
   );
 }
 function changePage(pageIndex: number) {

src/views/dashboard/graphs/InstanceList.vue

@@ -91,6 +91,7 @@ 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({
@@ -162,11 +163,17 @@ async function queryInstanceMetrics(currentInstances: Instance[]) {
 }
 
 function clickInstance(scope: any) {
-  dashboardStore.setEntity(EntityType[3].value);
+  const d = getDashboard({
+    name: props.config.dashboardName,
+    layer: dashboardStore.layerId,
+    entity: EntityType[3].value,
+  });
+  dashboardStore.setCurrentDashboard(d);
+  dashboardStore.setEntity(d.entity);
   router.push(
-    `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      selectorStore.currentService.id
+      scope.row.id
-    }/${scope.row.id}/${props.config.dashboardName.split(" ").join("-")}`
+    }/${d.name.split(" ").join("-")}`
   );
 }
 

src/views/dashboard/graphs/ServiceList.vue

@@ -103,6 +103,7 @@ 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,10 +174,16 @@ async function queryServices() {
 }
 
 function clickService(scope: any) {
-  dashboardStore.setEntity(EntityType[0].value);
+  const d = getDashboard({
-  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${
+    name: props.config.dashboardName,
-    scope.row.id
+    layer: dashboardStore.layerId,
-  }/${props.config.dashboardName.split(" ").join("-")}`;
+    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);
 }

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

@@ -85,6 +85,7 @@ import Settings from "./Settings.vue";
 import { Option } from "@/types/app";
 import { Service } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global Nullable, defineProps */
 const props = defineProps({
@@ -239,10 +240,15 @@ function handleLinkClick(event: any, d: Call) {
     dashboardStore.entity === EntityType[1].value
       ? EntityType[0].value
       : dashboardStore.entity;
-  dashboardStore.setEntity(`${e}Relation`);
+  const p = getDashboard({
-  const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${
+    name: settings.value.linkDashboard,
-    d.source.id
+    layer: dashboardStore.layerId,
-  }/${d.target.id}/${settings.value.linkDashboard.split(" ").join("-")}`;
+    entity: `${e}Relation`,
+  });
+  dashboardStore.setEntity(p.entity);
+  const path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${
+    d.target.id
+  }/${p.name.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
 }
@@ -374,17 +380,27 @@ async function handleInspect() {
   update();
 }
 function handleGoEndpoint(name: string) {
-  dashboardStore.setEntity(EntityType[2].value);
+  const p = getDashboard({
-  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${
+    name,
-    topologyStore.node.id
+    layer: dashboardStore.layerId,
-  }/${name.split(" ").join("-")}`;
+    entity: EntityType[2].value,
+  });
+  dashboardStore.setEntity(p.entity);
+  const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name
+    .split(" ")
+    .join("-")}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
 }
 function handleGoInstance(name: string) {
-  dashboardStore.setEntity(EntityType[3].value);
+  const p = getDashboard({
-  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${
+    name,
+    layer: dashboardStore.layerId,
+    entity: EntityType[3].value,
+  });
+  dashboardStore.setEntity(p.entity);
+  const path = `/dashboard/${p.layer}/ServiceInstance/${
     topologyStore.node.id
   }/${name.split(" ").join("-")}`;
   const routeUrl = router.resolve({ path });
@@ -392,10 +408,15 @@ function handleGoInstance(name: string) {
   window.open(routeUrl.href, "_blank");
 }
 function handleGoDashboard(name: string) {
-  dashboardStore.setEntity(EntityType[0].value);
+  const p = getDashboard({
-  const path = `/dashboard/${dashboardStore.layerId}/Service/${
+    name,
-    topologyStore.node.id
+    layer: dashboardStore.layerId,
-  }/${name.split(" ").join("-")}`;
+    entity: EntityType[0].value,
+  });
+  dashboardStore.setEntity(p.entity);
+  const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name
+    .split(" ")
+    .join("-")}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");

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

@@ -86,6 +86,7 @@ import { ElMessage } from "element-plus";
 import Sankey from "./Sankey.vue";
 import Settings from "./Settings.vue";
 import router from "@/router";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 /*global defineProps */
 const props = defineProps({
@@ -150,8 +151,14 @@ function goDashboard() {
     dashboardStore.entity === EntityType[2].value
       ? EntityType[2].value
       : EntityType[3].value;
+  const d = getDashboard({
+    name: settings.value.nodeDashboard,
+    layer: dashboardStore.layerId,
+    entity,
+  });
   dashboardStore.setEntity(entity);
-  const path = `/dashboard/${dashboardStore.layerId}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${settings.value.nodeDashboard}`;
+  dashboardStore.setCurrentDashboard(d);
+  const path = `/dashboard/${d.layer}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${d.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
   topologyStore.setNode(null);
@@ -183,8 +190,13 @@ function selectNodeLink(d: any) {
       dashboardStore.entity === EntityType[2].value
         ? EntityType[6].value
         : EntityType[5].value;
+    const p = getDashboard({
+      name: settings.value.linkDashboard,
+      layer: dashboardStore.layerId,
+      entity,
+    });
     dashboardStore.setEntity(entity);
-    const path = `/dashboard/${dashboardStore.layerId}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${settings.value.linkDashboard}`;
+    const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${p.name}`;
     const routeUrl = router.resolve({ path });
     window.open(routeUrl.href, "_blank");
     return;