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

src/router/infrastructure.ts

@@ -27,17 +27,24 @@ export const routesInfra: Array<RouteRecordRaw> = [
       exact: true,
       hasGroup: true,
     },
-    redirect: "/infrastructure",
+    redirect: "/linux",
     component: Layout,
     children: [
       {
-        path: "/infrastructure",
+        path: "/linux",
         name: "Linux",
         meta: {
           title: "linux",
         },
         component: () => import("@/views/Layer.vue"),
-        // component: () => import("@/views/infrastructure/Infrastructure.vue"),
+      },
+      {
+        path: "/kubernetes",
+        name: "Kubernetes",
+        meta: {
+          title: "kubernetes",
+        },
+        component: () => import("@/views/Layer.vue"),
       },
       // {
       //   path: "/infrastructure/vm",

src/views/Layer.vue

@@ -14,101 +14,61 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <Edit v-if="dashboardStore.currentDashboard" />
-  <div class="no-root" v-else>{{ t("noRoot") }} {{ layer }}</div>
+  <div v-else class="no-root">
+    {{ t("noRoot") }} {{ dashboardStore.layerId }}
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 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";
+import { useI18n } from "vue-i18n";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
-const { t } = useI18n();
 const route = useRoute();
-const dashboardStore = useDashboardStore();
+const { t } = useI18n();
 const appStore = useAppStoreWithOut();
-const routeNames = [
+const dashboardStore = useDashboardStore();
-  "GeneralServices",
+const routesMap: { [key: string]: string } = {
-  "Database",
+  GeneralServices: "GENERAL",
-  "MeshServices",
+  Database: "VIRTUAL_DATABASE",
-  "ControlPanel",
+  MESH: "MESH",
-  "DataPanel",
+  ControlPanel: "MESH_CP",
-  "Linux",
+  DataPanel: "MESH_DP",
-  "SkyWalkingServer",
+  Linux: "OS_LINUX",
-  "Satellite",
+  SkyWalkingServer: "SO11Y_OAP",
-  "Functions",
+  Satellite: "SO11Y_SATELLITE",
-  "Browser",
+  Functions: "FAAS",
-];
+  Browser: "BROWSER",
+  Kubernetes: "K8S",
+};
 const layer = ref<string>("GENERAL");
+
 getDashboard();
 
 async function getDashboard() {
-  setLayer(String(route.name));
+  layer.value = routesMap[String(route.name)];
   dashboardStore.setLayer(layer.value);
-  dashboardStore.setEntity(EntityType[0].value);
+  dashboardStore.setEntity(EntityType[1].value);
   dashboardStore.setMode(false);
-  dashboardStore.setCurrentDashboard(null);
   await dashboardStore.setDashboards();
   const index = dashboardStore.dashboards.findIndex(
     (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
-      d.layer === layer.value && d.entity === EntityType[1].value && d.isRoot
+      d.layer === dashboardStore.layerId &&
+      d.entity === EntityType[1].value &&
+      d.isRoot
   );
   if (index < 0) {
+    appStore.setPageTitle(dashboardStore.layer);
+    dashboardStore.setCurrentDashboard(null);
     return;
   }
-  const d = dashboardStore.dashboards[index];
+  const item = dashboardStore.dashboards[index];
-  dashboardStore.setCurrentDashboard(d);
+  dashboardStore.setCurrentDashboard(item);
-  appStore.setPageTitle(d.name);
 }
-function setLayer(n: string) {
-  switch (n) {
-    case routeNames[0]:
-      layer.value = "GENERAL";
-      break;
-    case routeNames[1]:
-      layer.value = "VIRTUAL_DATABASE";
-      break;
-    case routeNames[2]:
-      layer.value = "MESH";
-      break;
-    case routeNames[3]:
-      layer.value = "MESH_CP";
-      break;
-    case routeNames[4]:
-      layer.value = "MESH_DP";
-      break;
-    case routeNames[5]:
-      layer.value = "OS_LINUX";
-      break;
-    case routeNames[6]:
-      layer.value = "SO11Y_OAP";
-      break;
-    case routeNames[7]:
-      layer.value = "SO11Y_SATELLITE";
-      break;
-    case routeNames[8]:
-      layer.value = "FAAS";
-      break;
-    case routeNames[9]:
-      layer.value = "BROWSER";
-      break;
-    default:
-      layer.value = "GENERAL";
-      break;
-  }
-}
-watch(
-  () => route.name,
-  (name: unknown) => {
-    if (!name) {
-      return;
-    }
-    getDashboard();
-  }
-);
 </script>
 <style lang="scss" scoped>
 .no-root {
@@ -117,8 +77,4 @@ watch(
   text-align: center;
   color: #888;
 }
-
-.layer {
-  height: 100%;
-}
 </style>

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 (p.entity) {
-  if (!dashboardStore.currentDashboard) {
     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(
+  instances.value = searchInstances.value.splice(pageIndex - 1, pageSize);
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
-  );
 }
-
 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[]) {
+    // function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
-      dashboardStore.setLayout(newLayout);
+    //   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 path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`;
-  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 routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
 }
 function handleGoInstance(name: string) {
-  const origin = dashboardStore.entity;
+  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${name}`;
-  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 routeUrl = router.resolve({ path });
 
   window.open(routeUrl.href, "_blank");
   dashboardStore.setEntity(origin);
 }
 function handleGoDashboard(name: string) {
-  const origin = dashboardStore.entity;
+  const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
-  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 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({