Reuse data to avoid dupe API calls

pvc-vue/src/components/pages/vms/VMOverview.vue

@@ -191,7 +191,12 @@
     <div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
       <div class="alert alert-info">
         <i class="fas fa-info-circle me-2"></i>
-        Please select a VM from the list to view its details
+        <span v-if="invalidVMSelected">
+          Selected VM does not exist
+        </span>
+        <span v-else>
+          Please select a VM from the list to view its details
+        </span>
       </div>
     </div>
   </div>
@@ -245,6 +250,9 @@ const sections = ref({
   storage: true
 });
 
+// Add new state for tracking invalid VM selection
+const invalidVMSelected = ref(false);
+
 // Toggle VM list visibility
 const toggleVMList = () => {
   if (showVMList.value) {
@@ -254,6 +262,7 @@ const toggleVMList = () => {
   
   showVMList.value = true;
   searchActive.value = false;
+  invalidVMSelected.value = false;
   
   // Scroll to selected VM after the list is shown
   if (selectedVM.value) {
@@ -456,9 +465,19 @@ const filterVMs = () => {
 
 // Select a VM
 const selectVM = (vmName) => {
-  selectedVM.value = vmName;
+  const vmExists = props.vmData.some(vm => vm.name === vmName);
+  
+  if (vmExists) {
+    selectedVM.value = vmName;
+    invalidVMSelected.value = false;
+    showVMList.value = false;
+  } else {
+    selectedVM.value = '';
+    invalidVMSelected.value = true;
+    showVMList.value = false;
+  }
+  
   router.push({ query: { vm: vmName } });
-  showVMList.value = false;
 };
 
 // Scroll to the selected VM in the list
@@ -510,22 +529,32 @@ onMounted(() => {
 
   // Initialize with URL state if present
   const vmFromQuery = route.query.vm;
-  if (vmFromQuery && props.vmData.some(vm => vm.name === vmFromQuery)) {
-    selectVM(vmFromQuery);
-    showVMList.value = false;
+  if (vmFromQuery) {
+    // Check if we already have data
+    if (props.vmData.length) {
+      selectVM(vmFromQuery);
+    } else {
+      // If no data yet, set the VM but mark as pending verification
+      selectedVM.value = vmFromQuery;
+      showVMList.value = false;
+      // Don't set invalidVMSelected yet - wait for data
+    }
   } else if (props.vmData.length > 0) {
     showVMList.value = true;
     selectedVM.value = '';
+    invalidVMSelected.value = false;
   }
 
   // Initialize filters with available states and nodes
-  availableStates.value.forEach(state => {
-    appliedFilters.value.states[state] = false;
-  });
-  
-  availableNodes.value.forEach(node => {
-    appliedFilters.value.nodes[node] = false;
-  });
+  if (props.vmData.length) {
+    availableStates.value.forEach(state => {
+      appliedFilters.value.states[state] = false;
+    });
+    
+    availableNodes.value.forEach(node => {
+      appliedFilters.value.nodes[node] = false;
+    });
+  }
 });
 
 onUnmounted(() => {
@@ -535,14 +564,12 @@ onUnmounted(() => {
 
 // Watch for route changes to update selected VM
 watch(() => route.query.vm, (newVm) => {
-  if (newVm && props.vmData.some(vm => vm.name === newVm)) {
+  if (newVm) {
     selectVM(newVm);
-    // Hide VM list when navigating directly to a VM
-    showVMList.value = false;
   } else if (props.vmData.length > 0) {
-    // If no VM specified in URL, show list and clear selection
     selectedVM.value = '';
     showVMList.value = true;
+    invalidVMSelected.value = false;
   }
 });
 
@@ -556,9 +583,19 @@ watch(() => showVMList.value, (isVisible) => {
   }
 });
 
-// Add console logging to debug data flow
+// Modify the vmData watcher to handle updates and maintain selection
 watch(() => props.vmData, (newData) => {
   console.log('VMOverview received vmData:', newData);
+  
+  // If we have a selected VM, verify it still exists in the new data
+  if (selectedVM.value) {
+    const vmStillExists = newData.some(vm => vm.name === selectedVM.value);
+    if (!vmStillExists) {
+      invalidVMSelected.value = true;
+    } else {
+      invalidVMSelected.value = false;
+    }
+  }
 }, { immediate: true });
 
 // Helper functions

pvc-vue/src/stores/cluster.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useClusterStore = defineStore('cluster', {
+  state: () => ({
+    clusterData: {}
+  }),
+  
+  actions: {
+    setClusterData(data) {
+      this.clusterData = data;
+    }
+  }
+}); 

pvc-vue/src/stores/vm.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+
+export const useVMStore = defineStore('vm', {
+  state: () => ({
+    vmList: [],
+    metrics: {}
+  }),
+  
+  actions: {
+    setVMList(vms) {
+      this.vmList = vms;
+    },
+    setMetrics(metrics) {
+      this.metrics = metrics;
+    }
+  }
+}); 

pvc-vue/src/views/VMs.vue

@@ -13,6 +13,7 @@
 import PageTitle from '../components/general/PageTitle.vue';
 import VMOverview from '../components/pages/vms/VMOverview.vue';
 
+// Define props to receive data from App.vue
 const props = defineProps({
   vmData: {
     type: Array,
@@ -30,9 +31,6 @@ const props = defineProps({
     default: () => ({})
   }
 });
-
-// Add debugging
-console.log('VMs.vue received vmData:', props.vmData);
 </script>
 
 <style scoped>