diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue index 064a281..a108fcd 100644 --- a/pvc-vue/src/views/VMs.vue +++ b/pvc-vue/src/views/VMs.vue @@ -319,9 +319,8 @@ const toggleFilter = (type, value) => { filterVMs(); }; -// Reset filters +// Reset all filters const resetFilters = () => { - // Reset all filters and apply immediately Object.keys(appliedFilters.value.states).forEach(state => { appliedFilters.value.states[state] = false; }); @@ -335,9 +334,17 @@ const resetFilters = () => { // Count active filters const activeFiltersCount = computed(() => { - const stateFiltersCount = Object.values(appliedFilters.value.states).filter(v => v).length; - const nodeFiltersCount = Object.values(appliedFilters.value.nodes).filter(v => v).length; - return stateFiltersCount + nodeFiltersCount; + let count = 0; + + Object.values(appliedFilters.value.states).forEach(isActive => { + if (isActive) count++; + }); + + Object.values(appliedFilters.value.nodes).forEach(isActive => { + if (isActive) count++; + }); + + return count; }); // Get available states from VM data @@ -346,7 +353,24 @@ const availableStates = computed(() => { vmData.value.forEach(vm => { if (vm.state) states.add(vm.state); }); - return Array.from(states).sort(); + // Get all states as an array + const statesArray = Array.from(states); + + // Remove 'start' if it exists + const startIndex = statesArray.indexOf('start'); + if (startIndex !== -1) { + statesArray.splice(startIndex, 1); + } + + // Sort the remaining states + statesArray.sort(); + + // Add 'start' at the beginning if it was present + if (startIndex !== -1) { + statesArray.unshift('start'); + } + + return statesArray; }); // Get available nodes from VM data @@ -365,27 +389,29 @@ const filteredVMs = computed(() => { let filtered = [...vmData.value]; // Apply search filter - if (searchQuery.value.trim()) { + if (searchQuery.value) { const query = searchQuery.value.toLowerCase(); filtered = filtered.filter(vm => vm.name.toLowerCase().includes(query) ); } - // Apply state filters - const hasStateFilters = Object.values(appliedFilters.value.states).some(v => v); - if (hasStateFilters) { - filtered = filtered.filter(vm => { - return appliedFilters.value.states[vm.state] === true; - }); + // Apply state filters if any are active + const activeStates = Object.entries(appliedFilters.value.states) + .filter(([_, isActive]) => isActive) + .map(([state]) => state); + + if (activeStates.length > 0) { + filtered = filtered.filter(vm => activeStates.includes(vm.state)); } - // Apply node filters - const hasNodeFilters = Object.values(appliedFilters.value.nodes).some(v => v); - if (hasNodeFilters) { - filtered = filtered.filter(vm => { - return appliedFilters.value.nodes[vm.node] === true; - }); + // Apply node filters if any are active + const activeNodes = Object.entries(appliedFilters.value.nodes) + .filter(([_, isActive]) => isActive) + .map(([node]) => node); + + if (activeNodes.length > 0) { + filtered = filtered.filter(vm => activeNodes.includes(vm.node)); } return filtered; @@ -399,19 +425,17 @@ const selectedVMData = computed(() => { // Get status class based on VM state const getStatusClass = (state) => { - if (!state) return 'status-unknown'; + if (!state) return ''; - switch (state) { + switch(state.toLowerCase()) { case 'start': return 'status-running'; - case 'shutdown': + case 'stop': return 'status-stopped'; - case 'pause': - return 'status-paused'; - case 'crash': - return 'status-error'; + case 'disable': + return 'status-disabled'; default: - return 'status-unknown'; + return ''; } };