fix: reset current dashboard due to pages forwarding (#34)

src/views/dashboard/Edit.vue

@@ -13,9 +13,10 @@ 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 />
+  <Tool v-if="dashboardStore.currentDashboard" />
   <div
     class="ds-main"
+    v-if="dashboardStore.currentDashboard"
     @click="handleClick"
     :style="{ height: dashboardStore.editMode ? 'calc(100% - 45px)' : '100%' }"
   >
@@ -54,6 +55,9 @@ async function setTemplate() {
   await dashboardStore.setDashboards();
 
   if (!p.entity) {
+    if (!dashboardStore.currentDashboard) {
+      return;
+    }
     const { layer, entity, name } = dashboardStore.currentDashboard;
     layoutKey.value = `${layer}_${entity}_${name}`;
   }
@@ -63,17 +67,17 @@ async function setTemplate() {
   const layout: any = c.configuration || {};
   dashboardStore.setLayout(layout.children || []);
   appStore.setPageTitle(layout.name);
-
-  if (!dashboardStore.currentDashboard) {
+  if (p.entity) {
     dashboardStore.setCurrentDashboard({
       layer: p.layerId,
       entity: p.entity,
-      name: String(p.name).split("-").join(" "),
+      name: p.name,
       id: c.id,
       isRoot: layout.isRoot,
     });
   }
 }
+
 function handleClick(e: any) {
   e.stopPropagation();
   if (e.target.className === "ds-main") {

src/views/dashboard/graphs/EndpointList.vue

@@ -167,8 +167,6 @@ function clickEndpoint(scope: any) {
     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}`
   );

src/views/dashboard/graphs/InstanceList.vue

@@ -168,24 +168,16 @@ 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}`
+    `/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 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
-  );
+  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
 }
-
 function searchList() {
   searchInstances.value = selectorStore.pods.filter((d: { label: string }) =>
     d.label.includes(searchText.value)
@@ -201,12 +193,6 @@ watch(
     }
   }
 );
-watch(
-  () => [selectorStore.currentService],
-  () => {
-    queryInstance();
-  }
-);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";

src/views/dashboard/graphs/ServiceList.vue

@@ -183,8 +183,6 @@ function clickService(scope: any) {
     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}`;
 
   router.push(path);

src/views/dashboard/panel/Layout.vue

@@ -53,9 +53,9 @@ export default defineComponent({
     const { t } = useI18n();
     const dashboardStore = useDashboardStore();
     const selectorStore = useSelectorStore();
-    function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-      dashboardStore.setLayout(newLayout);
-    }
+    // function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
+    //   dashboardStore.setLayout(newLayout);
+    // }
     function clickGrid(item: LayoutConfig) {
       dashboardStore.activeGridItem(item.i);
       dashboardStore.selectWidget(item);
@@ -64,10 +64,10 @@ export default defineComponent({
       dashboardStore.setLayout([]);
       selectorStore.setCurrentService(null);
       selectorStore.setCurrentPod(null);
+      dashboardStore.setEntity("");
     });
     return {
       dashboardStore,
-      layoutUpdatedEvent,
       clickGrid,
       t,
     };

src/views/dashboard/panel/Tool.vue

@@ -125,7 +125,6 @@ const dashboardStore = useDashboardStore();
 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 }[]>(
   EndpointRelationTools
 );
@@ -140,19 +139,16 @@ const states = reactive<{
 }>({
   destService: "",
   destPod: "",
-  key: (type && type.key) || 0,
+  key: 0,
   currentService: "",
   currentPod: "",
   currentDestService: "",
   currentDestPod: "",
 });
 const applyDashboard = useThrottleFn(dashboardStore.saveDashboard, 3000);
-if (params.layerId) {
-  dashboardStore.setLayer(params.layerId);
-  dashboardStore.setEntity(params.entity);
-}
-appStore.setEventStack([initSelector]);
 
+setCurrentDashboard();
+appStore.setEventStack([initSelector]);
 initSelector();
 
 function initSelector() {
@@ -164,6 +160,17 @@ function initSelector() {
   }
 }
 
+function setCurrentDashboard() {
+  if (params.layerId) {
+    dashboardStore.setLayer(params.layerId);
+    dashboardStore.setEntity(params.entity);
+  }
+  const type = EntityType.filter(
+    (d: Option) => d.value === dashboardStore.entity
+  )[0];
+  states.key = (type && type.key) || 0;
+}
+
 async function setSelector() {
   if (
     [
@@ -199,7 +206,8 @@ async function setSelector() {
   }
   selectorStore.setCurrentService(currentService);
   selectorStore.setCurrentDestService(currentDestService);
-  states.currentService = selectorStore.currentService.value;
+  states.currentService =
+    selectorStore.currentService && selectorStore.currentService.value;
   states.currentDestService =
     selectorStore.currentDestService && selectorStore.currentDestService.value;
 }
@@ -265,14 +273,20 @@ async function getServices() {
   selectorStore.setCurrentDestService(
     selectorStore.services.length ? selectorStore.services[1] : null
   );
+  if (!selectorStore.currentService) {
+    return;
+  }
   states.currentService = selectorStore.currentService.value;
-  states.currentDestService = selectorStore.currentDestService.value;
   const e = dashboardStore.entity.split("Relation")[0];
   if (
     [EntityType[2].value, EntityType[3].value].includes(dashboardStore.entity)
   ) {
     fetchPods(e, selectorStore.currentService.id, true);
   }
+  if (!selectorStore.currentDestService) {
+    return;
+  }
+  states.currentDestService = selectorStore.currentDestService.value;
   if (
     [EntityType[5].value, EntityType[6].value].includes(dashboardStore.entity)
   ) {

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

@@ -387,42 +387,21 @@ async function handleInspect() {
   update();
 }
 function handleGoEndpoint(name: string) {
-  const origin = dashboardStore.entity;
-  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}`;
+  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
 }
 function handleGoInstance(name: string) {
-  const origin = dashboardStore.entity;
-  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}`;
+  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
 }
 function handleGoDashboard(name: string) {
-  const origin = dashboardStore.entity;
-  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}`;
+  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
   const routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
@@ -482,6 +461,9 @@ function setNodeTools(nodeDashboard: any) {
     { id: "inspect", title: "Inspect", func: handleInspect },
     { id: "alarm", title: "Alarm", func: handleGoAlarm },
   ];
+  if (!(nodeDashboard && nodeDashboard.length)) {
+    return;
+  }
   for (const item of nodeDashboard) {
     if (item.scope === EntityType[0].value) {
       items.value.push({