set current dashboard params

src/store/modules/dashboard.ts

@@ -73,6 +73,7 @@ export const dashboardStore = defineStore({
       sessionStorage.setItem("dashboards", JSON.stringify(list));
     },
     setCurrentDashboard(item: DashboardItem) {
+      console.log(item);
       this.currentDashboard = item;
     },
     addControl(type: string) {

src/views/Layer.vue

@@ -13,23 +13,23 @@ 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>
-  <Edit v-if="dashboardStore.currentDashboard" />
+  <Edit v-if="hasRoot" @update="changeStatus" />
-  <div class="no-root" v-else>{{ t("noRoot") }} {{ layer }}</div>
+  <div class="no-root" v-else>
+    {{ 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";
 
-const { t } = useI18n();
 const route = useRoute();
+const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const appStore = useAppStoreWithOut();
 const routeNames = [
   "GeneralServices",
   "Database",
@@ -43,25 +43,19 @@ const routeNames = [
   "Browser",
 ];
 const layer = ref<string>("GENERAL");
+const hasRoot = ref<boolean>(false);
+
 getDashboard();
 
 async function getDashboard() {
   setLayer(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(
+function changeStatus(p: boolean) {
-    (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
+  hasRoot.value = p;
-      d.layer === layer.value && d.entity === EntityType[1].value && d.isRoot
-  );
-  if (index < 0) {
-    return;
-  }
-  const d = dashboardStore.dashboards[index];
-  dashboardStore.setCurrentDashboard(d);
-  appStore.setPageTitle(d.name);
 }
 function setLayer(n: string) {
   switch (n) {
@@ -100,15 +94,6 @@ function setLayer(n: string) {
       break;
   }
 }
-watch(
-  () => route.name,
-  (name: unknown) => {
-    if (!name) {
-      return;
-    }
-    getDashboard();
-  }
-);
 </script>
 <style lang="scss" scoped>
 .no-root {
@@ -117,8 +102,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%' }"
   >
@@ -42,18 +43,35 @@ import TopologyConfig from "./configuration/Topology.vue";
 import WidgetConfig from "./configuration/Widget.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { EntityType } from "./data";
 
+/*global defineEmits */
+const emit = defineEmits(["update"]);
 const dashboardStore = useDashboardStore();
 const appStore = useAppStoreWithOut();
 const { t } = useI18n();
 const p = useRoute().params;
 const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
-
+dashboardStore.setCurrentDashboard({});
 setTemplate();
 async function setTemplate() {
   await dashboardStore.setDashboards();
 
   if (!p.entity) {
+    const index = dashboardStore.dashboards.findIndex(
+      (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
+        d.layer === dashboardStore.layerId &&
+        d.entity === EntityType[1].value &&
+        d.isRoot
+    );
+    if (index < 0) {
+      appStore.setPageTitle(dashboardStore.layer);
+      dashboardStore.setCurrentDashboard(null);
+      emit("update", false);
+      return;
+    }
+    const item = dashboardStore.dashboards[index];
+    dashboardStore.setCurrentDashboard(item);
     const { layer, entity, name } = dashboardStore.currentDashboard;
     layoutKey.value = `${layer}_${entity}_${name}`;
   }
@@ -64,16 +82,18 @@ async function setTemplate() {
   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,
     });
   }
+  emit("update", true);
 }
+
 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

@@ -119,13 +119,13 @@ import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";
 import { useI18n } from "vue-i18n";
 import { useThrottleFn } from "@vueuse/core";
+import getDashboard from "@/hooks/useDashboardsSession";
 
 const { t } = useI18n();
 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 +140,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 +161,23 @@ function initSelector() {
   }
 }
 
+function setCurrentDashboard() {
+  if (params.layerId) {
+    dashboardStore.setLayer(params.layerId);
+    dashboardStore.setEntity(params.entity);
+    const item = getDashboard({
+      name: String(params.name),
+      layer: dashboardStore.layerId,
+      entity: EntityType[3].value,
+    });
+    dashboardStore.setCurrentDashboard(item || null);
+  }
+  const type = EntityType.filter(
+    (d: Option) => d.value === dashboardStore.entity
+  )[0];
+  states.key = (type && type.key) || 0;
+}
+
 async function setSelector() {
   if (
     [
@@ -266,7 +280,8 @@ async function getServices() {
     selectorStore.services.length ? selectorStore.services[1] : null
   );
   states.currentService = selectorStore.currentService.value;
-  states.currentDestService = selectorStore.currentDestService.value;
+  states.currentDestService =
+    selectorStore.currentDestService && selectorStore.currentDestService.value;
   const e = dashboardStore.entity.split("Relation")[0];
   if (
     [EntityType[2].value, EntityType[3].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({