Split VMs into dedicated component

pvc-vue/src/components/VMOverview.vue

@@ -0,0 +1,873 @@
+<template>
+  <!-- VM Selector Controls -->
+  <div class="vm-controls-container">
+    <div class="controls-row">
+      <button 
+        class="btn btn-outline-secondary list-toggle-btn" 
+        @click="toggleVMList"
+        :class="{ 'active': showVMList }"
+      >
+        <i class="fas fa-list"></i> List VMs
+      </button>
+      
+      <div class="search-box">
+        <i class="fas fa-search search-icon"></i>
+        <input 
+          type="text" 
+          placeholder="Search VMs..." 
+          :value="showVMList ? searchQuery : (selectedVMData?.name || '')"
+          @input="handleSearch"
+          @focus="handleSearchFocus"
+          @blur="handleSearchBlur"
+          class="form-control search-input"
+        >
+        <button 
+          v-if="searchQuery && showVMList" 
+          class="btn-clear" 
+          @click="clearSearch"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <div class="filter-dropdown">
+        <button 
+          class="btn btn-outline-secondary dropdown-toggle" 
+          :disabled="!showVMList"
+          @click="toggleFilterMenu"
+        >
+          <i class="fas fa-filter"></i> Filters
+          <span v-if="activeFiltersCount > 0" class="filter-badge">{{ activeFiltersCount }}</span>
+        </button>
+        <div class="filter-menu" v-show="showFilterMenu">
+          <div class="filter-section">
+            <h6>Status</h6>
+            <div class="filter-options-dropdown">
+              <div class="filter-pills">
+                <button 
+                  v-for="state in availableStates" 
+                  :key="state"
+                  class="filter-pill"
+                  :class="{ 'active': appliedFilters.states[state] }"
+                  @click="toggleFilter('states', state)"
+                >
+                  {{ state }}
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="filter-section">
+            <h6>Node</h6>
+            <div class="filter-options-dropdown">
+              <div class="filter-pills">
+                <button 
+                  v-for="node in availableNodes" 
+                  :key="node"
+                  class="filter-pill"
+                  :class="{ 'active': appliedFilters.nodes[node] }"
+                  @click="toggleFilter('nodes', node)"
+                >
+                  {{ node }}
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="filter-actions">
+            <button class="btn btn-sm btn-outline-secondary" @click="resetFilters">Reset All</button>
+            <button class="btn btn-sm btn-primary" @click="toggleFilterMenu">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- VM List (Full Page) -->
+  <div v-if="showVMList" class="vm-list-fullpage">
+    <div v-if="filteredVMs.length === 0" class="no-vms-message">
+      <p>No VMs match your search criteria</p>
+    </div>
+    <div v-else class="vm-list">
+      <button
+        v-for="vm in filteredVMs"
+        :key="vm.name"
+        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>
+          <div class="vm-status" :class="getStatusClass(vm.state)">
+            <i class="fas fa-circle status-indicator"></i>
+            <span>{{ vm.state }}</span>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+
+  <!-- VM Details -->
+  <div v-if="selectedVMData && !showVMList" class="vm-details">
+    <!-- Information Cards Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.info }">
+      <!-- Collapsed section indicator -->
+      <div v-if="!sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">VM Information</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="info-row">
+            <!-- Information cards will go here -->
+            <p>VM information cards will be populated here</p>
+          </div>
+        </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Other sections... -->
+    <!-- (Utilization Graphs, Resources, Network sections follow the same pattern) -->
+  </div>
+
+  <!-- No VM Selected Message -->
+  <div v-if="!selectedVMData && !showVMList" class="no-vm-selected">
+    <div class="alert alert-info">
+      <i class="fas fa-info-circle me-2"></i>
+      Please select a VM from the list to view its details
+    </div>
+  </div>
+</template> 
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+
+// State
+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({
+  info: true,
+  graphs: true,
+  resources: true,
+  network: true
+});
+
+// Toggle VM list visibility
+const toggleVMList = () => {
+  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
+const toggleFilterMenu = () => {
+  showFilterMenu.value = !showFilterMenu.value;
+};
+
+// Toggle section visibility
+const toggleSection = (section) => {
+  sections.value[section] = !sections.value[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 all filters
+const resetFilters = () => {
+  Object.keys(appliedFilters.value.states).forEach(state => {
+    appliedFilters.value.states[state] = false;
+  });
+  
+  Object.keys(appliedFilters.value.nodes).forEach(node => {
+    appliedFilters.value.nodes[node] = false;
+  });
+  
+  searchActive.value = false;
+  filterVMs();
+};
+
+// Count active filters
+const activeFiltersCount = computed(() => {
+  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
+const availableStates = computed(() => {
+  const states = new Set();
+  props.vmData.forEach(vm => {
+    if (vm.state) states.add(vm.state);
+  });
+  // 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
+const availableNodes = computed(() => {
+  const nodes = new Set();
+  props.vmData.forEach(vm => {
+    if (vm.node) nodes.add(vm.node);
+  });
+  return Array.from(nodes).sort();
+});
+
+// Filter VMs based on search query and active filter
+const filteredVMs = computed(() => {
+  console.log('Computing filteredVMs with:', {
+    vmData: props.vmData,
+    searchActive: searchActive.value,
+    searchQuery: searchQuery.value,
+    appliedFilters: appliedFilters.value
+  });
+
+  if (!props.vmData) return [];
+  
+  let filtered = [...props.vmData];
+  
+  if (searchActive.value && searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    filtered = filtered.filter(vm => 
+      vm.name.toLowerCase().includes(query)
+    );
+  }
+  
+  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 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));
+    }
+  }
+
+  console.log('Filtered VMs result:', filtered);
+  return filtered;
+});
+
+// Get the selected VM data
+const selectedVMData = computed(() => {
+  if (!selectedVM.value || !props.vmData) return null;
+  return props.vmData.find(vm => vm.name === selectedVM.value) || null;
+});
+
+// Get status class based on VM state
+const getStatusClass = (state) => {
+  if (!state) return '';
+  
+  switch(state.toLowerCase()) {
+    case 'start':
+      return 'status-running';
+    case 'stop':
+      return 'status-stopped';
+    case 'disable':
+      return 'status-disabled';
+    default:
+      return '';
+  }
+};
+
+// Handle search input
+const handleSearch = (event) => {
+  searchQuery.value = event.target.value;
+  searchActive.value = true;
+  filterVMs();
+};
+
+// Handle search focus
+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);
+  }
+};
+
+// Filter VMs based on current search and filters
+const filterVMs = () => {
+  // This is handled by the computed property
+  // But we need this function for event handlers
+};
+
+// Select a VM
+const selectVM = (vmName) => {
+  selectedVM.value = vmName;
+  router.push({ query: { vm: 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);
+  }
+};
+
+// Close filter menu when clicking outside
+const closeFilterMenuOnClickOutside = (event) => {
+  const filterDropdown = document.querySelector('.filter-dropdown');
+  if (filterDropdown && !filterDropdown.contains(event.target)) {
+    showFilterMenu.value = false;
+  }
+};
+
+// 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;
+    }
+  }
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  document.addEventListener('click', closeFilterMenuOnClickOutside);
+  document.addEventListener('click', handleClickOutside);
+
+  // Initialize with URL state if present
+  const vmFromQuery = route.query.vm;
+  if (vmFromQuery && props.vmData.some(vm => vm.name === vmFromQuery)) {
+    selectVM(vmFromQuery);
+    showVMList.value = false;
+  } else if (props.vmData.length > 0) {
+    showVMList.value = true;
+    selectedVM.value = '';
+  }
+
+  // Initialize filters with available states and nodes
+  availableStates.value.forEach(state => {
+    appliedFilters.value.states[state] = false;
+  });
+  
+  availableNodes.value.forEach(node => {
+    appliedFilters.value.nodes[node] = false;
+  });
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeFilterMenuOnClickOutside);
+  document.removeEventListener('click', handleClickOutside);
+});
+
+// Watch for route changes to update selected VM
+watch(() => route.query.vm, (newVm) => {
+  if (newVm && props.vmData.some(vm => vm.name === newVm)) {
+    selectVM(newVm);
+    // Hide VM list when navigating directly to a VM
+    showVMList.value = false;
+  } else if (props.vmData.length > 0) {
+    // If no VM specified in URL, show list and clear selection
+    selectedVM.value = '';
+    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();
+    });
+  }
+});
+
+// Add console logging to debug data flow
+watch(() => props.vmData, (newData) => {
+  console.log('VMOverview received vmData:', newData);
+}, { immediate: true });
+</script> 
+
+<style scoped>
+/* ... continuing from where we left off ... */
+
+.collapsed-section-header .card-title {
+  margin: 0;
+  color: #495057;
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .search-filter-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .search-box {
+    width: 100%;
+  }
+  
+  .filter-buttons {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+/* Grid layouts for details sections */
+.info-row,
+.graphs-row,
+.resources-row,
+.network-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+@media (min-width: 1201px) {
+  .info-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .graphs-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .resources-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .network-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .info-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .graphs-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .resources-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .network-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 800px) {
+  .info-row,
+  .graphs-row,
+  .resources-row,
+  .network-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* VM Controls */
+.vm-controls-container {
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.list-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.list-toggle-btn.active {
+  background-color: #6c757d;
+  color: white;
+}
+
+.filter-dropdown {
+  position: relative;
+}
+
+.filter-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background-color: #0d6efd;
+  color: white;
+  border-radius: 50%;
+  font-size: 0.7rem;
+  margin-left: 0.5rem;
+}
+
+/* Search box styles */
+.search-box {
+  position: relative;
+  flex: 1;
+  min-width: 200px;
+}
+
+.search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #6c757d;
+}
+
+.search-input {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.btn-clear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: #6c757d;
+  cursor: pointer;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+/* VM List styles */
+.vm-list-fullpage {
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  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 {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  background-color: white;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+}
+
+.vm-list-item:last-child {
+  border-bottom: none;
+}
+
+.vm-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.vm-list-item.active {
+  background-color: rgba(13, 110, 253, 0.1);
+  border-left: 3px solid #0d6efd;
+}
+
+.vm-item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.vm-name {
+  font-weight: 500;
+}
+
+.vm-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.status-indicator {
+  font-size: 0.625rem;
+}
+
+/* Status colors */
+.status-running {
+  color: #28a745;
+}
+
+.status-stopped {
+  color: #6c757d;
+}
+
+.status-paused {
+  color: #ffc107;
+}
+
+.status-error {
+  color: #dc3545;
+}
+
+.status-unknown {
+  color: #6c757d;
+}
+
+.no-vms-message {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+.no-vm-selected {
+  padding: 2rem;
+  text-align: center;
+}
+
+/* VM Details */
+.vm-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Filter menu styles */
+.filter-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 1000;
+  min-width: 250px;
+  padding: 0.75rem;
+  margin-top: 0.25rem;
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.filter-section {
+  margin-bottom: 1rem;
+}
+
+.filter-section h6 {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #495057;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding-bottom: 0.25rem;
+}
+
+.filter-options-dropdown {
+  max-height: 150px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+.filter-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.25rem;
+}
+
+.filter-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 1rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.filter-pill:hover {
+  background-color: #e9ecef;
+}
+
+.filter-pill.active {
+  background-color: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
+
+.filter-actions {
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+}
+</style>