feat(xo-6/dashboard): add resources overview data (#8009)

Display resources overview data on XO 6 dashboard.

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

@@ -203,7 +203,6 @@
   "theme-light": "Light",
   "this-vm-cant-be-migrated": "This VM can't be migrated",
   "top-#": "Top {n}",
-  "total-cpus": "Total CPUs",
   "total-free:": "Total free:",
   "total-used:": "Total used:",
   "unreachable-hosts": "Unreachable hosts",

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

@@ -203,7 +203,6 @@
   "theme-light": "Clair",
   "this-vm-cant-be-migrated": "Cette VM ne peut pas être migrée",
   "top-#": "Top {n}",
-  "total-cpus": "Total CPUs",
   "total-free:": "Total libre :",
   "total-used:": "Total utilisé :",
   "unreachable-hosts": "Hôtes inaccessibles",

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

@@ -69,5 +69,6 @@
   "tasks.quick-view.in-progress": "In progress",
 
   "total": "Total",
+  "total-cpus": "Total CPUs",
   "vms": "VMs"
 }

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

@@ -69,5 +69,6 @@
   "tasks.quick-view.in-progress": "En cours",
 
   "total": "Total",
+  "total-cpus": "Total CPUs",
   "vms": "VMs"
 }

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

@@ -0,0 +1,41 @@
+<template>
+  <UiCard>
+    <CardTitle>{{ $t('resources-overview') }}</CardTitle>
+    <LoadingHero :disabled="isReady" type="card">
+      <div class="line-1">
+        <CardNumbers :label="$t('total-memory')" :value="memorySize?.value" :unit="memorySize?.prefix" size="medium" />
+        <CardNumbers :label="$t('total-cpus')" :value="nCpus" size="medium" />
+      </div>
+      <CardNumbers
+        :label="$t('total-storage-repository')"
+        :value="srSize?.value"
+        :unit="srSize?.prefix"
+        size="medium"
+      />
+    </LoadingHero>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import { useDashboardStore } from '@/stores/xo-rest-api/dashboard.store'
+import { formatSizeRaw } from '@/utils/size.util'
+import CardTitle from '@core/components/card/CardTitle.vue'
+import CardNumbers from '@core/components/CardNumbers.vue'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import UiCard from '@core/components/UiCard.vue'
+import { computed } from 'vue'
+
+const { record, isReady } = useDashboardStore().subscribe()
+
+const nCpus = computed(() => record.value?.resourcesOverview?.nCpus)
+const memorySize = computed(() => formatSizeRaw(record.value?.resourcesOverview?.memorySize, 1))
+const srSize = computed(() => formatSizeRaw(record.value?.resourcesOverview?.srSize, 1))
+</script>
+
+<style lang="postcss" scoped>
+.line-1 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+</style>

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

@@ -36,12 +36,15 @@
   "n-hosts": "1 host | {n} hosts",
   "no-results": "No results",
   "pools": "Pools",
+  "resources-overview": "Resources overview",
   "s3-backup-repository": "S3 backup repository",
   "storage-repository": "Storage repository",
 
   "sidebar.search-tree-view": "Search in treeview",
   "sidebar.vms-treeview": "VMs treeview",
 
+  "total-memory": "Total memory",
+  "total-storage-repository": "Total storage repository",
   "up-to-date": "Up-to-date",
   "used": "Used",
   "vm": "VM",

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

@@ -36,12 +36,15 @@
   "n-hosts": "1 hôte | {n} hôtes",
   "no-results": "Aucun résultat",
   "pools": "Pools",
+  "resources-overview": "Vue d'ensemble des ressources",
   "s3-backup-repository": "Dépot de sauvegarde S3",
   "storage-repository": "Dépot de stockage",
 
   "sidebar.search-tree-view": "Rechercher dans l'arborescence",
   "sidebar.vms-treeview": "Arborescence des VMs",
 
+  "total-memory": "Mémoire totale",
+  "total-storage-repository": "Total dépot de stockage",
   "up-to-date": "À jour",
   "used": "Utilisé",
   "vm": "VM",

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

@@ -2,6 +2,7 @@
   <div class="site-dashboard">
     <HostsStatus class="hosts-status" />
     <VmsStatus class="vms-status" />
+    <ResourcesOverview class="resources-overview" />
     <Backups class="backups" />
     <BackupIssues class="backup-issues" />
     <Repositories class="repositories" />
@@ -15,6 +16,7 @@ import Backups from '@/components/site/dashboard/Backups.vue'
 import HostsStatus from '@/components/site/dashboard/HostsStatus.vue'
 import Patches from '@/components/site/dashboard/Patches.vue'
 import Repositories from '@/components/site/dashboard/Repositories.vue'
+import ResourcesOverview from '@/components/site/dashboard/ResourcesOverview.vue'
 import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
 </script>
 
@@ -25,7 +27,7 @@ import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
   gap: 0.8rem;
   grid-template-columns: repeat(8, 1fr);
   grid-template-areas:
-    'pools-status pools-status hosts-status hosts-status vms-status vms-status resources resources'
+    'pools-status pools-status hosts-status hosts-status vms-status vms-status resources-overview resources-overview'
     'backups backups backups backups backup-issues backup-issues backup-issues backup-issues'
     'repositories repositories repositories repositories repositories repositories repositories repositories'
     'alarms alarms alarms alarms alarms alarms patches patches';
@@ -39,6 +41,10 @@ import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
   grid-area: vms-status;
 }
 
+.resources-overview {
+  grid-area: resources-overview;
+}
+
 .backups {
   grid-area: backups;
 }

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

@@ -53,4 +53,9 @@ export type XoDashboard = {
       notInJob: number
     }
   }
+  resourcesOverview: {
+    nCpus: number
+    memorySize: number
+    srSize: number
+  }
 }

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@
 - **XO 6**:
   - [Dashboard] Display S3 backup repository data (PR [#8006](https://github.com/vatesfr/xen-orchestra/pull/8006))
   - [Dashboard] Display VMs protection data (PR [#8007](https://github.com/vatesfr/xen-orchestra/pull/8007))
+  - [Dashboard] Display resources overview data (PR [#8009](https://github.com/vatesfr/xen-orchestra/pull/8009))
 - **xo-cli**
   - `rest get --output $file` now displays progress information during download
   - `rest post` and `rest put` now accept `--input $file` to upload a file and display progress information