feat(xo-web): add host status to xo6 dashboard (#7799)

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

@@ -0,0 +1,68 @@
+<template>
+  <UiCard>
+    <CardTitle>{{ $t('hosts-status') }}</CardTitle>
+    <LoadingHero :disabled="isReady" type="card">
+      <DonutChartWithLegend :icon="faServer" :segments />
+      <CardNumbers :label="t('total')" :value="hosts.length" class="total" size="small" />
+    </LoadingHero>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import { useHostStore } from '@/stores/xo-rest-api/host.store'
+import { HOST_POWER_STATE } from '@/types/host.type'
+import type { DonutChartWithLegendProps } from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
+import CardTitle from '@core/components/card/CardTitle.vue'
+import CardNumbers from '@core/components/CardNumbers.vue'
+import DonutChartWithLegend from '@core/components/donut-chart-with-legend/DonutChartWithLegend.vue'
+import LoadingHero from '@core/components/state-hero/LoadingHero.vue'
+import UiCard from '@core/components/UiCard.vue'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const { records: hosts, isReady } = useHostStore().subscribe()
+
+const hostsCount = computed(() => {
+  return hosts.value.reduce(
+    (acc, host) => {
+      if (host.power_state === HOST_POWER_STATE.RUNNING) {
+        acc.running++
+      } else if (host.power_state === HOST_POWER_STATE.HALTED) {
+        acc.halted++
+      } else {
+        acc.unknown++
+      }
+
+      return acc
+    },
+    { running: 0, halted: 0, unknown: 0 }
+  )
+})
+
+const segments = computed<DonutChartWithLegendProps['segments']>(() => [
+  {
+    label: t('hosts-status.running'),
+    value: hostsCount.value.running,
+    color: 'success',
+  },
+  {
+    label: t('hosts-status.halted'),
+    value: hostsCount.value.halted,
+    color: 'warning',
+  },
+  {
+    label: t('hosts-status.unknown'),
+    value: hostsCount.value.unknown,
+    color: 'disabled',
+    tooltip: t('hosts-status.unknown.tooltip'),
+  },
+])
+</script>
+
+<style lang="postcss" scoped>
+.total {
+  margin-left: auto;
+}
+</style>

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

@@ -1,9 +1,9 @@
 <template>
   <UiCard>
     <CardTitle>{{ $t('vms-status') }}</CardTitle>
-    <LoadingHero type="card" :disabled="isReady">
+    <LoadingHero :disabled="isReady" type="card">
       <DonutChartWithLegend :icon="faDesktop" :segments />
-      <CardNumbers :value="vms.length" class="total" :label="t('total')" size="small" />
+      <CardNumbers :label="t('total')" :value="vms.length" class="total" size="small" />
     </LoadingHero>
   </UiCard>
 </template>

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

@@ -1,7 +1,15 @@
 {
   "account-organization-more": "Account, organization & more…",
+
   "host": "Host",
   "host-description": "Host description",
+
+  "hosts-status": "Hosts status",
+  "hosts-status.halted": "Stopped",
+  "hosts-status.running": "Running",
+  "hosts-status.unknown": "Unknown",
+  "hosts-status.unknown.tooltip": "Hosts metrics are unavailable",
+
   "n-hosts": "1 host | {n} hosts",
   "no-results": "No results",
 

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

@@ -1,7 +1,15 @@
 {
   "account-organization-more": "Compte, organisation et plus…",
+
   "host": "Hôte",
   "host-description": "Description de l'hôte",
+
+  "hosts-status": "Statut des hôtes",
+  "hosts-status.halted": "Arrêtés",
+  "hosts-status.running": "Démarrés",
+  "hosts-status.unknown": "Inconnu",
+  "hosts-status.unknown.tooltip": "Les métriques de l'hôte sont inaccessibles",
+
   "n-hosts": "1 hôte | {n} hôtes",
   "no-results": "Aucun résultat",
 

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

@@ -1,10 +1,12 @@
 <template>
   <div class="site-dashboard">
+    <HostsStatus class="hosts-status" />
     <VmsStatus class="vms-status" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import HostsStatus from '@/components/site/dashboard/HostsStatus.vue'
 import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
 </script>
 
@@ -21,6 +23,10 @@ import VmsStatus from '@/components/site/dashboard/VmsStatus.vue'
     'alarms alarms alarms alarms alarms alarms alarms patches';
 }
 
+.hosts-status {
+  grid-area: hosts-status;
+}
+
 .vms-status {
   grid-area: vms-status;
 }

@xen-orchestra/web/src/types/host.type.ts

@@ -3,9 +3,9 @@ import type { RecordId } from '@/types/xo-object.type'
 import type { Branch } from '@core/composables/tree/branch'
 
 export enum HOST_POWER_STATE {
-  HALTED = 'halted',
-  RUNNING = 'running',
-  UNKNOWN = 'unknown',
+  HALTED = 'Halted',
+  RUNNING = 'Running',
+  UNKNOWN = 'Unknown',
 }
 
 export type Host = {