Jump to current VM in full VM list

pvc-vue/src/views/VMs.vue

@@ -21,10 +21,11 @@
             :value="showVMList ? searchQuery : (selectedVMData?.name || '')"
             @input="handleSearch"
             @focus="handleSearchFocus"
+            @blur="handleSearchBlur"
             class="form-control search-input"
           >
           <button 
-            v-if="searchQuery" 
+            v-if="searchQuery && showVMList" 
             class="btn-clear" 
             @click="clearSearch"
           >
@@ -35,6 +36,7 @@
         <div class="filter-dropdown">
           <button 
             class="btn btn-outline-secondary dropdown-toggle" 
+            :disabled="!showVMList"
             @click="toggleFilterMenu"
           >
             <i class="fas fa-filter"></i> Filters
@@ -96,6 +98,7 @@
           class="vm-list-item"
           :class="{ 'active': selectedVM === vm.name }"
           @click="selectVM(vm.name)"
+          :ref="el => { if (vm.name === selectedVM) selectedVMRef = el; }"
         >
           <div class="vm-item-content">
             <div class="vm-name">{{ vm.name }}</div>
@@ -246,7 +249,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import PageTitle from '../components/PageTitle.vue';
 import { useApiStore } from '../stores/api';
@@ -261,10 +264,12 @@ const selectedVM = ref('');
 const searchQuery = ref('');
 const showVMList = ref(true);
 const showFilterMenu = ref(false);
+const searchActive = ref(false);
 const appliedFilters = ref({
   states: {},
   nodes: {}
 });
+const selectedVMRef = ref(null);
 
 // Section visibility state
 const sections = ref({
@@ -276,7 +281,20 @@ const sections = ref({
 
 // Toggle VM list visibility
 const toggleVMList = () => {
-  showVMList.value = !showVMList.value;
+  if (showVMList.value) {
+    showVMList.value = false;
+    return;
+  }
+  
+  showVMList.value = true;
+  searchActive.value = false;
+  
+  // Scroll to selected VM after the list is shown
+  if (selectedVM.value) {
+    nextTick(() => {
+      scrollToSelectedVM();
+    });
+  }
 };
 
 // Toggle filter menu
@@ -295,13 +313,31 @@ const closeFilterMenuOnClickOutside = (event) => {
 // Add event listener for clicks outside filter menu
 onMounted(() => {
   document.addEventListener('click', closeFilterMenuOnClickOutside);
+  // Add event listener for clicks outside the VM list area
+  document.addEventListener('click', handleClickOutside);
 });
 
 // Remove event listener when component is unmounted
 onUnmounted(() => {
   document.removeEventListener('click', closeFilterMenuOnClickOutside);
+  document.removeEventListener('click', handleClickOutside);
 });
 
+// Handle clicks outside the VM list area
+const handleClickOutside = (event) => {
+  // Only handle this if a VM is selected and the list is showing
+  if (selectedVM.value && showVMList.value) {
+    const vmControls = document.querySelector('.vm-controls-container');
+    const vmList = document.querySelector('.vm-list-fullpage');
+    
+    // If click is outside both the controls and list, close the list
+    if ((!vmControls || !vmControls.contains(event.target)) && 
+        (!vmList || !vmList.contains(event.target))) {
+      showVMList.value = false;
+    }
+  }
+};
+
 // Toggle section visibility
 const toggleSection = (section) => {
   sections.value[section] = !sections.value[section];
@@ -310,18 +346,19 @@ const toggleSection = (section) => {
 // Clear search
 const clearSearch = () => {
   searchQuery.value = '';
+  searchActive.value = false;
   filterVMs();
 };
 
 // Toggle a filter on/off
 const toggleFilter = (type, value) => {
   appliedFilters.value[type][value] = !appliedFilters.value[type][value];
+  searchActive.value = true;
   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;
   });
@@ -330,14 +367,23 @@ const resetFilters = () => {
     appliedFilters.value.nodes[node] = false;
   });
   
+  searchActive.value = false;
   filterVMs();
 };
 
 // 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 +392,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
@@ -364,28 +427,31 @@ const filteredVMs = computed(() => {
   
   let filtered = [...vmData.value];
   
-  // Apply search filter
-  if (searchQuery.value.trim()) {
+  if (searchActive.value && 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;
-    });
+  if (searchActive.value) {
+    // 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 +465,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 '';
   }
 };
 
@@ -451,6 +515,7 @@ const fetchVMData = async () => {
 // Handle search input
 const handleSearch = (event) => {
   searchQuery.value = event.target.value;
+  searchActive.value = true;
   filterVMs();
 };
 
@@ -459,6 +524,34 @@ const handleSearchFocus = () => {
   // Show VM list when search is focused
   if (!showVMList.value) {
     showVMList.value = true;
+    // Scroll to selected VM after the list is shown
+    if (selectedVM.value) {
+      nextTick(() => {
+        scrollToSelectedVM();
+      });
+    }
+  }
+  searchActive.value = true;
+};
+
+// Handle search blur
+const handleSearchBlur = (event) => {
+  // Don't close the list if clicking on another element within the list
+  const vmList = document.querySelector('.vm-list-fullpage');
+  if (vmList && vmList.contains(event.relatedTarget)) {
+    return;
+  }
+  
+  // If a VM is selected and user clicks away from search, close the list
+  if (selectedVM.value && !event.relatedTarget) {
+    // Use setTimeout to allow click events to process first
+    setTimeout(() => {
+      // Only close if we're not clicking on a VM in the list
+      if (!document.activeElement || document.activeElement.tagName !== 'BUTTON' || 
+          !document.activeElement.classList.contains('vm-list-item')) {
+        showVMList.value = false;
+      }
+    }, 100);
   }
 };
 
@@ -475,6 +568,25 @@ const selectVM = (vmName) => {
   showVMList.value = false;
 };
 
+// Scroll to the selected VM in the list
+const scrollToSelectedVM = () => {
+  if (selectedVMRef.value) {
+    // Get the VM list container
+    const vmList = document.querySelector('.vm-list');
+    if (!vmList) return;
+    
+    // Calculate the scroll position
+    const vmElement = selectedVMRef.value;
+    const vmPosition = vmElement.offsetTop;
+    const listHeight = vmList.clientHeight;
+    const vmHeight = vmElement.clientHeight;
+    
+    // Scroll to position the selected VM in the middle of the list if possible
+    const scrollPosition = vmPosition - (listHeight / 2) + (vmHeight / 2);
+    vmList.scrollTop = Math.max(0, scrollPosition);
+  }
+};
+
 onMounted(() => {
   fetchVMData();
 });
@@ -491,12 +603,21 @@ watch(() => route.query.vm, (newVm) => {
     showVMList.value = true;
   }
 });
+
+// Watch for changes in the VM list visibility
+watch(() => showVMList.value, (isVisible) => {
+  if (isVisible && selectedVM.value) {
+    // Scroll to selected VM when the list becomes visible
+    nextTick(() => {
+      scrollToSelectedVM();
+    });
+  }
+});
 </script>
 
 <style scoped>
-/* VM Controls Styles */
+/* VM Controls */
 .vm-controls-container {
-  margin-bottom: 0.5rem;
   background-color: white;
   border: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 0.25rem;
@@ -677,12 +798,15 @@ watch(() => route.query.vm, (newVm) => {
   flex: 1;
   display: flex;
   flex-direction: column;
+  max-height: calc(100vh - 200px);
 }
 
 .vm-list {
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
 }
 
 .vm-list-item {