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>
</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 -->
<div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
<div v-if="!selectedVMData && !showVMList && !isLoading" class="no-vm-selected">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
<span v-if="invalidVMSelected">
@ -253,6 +263,9 @@ const sections = ref({
// Add new state for tracking invalid VM selection
const invalidVMSelected = ref(false);
// Add loading state
const isLoading = ref(false);
// Toggle VM list visibility
const toggleVMList = () => {
if (showVMList.value) {
@ -465,19 +478,25 @@ const filterVMs = () => {
// Select a VM
const selectVM = (vmName) => {
const vmExists = props.vmData.some(vm => vm.name === vmName);
isLoading.value = true;
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 } });
// Use nextTick to ensure loading state is shown
nextTick(() => {
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 } });
isLoading.value = false;
});
};
// Scroll to the selected VM in the list
@ -530,6 +549,7 @@ onMounted(() => {
// Initialize with URL state if present
const vmFromQuery = route.query.vm;
if (vmFromQuery) {
isLoading.value = true;
// Check if we already have data
if (props.vmData.length) {
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) => {
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) {
if (isLoading.value && selectedVM.value) {
const vmExists = newData.some(vm => vm.name === selectedVM.value);
if (!vmExists) {
invalidVMSelected.value = true;
} else {
invalidVMSelected.value = false;
}
isLoading.value = false;
}
}, { immediate: true });
@ -922,4 +940,16 @@ const formatStorage = (sizeGB) => {
padding-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>