From 049f46a4cfe6ac68ae4d2fabd8257938f1cd3493 Mon Sep 17 00:00:00 2001
From: Fine0830 <fine0830@outlook.com>
Date: Tue, 22 Mar 2022 20:14:16 +0800
Subject: [PATCH] feat: update dashboard list and reload templates (#33)

---
 src/locales/lang/en.ts                        |  2 +
 src/locales/lang/zh.ts                        |  2 +
 src/router/database.ts                        |  3 +-
 src/store/modules/dashboard.ts                | 26 ++++--
 src/views/dashboard/Edit.vue                  |  2 +-
 src/views/dashboard/List.vue                  | 92 ++++++++++++++-----
 src/views/dashboard/New.vue                   |  2 +-
 src/views/dashboard/configuration/Widget.vue  |  9 +-
 src/views/dashboard/controls/Widget.vue       | 11 ++-
 src/views/dashboard/data.ts                   |  9 +-
 src/views/dashboard/graphs/EndpointList.vue   | 19 +++-
 src/views/dashboard/graphs/InstanceList.vue   | 20 +++-
 src/views/dashboard/graphs/ServiceList.vue    | 13 ++-
 src/views/dashboard/panel/Tool.vue            | 24 +++--
 .../related/topology/components/Graph.vue     | 26 +++---
 .../topology/components/PodTopology.vue       | 23 +++--
 16 files changed, 202 insertions(+), 81 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index a1a87f5f..26dc9d19 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -121,6 +121,8 @@ const msg = {
   linux: "Linux",
   editWarning: "You are entering edit mode",
   viewWarning: "You are entering view mode",
+  virtualDatabase: "Virtual Database",
+  reloadDashboards: "Reload dashboards",
   hourTip: "Select Hour",
   minuteTip: "Select Minute",
   secondTip: "Select Second",
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index a4acc1f2..f8702996 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -121,6 +121,8 @@ const msg = {
   browser: "浏览器",
   editWarning: "你正在进入编辑模式",
   viewWarning: "你正在进入预览模式",
+  virtualDatabase: "虚拟数据库",
+  reloadDashboards: "重新加载仪表盘",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",
diff --git a/src/router/database.ts b/src/router/database.ts
index ce566976..4d285f43 100644
--- a/src/router/database.ts
+++ b/src/router/database.ts
@@ -24,6 +24,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
     meta: {
       title: "database",
       icon: "bar_chart",
+      hasGroup: true,
     },
     redirect: "/database",
     component: Layout,
@@ -32,7 +33,7 @@ export const routesDatabase: Array<RouteRecordRaw> = [
         path: "/database",
         name: "Database",
         meta: {
-          title: "database",
+          title: "virtualDatabase",
           headPath: "/database",
           exact: true,
         },
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index 6e7d33a0..0f485c1f 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -296,7 +296,7 @@ export const dashboardStore = defineStore({
       const list = [];
       for (const t of data) {
         const c = JSON.parse(t.configuration);
-        const key = [c.layer, c.entity, c.name.split(" ").join("-")].join("_");
+        const key = [c.layer, c.entity, c.name].join("_");
 
         list.push({
           id: t.id,
@@ -326,6 +326,17 @@ export const dashboardStore = defineStore({
         sessionStorage.getItem("dashboards") || "[]"
       );
     },
+    async resetTemplates() {
+      const res = await this.fetchTemplates();
+      if (res.errors) {
+        this.dashboards = [];
+        ElMessage.error(res.errors);
+        return;
+      }
+      this.dashboards = JSON.parse(
+        sessionStorage.getItem("dashboards") || "[]"
+      );
+    },
     async updateDashboard(setting: { id: string; configuration: string }) {
       const res: AxiosResponse = await graphql.query("updateTemplate").params({
         setting,
@@ -385,7 +396,7 @@ export const dashboardStore = defineStore({
       }
       if (!json.status) {
         ElMessage.error(json.message);
-        return;
+        return json;
       }
       if (!this.currentDashboard.id) {
         ElMessage.success("Saved successfully");
@@ -393,22 +404,21 @@ export const dashboardStore = defineStore({
       const key = [
         this.currentDashboard.layer,
         this.currentDashboard.entity,
-        this.currentDashboard.name.split(" ").join("-"),
+        this.currentDashboard.name,
       ].join("_");
+      this.currentDashboard.id = json.id;
       if (this.currentDashboard.id) {
         sessionStorage.removeItem(key);
         this.dashboards = this.dashboards.filter(
           (d: DashboardItem) => d.id !== this.currentDashboard.id
         );
       }
-      this.dashboards.push({
-        ...this.currentDashboard,
-        id: json.id,
-      });
+      this.dashboards.push(this.currentDashboard);
       const l = { id: json.id, configuration: c };
 
       sessionStorage.setItem(key, JSON.stringify(l));
       sessionStorage.setItem("dashboards", JSON.stringify(this.dashboards));
+      return json;
     },
     async deleteDashboard() {
       const res: AxiosResponse = await graphql
@@ -430,7 +440,7 @@ export const dashboardStore = defineStore({
       const key = [
         this.currentDashboard.layer,
         this.currentDashboard.entity,
-        this.currentDashboard.name.split(" ").join("-"),
+        this.currentDashboard.name,
       ].join("_");
       sessionStorage.removeItem(key);
     },
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 67d850c1..eb62f74c 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -55,7 +55,7 @@ async function setTemplate() {
 
   if (!p.entity) {
     const { layer, entity, name } = dashboardStore.currentDashboard;
-    layoutKey.value = `${layer}_${entity}_${name.split(" ").join("-")}`;
+    layoutKey.value = `${layer}_${entity}_${name}`;
   }
   const c: { configuration: string; id: string } = JSON.parse(
     sessionStorage.getItem(layoutKey.value) || "{}"
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 9211c0cd..822f9430 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
       <el-input
         v-model="searchText"
         placeholder="Please input name"
-        class="input-with-search"
+        class="input-with-search ml-10"
         size="small"
         @change="searchDashboards"
       >
@@ -28,6 +28,10 @@ limitations under the License. -->
           </el-button>
         </template>
       </el-input>
+      <el-button class="ml-10" size="small" @click="reloadTemplates">
+        <Icon size="sm" iconName="retry" class="reload" />
+        {{ t("reloadDashboards") }}
+      </el-button>
       <router-link to="/dashboard/new">
         <el-button size="small" type="primary">
           + {{ t("newDashboard") }}
@@ -37,7 +41,7 @@ limitations under the License. -->
     <div class="table">
       <el-table
         :data="dashboards"
-        :style="{ width: '100%', fontSize: '13px' }"
+        :style="{ fontSize: '13px', width: '100%' }"
         v-loading="loading"
         ref="multipleTableRef"
         :default-sort="{ prop: 'name' }"
@@ -46,21 +50,21 @@ limitations under the License. -->
         <el-table-column type="selection" width="55" />
         <el-table-column prop="name" label="Name">
           <template #default="scope">
-            <span class="cp" @click="handleView(scope.row)">{{
+            <span class="cp name" @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">
+        <el-table-column prop="isRoot" label="Root" width="60">
           <template #default="scope">
             <span>
               {{ scope.row.isRoot ? t("yes") : t("no") }}
             </span>
           </template>
         </el-table-column>
-        <el-table-column label="Operations">
+        <el-table-column label="Operations" width="350">
           <template #default="scope">
             <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("edit") }}
@@ -113,6 +117,17 @@ limitations under the License. -->
             {{ t("import") }}
           </label>
         </el-button>
+        <el-pagination
+          class="pagination"
+          background
+          small
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :total="dashboardStore.dashboards.length"
+          @current-change="changePage"
+          @prev-click="changePage"
+          @next-click="changePage"
+        />
       </div>
     </div>
   </div>
@@ -133,6 +148,7 @@ import { EntityType } from "./data";
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
+const pageSize = 18;
 const dashboards = ref<DashboardItem[]>([]);
 const searchText = ref<string>("");
 const loading = ref<boolean>(false);
@@ -147,7 +163,7 @@ const handleSelectionChange = (val: DashboardItem[]) => {
 setList();
 async function setList() {
   await dashboardStore.setDashboards();
-  dashboards.value = dashboardStore.dashboards;
+  searchDashboards();
 }
 async function importTemplates(event: any) {
   const arr: any = await readFile(event);
@@ -168,7 +184,7 @@ async function importTemplates(event: any) {
       (d: DashboardItem) => d.id === item.id
     );
     const p: DashboardItem = {
-      name: name,
+      name: name.split(" ").join("-"),
       layer: layer,
       entity: entity,
       isRoot: false,
@@ -192,7 +208,7 @@ function exportTemplates() {
     }
   );
   const templates = arr.map((d: DashboardItem) => {
-    const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+    const key = [d.layer, d.entity, d.name].join("_");
     const layout = JSON.parse(sessionStorage.getItem(key) || "{}");
     return layout;
   });
@@ -207,9 +223,7 @@ function handleEdit(row: DashboardItem) {
   dashboardStore.setEntity(row.entity);
   dashboardStore.setLayer(row.layer);
   dashboardStore.setCurrentDashboard(row);
-  router.push(
-    `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
-  );
+  router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
 }
 
 function handleView(row: DashboardItem) {
@@ -217,9 +231,7 @@ function handleView(row: DashboardItem) {
   dashboardStore.setEntity(row.entity);
   dashboardStore.setLayer(row.layer);
   dashboardStore.setCurrentDashboard(row);
-  router.push(
-    `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
-  );
+  router.push(`/dashboard/${row.layer}/${row.entity}/${row.name}`);
 }
 
 async function setRoot(row: DashboardItem) {
@@ -228,7 +240,7 @@ async function setRoot(row: DashboardItem) {
   for (const d of dashboardStore.dashboards) {
     if (d.id === row.id) {
       d.isRoot = !row.isRoot;
-      const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+      const key = [d.layer, d.entity, d.name].join("_");
       const layout = sessionStorage.getItem(key) || "{}";
       const c = {
         ...JSON.parse(layout).configuration,
@@ -258,7 +270,7 @@ async function setRoot(row: DashboardItem) {
         d.isRoot === true
       ) {
         d.isRoot = false;
-        const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+        const key = [d.layer, d.entity, d.name].join("_");
         const layout = sessionStorage.getItem(key) || "{}";
         const c = {
           ...JSON.parse(layout).configuration,
@@ -303,7 +315,11 @@ function handleRename(row: DashboardItem) {
     });
 }
 async function updateName(d: DashboardItem, value: string) {
-  const key = [d.layer, d.entity, d.name.split(" ").join("-")].join("_");
+  if (new RegExp(/\s/).test(value)) {
+    ElMessage.error("The name cannot contain spaces, carriage returns, etc");
+    return;
+  }
+  const key = [d.layer, d.entity, d.name].join("_");
   const layout = sessionStorage.getItem(key) || "{}";
   const c = {
     ...JSON.parse(layout).configuration,
@@ -337,7 +353,7 @@ async function updateName(d: DashboardItem, value: string) {
   const str = [
     dashboardStore.currentDashboard.layer,
     dashboardStore.currentDashboard.entity,
-    dashboardStore.currentDashboard.name.split(" ").join("-"),
+    dashboardStore.currentDashboard.name,
   ].join("_");
   sessionStorage.setItem(
     str,
@@ -355,15 +371,26 @@ async function handleDelete(row: DashboardItem) {
   dashboards.value = dashboardStore.dashboards;
   loading.value = false;
   sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
-  sessionStorage.removeItem(
-    `${row.layer}_${row.entity}_${row.name.split(" ").join("-")}`
-  );
+  sessionStorage.removeItem(`${row.layer}_${row.entity}_${row.name}`);
 }
-function searchDashboards() {
+function searchDashboards(pageIndex?: any) {
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-  dashboards.value = list.filter((d: { name: string }) =>
+  const arr = list.filter((d: { name: string }) =>
     d.name.includes(searchText.value)
   );
+  dashboards.value = arr.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
+}
+
+async function reloadTemplates() {
+  loading.value = true;
+  await dashboardStore.resetTemplates();
+  loading.value = false;
+}
+function changePage(pageIndex: number) {
+  searchDashboards(pageIndex);
 }
 </script>
 <style lang="scss" scoped>
@@ -373,11 +400,12 @@ function searchDashboards() {
 
 .dashboard-list {
   padding: 20px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .input-with-search {
-  width: 300px;
-  margin-left: 20px;
+  width: 250px;
 }
 
 .table {
@@ -385,6 +413,8 @@ function searchDashboards() {
   background-color: #fff;
   box-shadow: 0px 1px 4px 0px #00000029;
   border-radius: 5px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .toggle-selection {
@@ -392,6 +422,10 @@ function searchDashboards() {
   background-color: #fff;
 }
 
+.pagination {
+  float: right;
+}
+
 .btn {
   width: 220px;
   font-size: 13px;
@@ -407,4 +441,12 @@ function searchDashboards() {
   width: 220px;
   cursor: pointer;
 }
+
+.name {
+  color: #409eff;
+}
+
+.reload {
+  margin-right: 3px;
+}
 </style>
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index 1ba4e5bb..9ed38cf7 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -90,7 +90,7 @@ const onCreate = () => {
     entity: states.entity,
     layer: states.selectedLayer,
   });
-  const name = states.name.split(" ").join("-");
+  const name = states.name;
   const path = `/dashboard/${states.selectedLayer}/${states.entity}/${name}`;
   router.push(path);
 };
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index dd21b366..e3f45822 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -65,7 +65,7 @@ limitations under the License. -->
       </el-collapse>
     </div>
     <div class="footer">
-      <el-button size="small">
+      <el-button size="small" @click="cancelConfig">
         {{ t("cancel") }}
       </el-button>
       <el-button size="small" type="primary" @click="applyConfig">
@@ -112,6 +112,7 @@ export default defineComponent({
       index: dashboardStore.selectedGrid.i,
       visType: [],
     });
+    const originConfig = dashboardStore.selectedGrid;
 
     function getSource(source: unknown) {
       states.source = source;
@@ -126,6 +127,11 @@ export default defineComponent({
       dashboardStore.setConfigPanel(false);
     }
 
+    function cancelConfig() {
+      dashboardStore.selectWidget(originConfig);
+      dashboardStore.setConfigPanel(false);
+    }
+
     return {
       states,
       loading,
@@ -134,6 +140,7 @@ export default defineComponent({
       configHeight,
       dashboardStore,
       applyConfig,
+      cancelConfig,
       getSource,
       setLoading,
     };
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index f63d34ee..d6811aa8 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -105,8 +105,9 @@ export default defineComponent({
     const appStore = useAppStoreWithOut();
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
+    const isList = ListChartTypes.includes(props.data.graph.type || "");
 
-    if (props.needQuery || !dashboardStore.currentDashboard.id) {
+    if ((props.needQuery || !dashboardStore.currentDashboard.id) && !isList) {
       queryMetrics();
     }
 
@@ -152,7 +153,10 @@ export default defineComponent({
         if (props.data.i !== dashboardStore.selectedGrid.i) {
           return;
         }
-        if (ListChartTypes.includes(dashboardStore.selectedGrid.graph.type)) {
+        if (
+          ListChartTypes.includes(dashboardStore.selectedGrid.graph.type) ||
+          isList
+        ) {
           return;
         }
         queryMetrics();
@@ -161,6 +165,9 @@ export default defineComponent({
     watch(
       () => [selectorStore.currentService, selectorStore.currentDestService],
       () => {
+        if (isList) {
+          return;
+        }
         if (
           dashboardStore.entity === EntityType[0].value ||
           dashboardStore.entity === EntityType[4].value
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index da2d6712..a97fc3d9 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -204,11 +204,18 @@ export const ServiceRelationTools = [
   { name: "device_hub", content: "Add Topology", id: "addTopology" },
   { name: "save", content: "Apply", id: "apply" },
 ];
-export const PodRelationTools = [
+
+export const EndpointRelationTools = [
   { name: "playlist_add", content: "Add Widget", id: "addWidget" },
   { name: "all_inbox", content: "Add Tab", id: "addTab" },
   { name: "save", content: "Apply", id: "apply" },
 ];
+export const InstanceRelationTools = [
+  { name: "playlist_add", content: "Add Widget", id: "addWidget" },
+  { name: "all_inbox", content: "Add Tab", id: "addTab" },
+  { name: "device_hub", content: "Add Topology", id: "addTopology" },
+  { name: "save", content: "Apply", id: "apply" },
+];
 
 export const ScopeType = [
   { value: "Service", label: "Service", key: 1 },
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 3efea0c2..310cc08d 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -163,16 +163,21 @@ function clickEndpoint(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[2].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   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("-")}`
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
   );
 }
 function changePage(pageIndex: number) {
-  endpoints.value = searchEndpoints.value.splice(pageIndex - 1, pageSize);
+  endpoints.value = searchEndpoints.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
 function searchList() {
   const currentEndpoints = selectorStore.pods.filter((d: { label: string }) =>
@@ -189,6 +194,12 @@ watch(
     }
   }
 );
+watch(
+  () => [selectorStore.currentService],
+  () => {
+    queryEndpoints();
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index cd5fd0dc..1f4152b8 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -168,18 +168,24 @@ function clickInstance(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[3].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
   router.push(
-    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${
-      scope.row.id
-    }/${d.name.split(" ").join("-")}`
+    `/dashboard/${d.layer}/${d.entity}/${selectorStore.currentService.id}/${scope.row.id}/${d.name}`
   );
 }
 
 function changePage(pageIndex: number) {
-  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
+  instances.value = searchInstances.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
+
 function searchList() {
   searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
@@ -195,6 +201,12 @@ watch(
     }
   }
 );
+watch(
+  () => [selectorStore.currentService],
+  () => {
+    queryInstance();
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 81bf5f92..56a5a4fc 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -179,11 +179,13 @@ function clickService(scope: any) {
     layer: dashboardStore.layerId,
     entity: EntityType[0].value,
   });
+  if (!d) {
+    ElMessage.error("No this dashboard");
+    return;
+  }
   dashboardStore.setCurrentDashboard(d);
   dashboardStore.setEntity(d.entity);
-  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${d.layer}/${d.entity}/${scope.row.id}/${d.name}`;
 
   router.push(path);
 }
@@ -224,7 +226,10 @@ function objectSpanMethod(param: any): any {
   }
 }
 function changePage(pageIndex: number) {
-  services.value = selectorStore.services.splice(pageIndex - 1, pageSize);
+  services.value = services.value.splice(
+    (pageIndex - 1 || 0) * pageSize,
+    pageSize * (pageIndex || 1)
+  );
 }
 function searchList() {
   searchServices.value = selectorStore.services.filter((d: { label: string }) =>
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 5285d644..9a5045fd 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -110,13 +110,15 @@ import {
   ServiceTools,
   InstanceTools,
   EndpointTools,
-  PodRelationTools,
+  EndpointRelationTools,
+  InstanceRelationTools,
   ServiceRelationTools,
 } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
 import { useI18n } from "vue-i18n";
+import { useThrottleFn } from "@vueuse/core";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
@@ -124,8 +126,9 @@ const selectorStore = useSelectorStore();
 const appStore = useAppStoreWithOut();
 const params = useRoute().params;
 const type = EntityType.filter((d: Option) => d.value === params.entity)[0];
-const toolIcons =
-  ref<{ name: string; content: string; id: string }[]>(PodRelationTools);
+const toolIcons = ref<{ name: string; content: string; id: string }[]>(
+  EndpointRelationTools
+);
 const states = reactive<{
   destService: string;
   destPod: string;
@@ -143,6 +146,7 @@ const states = reactive<{
   currentDestService: "",
   currentDestPod: "",
 });
+const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
 if (params.layerId) {
   dashboardStore.setLayer(params.layerId);
   dashboardStore.setEntity(params.entity);
@@ -344,7 +348,7 @@ function setTabControls(id: string) {
       dashboardStore.addTabControls("Topology");
       break;
     case "apply":
-      dashboardStore.saveDashboard();
+      applyDashboard();
       break;
     default:
       ElMessage.info("Don't support this control");
@@ -373,7 +377,7 @@ function setControls(id: string) {
       dashboardStore.addControl("Topology");
       break;
     case "apply":
-      dashboardStore.saveDashboard();
+      applyDashboard();
       break;
     default:
       dashboardStore.addControl("Widget");
@@ -446,8 +450,14 @@ function getTools() {
     case EntityType[4].value:
       toolIcons.value = ServiceRelationTools;
       break;
+    case EntityType[5].value:
+      toolIcons.value = InstanceRelationTools;
+      break;
+    case EntityType[6].value:
+      toolIcons.value = EndpointRelationTools;
+      break;
     default:
-      toolIcons.value = PodRelationTools;
+      toolIcons.value = EndpointRelationTools;
   }
 }
 </script>
@@ -501,6 +511,6 @@ function getTools() {
 }
 
 .selectorPod {
-  width: 340px;
+  width: 300px;
 }
 </style>
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 8389f8ba..fd2bd4d3 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -254,9 +254,7 @@ function handleLinkClick(event: any, d: Call) {
     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 path = `/dashboard/${p.layer}/${e}Relation/${d.source.id}/${d.target.id}/${p.name}`;
   const routeUrl = router.resolve({ path });
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
@@ -396,9 +394,7 @@ function handleGoEndpoint(name: string) {
     entity: EntityType[2].value,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${p.layer}/Endpoint/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -412,9 +408,7 @@ function handleGoInstance(name: string) {
     entity: EntityType[3].value,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/ServiceInstance/${
-    topologyStore.node.id
-  }/${name.split(" ").join("-")}`;
+  const path = `/dashboard/${p.layer}/ServiceInstance/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -428,9 +422,7 @@ function handleGoDashboard(name: string) {
     entity: EntityType[0].value,
   });
   dashboardStore.setEntity(p.entity);
-  const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name
-    .split(" ")
-    .join("-")}`;
+  const path = `/dashboard/${p.layer}/Service/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -448,7 +440,7 @@ async function backToTopology() {
   const resp = await getTopology();
   loading.value = false;
 
-  if (resp.errors) {
+  if (resp && resp.errors) {
     ElMessage.error(resp.errors);
   }
   await init();
@@ -473,8 +465,12 @@ function setConfig() {
   dashboardStore.selectWidget(props.config);
 }
 function resize() {
-  height.value = document.body.clientHeight;
-  width.value = document.body.clientWidth;
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 40,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
   svg.value.attr("height", height.value).attr("width", width.value);
 }
 function updateSettings(config: any) {
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index c7119976..b3362793 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -49,7 +49,7 @@ limitations under the License. -->
   </div>
   <div
     class="sankey"
-    :style="`height:${height}px;width:${width}px;`"
+    :style="`height:${height - 30}px;width:${width}px;`"
     v-loading="loading"
     element-loading-background="rgba(0, 0, 0, 0)"
     @click="handleClick"
@@ -120,6 +120,7 @@ const items = [
 
 onMounted(() => {
   loadTopology(selectorStore.currentPod && selectorStore.currentPod.id);
+  window.addEventListener("resize", resize);
 });
 
 async function loadTopology(id: string) {
@@ -140,6 +141,15 @@ async function loadTopology(id: string) {
   topologyStore.queryNodeMetrics(settings.value.nodeMetrics || []);
 }
 
+function resize() {
+  const dom = document.querySelector(".topology")?.getBoundingClientRect() || {
+    height: 40,
+    width: 0,
+  };
+  height.value = dom.height - 40;
+  width.value = dom.width;
+}
+
 function inspect() {
   const id = topologyStore.node.id;
   topologyStore.setNode(null);
@@ -166,9 +176,7 @@ function goDashboard() {
   });
   dashboardStore.setEntity(entity);
   dashboardStore.setCurrentDashboard(d);
-  const path = `/dashboard/${d.layer}/${entity}/${
-    topologyStore.node.serviceId
-  }/${topologyStore.node.id}/${d.name.split(" ").join("-")}`;
+  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);
@@ -207,9 +215,7 @@ function selectNodeLink(d: any) {
       entity,
     });
     dashboardStore.setEntity(entity);
-    const path = `/dashboard/${p.layer}/${entity}/${sourceObj.serviceId}/${
-      sourceObj.id
-    }/${targetObj.serviceId}/${targetObj.id}/${p.name.split(" ").join("-")}`;
+    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;
@@ -234,6 +240,9 @@ async function getTopology(id: string) {
         Number(depth.value)
       );
       break;
+    case EntityType[5].value:
+      resp = await topologyStore.getInstanceTopology();
+      break;
     case EntityType[4].value:
       resp = await topologyStore.getInstanceTopology();
       break;