From 83496dc4b5f22147bbe425179a4c36a52d235917 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 22 Mar 2022 16:47:57 +0800
Subject: [PATCH] verificate dashboard names

---
 src/store/modules/dashboard.ts                |  6 ++--
 src/views/dashboard/Edit.vue                  |  2 +-
 src/views/dashboard/List.vue                  | 28 +++++++++----------
 src/views/dashboard/New.vue                   |  2 +-
 src/views/dashboard/graphs/EndpointList.vue   |  4 +--
 src/views/dashboard/graphs/InstanceList.vue   |  4 +--
 .../related/topology/components/Graph.vue     |  8 ++----
 .../topology/components/PodTopology.vue       |  8 ++----
 8 files changed, 24 insertions(+), 38 deletions(-)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index c3a688b1..9eae03d2 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,
@@ -404,7 +404,7 @@ export const dashboardStore = defineStore({
       const key = [
         this.currentDashboard.layer,
         this.currentDashboard.entity,
-        this.currentDashboard.name.split(" ").join("-"),
+        this.currentDashboard.name,
       ].join("_");
       if (this.currentDashboard.id) {
         sessionStorage.removeItem(key);
@@ -441,7 +441,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 9a4c8908..a2fc85b7 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -172,7 +172,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,
@@ -196,7 +196,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;
   });
@@ -211,9 +211,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) {
@@ -221,9 +219,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) {
@@ -232,7 +228,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,
@@ -262,7 +258,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,
@@ -307,7 +303,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,
@@ -341,7 +341,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,
@@ -359,9 +359,7 @@ 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() {
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
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/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index e9f9c06d..c5a3e4b9 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -170,9 +170,7 @@ function clickEndpoint(scope: any) {
   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) {
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index 784b3593..c6d94c95 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -175,9 +175,7 @@ function clickInstance(scope: any) {
   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}`
   );
 }
 
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 351b125b..85d69b8d 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);
@@ -412,9 +410,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");
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 66d3dcae..b3362793 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -176,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);
@@ -217,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;