From 6d2f3fd7a84d4303821081d1cff8a4c49858976c Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sat, 1 Mar 2025 17:07:06 -0500
Subject: [PATCH] Split VMs into dedicated component

---
 pvc-vue/src/components/VMOverview.vue |  873 +++++++++++++++++++++
 pvc-vue/src/views/VMs.vue             | 1001 +------------------------
 2 files changed, 897 insertions(+), 977 deletions(-)
 create mode 100644 pvc-vue/src/components/VMOverview.vue

diff --git a/pvc-vue/src/components/VMOverview.vue b/pvc-vue/src/components/VMOverview.vue
new file mode 100644
index 0000000..4558eaf
--- /dev/null
+++ b/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> 
\ No newline at end of file
diff --git a/pvc-vue/src/views/VMs.vue b/pvc-vue/src/views/VMs.vue
index 4602f4b..8a83db2 100644
--- a/pvc-vue/src/views/VMs.vue
+++ b/pvc-vue/src/views/VMs.vue
@@ -1,998 +1,45 @@
 <template>
   <div class="content-grid">
     <PageTitle title="Virtual Machines" />
-
-    <!-- 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>
-
-      <!-- Utilization Graphs Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.graphs" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Utilization Graphs</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('graphs')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.graphs" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="graphs-row">
-              <!-- Graph components will go here -->
-              <p>VM utilization graphs will be populated here</p>
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('graphs')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Resources Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.resources }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">VM Resources</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="resources-row">
-              <!-- Resource cards will go here -->
-              <p>VM resource details will be populated here</p>
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Network Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.network }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.network" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Network Configuration</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('network')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.network" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="network-row">
-              <!-- Network details will go here -->
-              <p>VM network configuration will be populated here</p>
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('network')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </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>
+    <VMOverview
+      :vmData="vmData"
+      :metricsData="metricsData"
+      :clusterData="clusterData"
+    />
   </div>
 </template>
 
 <script setup>
-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';
+import VMOverview from '../components/VMOverview.vue';
 
-const api = useApiStore();
-const router = useRouter();
-const route = useRoute();
-
-// State
-const vmData = ref([]);
-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;
-};
-
-// Close filter menu when clicking outside
-const closeFilterMenuOnClickOutside = (event) => {
-  const filterDropdown = document.querySelector('.filter-dropdown');
-  if (filterDropdown && !filterDropdown.contains(event.target)) {
-    showFilterMenu.value = false;
-  }
-};
-
-// 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];
-};
-
-// 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();
-  vmData.value.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();
-  vmData.value.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(() => {
-  if (!vmData.value) return [];
-  
-  let filtered = [...vmData.value];
-  
-  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));
-    }
-  }
-  
-  return filtered;
-});
-
-// Get the selected VM data
-const selectedVMData = computed(() => {
-  if (!selectedVM.value || !vmData.value) return null;
-  return vmData.value.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 '';
-  }
-};
-
-// Fetch VM data from API
-const fetchVMData = async () => {
-  try {
-    vmData.value = await api.fetchVMs();
-    
-    // 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;
-    });
-    
-    // Check if there's a VM specified in the URL
-    const vmFromQuery = route.query.vm;
-    if (vmFromQuery) {
-      const vmExists = vmData.value.some(vm => vm.name === vmFromQuery);
-      if (vmExists) {
-        selectVM(vmFromQuery);
-        // Hide VM list if a specific VM is requested
-        showVMList.value = false;
-      }
-    } else {
-      // Show VM list by default if no VM is specified
-      showVMList.value = true;
-      selectedVM.value = '';
-    }
-  } catch (error) {
-    console.error('Error fetching VM data:', error);
-  }
-};
-
-// 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);
-  }
-};
-
-onMounted(() => {
-  fetchVMData();
-});
-
-// Watch for route changes to update selected VM
-watch(() => route.query.vm, (newVm) => {
-  if (newVm && vmData.value.some(vm => vm.name === newVm)) {
-    selectVM(newVm);
-    // Hide VM list when navigating directly to a VM
-    showVMList.value = false;
-  } else if (vmData.value.length > 0) {
-    // If no VM specified in URL, show list and clear selection
-    selectedVM.value = '';
-    showVMList.value = true;
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
   }
 });
 
-// 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 debugging
+console.log('VMs.vue received vmData:', props.vmData);
 </script>
 
 <style scoped>
-/* 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;
-}
-
-/* Filter Dropdown Menu */
-.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;
+.content-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  padding-left: 0.25rem;
-}
-
-/* Filter Pills */
-.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;
-}
-
-/* VM Selector Styles */
-.vm-selector-container {
-  background-color: white;
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  margin-bottom: 1rem;
-  overflow: hidden;
-}
-
-.search-filter-container {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  background-color: rgba(0, 0, 0, 0.02);
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.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;
-}
-
-.filter-buttons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Full-page VM List */
-.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;
-}
-
-.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-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 Styles */
-.vm-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Section Styles (reused from Nodes.vue) */
-.section-container {
-  margin-bottom: 0.5rem;
-}
-
-.section-container.collapsed {
-  margin-bottom: 0.5rem;
-}
-
-.section-content-wrapper {
-  display: flex;
-  position: relative;
-}
-
-.section-content {
-  flex: 1;
-  min-width: 0;
-  padding-right: 40px;
-}
-
-.toggle-column {
-  position: absolute;
-  top: 4px;
-  right: 0;
-  width: 40px;
-  height: 30px;
-  z-index: 10;
-  padding-left: 6px;
-}
-
-.toggle-column.expanded {
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  align-items: flex-start;
-  padding-top: 4px;
-}
-
-.section-toggle {
-  background: none;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  transition: all 0.2s;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.section-toggle:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #333;
-}
-
-.collapsed-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem;
-  background-color: rgba(0, 0, 0, 0.03);
-  border: 1px solid rgba(0, 0, 0, 0.125);
-  border-radius: 0.25rem;
-  height: 38px;
-  width: 100%;
-}
-
-.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;
-  }
 }
 </style> 
\ No newline at end of file