ui: refactor dashboard page when the user don't have namespaces

shellhub-io · Feb 17, 2023 · a8968f9 · a8968f9
1 parent 736b589
commit a8968f9
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 36 deletions.
diff --git a/ui/src/components/AppBar/AppBar.vue b/ui/src/components/AppBar/AppBar.vue
@@ -122,6 +122,7 @@ export default defineComponent({
     const logout = async () => {
       try {
         await store.dispatch("auth/logout");
+        await store.dispatch("stats/clear");
         await store.dispatch("namespaces/clearNamespaceList");
         await router.push({ name: "login" });
         createNewClient();

diff --git a/ui/src/store/modules/stats.ts b/ui/src/store/modules/stats.ts
@@ -39,5 +39,9 @@ export const stats: Module<StatsState, State> = {
         throw error;
       }
     },
+
+    async clear({ commit }) {
+      commit("clearListState");
+    },
   },
 };
diff --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
@@ -44,48 +44,52 @@ export default defineComponent({
   components: { Card },
   setup() {
     const store = useStore();
-    const items = ref<ItemCard[]>([]);
     const hasStatus = ref(false);
     const itemsStats = computed(() => store.getters["stats/stats"]);
+    const hasNamespace = computed(
+      () => store.getters["namespaces/getNumberNamespaces"] !== 0,
+    );
+    const items = computed(() => [
+      {
+        id: 1,
+        title: "Registered Devices",
+        fieldObject: "registered_devices",
+        content: "Registered devices into the tenancy account",
+        icon: "mdi-devices",
+        stats: itemsStats.value.registered_devices || 0,
+        buttonName: "Add Device",
+        pathName: "devices",
+        nameUseTest: "registeredDevices-btn",
+      },
+      {
+        id: 2,
+        title: "Online Devices",
+        fieldObject: "online_devices",
+        content: "Devices are online and ready for connecting",
+        icon: "mdi-devices",
+        stats: itemsStats.value.online_devices || 0,
+        buttonName: "View all Devices",
+        pathName: "devices",
+        nameUseTest: "viewOnlineDevices-btn",
+      },
+      {
+        id: 3,
+        title: "Active Sessions",
+        fieldObject: "active_sessions",
+        content: "Active SSH Sessions opened by users",
+        icon: "mdi-devices",
+        stats: itemsStats.value.active_sessions || 0,
+        buttonName: "View all Sessions",
+        pathName: "sessions",
+        nameUseTest: "viewActiveSession-btn",
+      },
+    ] as ItemCard[]);
 
     onMounted(async () => {
+      if (!hasNamespace.value) return;
+
       try {
         await store.dispatch("stats/get");
-        items.value = [
-          {
-            id: 1,
-            title: "Registered Devices",
-            fieldObject: "registered_devices",
-            content: "Registered devices into the tenancy account",
-            icon: "mdi-devices",
-            stats: itemsStats.value.registered_devices ?? 0,
-            buttonName: "Add Device",
-            pathName: "devices",
-            nameUseTest: "registeredDevices-btn",
-          },
-          {
-            id: 2,
-            title: "Online Devices",
-            fieldObject: "online_devices",
-            content: "Devices are online and ready for connecting",
-            icon: "mdi-devices",
-            stats: itemsStats.value.online_devices ?? 0,
-            buttonName: "View all Devices",
-            pathName: "devices",
-            nameUseTest: "viewOnlineDevices-btn",
-          },
-          {
-            id: 3,
-            title: "Active Sessions",
-            fieldObject: "active_sessions",
-            content: "Active SSH Sessions opened by users",
-            icon: "mdi-devices",
-            stats: itemsStats.value.active_sessions ?? 0,
-            buttonName: "View all Sessions",
-            pathName: "sessions",
-            nameUseTest: "viewActiveSession-btn",
-          },
-        ];
       } catch (error: any) {
         switch (true) {
           case error.response && error.response.status === 403: {

diff --git a/ui/src/views/Login.vue b/ui/src/views/Login.vue
@@ -169,6 +169,8 @@ export default defineComponent({
       if (route.query.token) {
         store.dispatch("layout/setLayout", "simpleLayout");
         loginToken.value = true;
+        await store.dispatch("stats/clear");
+        await store.dispatch("namespaces/clearNamespaceList");
         await store.dispatch("auth/logout");
         createNewClient();