parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve loading on VM page

Browse Source
This commit is contained in:
Joshua Boniface 2025-03-02 11:09:20 -05:00
parent ef3e013f2d
commit 4e0cd95b75
1 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
pvc-vue/src/components/pages/vms/VMOverview.vue
View File

@ -187,8 +187,18 @@
</CollapsibleSection> </CollapsibleSection>
</div> </div>
<!-- Loading State -->
<div v-if="!selectedVMData && !showVMList && isLoading" class="no-vm-selected">
<div class="spinner-container">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2 text-muted">Loading VM details...</p>
</div>
</div>
<!-- No VM Selected Message --> <!-- No VM Selected Message -->
<div v-if="!selectedVMData && !showVMList" class="no-vm-selected"> <div v-if="!selectedVMData && !showVMList && !isLoading" class="no-vm-selected">
<div class="alert alert-info"> <div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i> <i class="fas fa-info-circle me-2"></i>
<span v-if="invalidVMSelected"> <span v-if="invalidVMSelected">
@ -253,6 +263,9 @@ const sections = ref({
// Add new state for tracking invalid VM selection // Add new state for tracking invalid VM selection
const invalidVMSelected = ref(false); const invalidVMSelected = ref(false);
// Add loading state
const isLoading = ref(false);
// Toggle VM list visibility // Toggle VM list visibility
const toggleVMList = () => { const toggleVMList = () => {
if (showVMList.value) { if (showVMList.value) {
@ -465,19 +478,25 @@ const filterVMs = () => {
// Select a VM // Select a VM
const selectVM = (vmName) => { const selectVM = (vmName) => {
const vmExists = props.vmData.some(vm => vm.name === vmName); isLoading.value = true;
if (vmExists) { // Use nextTick to ensure loading state is shown
selectedVM.value = vmName; nextTick(() => {
invalidVMSelected.value = false; const vmExists = props.vmData.some(vm => vm.name === vmName);
showVMList.value = false;
} else { if (vmExists) {
selectedVM.value = ''; selectedVM.value = vmName;
invalidVMSelected.value = true; invalidVMSelected.value = false;
showVMList.value = false; showVMList.value = false;
} } else {
selectedVM.value = '';
router.push({ query: { vm: vmName } }); invalidVMSelected.value = true;
showVMList.value = false;
}
router.push({ query: { vm: vmName } });
isLoading.value = false;
});
}; };
// Scroll to the selected VM in the list // Scroll to the selected VM in the list
@ -530,6 +549,7 @@ onMounted(() => {
// Initialize with URL state if present // Initialize with URL state if present
const vmFromQuery = route.query.vm; const vmFromQuery = route.query.vm;
if (vmFromQuery) { if (vmFromQuery) {
isLoading.value = true;
// Check if we already have data // Check if we already have data
if (props.vmData.length) { if (props.vmData.length) {
selectVM(vmFromQuery); selectVM(vmFromQuery);
@ -583,18 +603,16 @@ watch(() => showVMList.value, (isVisible) => {
} }
}); });
// Modify the vmData watcher to handle updates and maintain selection // Add watcher for vmData to handle loading state
watch(() => props.vmData, (newData) => { watch(() => props.vmData, (newData) => {
console.log('VMOverview received vmData:', newData); if (isLoading.value && selectedVM.value) {
const vmExists = newData.some(vm => vm.name === selectedVM.value);
// If we have a selected VM, verify it still exists in the new data if (!vmExists) {
if (selectedVM.value) {
const vmStillExists = newData.some(vm => vm.name === selectedVM.value);
if (!vmStillExists) {
invalidVMSelected.value = true; invalidVMSelected.value = true;
} else { } else {
invalidVMSelected.value = false; invalidVMSelected.value = false;
} }
isLoading.value = false;
} }
}, { immediate: true }); }, { immediate: true });
@ -922,4 +940,16 @@ const formatStorage = (sizeGB) => {
padding-top: 0.5rem; padding-top: 0.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.spinner-container p {
margin: 0;
}
</style> </style>