perf: dashboard speedup

eslint-suppressions.json

@@ -194,31 +194,6 @@
       "count": 2
     }
   },
-  "src/components/standalone/dashboard/InternetConnectionCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 4
-    }
-  },
-  "src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "src/components/standalone/dashboard/ServiceCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 4
-    }
-  },
-  "src/components/standalone/dashboard/SystemInfoCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 2
-    }
-  },
-  "src/components/standalone/dashboard/ThreatShieldIpCard.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 6
-    }
-  },
   "src/components/standalone/dns_dhcp/CreateOrEditDnsRecordDrawer.vue": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1

src/components/standalone/dashboard/BackupStatusCard.vue

@@ -2,19 +2,21 @@
 import {
   formatDateLoc,
   getAxiosErrorMessage,
-  NeBadge,
+  NeBadgeV2,
   NeCard,
   NeLink
 } from '@nethesis/vue-components'
 import { useSubscriptionStore } from '@/stores/standalone/subscription.ts'
 import { getStandaloneRoutePrefix } from '@/lib/router.ts'
 import { useI18n } from 'vue-i18n'
-import { computed, ref, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { faClock, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { ubusCall } from '@/lib/standalone/ubus.ts'
+import { useQuery } from '@tanstack/vue-query'
 import type { AxiosResponse } from 'axios'
 import { useBackupsStore } from '@/stores/standalone/backups.ts'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
 
 type BackupData = {
   created: number
@@ -35,31 +37,24 @@ const backups = useBackupsStore()
 
 const { t } = useI18n()
 
-const latestBackupLoading = ref(true)
-const latestBackupError = ref<Error>()
-const lastBackup = ref<string>()
-
-watchEffect(() => {
-  if (subscription.isActive) {
-    latestBackupError.value = undefined
-    latestBackupLoading.value = true
-    ubusCall('ns.backup', 'registered-list-backups')
-      .then((response: BackupResponse) => {
-        const backup = response.data.values.backups.sort((a, b) => b.created - a.created).shift()
-        if (backup != undefined) {
-          lastBackup.value = formatDateLoc(new Date(backup.created * 1000), 'PPpp')
-        } else {
-          lastBackup.value = undefined
-        }
-      })
-      .catch(() => {
-        lastBackup.value = undefined
-      })
-  }
+const {
+  data: lastBackup,
+  isPending: latestBackupLoading,
+  error: latestBackupError
+} = useQuery({
+  queryKey: ['dashboard', 'backup', 'last'],
+  queryFn: ({ signal }) =>
+    ubusCall<BackupResponse>('ns.backup', 'registered-list-backups', {}, { signal }),
+  select: (response) => {
+    const backup = response.data.values.backups.sort((a, b) => b.created - a.created).shift()
+    return backup != undefined ? formatDateLoc(new Date(backup.created * 1000), 'PPpp') : undefined
+  },
+  enabled: () => subscription.isActive,
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
 })
 
 const loading = computed((): boolean => {
-  return [subscription.loading, latestBackupLoading.value, backups.loading].every((entry) => entry)
+  return [subscription.loading, latestBackupLoading.value, backups.loading].some((entry) => entry)
 })
 
 const error = computed((): string | undefined => {
@@ -101,13 +96,10 @@ const error = computed((): string | undefined => {
           {{ t('standalone.backup_and_restore.backup.no_backups') }}
         </template>
       </p>
-      <NeBadge
-        v-if="!backups.isPassPhraseSet"
-        :icon="faTriangleExclamation"
-        :text="t('standalone.backup_and_restore.backup.passphrase_not_configured')"
-        class="text-center"
-        kind="warning"
-      />
+      <NeBadgeV2 v-if="!backups.isPassPhraseSet" kind="amber" class="text-center">
+        <FontAwesomeIcon :icon="faTriangleExclamation" class="size-4" />
+        {{ t('standalone.backup_and_restore.backup.passphrase_not_configured') }}
+      </NeBadgeV2>
     </div>
   </NeCard>
 </template>

src/components/standalone/dashboard/HaStatusCard.vue

@@ -1,58 +1,65 @@
 <script lang="ts" setup>
-import { useHaStatusStore } from '@/stores/standalone/haStatus'
 import {
   getAxiosErrorMessage,
+  NeBadgeV2,
   NeCard,
-  NeBadge,
-  NeSkeleton,
   NeTooltip,
   formatDateLoc
 } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCheck, faTriangleExclamation, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { useQuery } from '@tanstack/vue-query'
+import { ubusCall } from '@/lib/standalone/ubus'
+import { DASHBOARD_REFRESH_INTERVAL } from '@/composables/useDashboardOverview'
+
+type HaStatusResponse = {
+  data: {
+    state: string
+    role: string
+    status: string
+    last_sync_status: string
+    last_sync_time: number
+  }
+}
 
-const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const ha = useHaStatusStore()
-const intervalId = ref(0)
 const { t } = useI18n()
-const errorTitle = ref<string>()
-const errorDescription = ref<string>()
 
-onMounted(() => {
-  ha.fetchStatus()
-  intervalId.value = setInterval(ha.fetchStatus, REFRESH_INTERVAL)
+const {
+  data: ha,
+  isPending,
+  isError,
+  error
+} = useQuery({
+  queryKey: ['dashboard', 'ha', 'status'],
+  queryFn: ({ signal }) => ubusCall<HaStatusResponse>('ns.ha', 'status', {}, { signal }),
+  select: (res) => ({
+    status: res.data.status,
+    role: res.data.role,
+    state: res.data.state,
+    lastSyncStatus: res.data.last_sync_status.toLowerCase().replace(/ /g, '_'),
+    lastSyncTime: res.data.last_sync_time
+  }),
+  refetchInterval: DASHBOARD_REFRESH_INTERVAL
 })
 
-onUnmounted(() => {
-  if (intervalId.value) {
-    clearInterval(intervalId.value)
-  }
-})
+const lastSyncStatus = computed(() => ha.value?.lastSyncStatus ?? '')
+const lastSyncTime = computed(() => Number(ha.value?.lastSyncTime) || 0)
 
-watch(
-  () => ha.error,
-  (error) => {
-    if (error) {
-      errorTitle.value = t('standalone.ha.failed_to_fetch_info')
-      errorDescription.value = t(getAxiosErrorMessage(error))
-    } else {
-      errorTitle.value = ''
-      errorDescription.value = ''
-    }
-  }
-)
+const errorTitle = computed(() => (isError.value ? t('standalone.ha.failed_to_fetch_info') : ''))
+const errorDescription = computed(() => (isError.value ? t(getAxiosErrorMessage(error.value)) : ''))
 
 function getBadgeKind(status: string) {
   switch (status) {
     case 'enabled':
     case 'up_to_date':
     case 'successfull':
-      return 'success'
+      return 'green'
     case 'disabled':
-      return 'secondary'
+      return 'gray'
     default:
-      return 'error'
+      return 'rose'
   }
 }
 
@@ -93,21 +100,18 @@ function getBadgeIcon(status: string) {
     :error-description="errorDescription"
     :error-title="errorTitle"
     :icon="['fas', 'server']"
-    :loading="ha.loading"
+    :loading="isPending"
     :skeleton-lines="2"
   >
     <template #title>
       {{ t('standalone.ha.sidebar_title') }}
     </template>
-    <NeSkeleton v-if="ha.loading" />
-    <div v-else class="space-y-3">
-      <NeBadge
-        v-if="ha.status"
-        :kind="getBadgeKind(ha.status)"
-        :text="getBadgeText(ha.status)"
-        :icon="getBadgeIcon(ha.status)"
-      />
-      <ul v-if="ha.status === 'enabled'">
+    <div class="space-y-3">
+      <NeBadgeV2 v-if="ha?.status" :kind="getBadgeKind(ha.status)">
+        <FontAwesomeIcon :icon="getBadgeIcon(ha.status)" class="size-4" />
+        {{ getBadgeText(ha.status) }}
+      </NeBadgeV2>
+      <ul v-if="ha?.status === 'enabled'">
         <li>
           <span class="mr-3 font-semibold">{{ t('standalone.ha.role') }}</span
           ><span>{{ t('standalone.ha.' + ha.role) }}</span>
@@ -120,16 +124,16 @@ function getBadgeIcon(status: string) {
               <template #content>
                 <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_status') }}</span
                 ><span>{{
-                  ha.lastSyncStatus
-                    ? t('standalone.ha.' + ha.lastSyncStatus)
+                  lastSyncStatus
+                    ? t('standalone.ha.' + lastSyncStatus)
                     : t('standalone.dashboard.unavailable')
                 }}</span
                 ><br />
 
                 <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_time') }}</span>
                 <span>{{
-                  ha.lastSyncTime > 0
-                    ? formatDateLoc(new Date(ha.lastSyncTime * 1000), 'PPpp')
+                  lastSyncTime > 0
+                    ? formatDateLoc(new Date(lastSyncTime * 1000), 'PPpp')
                     : t('standalone.dashboard.unavailable')
                 }}</span>
               </template>
@@ -138,11 +142,10 @@ function getBadgeIcon(status: string) {
         </li>
 
         <li v-if="ha.role === 'backup'" class="pt-3">
-          <NeBadge
-            :kind="'warning'"
-            :icon="['fas', 'triangle-exclamation']"
-            :text="t('standalone.ha.backup_warning')"
-          />
+          <NeBadgeV2 kind="amber">
+            <FontAwesomeIcon :icon="faTriangleExclamation" class="size-4" />
+            {{ t('standalone.ha.backup_warning') }}
+          </NeBadgeV2>
         </li>
       </ul>
     </div>