From f1e405fbb4fccef12b8157585da290c8818d7f03 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Mon, 21 Mar 2022 19:34:08 +0800
Subject: [PATCH] feat: add switch to control dashboard mode (#31)

---
 src/components/Icon.vue                       |  2 +-
 src/hooks/useDashboardsSession.ts             | 32 ++++++++++
 src/layout/Index.vue                          |  3 +-
 src/layout/components/SideBar.vue             |  2 +-
 src/locales/lang/en.ts                        |  4 +-
 src/locales/lang/zh.ts                        |  2 +
 src/store/modules/dashboard.ts                |  5 ++
 src/views/Layer.vue                           | 11 ++--
 src/views/dashboard/Edit.vue                  |  4 +-
 src/views/dashboard/List.vue                  | 25 ++++++--
 src/views/dashboard/controls/Log.vue          |  4 +-
 src/views/dashboard/controls/Profile.vue      |  5 +-
 src/views/dashboard/controls/Tab.vue          |  9 +--
 src/views/dashboard/controls/Topology.vue     |  4 +-
 src/views/dashboard/controls/Trace.vue        | 11 ++--
 src/views/dashboard/controls/Widget.vue       |  6 +-
 src/views/dashboard/graphs/EndpointList.vue   | 26 +++++---
 src/views/dashboard/graphs/InstanceList.vue   | 27 ++++++---
 src/views/dashboard/graphs/ServiceList.vue    | 26 ++++++--
 src/views/dashboard/panel/Tool.vue            | 60 +++++++++++++++----
 .../related/topology/components/Graph.vue     | 45 ++++++++++----
 .../topology/components/PodTopology.vue       | 18 +++++-
 .../related/topology/components/Settings.vue  |  1 +
 23 files changed, 250 insertions(+), 82 deletions(-)
 create mode 100644 src/hooks/useDashboardsSession.ts

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index fc6a0ce1..e7805416 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -37,7 +37,7 @@ defineProps({
   loading: { type: Boolean, default: false },
 });
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .icon {
   width: 16px;
   height: 16px;
diff --git a/src/hooks/useDashboardsSession.ts b/src/hooks/useDashboardsSession.ts
new file mode 100644
index 00000000..bd3e1a54
--- /dev/null
+++ b/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;
+}
diff --git a/src/layout/Index.vue b/src/layout/Index.vue
index 23b35719..906251cd 100644
--- a/src/layout/Index.vue
+++ b/src/layout/Index.vue
@@ -24,10 +24,11 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { AppMain, SideBar, NavBar } from "./components";
 </script>
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .app-wrapper {
   height: 100%;
 }
+
 .main-container {
   flex-grow: 2;
   height: 100%;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 31da52ca..e7afe788 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -129,7 +129,7 @@ const filterMenus = (menus: any[]) => {
 };
 </script>
 
-<style lang="scss" scope>
+<style lang="scss" scoped>
 .side-bar {
   position: relative;
   height: 100%;
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index a955a01c..a1a87f5f 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -115,10 +115,12 @@ const msg = {
   rename: "Rename",
   selfObservability: "Self Observability",
   satellite: "Satellite",
-  skyWalkingServer: "Sky Walking Server",
+  skyWalkingServer: "SkyWalking Server",
   functions: "Functions",
   browser: "Browser",
   linux: "Linux",
+  editWarning: "You are entering edit mode",
+  viewWarning: "You are entering view mode",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 62bc7bf4..445c5c58 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -119,6 +119,8 @@ const msg = {
   functions: "Functions",
   linux: "Linux",
   browser: "浏览器",
+  editWarning: "你正在进入编辑模式",
+  viewWarning: "你正在进入预览模式",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 48392963..6e7d33a0 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -41,6 +41,7 @@ interface DashboardState {
   currentTabItems: LayoutConfig[];
   dashboards: DashboardItem[];
   currentDashboard: Nullable<DashboardItem>;
+  editMode: boolean;
 }
 
 export const dashboardStore = defineStore({
@@ -58,11 +59,15 @@ export const dashboardStore = defineStore({
     currentTabItems: [],
     dashboards: [],
     currentDashboard: null,
+    editMode: false,
   }),
   actions: {
     setLayout(data: LayoutConfig[]) {
       this.layout = data;
     },
+    setMode(mode: boolean) {
+      this.editMode = mode;
+    },
     resetDashboards(list: DashboardItem[]) {
       this.dashboards = list;
       sessionStorage.setItem("dashboards", JSON.stringify(list));
diff --git a/src/views/Layer.vue b/src/views/Layer.vue
index ed1f418e..b7f3210c 100644
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@@ -23,11 +23,13 @@ import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { EntityType } from "./dashboard/data";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
 import Edit from "./dashboard/Edit.vue";
 
 const { t } = useI18n();
 const route = useRoute();
 const dashboardStore = useDashboardStore();
+const appStore = useAppStoreWithOut();
 const routeNames = [
   "GeneralServices",
   "Database",
@@ -44,8 +46,11 @@ const layer = ref<string>("GENERAL");
 getDashboard();
 
 async function getDashboard() {
-  dashboardStore.setCurrentDashboard(null);
   setLayer(String(route.name));
+  dashboardStore.setLayer(layer.value);
+  dashboardStore.setEntity(EntityType[0].value);
+  dashboardStore.setMode(false);
+  dashboardStore.setCurrentDashboard(null);
   await dashboardStore.setDashboards();
   const index = dashboardStore.dashboards.findIndex(
     (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
@@ -56,6 +61,7 @@ async function getDashboard() {
   }
   const d = dashboardStore.dashboards[index];
   dashboardStore.setCurrentDashboard(d);
+  appStore.setPageTitle(d.name);
 }
 function setLayer(n: string) {
   switch (n) {
@@ -93,9 +99,6 @@ function setLayer(n: string) {
       layer.value = "GENERAL";
       break;
   }
-  dashboardStore.setLayer(layer.value);
-  dashboardStore.setEntity(EntityType[1].value);
-  // appStore.setPageTitle(layer.value);
 }
 watch(
   () => route.name,
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 99a7faed..67d850c1 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -13,11 +13,11 @@ 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. -->
 <template>
-  <Tool v-if="p.entity" />
+  <Tool />
   <div
     class="ds-main"
     @click="handleClick"
-    :style="{ height: p.entity ? 'calc(100% - 45px)' : '100%' }"
+    :style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
   >
     <grid-layout />
     <el-dialog
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index df462af2..f767b2b9 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -44,7 +44,11 @@ limitations under the License. -->
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="name" label="Name" />
+        <el-table-column prop="name" label="Name">
+          <template #default="scope">
+            <span @click="handleView(scope.row)">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="layer" label="Layer" width="200" />
         <el-table-column prop="entity" label="Entity" width="200" />
         <el-table-column prop="isRoot" label="Root" width="100">
@@ -56,10 +60,10 @@ limitations under the License. -->
         </el-table-column>
         <el-table-column label="Operations">
           <template #default="scope">
-            <el-button size="small" @click="handleView(scope.row)">
+            <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("edit") }}
             </el-button>
-            <el-button size="small" @click="handleEdit(scope.row)">
+            <el-button size="small" @click="handleRename(scope.row)">
               {{ t("rename") }}
             </el-button>
             <el-popconfirm
@@ -196,7 +200,20 @@ function exportTemplates() {
     multipleTableRef.value!.clearSelection();
   }, 2000);
 }
+function handleEdit(row: DashboardItem) {
+  dashboardStore.setMode(true);
+  dashboardStore.setEntity(row.entity);
+  dashboardStore.setLayer(row.layer);
+  dashboardStore.setCurrentDashboard(row);
+  router.push(
+    `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
+  );
+}
+
 function handleView(row: DashboardItem) {
+  dashboardStore.setMode(false);
+  dashboardStore.setEntity(row.entity);
+  dashboardStore.setLayer(row.layer);
   dashboardStore.setCurrentDashboard(row);
   router.push(
     `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
@@ -267,7 +284,7 @@ async function setRoot(row: DashboardItem) {
   searchDashboards();
   loading.value = false;
 }
-function handleEdit(row: DashboardItem) {
+function handleRename(row: DashboardItem) {
   ElMessageBox.prompt("Please input dashboard name", "Edit", {
     confirmButtonText: "OK",
     cancelButtonText: "Cancel",
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 9f0f9a17..ead077b8 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       placement="bottom"
       trigger="click"
       :width="100"
-      v-if="routeParams.entity"
+      v-if="dashboardStore.editMode"
     >
       <template #reference>
         <span class="delete cp">
@@ -39,7 +39,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/log/Header.vue";
 import List from "../related/log/List.vue";
@@ -53,7 +52,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function removeWidget() {
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index e6bce9e1..1faca451 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       placement="bottom"
       trigger="click"
       :width="100"
-      v-if="routeParams.entity"
+      v-if="dashboardStore.editMode"
     >
       <template #reference>
         <span class="delete cp">
@@ -39,7 +39,6 @@ import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Header from "../related/profile/Header.vue";
 import Content from "../related/profile/Content.vue";
-import { useRoute } from "vue-router";
 
 /*global defineProps */
 const props = defineProps({
@@ -50,8 +49,8 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
+
 function removeWidget() {
   dashboardStore.removeControls(props.data);
 }
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index bb77acd2..2582f3ba 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -34,10 +34,10 @@ limitations under the License. -->
           size="sm"
           iconName="cancel"
           @click="deleteTabItem($event, idx)"
-          v-if="routeParams.entity"
+          v-if="dashboardStore.editMode"
         />
       </span>
-      <span class="tab-icons" v-if="routeParams.entity">
+      <span class="tab-icons" v-if="dashboardStore.editMode">
         <el-tooltip content="Add tab items" placement="bottom">
           <i @click="addTabItem">
             <Icon size="middle" iconName="add" />
@@ -45,7 +45,7 @@ limitations under the License. -->
         </el-tooltip>
       </span>
     </div>
-    <div class="operations" v-if="routeParams.entity">
+    <div class="operations" v-if="dashboardStore.editMode">
       <el-popover
         placement="bottom"
         trigger="click"
@@ -113,7 +113,6 @@ limitations under the License. -->
 <script lang="ts">
 import { ref, watch, defineComponent, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import type { PropType } from "vue";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -136,7 +135,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
-    const routeParams = useRoute().params;
     const dashboardStore = useDashboardStore();
     const activeTabIndex = ref<number>(0);
     const activeTabWidget = ref<string>("");
@@ -247,7 +245,6 @@ export default defineComponent({
       needQuery,
       canEditTabName,
       showTools,
-      routeParams,
       t,
     };
   },
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index 27a7bdd9..6fa8a6e8 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
         placement="bottom"
         trigger="click"
         :width="100"
-        v-if="routeParams.entity"
+        v-if="dashboardStore.editMode"
       >
         <template #reference>
           <span>
@@ -39,7 +39,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import Topology from "../related/topology/Index.vue";
@@ -53,7 +52,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 
 function removeTopo() {
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 236c3a5c..0682fcf4 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -14,13 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="trace-wrapper flex-v">
-    <el-popover placement="bottom" trigger="click" :width="100">
+    <el-popover
+      placement="bottom"
+      trigger="click"
+      :width="100"
+      v-if="dashboardStore.editMode"
+    >
       <template #reference>
         <span class="delete cp">
           <Icon iconName="ellipsis_v" size="middle" class="operation" />
         </span>
       </template>
-      <div class="tools" @click="removeWidget" v-if="routeParams.entity">
+      <div class="tools" @click="removeWidget">
         <span>{{ t("delete") }}</span>
       </div>
     </el-popover>
@@ -35,7 +40,6 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import Filter from "../related/trace/Filter.vue";
 import TraceList from "../related/trace/TraceList.vue";
 import TraceDetail from "../related/trace/Detail.vue";
@@ -51,7 +55,6 @@ const props = defineProps({
   activeIndex: { type: String, default: "" },
 });
 const { t } = useI18n();
-const routeParams = useRoute().params;
 const dashboardStore = useDashboardStore();
 function removeWidget() {
   dashboardStore.removeControls(props.data);
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index e1838247..f63d34ee 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -38,7 +38,7 @@ limitations under the License. -->
           placement="bottom"
           trigger="click"
           :width="100"
-          v-if="routeParams.entity"
+          v-if="dashboardStore.editMode"
         >
           <template #reference>
             <span>
@@ -74,7 +74,6 @@ limitations under the License. -->
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, watch } from "vue";
 import type { PropType } from "vue";
-import { useRoute } from "vue-router";
 import { LayoutConfig } from "@/types/dashboard";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
@@ -98,7 +97,6 @@ export default defineComponent({
   props,
   setup(props) {
     const { t } = useI18n();
-    const routeParams = useRoute().params;
     const loading = ref<boolean>(false);
     const state = reactive<{ source: { [key: string]: unknown } }>({
       source: {},
@@ -196,7 +194,7 @@ export default defineComponent({
       editConfig,
       data,
       loading,
-      routeParams,
+      dashboardStore,
       t,
     };
   },
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 27fbd7eb..d3b09a02 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/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);
 }
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 06e7a23f..584fc615 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/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);
 }
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index f2b78563..81bf5f92 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/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;
 
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index b1fa8219..5285d644 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -72,15 +72,29 @@ limitations under the License. -->
         />
       </div>
     </div>
-    <div class="tool-icons">
-      <span
-        @click="clickIcons(t)"
-        v-for="(t, index) in toolIcons"
-        :key="index"
-        :title="t.content"
-      >
-        <Icon class="icon-btn" size="sm" :iconName="t.name" />
-      </span>
+    <div class="flex-h tools">
+      <div class="tool-icons flex-h" v-if="dashboardStore.editMode">
+        <span
+          @click="clickIcons(t)"
+          v-for="(t, index) in toolIcons"
+          :key="index"
+          :title="t.content"
+        >
+          <el-tooltip :content="t.content" placement="bottom">
+            <i>
+              <Icon class="icon-btn" size="sm" :iconName="t.name" />
+            </i>
+          </el-tooltip>
+        </span>
+      </div>
+      <div class="switch">
+        <el-switch
+          v-model="dashboardStore.editMode"
+          active-text="Edit"
+          inactive-text="View"
+          @change="changeMode"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -102,7 +116,9 @@ import {
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
+import { useI18n } from "vue-i18n";
 
+const { t } = useI18n();
 const dashboardStore = useDashboardStore();
 const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
@@ -127,9 +143,10 @@ const states = reactive<{
   currentDestService: "",
   currentDestPod: "",
 });
-
-dashboardStore.setLayer(params.layerId);
-dashboardStore.setEntity(params.entity);
+if (params.layerId) {
+  dashboardStore.setLayer(params.layerId);
+  dashboardStore.setEntity(params.entity);
+}
 appStore.setEventStack([initSelector]);
 
 initSelector();
@@ -286,6 +303,14 @@ function changePods(pod: any) {
   }
 }
 
+function changeMode() {
+  if (dashboardStore.editMode) {
+    ElMessage.warning(t("editWarning"));
+    return;
+  }
+  ElMessage.warning(t("viewWarning"));
+}
+
 function clickIcons(t: { id: string; content: string; name: string }) {
   if (
     dashboardStore.selectedGrid &&
@@ -429,12 +454,17 @@ function getTools() {
 <style lang="scss" scoped>
 .dashboard-tool {
   text-align: right;
-  padding: 5px;
+  padding: 3px 5px 5px 5px;
   background: rgb(240, 242, 245);
   border-bottom: 1px solid #dfe4e8;
   justify-content: space-between;
 }
 
+.switch {
+  padding-top: 2px;
+  margin: 0 10px;
+}
+
 .label {
   font-size: 12px;
   display: inline-block;
@@ -445,6 +475,10 @@ function getTools() {
   margin-top: 2px;
 }
 
+.tools {
+  justify-content: space-between;
+}
+
 .icon-btn {
   display: inline-block;
   padding: 3px;
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index f67be5ec..3f1baf67 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/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,9 +240,15 @@ function handleLinkClick(event: any, d: Call) {
     dashboardStore.entity === EntityType[1].value
       ? EntityType[0].value
       : dashboardStore.entity;
-  const path = `/dashboard/${dashboardStore.layerId}/${e}Relation/${
-    d.source.id
-  }/${d.target.id}/${settings.value.linkDashboard.split(" ").join("-")}`;
+  const p = getDashboard({
+    name: settings.value.linkDashboard,
+    layer: dashboardStore.layerId,
+    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");
 }
@@ -373,15 +380,27 @@ async function handleInspect() {
   update();
 }
 function handleGoEndpoint(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Endpoint/${
-    topologyStore.node.id
-  }/${name.split(" ").join("-")}`;
+  const p = getDashboard({
+    name,
+    layer: dashboardStore.layerId,
+    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) {
-  const path = `/dashboard/${dashboardStore.layerId}/ServiceInstance/${
+  const p = getDashboard({
+    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 });
@@ -389,9 +408,15 @@ function handleGoInstance(name: string) {
   window.open(routeUrl.href, "_blank");
 }
 function handleGoDashboard(name: string) {
-  const path = `/dashboard/${dashboardStore.layerId}/Service/${
-    topologyStore.node.id
-  }/${name.split(" ").join("-")}`;
+  const p = getDashboard({
+    name,
+    layer: dashboardStore.layerId,
+    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");
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 045f17f7..83e9fbf4 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/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,7 +151,14 @@ function goDashboard() {
     dashboardStore.entity === EntityType[2].value
       ? EntityType[2].value
       : EntityType[3].value;
-  const path = `/dashboard/${dashboardStore.layerId}/${entity}/${topologyStore.node.serviceId}/${topologyStore.node.id}/${settings.value.nodeDashboard}`;
+  const d = getDashboard({
+    name: settings.value.nodeDashboard,
+    layer: dashboardStore.layerId,
+    entity,
+  });
+  dashboardStore.setEntity(entity);
+  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);
@@ -182,7 +190,13 @@ function selectNodeLink(d: any) {
       dashboardStore.entity === EntityType[2].value
         ? EntityType[6].value
         : EntityType[5].value;
-    const path = `/dashboard/${dashboardStore.layerId}/${entity}/${sourceObj.serviceId}/${sourceObj.id}/${targetObj.serviceId}/${targetObj.id}/${settings.value.linkDashboard}`;
+    const p = getDashboard({
+      name: settings.value.linkDashboard,
+      layer: dashboardStore.layerId,
+      entity,
+    });
+    dashboardStore.setEntity(entity);
+    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;
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index 3d5e6585..55895ab4 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -225,6 +225,7 @@ const states = reactive<{
   linkDashboards: [],
   nodeDashboards: [],
 });
+console.log(dashboardStore.selectedGrid);
 const isService = [EntityType[0].value, EntityType[1].value].includes(
   dashboardStore.entity
 );