Fetch VM data properly

pvc-vue/src/App.vue

@@ -39,8 +39,9 @@
       </div>
       <router-view 
         :clusterData="clusterData"
-        :metricsData="metricsHistory"
         :nodeData="nodeData"
+        :vmData="vmData"
+        :metricsData="metricsHistory"
       />
     </div>
   </div>
@@ -61,6 +62,7 @@ const api = useApiStore();
 const configPanelOpen = ref(false);
 const clusterData = ref({});
 const nodeData = ref([]);
+const vmData = ref([]);
 const metricsHistory = ref({
   cpu: { labels: [], data: [] },
   memory: { labels: [], data: [] },
@@ -172,15 +174,20 @@ const updateDashboard = async () => {
   }
 
   try {
-    const status = await api.fetchStatus();
-    const nodes = await api.fetchNodes();
+    const [status, nodes, vms] = await Promise.all([
+      api.fetchStatus(),
+      api.fetchNodes(),
+      api.fetchVMs()
+    ]);
 
     console.log('[API] Status Response:', status);
     console.log('[API] Nodes Response:', nodes);
+    console.log('[API] VMs Response:', vms);
 
-    // Update state with new objects instead of mutating
+    // Update state with new objects
     clusterData.value = { ...status };
     nodeData.value = [...nodes];
+    vmData.value = [...vms];
 
     const timestamp = new Date().toLocaleTimeString();
     updateMetricsHistory(timestamp, status);