update to match parent PR

@xen-orchestra/web-core/lib/components/DonutWithLegends.vue

@@ -0,0 +1,76 @@
+<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>

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

@@ -1,5 +1,5 @@
-export type DonutColor = 'success' | 'warning' | 'error' | 'unknown'
+export type DonutSegmentColor = 'success' | 'warning' | 'error' | 'unknown'
 export type DonutSegment = {
   value: number
-  color: DonutColor
+  color: DonutSegmentColor
 }

@xen-orchestra/web/src/components/pool/dashboard/VmStatus.vue

@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts" setup>
-import DonutWithLegends from '@/components/DonutWithLegends.vue'
 import { useVmStore } from '@/stores/xo-rest-api/vm.store'
 import type { Vm } from '@/types/vm.type'
-import type { LegendColor } from '@core/types/ui-legend.type'
+import type { DonutSegmentColor } from '@core/types/donut.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 { faDesktop } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
@@ -40,18 +40,18 @@ const segments = computed(() => [
   {
     label: t('vms-running-status'),
     value: runningVmsCount.value,
-    color: 'success' as LegendColor,
+    color: 'success' as DonutSegmentColor,
   },
   {
     label: t('vms-halted-status'),
     value: inactiveVmsCount.value,
-    color: 'dark-blue' as LegendColor,
+    color: 'warning' as DonutSegmentColor,
     tooltip: t('vms-halted-status-tooltip'),
   },
   {
     label: t('vms-unknown-status'),
     value: unknownVmsCount.value,
-    color: 'disabled' as LegendColor,
+    color: 'unknown' as DonutSegmentColor,
     tooltip: t('vms-unknown-status-tooltip'),
   },
 ])