update HostsStatus component. Fix HOST_POWER_STATE enum.

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

@@ -0,0 +1,65 @@
+<template v-if="isReady">
+  <UiCard>
+    <CardTitle>{{ $t('hosts-status') }}</CardTitle>
+    <DonutChartWithLegend :icon="faServer" :segments />
+    <CardNumbers :value="hosts.length" class="total" label="Total" size="small" />
+  </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 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 } = 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/locales/en.json

@@ -1,15 +1,15 @@
 {
   "account-organization-more": "Account, organization & more…",
 
-  "hosts-halted-status": "Halted",
-  "hosts-halted-status-tooltip": "Hosts with a halted power state",
-  "hosts-running-status": "Running",
-  "hosts-status": "Hosts status",
-  "hosts-unknown-status": "Unknown",
-  "hosts-unknown-status-tooltip": "Hosts with an unknown power state",
-
   "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,15 +1,15 @@
 {
   "account-organization-more": "Compte, organisation et plus…",
 
-  "hosts-halted-status": "Arrêtées",
-  "hosts-halted-status-tooltip": "Hôtes avec un état d'alimentation inactif",
-  "hosts-running-status": "En fonctionnement",
-  "hosts-status": "Statut des hôtes",
-  "hosts-unknown-status": "Inconnues",
-  "hosts-unknown-status-tooltip": "Hôtes avec un état d'alimentation inconnu",
-
   "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/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 = {