From e6b8707b5358d298be0441612986e96eb65daa69 Mon Sep 17 00:00:00 2001
From: Thierry <thierry@byscripts.info>
Date: Wed, 24 Jul 2024 12:05:50 +0200
Subject: [PATCH] update HostsStatus component. Fix HOST_POWER_STATE enum.

---
 .../lib/components/DonutWithLegends.vue       | 76 -------------------
 .../web-core/lib/types/donut-chart.type.ts    |  5 --
 .../web-core/lib/types/legend.type.ts         |  1 -
 .../components/pool/dashboard/HostStatus.vue  | 61 ---------------
 .../components/site/dashboard/HostsStatus.vue | 65 ++++++++++++++++
 @xen-orchestra/web/src/locales/en.json        | 14 ++--
 @xen-orchestra/web/src/locales/fr.json        | 14 ++--
 @xen-orchestra/web/src/types/host.type.ts     |  6 +-
 8 files changed, 82 insertions(+), 160 deletions(-)
 delete mode 100644 @xen-orchestra/web-core/lib/components/DonutWithLegends.vue
 delete mode 100644 @xen-orchestra/web-core/lib/types/donut-chart.type.ts
 delete mode 100644 @xen-orchestra/web-core/lib/types/legend.type.ts
 delete mode 100644 @xen-orchestra/web/src/components/pool/dashboard/HostStatus.vue
 create mode 100644 @xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue

diff --git a/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue b/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
deleted file mode 100644
index 26ed3ca648c..00000000000
--- a/@xen-orchestra/web-core/lib/components/DonutWithLegends.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="donut-with-legends">
-    <DonutChart :segments="donutSegments" :icon :max-value="maxValue" />
-    <div class="legends-and-title">
-      <slot />
-      <ul class="legends">
-        <UiLegend
-          v-for="(legendSegment, index) in legendSegments"
-          :key="index"
-          :color="legendSegment.color"
-          :value="legendSegment.value"
-          :unit="legendSegment.unit"
-          :tooltip="legendSegment.tooltip"
-        >
-          {{ legendSegment.label }}
-        </UiLegend>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import DonutChart from '@core/components/DonutChart.vue'
-import UiLegend from '@core/components/UiLegend.vue'
-import type { DonutSegmentColor } from '@core/types/donut-chart.type'
-import type { LegendColor } from '@core/types/legend.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-const props = defineProps<{
-  segments: {
-    label: string
-    value: number
-    unit?: string
-    color: DonutSegmentColor
-    tooltip?: string
-  }[]
-  icon?: IconDefinition
-  maxValue?: number
-}>()
-defineSlots<{
-  default: () => void
-}>()
-const donutSegments = computed(() =>
-  props.segments.map(segment => ({
-    value: segment.value,
-    color: segment.color,
-  }))
-)
-const legendSegments = computed(() =>
-  props.segments.map(segment => ({
-    label: segment.label,
-    value: segment.value,
-    unit: segment.unit,
-    color: segment.color === 'unknown' ? 'disabled' : (segment.color as LegendColor),
-    tooltip: segment.tooltip,
-  }))
-)
-</script>
-
-<style lang="postcss" scoped>
-.donut-with-legends {
-  display: flex;
-  align-items: center;
-  gap: 3.2rem;
-}
-.legends-and-title {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-.legends {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-}
-</style>
diff --git a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts b/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
deleted file mode 100644
index 19d1adcec14..00000000000
--- a/@xen-orchestra/web-core/lib/types/donut-chart.type.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type DonutSegmentColor = 'success' | 'warning' | 'error' | 'unknown'
-export type DonutSegment = {
-  value: number
-  color: DonutSegmentColor
-}
diff --git a/@xen-orchestra/web-core/lib/types/legend.type.ts b/@xen-orchestra/web-core/lib/types/legend.type.ts
deleted file mode 100644
index 306bd6e4ff8..00000000000
--- a/@xen-orchestra/web-core/lib/types/legend.type.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type LegendColor = 'default' | 'success' | 'warning' | 'error' | 'disabled' | 'dark-blue'
diff --git a/@xen-orchestra/web/src/components/pool/dashboard/HostStatus.vue b/@xen-orchestra/web/src/components/pool/dashboard/HostStatus.vue
deleted file mode 100644
index 389c6efd28d..00000000000
--- a/@xen-orchestra/web/src/components/pool/dashboard/HostStatus.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template v-if="isReady">
-  <UiCard>
-    <CardTitle>{{ $t('hosts-status') }}</CardTitle>
-    <DonutWithLegends :segments="segments" :icon />
-    <CardNumbers label="Total" :value="host.length" size="small" class="right" />
-  </UiCard>
-</template>
-
-<script lang="ts" setup>
-import { useHostStore } from '@/stores/xo-rest-api/host.store'
-import type { Host } from '@/types/host.type'
-import CardTitle from '@core/components/card/CardTitle.vue'
-import CardNumbers from '@core/components/CardNumbers.vue'
-import DonutWithLegends from '@core/components/DonutWithLegends.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: host, isReady } = useHostStore().subscribe()
-
-const runningHostsCount = computed(() => {
-  if (!isReady.value) return 0
-  return host.value.filter((host: Host) => host.power_state === 'Running').length
-})
-const inactiveHostsCount = computed(() => {
-  if (!isReady.value) return 0
-  return host.value.filter((host: Host) => host.power_state === 'Halted').length
-})
-const unknownHostsCount = computed(() => {
-  if (!isReady.value) return 0
-  return host.value.filter((host: Host) => host.power_state !== 'Running' && host.power_state !== 'Halted').length
-})
-const segments = computed(() => [
-  {
-    label: t('hosts-running-status'),
-    value: runningHostsCount.value,
-    color: 'success',
-  },
-  {
-    label: t('hosts-halted-status'),
-    value: inactiveHostsCount.value,
-    color: 'warning',
-    tooltip: t('hosts-halted-status-tooltip'),
-  },
-  {
-    label: t('hosts-unknown-status'),
-    value: unknownHostsCount.value,
-    color: 'unknown',
-    tooltip: t('hosts-unknown-status-tooltip'),
-  },
-])
-const icon = faServer
-</script>
-
-<style lang="postcss" scoped>
-.right {
-  margin-left: auto;
-}
-</style>
diff --git a/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue b/@xen-orchestra/web/src/components/site/dashboard/HostsStatus.vue
new file mode 100644
index 00000000000..fbc1550bb39
--- /dev/null
+++ b/@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>
diff --git a/@xen-orchestra/web/src/locales/en.json b/@xen-orchestra/web/src/locales/en.json
index c582fd06470..2b8ecc0a5ed 100644
--- a/@xen-orchestra/web/src/locales/en.json
+++ b/@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",
 
diff --git a/@xen-orchestra/web/src/locales/fr.json b/@xen-orchestra/web/src/locales/fr.json
index 3520dfa6523..cb7e0826eb3 100644
--- a/@xen-orchestra/web/src/locales/fr.json
+++ b/@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",
 
diff --git a/@xen-orchestra/web/src/types/host.type.ts b/@xen-orchestra/web/src/types/host.type.ts
index 533ea672964..a431634181d 100644
--- a/@xen-orchestra/web/src/types/host.type.ts
+++ b/@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 = {