fix(lite): fix .value is undefined (#6469)

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue

@@ -10,16 +10,14 @@
 <script lang="ts" setup>
 import { type ComputedRef, computed, inject } from "vue";
 import UsageBar from "@/components/UsageBar.vue";
+import type { Stat } from "@/composables/fetch-stats.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
 import type { HostStats } from "@/libs/xapi-stats";
 
-const stats: ComputedRef<
-  {
-    id: string;
-    name: string;
-    stats?: HostStats;
-  }[]
-> = inject<any>("hostStats", []);
+const stats = inject<ComputedRef<Stat<HostStats>[]>>(
+  "hostStats",
+  computed(() => [])
+);
 
 const data = computed<{ id: string; label: string; value: number }[]>(() => {
   const result: { id: string; label: string; value: number }[] = [];
@@ -41,6 +39,7 @@ const data = computed<{ id: string; label: string; value: number }[]>(() => {
       value: avgCpuUsage,
     });
   });
+
   return result;
 });
 </script>

@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue

@@ -6,19 +6,18 @@
     </template>
   </UsageBar>
 </template>
+
 <script lang="ts" setup>
 import { type ComputedRef, computed, inject } from "vue";
 import UsageBar from "@/components/UsageBar.vue";
+import type { Stat } from "@/composables/fetch-stats.composable";
 import { getAvgCpuUsage } from "@/libs/utils";
 import type { VmStats } from "@/libs/xapi-stats";
 
-const stats: ComputedRef<
-  {
-    id: string;
-    name: string;
-    stats?: VmStats;
-  }[]
-> = inject<any>("vmStats", []);
+const stats = inject<ComputedRef<Stat<VmStats>[]>>(
+  "vmStats",
+  computed(() => [])
+);
 
 const data = computed<{ id: string; label: string; value: number }[]>(() => {
   const result: { id: string; label: string; value: number }[] = [];

@xen-orchestra/lite/src/composables/fetch-stats.composable.ts

@@ -10,13 +10,18 @@ const STORES_BY_OBJECT_TYPE = {
   vm: useVmStore,
 };
 
+export type Stat<T> = {
+  id: string;
+  name: string;
+  stats?: T;
+  pausable: Pausable;
+};
+
 export default function useFetchStats<T extends XenApiHost | XenApiVm, S>(
   type: "host" | "vm",
   granularity: GRANULARITY
 ) {
-  const stats = ref<
-    Map<string, { id: string; name: string; stats?: S; pausable: Pausable }>
-  >(new Map());
+  const stats = ref<Map<string, Stat<S>>>(new Map());
 
   const register = (object: T) => {
     if (stats.value.has(object.uuid)) {
@@ -63,6 +68,6 @@ export default function useFetchStats<T extends XenApiHost | XenApiVm, S>(
   return {
     register,
     unregister,
-    stats: computed(() => Array.from(stats.value.values())),
+    stats: computed<Stat<S>[]>(() => Array.from(stats.value.values())),
   };
 }

@xen-orchestra/lite/src/views/pool/PoolDashboardView.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { differenceBy } from "lodash-es";
-import { computed, onMounted, provide, readonly, watch } from "vue";
+import { computed, onMounted, provide, watch } from "vue";
 import PoolDashboardCpuUsage from "@/components/pool/dashboard/PoolDashboardCpuUsage.vue";
 import PoolDashboardStatus from "@/components/pool/dashboard/PoolDashboardStatus.vue";
 import PoolDashboardStorageUsage from "@/components/pool/dashboard/PoolDashboardStorageUsage.vue";
@@ -38,8 +38,8 @@ const runningVms = computed(() =>
   vmStore.allRecords.filter((vm) => vm.power_state === "Running")
 );
 
-provide("hostStats", readonly(hostStats));
-provide("vmStats", readonly(vmStats));
+provide("hostStats", hostStats);
+provide("vmStats", vmStats);
 
 watch(runningHosts, (hosts, previousHosts) => {
   // turned On