refactor(ui): migrate Stats store to Pinia

Author: luizhf42

ui/src/components/AppBar/AppBar.vue

@@ -111,6 +111,8 @@ import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
 import useLayoutStore from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
+import useStatsStore from "@/store/modules/stats";
+import { IStats } from "@/interfaces/IStats";
 
 type MenuItem = {
   title: string;
@@ -135,6 +137,7 @@ const authStore = useAuthStore();
 const billingStore = useBillingStore();
 const layoutStore = useLayoutStore();
 const namespacesStore = useNamespacesStore();
+const statsStore = useStatsStore();
 const router = useRouter();
 const route = useRoute();
 const snackbar = useSnackbar();
@@ -167,7 +170,7 @@ const logout = async () => {
   try {
     authStore.logout();
     namespacesStore.namespaceList = [];
-    await store.dispatch("stats/clear");
+    statsStore.stats = {} as IStats;
     if (isChatCreated.value) {
       toggle("close");
       reset();

ui/src/components/Billing/BillingWarning.vue

@@ -47,10 +47,12 @@ import { useStore } from "@/store";
 import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
+import useStatsStore from "@/store/modules/stats";
 
 const store = useStore();
 const authStore = useAuthStore();
 const billingStore = useBillingStore();
+const { stats } = useStatsStore();
 
 const hasAuthorization = computed(() => {
   const { role } = authStore;
@@ -74,7 +76,7 @@ const showWarningDialog = computed({
   get() {
     return (
       (store.getters["users/statusUpdateAccountDialog"]
-        && store.getters["stats/stats"].registered_devices === 3
+        && stats.registered_devices === 3
         && !billingStore.isActive)
         || store.getters["users/statusUpdateAccountDialogByDeviceAction"]
     );

ui/src/components/User/UserWarning.vue

@@ -68,6 +68,7 @@ import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
 import useDevicesStore from "@/store/modules/devices";
 import useNamespacesStore from "@/store/modules/namespaces";
+import useStatsStore from "@/store/modules/stats";
 
 defineOptions({
   inheritAttrs: false,
@@ -80,6 +81,7 @@ const authStore = useAuthStore();
 const billingStore = useBillingStore();
 const devicesStore = useDevicesStore();
 const namespacesStore = useNamespacesStore();
+const statsStore = useStatsStore();
 const router = useRouter();
 const showInstructions = ref(false);
 const showWelcome = ref<boolean>(false);
@@ -88,14 +90,14 @@ const showDeviceWarning = computed(() => store.getters["users/deviceDuplicationE
 const showRecoverHelper = computed(() => authStore.showRecoveryModal);
 const showForceRecoveryMail = computed(() => authStore.showForceRecoveryMail);
 const showPaywall = computed(() => store.getters["users/showPaywall"]);
-const stats = computed(() => store.getters["stats/stats"]);
+const stats = computed(() => statsStore.stats);
 const currentAnnouncement = computed(() => announcementStore.currentAnnouncement);
 const hasNamespaces = computed(() => namespacesStore.namespaceList.length !== 0);
 const showDeviceChooser = computed(() => devicesStore.showDeviceChooser);
 
 const billingWarning = async () => {
   await billingStore.getSubscriptionInfo();
-  const showDeviceChooser = store.getters["stats/stats"].registered_devices > 3 && !billingStore.isActive;
+  const showDeviceChooser = stats.value.registered_devices > 3 && !billingStore.isActive;
   devicesStore.showDeviceChooser = showDeviceChooser;
 };
 
@@ -153,7 +155,7 @@ const showDialogs = async () => {
     await namespacesStore.fetchNamespaceList({ perPage: 30 });
 
     if (hasNamespaces.value) {
-      await store.dispatch("stats/get");
+      await statsStore.fetchStats();
 
       showScreenWelcome();
 

ui/src/components/Welcome/Welcome.vue

@@ -83,7 +83,6 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { useStore } from "@/store";
 import WelcomeFirstScreen from "./WelcomeFirstScreen.vue";
 import WelcomeSecondScreen from "./WelcomeSecondScreen.vue";
 import WelcomeThirdScreen from "./WelcomeThirdScreen.vue";
@@ -95,14 +94,15 @@ import useAuthStore from "@/store/modules/auth";
 import { IDevice } from "@/interfaces/IDevice";
 import useDevicesStore from "@/store/modules/devices";
 import useNotificationsStore from "@/store/modules/notifications";
+import useStatsStore from "@/store/modules/stats";
 
 type Timer = ReturnType<typeof setInterval>;
 
 const showDialog = defineModel<boolean>({ required: true });
-const store = useStore();
 const authStore = useAuthStore();
 const devicesStore = useDevicesStore();
 const { fetchNotifications } = useNotificationsStore();
+const statsStore = useStatsStore();
 const snackbar = useSnackbar();
 const el = ref<number>(1);
 const firstPendingDevice = ref<IDevice>();
@@ -111,9 +111,9 @@ const enable = ref(false);
 const pollingDevices = () => {
   polling.value = setInterval(async () => {
     try {
-      await store.dispatch("stats/get");
+      await statsStore.fetchStats();
 
-      enable.value = store.getters["stats/stats"].pending_devices !== 0;
+      enable.value = statsStore.stats.pending_devices !== 0;
       if (enable.value) {
         el.value = 3;
         clearTimeout(polling.value);
@@ -134,8 +134,8 @@ const acceptDevice = async () => {
     if (firstPendingDevice.value) {
       await devicesStore.acceptDevice(firstPendingDevice.value.uid);
 
-      fetchNotifications();
-      store.dispatch("stats/get");
+      await fetchNotifications();
+      await statsStore.fetchStats();
 
       el.value = 4;
     }
@@ -150,7 +150,6 @@ const command = () => {
   const { hostname, protocol } = window.location;
   const { tenantId } = authStore;
 
-  // eslint-disable-next-line vue/max-len
   return `curl -sSf ${protocol}//${hostname}${port}/install.sh | TENANT_ID=${tenantId} SERVER_ADDRESS=${protocol}//${hostname} sh`;
 };
 

ui/src/store/index.ts

@@ -3,13 +3,11 @@ import { createStore, Store, useStore as vuexUseStore } from "vuex";
 
 import { users, UsersState } from "./modules/users";
 import { tags, TagsState } from "./modules/tags";
-import { stats, StatsState } from "./modules/stats";
 import { support, SupportState } from "./modules/support";
 import { webEndpoints, WebEndpointsState } from "./modules/web_endpoints";
 
 export interface State {
   webEndpoints: WebEndpointsState;
-  stats: StatsState;
   support: SupportState;
   tags: TagsState;
   users: UsersState;
@@ -20,7 +18,6 @@ export const key: InjectionKey<Store<State>> = Symbol("store");
 export const store = createStore<State>({
   modules: {
     webEndpoints,
-    stats,
     support,
     tags,
     users,

ui/src/store/modules/stats.ts

@@ -1,42 +1,20 @@
-import { Module } from "vuex";
-import { AxiosResponse } from "axios";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 import getStats from "../api/stats";
 import { IStats } from "@/interfaces/IStats";
-import { State } from "..";
 
-export interface StatsState {
-  stats: IStats;
-}
+const useStatsStore = defineStore("stats", () => {
+  const stats = ref({} as IStats);
 
-export const stats: Module<StatsState, State> = {
-  namespaced: true,
-  state: {
-    stats: {} as IStats,
-  },
+  const fetchStats = async () => {
+    const res = await getStats();
+    stats.value = res.data as IStats;
+  };
 
-  getters: {
-    stats: (state) => state.stats,
-  },
+  return {
+    stats,
+    fetchStats,
+  };
+});
 
-  mutations: {
-    setStats: (state, res: AxiosResponse) => {
-      state.stats = res.data;
-    },
-
-    clearListState: (state) => {
-      state.stats = {} as IStats;
-    },
-  },
-
-  actions: {
-    async get({ commit }) {
-      const res = await getStats();
-      commit("setStats", res);
-      return res;
-    },
-
-    async clear({ commit }) {
-      commit("clearListState");
-    },
-  },
-};
+export default useStatsStore;

ui/src/views/Home.vue

@@ -23,16 +23,16 @@ import { computed, onMounted, ref } from "vue";
 import axios, { AxiosError } from "axios";
 import { StatCardItem } from "@/interfaces/IStats";
 import StatCard from "@/components/StatCard.vue";
-import { useStore } from "../store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
 import useNamespacesStore from "@/store/modules/namespaces";
+import useStatsStore from "@/store/modules/stats";
 
-const store = useStore();
 const namespacesStore = useNamespacesStore();
+const statsStore = useStatsStore();
 const snackbar = useSnackbar();
 const hasStatus = ref(false);
-const itemsStats = computed(() => store.getters["stats/stats"]);
+const stats = computed(() => statsStore.stats);
 const hasNamespace = computed(() => namespacesStore.namespaceList.length !== 0);
 
 const items = computed<StatCardItem[]>(() => [
@@ -42,31 +42,31 @@ const items = computed<StatCardItem[]>(() => [
     icon: "mdi-devices",
     buttonLabel: "Add Device",
     path: "devices",
-    stat: itemsStats.value.registered_devices || 0,
+    stat: stats.value.registered_devices || 0,
   },
   {
     title: "Online Devices",
     content: "Devices are online and ready for connecting",
     icon: "mdi-devices",
     buttonLabel: "View all Devices",
     path: "devices",
-    stat: itemsStats.value.online_devices || 0,
+    stat: stats.value.online_devices || 0,
   },
   {
     title: "Active Sessions",
     content: "Active SSH Sessions opened by users",
     icon: "mdi-devices",
     buttonLabel: "View all Sessions",
     path: "sessions",
-    stat: itemsStats.value.active_sessions || 0,
+    stat: stats.value.active_sessions || 0,
   },
 ]);
 
 onMounted(async () => {
   if (!hasNamespace.value) return;
 
   try {
-    await store.dispatch("stats/get");
+    await statsStore.fetchStats();
   } catch (error: unknown) {
     if (axios.isAxiosError(error)) {
       const axiosError = error as AxiosError;

ui/src/views/Login.vue

@@ -159,13 +159,16 @@ import useCountdown from "@/utils/countdownTimeout";
 import { envVariables } from "@/envVariables";
 import useAuthStore from "@/store/modules/auth";
 import useNamespacesStore from "@/store/modules/namespaces";
+import useStatsStore from "@/store/modules/stats";
+import { IStats } from "@/interfaces/IStats";
 
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
 const snackbar = useSnackbar();
 const authStore = useAuthStore();
 const namespacesStore = useNamespacesStore();
+const statsStore = useStatsStore();
 const showPassword = ref(false);
 const loginToken = ref(false);
 const invalid = reactive({ title: "", msg: "", timeout: false });
@@ -228,9 +231,9 @@ onMounted(async () => {
 
   loginToken.value = true;
 
-  await store.dispatch("stats/clear");
   namespacesStore.namespaceList = [];
   authStore.logout();
+  statsStore.stats = {} as IStats;
   await authStore.loginWithToken(route.query.token as string);
 
   window.location.href = "/";

ui/tests/components/Billing/BillingWarning.spec.ts

@@ -8,10 +8,12 @@ import { key } from "@/store";
 import { router } from "@/router";
 import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
+import useStatsStore from "@/store/modules/stats";
 
 setActivePinia(createPinia());
 const authStore = useAuthStore();
 const billingStore = useBillingStore();
+const statsStore = useStatsStore();
 const statusUpdateAccountDialog = true;
 const statusUpdateAccountDialogByDeviceAction = false;
 
@@ -26,14 +28,14 @@ const stats = {
 const store = (statsData: typeof stats, billingEnabled: boolean, role: string) => {
   authStore.role = role;
   billingStore.billing.active = billingEnabled;
+  statsStore.stats = statsData;
   return createStore({
     state: {
       stats: statsData,
       statusUpdateAccountDialog,
       statusUpdateAccountDialogByDeviceAction,
     },
     getters: {
-      "stats/stats": (state) => state.stats,
       "users/statusUpdateAccountDialog": (state) => state.statusUpdateAccountDialog,
       "users/statusUpdateAccountDialogByDeviceAction": (state) => state.statusUpdateAccountDialogByDeviceAction,
     },