Reorder state filters so start is first

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 '';
   }
 };