From a4c5792f9e895a620e00aacb352ece1c52bcacbe Mon Sep 17 00:00:00 2001
From: Mathieu <70369997+MathieuRA@users.noreply.github.com>
Date: Mon, 7 Nov 2022 10:18:12 +0100
Subject: [PATCH] fix(lite): fix .value is undefined (#6469)

---
 .../pool/dashboard/cpuUsage/HostsCpuUsage.vue       | 13 ++++++-------
 .../pool/dashboard/cpuUsage/VmsCpuUsage.vue         | 13 ++++++-------
 .../lite/src/composables/fetch-stats.composable.ts  | 13 +++++++++----
 .../lite/src/views/pool/PoolDashboardView.vue       |  6 +++---
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue b/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue
index f2dba995c..1ab434a5a 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/HostsCpuUsage.vue
+++ b/@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>
diff --git a/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue b/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue
index fc7c6c20c..adfd53ab1 100644
--- a/@xen-orchestra/lite/src/components/pool/dashboard/cpuUsage/VmsCpuUsage.vue
+++ b/@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 }[] = [];
diff --git a/@xen-orchestra/lite/src/composables/fetch-stats.composable.ts b/@xen-orchestra/lite/src/composables/fetch-stats.composable.ts
index 2ed477a9f..e36444d96 100644
--- a/@xen-orchestra/lite/src/composables/fetch-stats.composable.ts
+++ b/@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())),
   };
 }
diff --git a/@xen-orchestra/lite/src/views/pool/PoolDashboardView.vue b/@xen-orchestra/lite/src/views/pool/PoolDashboardView.vue
index 150dbb32a..af3a106ef 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolDashboardView.vue
+++ b/@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