HA: add dashboard card

src/components/standalone/dashboard/HaStatusCard.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { useHaStatusStore } from '@/stores/standalone/haStatus'
+import {
+  getAxiosErrorMessage,
+  NeCard,
+  NeBadge,
+  NeSkeleton,
+  NeTooltip,
+  formatDateLoc
+} from '@nethesis/vue-components'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
+
+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)
+})
+
+onUnmounted(() => {
+  if (intervalId.value) {
+    clearInterval(intervalId.value)
+  }
+})
+
+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 = ''
+    }
+  }
+)
+
+function getBadgeKind(status: string) {
+  switch (status) {
+    case 'enabled':
+    case 'up_to_date':
+    case 'successfull':
+      return 'success'
+    case 'disabled':
+      return 'secondary'
+    default:
+      return 'error'
+  }
+}
+
+function getBadgeText(status: string) {
+  switch (status) {
+    case 'enabled':
+      return t('standalone.ha.enabled')
+    case 'disabled':
+      return t('standalone.ha.disabled')
+    case 'up_to_date':
+    case 'successfull':
+      return t('standalone.ha.sync_ok')
+    case 'ssh_connection_failed':
+    case 'rsync_detection_failed':
+    case 'rsync_transfer_failed':
+      return t('standalone.ha.sync_failed')
+    default:
+      return t('standalone.dashboard.unknown')
+  }
+}
+
+function getBadgeIcon(status: string) {
+  switch (status) {
+    case 'enabled':
+    case 'successfull':
+    case 'up_to_date':
+      return faCheck
+    case 'disabled':
+      return faXmark
+    default:
+      return faXmark
+  }
+}
+</script>
+
+<template>
+  <NeCard
+    :error-description="errorDescription"
+    :error-title="errorTitle"
+    :icon="['fas', 'server']"
+    :loading="ha.loading"
+    :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'">
+        <li>
+          <span class="mr-3 font-semibold">{{ t('standalone.ha.role') }}</span
+          ><span>{{ t('standalone.ha.' + ha.role) }}</span>
+        </li>
+
+        <li>
+          <span class="mr-3 font-semibold">{{ t('standalone.ha.state') }}</span>
+          <span
+            >{{ t('standalone.ha.' + ha.state) }}
+            <NeTooltip>
+              <template #content>
+                <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_status') }}</span
+                ><span>{{ t('standalone.ha.' + ha.lastSyncStatus) }}</span
+                ><br />
+                <span class="mr-3 font-semibold">{{ t('standalone.ha.last_sync_time') }}</span>
+                <span>{{ formatDateLoc(new Date(ha.lastSyncTime * 1000), 'PPpp') }}</span>
+              </template>
+            </NeTooltip></span
+          >
+        </li>
+
+        <li class="pt-3" v-if="ha.role === 'backup'">
+          <NeBadge
+            :kind="'warning'"
+            :icon="['fas', 'triangle-exclamation']"
+            :text="t('standalone.ha.backup_warning')"
+          />
+        </li>
+      </ul>
+    </div>
+  </NeCard>
+</template>

src/i18n/en/translation.json

@@ -2409,6 +2409,24 @@
       "max_detect_info": "Policy 'max-detect' is enabled.",
       "max_detect_description": "Please refer to the manual for more information.",
       "events_today": "event today | events today"
+    },
+    "ha": {
+      "sidebar_title": "High Availability",
+      "state": "State",
+      "role": "Role",
+      "primary": "Primary",
+      "backup": "Backup",
+      "last_sync_status": "Last sync status",
+      "last_sync_time": "Last sync time",
+      "ssh_connection_failed": "SSH connection failed",
+      "rsync_detection_failed": "Rsync detection failed",
+      "rsync_transfer_failed": "Rsync transfer failed",
+      "successful": "Successful",
+      "up_to_date": "Up to date",
+      "master": "Active",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "backup_warning": "Read-only node"
     }
   },
   "controller": {

src/stores/standalone/haStatus.ts

@@ -0,0 +1,55 @@
+import { defineStore } from 'pinia'
+import { onMounted, ref } from 'vue'
+import { ubusCall } from '@/lib/standalone/ubus'
+import type { AxiosResponse } from 'axios'
+
+type HaStatus = AxiosResponse<{
+  state: string
+  role: string
+  status: string
+  last_sync_status: string
+  last_sync_time: number
+}>
+
+export const useHaStatusStore = defineStore('haStatus', () => {
+  const state = ref<string>('')
+  const role = ref<string>('')
+  const status = ref<string>('')
+  const lastSyncStatus = ref<string>('')
+  const lastSyncTime = ref<number>(0)
+
+  const loading = ref(true)
+  const error = ref<Error>()
+
+  function fetchStatus() {
+    ubusCall('ns.ha', 'status', {})
+      .then((response: HaStatus) => {
+        state.value = response.data.state
+        role.value = response.data.role
+        status.value = response.data.status
+        lastSyncStatus.value = response.data.last_sync_status.toLowerCase().replace(/ /g, '_')
+        lastSyncTime.value = response.data.last_sync_time
+      })
+      .catch((reason: Error) => {
+        error.value = reason
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  }
+
+  onMounted(() => {
+    fetchStatus()
+  })
+
+  return {
+    state,
+    role,
+    status,
+    lastSyncStatus,
+    lastSyncTime,
+    loading,
+    error,
+    fetchStatus
+  }
+})

src/views/standalone/StandaloneDashboardView.vue

@@ -17,6 +17,7 @@ import ThreatShieldIpCard from '@/components/standalone/dashboard/ThreatShieldIp
 import IpsServiceCard from '@/components/standalone/dashboard/IpsServiceCard.vue'
 import MacBindingStatusCard from '@/components/standalone/dashboard/MacBindingStatusCard.vue'
 import BackupStatusCard from '@/components/standalone/dashboard/BackupStatusCard.vue'
+import HaStatusCard from '@/components/standalone/dashboard/HaStatusCard.vue'
 
 const { t } = useI18n()
 const route = useRoute()
@@ -119,5 +120,6 @@ function goTo(path: string) {
       :icon="['fas', 'circle-info']"
     />
     <BackupStatusCard />
+    <HaStatusCard />
   </div>
 </template>