feat(xo-6/dashboard): add backup issues data (#7974)

@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue

@@ -0,0 +1,14 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[prop('type').required().enum('page', 'card').preset('card').widget()]"
+  >
+    <NoDataHero v-bind="properties" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import NoDataHero from '@core/components/state-hero/NoDataHero.vue'
+</script>

@xen-orchestra/web-core/lib/components/backup-item/BackupItem.vue

@@ -1,9 +1,12 @@
 <!-- v1.0 -->
 <template>
   <div class="backup-item">
-    <RouterLink :to="backup.route">
+    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
       {{ backup.label }}
     </RouterLink>
+    <p v-else class="typo p3-medium">
+      {{ backup.label }}
+    </p>
     <div class="states">
       <BackupState v-for="(state, index) in backup.states" :key="index" :state />
     </div>

@xen-orchestra/web-core/lib/components/state-hero/NoDataHero.vue

@@ -0,0 +1,11 @@
+<template>
+  <StateHero class="no-data-hero" image="no-data" :type>{{ $t('no-data') }}</StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero, { type StateHeroType } from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

@xen-orchestra/web-core/lib/components/state-hero/StateHero.vue

@@ -17,7 +17,7 @@ export type StateHeroType = 'page' | 'card'
 const props = defineProps<{
   type: StateHeroType
   busy?: boolean
-  image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
+  image?: 'no-result' | 'under-construction' | 'no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done' | 'error'
 }>()
 
 const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
@@ -35,12 +35,14 @@ const imageSrc = computed(() => {
 .state-hero {
   &.page {
     --image-width: 90%;
+    --image-max-height: none;
     --spinner-size: 10rem;
     --gap: 8.2rem;
   }
 
   &.card {
     --image-width: 70%;
+    --image-max-height: 20rem;
     --spinner-size: 6rem;
     --gap: 2rem;
   }
@@ -58,6 +60,7 @@ const imageSrc = computed(() => {
 .image {
   width: var(--image-width);
   max-width: 55rem;
+  max-height: var(--image-max-height);
 }
 
 .spinner {

@xen-orchestra/web-core/lib/locales/en.json

@@ -47,6 +47,7 @@
   "master": "Primary host",
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
+  "no-data": "No data",
   "object-not-found": "Object {id} can't be found…",
   "patches": "Patches",
   "power-on-for-console": "Power on your VM to access its console",

@xen-orchestra/web-core/lib/locales/fr.json

@@ -47,6 +47,7 @@
   "master": "Hôte primaire",
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
+  "no-data": "Aucune donnée",
   "object-not-found": "L'objet {id} est introuvable…",
   "patches": "Patches",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",

@xen-orchestra/web-core/lib/types/backup.type.ts

@@ -6,6 +6,6 @@ export type BackupStates = BackupState[]
 
 export type Backup = {
   label: string
-  route: RouteLocationRaw
+  route?: RouteLocationRaw
   states: BackupStates
 }

@xen-orchestra/web/src/components/site/dashboard/BackupIssues.vue

@@ -0,0 +1,42 @@
+<template>
+  <UiCard>
+    <CardTitle>
+      {{ $t('backup-issues') }}
+      <UiCounter :value="backupIssues.length" color="danger" size="medium" />
+      <template #description>{{ $t('in-last-three-jobs') }}</template>
+    </CardTitle>
+    <LoadingHero :disabled="isReady" type="card">
+      <NoDataHero v-if="!hasBackupIssues" type="card" />
+      <div v-else class="backup-items">
+        <BackupItem v-for="(coreBackupIssue, index) in coreBackupIssues" :key="index" :backup="coreBackupIssue" />
+      </div>
+    </LoadingHero>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
+import { convertBackupIssueToCore } from '@/utils/convert-backup-issue-to-core.util'
+import BackupItem from '@core/components/backup-item/BackupItem.vue'
+import CardTitle from '@core/components/card/CardTitle.vue'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import NoDataHero from '@core/components/state-hero/NoDataHero.vue'
+import UiCard from '@core/components/UiCard.vue'
+import UiCounter from '@core/components/UiCounter.vue'
+import { computed } from 'vue'
+
+const { backupIssues, isReady } = useDashboardStore().subscribe()
+
+const hasBackupIssues = computed(() => backupIssues.value.length !== 0)
+
+const coreBackupIssues = computed(() => backupIssues.value.map(convertBackupIssueToCore))
+</script>
+
+<style lang="postcss" scoped>
+.backup-items {
+  max-height: 30rem;
+  overflow-y: auto;
+  margin-inline: -2.4rem;
+  margin-block-end: -2.4rem;
+}
+</style>

@xen-orchestra/web/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "account-organization-more": "Account, organization & more…",
   "available": "Available",
+  "backup-issues": "Backup issues",
   "backups": "Backups",
   "backup-repository": "Backup repository (local, NFS)",
 
@@ -24,6 +25,7 @@
   "hosts-status.unknown": "Unknown",
   "hosts-status.unknown.tooltip": "Hosts metrics are unavailable",
 
+  "in-last-three-jobs": "In their last three jobs",
   "missing-patches": "Missing patches",
   "n-hosts": "1 host | {n} hosts",
   "no-results": "No results",

@xen-orchestra/web/src/locales/fr.json

@@ -1,6 +1,7 @@
 {
   "account-organization-more": "Compte, organisation et plus…",
   "available": "Disponible",
+  "backup-issues": "Problèmes de sauvegarde",
   "backups": "Sauvegardes",
   "backup-repository": "Dépot de sauvegarde (local, NFS)",
 
@@ -24,6 +25,7 @@
   "hosts-status.unknown": "Inconnu",
   "hosts-status.unknown.tooltip": "Les métriques de l'hôte sont inaccessibles",
 
+  "in-last-three-jobs": "Dans leurs trois derniers jobs",
   "missing-patches": "Patches manquants",
   "n-hosts": "1 hôte | {n} hôtes",
   "no-results": "Aucun résultat",

@xen-orchestra/web/src/pages/index.vue

@@ -3,12 +3,14 @@
     <HostsStatus class="hosts-status" />
     <VmsStatus class="vms-status" />
     <Backups class="backups" />
+    <BackupIssues class="backup-issues" />
     <Repositories class="repositories" />
     <Patches class="patches" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import BackupIssues from '@/components/site/dashboard/BackupIssues.vue'
 import Backups from '@/components/site/dashboard/Backups.vue'
 import HostsStatus from '@/components/site/dashboard/HostsStatus.vue'
 import Patches from '@/components/site/dashboard/Patches.vue'
@@ -41,6 +43,10 @@ import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
   grid-area: backups;
 }
 
+.backup-issues {
+  grid-area: backup-issues;
+}
+
 .repositories {
   grid-area: repositories;
 }

@xen-orchestra/web/src/stores/xo-rest-api/dashboard.store.ts

@@ -23,10 +23,13 @@ export const useDashboardStore = defineStore('dashboard', () => {
     }
   })
 
+  const backupIssues = computed(() => baseContext.record.value?.backups?.issues ?? [])
+
   const context = {
     ...baseContext,
     backupRepositories,
     storageRepositories,
+    backupIssues,
   }
 
   return createSubscribableStoreContext({ context, ...configRest }, {})

@xen-orchestra/web/src/types/xo/dashboard.type.ts

@@ -1,3 +1,10 @@
+export type BackupIssue = {
+  logs: ('failure' | 'interrupted' | 'skipped' | 'success')[]
+  name: string
+  type: 'backup' | 'metadataBackup' | 'mirrorBackup'
+  uuid: string
+}
+
 export type XoDashboard = {
   nPools: number
   nHosts: number
@@ -32,5 +39,6 @@ export type XoDashboard = {
       successful: number
       total: number
     }
+    issues: BackupIssue[]
   }
 }

@xen-orchestra/web/src/utils/convert-backup-issue-to-core.util.ts

@@ -0,0 +1,7 @@
+import type { BackupIssue } from '@/types/xo/dashboard.type'
+import type { Backup as CoreBackup } from '@core/types/backup.type'
+
+export const convertBackupIssueToCore = (backupIssue: BackupIssue): CoreBackup => ({
+  label: backupIssue.name,
+  states: backupIssue.logs.map(log => (log === 'skipped' || log === 'interrupted' ? 'partial' : log)),
+})

CHANGELOG.unreleased.md

@@ -17,6 +17,8 @@
 - [REST API/Dashboard] Add name and type of the backup in the backup job issues (PR [#7958](https://github.com/vatesfr/xen-orchestra/pull/7958))
 - [Perf-alert] Display warning if no guest tools are detected while monitoring VM memory (PR [#7886](https://github.com/vatesfr/xen-orchestra/pull/7886))
 - [V2V] Fix computation of `memory_static_max`
+- **XO 6**:
+  - [Dashboard] Display backup issues data (PR [#7974](https://github.com/vatesfr/xen-orchestra/pull/7974))
 
 ### Bug fixes
 
@@ -38,6 +40,9 @@
 
 <!--packages-start-->
 
+- @xen-orchestra/lite minor
+- @xen-orchestra/web minor
+- @xen-orchestra/web-core minor
 - xo-server minor
 - xo-server-perf-alert minor
 - xo-server-sdn-controller patch