Fix maintenance mode displays

pvc-vue/src/App.vue

@@ -3,10 +3,9 @@
     <!-- Sidebar -->
     <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
       <div class="sidebar-header">
-        <h5 class="text-white mb-0">PVC Dashboard</h5>
+        <h5 class="text-white mb-0 text-center">
-        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
+          {{ clusterData.cluster_name || 'Cluster' }}
-          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
+        </h5>
-        </button>
       </div>
       <div class="sidebar-content">
         <nav class="nav-menu">
@@ -25,7 +24,24 @@
         </nav>
       </div>
       <div class="sidebar-footer">
-        <button class="btn btn-outline-light w-100" @click="toggleConfig">
+        <!-- Refresh interval display with tooltip -->
+        <div class="refresh-display text-white-50 mb-3 text-center" data-title="Refresh Time">
+          <i class="fas fa-sync-alt"></i>
+          <span class="refresh-text ms-2">{{ api.config.updateInterval / 1000 }}s</span>
+        </div>
+        
+        <!-- Collapse/Expand button with tooltip -->
+        <button class="btn btn-outline-light w-100 mb-2" 
+                @click="toggleSidebar" 
+                data-title="Expand">
+          <i class="fas" :class="sidebarCollapsed ? 'fa-caret-right' : 'fa-caret-left'"></i>
+          <span class="action-text ms-2">{{ sidebarCollapsed ? 'Expand' : 'Collapse' }}</span>
+        </button>
+        
+        <!-- Configure button with tooltip -->
+        <button class="btn btn-outline-light w-100" 
+                @click="toggleConfig" 
+                data-title="Configure">
           <i class="fas fa-cog"></i>
           <span class="config-text ms-2">Configure</span>
         </button>
@@ -39,8 +55,9 @@
       </div>
       <router-view 
         :clusterData="clusterData"
-        :metricsData="metricsHistory"
         :nodeData="nodeData"
+        :vmData="vmData"
+        :metricsData="metricsHistory"
       />
     </div>
   </div>
@@ -61,6 +78,7 @@ const api = useApiStore();
 const configPanelOpen = ref(false);
 const clusterData = ref({});
 const nodeData = ref([]);
+const vmData = ref([]);
 const metricsHistory = ref({
   cpu: { labels: [], data: [] },
   memory: { labels: [], data: [] },
@@ -97,13 +115,20 @@ const updateMetricsHistory = (timestamp, status) => {
     memory: status.resources?.memory?.utilization || 0,
     health: status.cluster_health?.health || 0,
     storage: status.resources?.disk?.utilization || 0,
-    maintenance: status.maintenance === "true" ? true : false
   };
 
+  // Create maintenance array if it doesn't exist
+  if (!metricsHistory.value.maintenance) {
+    metricsHistory.value.maintenance = { labels: [], data: [] };
+  }
+
+  // Track maintenance status as a boolean for each data point
+  const isInMaintenance = status.maintenance === "true";
+
   Object.keys(metrics).forEach(metric => {
     const labels = [...metricsHistory.value[metric].labels, timestamp];
     const data = [...metricsHistory.value[metric].data, 
-      typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric])
+      Math.round(metrics[metric])
     ];
 
     // Keep only last 180 points
@@ -118,6 +143,21 @@ const updateMetricsHistory = (timestamp, status) => {
     };
   });
 
+  // Update maintenance history
+  const maintenanceLabels = [...metricsHistory.value.maintenance.labels, timestamp];
+  const maintenanceData = [...metricsHistory.value.maintenance.data, isInMaintenance];
+
+  // Keep only last 180 points for maintenance too
+  if (maintenanceLabels.length > 180) {
+    maintenanceLabels.shift();
+    maintenanceData.shift();
+  }
+
+  metricsHistory.value.maintenance = {
+    labels: maintenanceLabels,
+    data: maintenanceData
+  };
+
   // Track node-specific metrics
   if (!metricsHistory.value.nodes) {
     metricsHistory.value.nodes = {};
@@ -172,15 +212,20 @@ const updateDashboard = async () => {
   }
 
   try {
-    const status = await api.fetchStatus();
+    const [status, nodes, vms] = await Promise.all([
-    const nodes = await api.fetchNodes();
+      api.fetchStatus(),
+      api.fetchNodes(),
+      api.fetchVMs()
+    ]);
 
     console.log('[API] Status Response:', status);
     console.log('[API] Nodes Response:', nodes);
+    console.log('[API] VMs Response:', vms);
 
-    // Update state with new objects instead of mutating
+    // Update state with new objects
     clusterData.value = { ...status };
     nodeData.value = [...nodes];
+    vmData.value = [...vms];
 
     const timestamp = new Date().toLocaleTimeString();
     updateMetricsHistory(timestamp, status);
@@ -315,16 +360,16 @@ onUnmounted(() => {
 
 .sidebar-footer {
   margin-top: auto;
-  padding-left: 0.25rem;
+  padding: 0.75rem 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.75rem;
   border-top: 1px solid rgba(255,255,255,0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 .sidebar.collapsed .sidebar-footer .btn {
-  padding: 0.375rem 0.5rem;
+  padding: 0.375rem;
-  display: flex;
+  height: 38px;
-  justify-content: center;
 }
 
 .content-grid {
@@ -420,8 +465,100 @@ onUnmounted(() => {
 }
 
 .sidebar.collapsed .sidebar-footer .btn {
-  padding: 0.375rem 0.5rem;
+  padding: 0.375rem;
+  height: 38px;
+}
+
+/* Add these styles for the sidebar header */
+.sidebar-header h5 {
+  width: 100%;
+  text-align: center;
+}
+
+/* Style for collapsed sidebar header */
+.sidebar.collapsed .sidebar-header h5 {
+  display: block;
+  font-size: 0.95rem;
+  writing-mode: normal;
+  transform: none;
+  height: auto;
+  margin: 0.5rem 0;
+  white-space: normal;
+  text-align: center;
+}
+
+/* Style for refresh interval display */
+.refresh-display {
+  position: relative;
+  font-size: 0.9rem;
+  height: 24px;
   display: flex;
+  align-items: center;
   justify-content: center;
+  margin-bottom: 0.75rem !important;
+}
+
+.sidebar.collapsed .refresh-display {
+  height: 24px;
+}
+
+.sidebar.collapsed .refresh-text {
+  display: inline;
+  font-size: 0.75rem;
+}
+
+/* Style for action text in collapsed view */
+.sidebar.collapsed .action-text {
+  display: none;
+}
+
+/* Standardize button heights and padding */
+.sidebar-footer .btn {
+  position: relative;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Last button shouldn't have margin */
+.sidebar-footer .btn:last-child {
+  margin-bottom: 0;
+}
+
+/* Add tooltip styles for footer elements in collapsed view */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::after,
+.sidebar.collapsed .sidebar-footer .btn:hover::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #343a40;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  z-index: 1010;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  margin-left: 0.5rem;
+  font-size: 0.875rem;
+}
+
+/* Add arrow for the tooltips */
+.sidebar.collapsed .sidebar-footer .refresh-display:hover::before,
+.sidebar.collapsed .sidebar-footer .btn:hover::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #343a40 transparent transparent;
+  margin-left: 0.25rem;
+  z-index: 1011;
 }
 </style>

pvc-vue/src/components/ClusterOverview.vue

@@ -100,6 +100,7 @@
               title="Cluster Health"
               :value="clusterHealth"
               :chart-data="healthChartData"
+              :maintenance="isMaintenanceMode"
             />
 
             <!-- CPU Chart -->
@@ -167,7 +168,7 @@
                     ]"
                   >
                     <div class="message-header">
-                      <i class="fas fa-circle-exclamation me-1"></i>
+                      <i class="fas" :class="getMessageIcon(msg)"></i>
                       <span class="message-id">{{ getMessageId(msg) }}</span>
                       <span v-if="showHealthDelta(msg)" class="health-delta">
                         (-{{ msg.health_delta }}%)
@@ -322,8 +323,22 @@ const displayMessages = computed(() => {
     messages.push(...props.clusterData.cluster_health.messages);
   }
 
+  // Add maintenance mode message if the cluster is in maintenance mode
+  if (props.clusterData.maintenance === "true") {
+    messages.unshift({
+      id: 'Cluster is in maintenance',
+      text: 'Cluster is currently in maintenance mode - faults are not recorded and fencing is disabled',
+      health_delta: null, // Use null to indicate no delta should be shown
+      maintenance: true // Flag to identify this as a maintenance message
+    });
+  }
+
   // Sort messages by health delta (highest impact first)
   return messages.sort((a, b) => {
+    // Always keep maintenance message at the top
+    if (a.maintenance) return -1;
+    if (b.maintenance) return 1;
+    
     // If health_delta is not available, use 0
     const deltaA = a.health_delta || 0;
     const deltaB = b.health_delta || 0;
@@ -373,7 +388,8 @@ const getDeltaClass = (delta, msg) => {
 // Simplified chart data for the new chart components
 const healthChartData = computed(() => ({
   labels: props.metricsData.health.labels,
-  data: props.metricsData.health.data
+  data: props.metricsData.health.data,
+  maintenance: props.metricsData.maintenance.data
 }));
 
 const cpuChartData = computed(() => ({
@@ -927,6 +943,22 @@ const getMessageId = (msg) => {
 const getMessageText = (msg) => {
   return msg.text || 'No details available';
 };
+
+// Add a function to determine which icon to show for a message
+const getMessageIcon = (msg) => {
+  if (msg.maintenance) {
+    return 'fa-gear me-1'; // Use gear icon for maintenance with margin
+  } else if (msg.id === 'CLUSTER_HEALTHY') {
+    return 'fa-circle-check me-1'; // Use check icon for healthy with margin
+  } else {
+    return 'fa-circle-exclamation me-1'; // Default warning icon with margin
+  }
+};
+
+// Add a computed property to check maintenance mode
+const isMaintenanceMode = computed(() => {
+  return props.clusterData.maintenance === "true";
+});
 </script>
 
 <style scoped>

pvc-vue/src/components/ConfigPanel.vue

@@ -36,15 +36,14 @@
           </div>
 
           <div class="mb-3">
-            <label for="updateInterval" class="form-label">Update Interval (ms)</label>
+            <label for="updateInterval" class="form-label">Update Interval (seconds)</label>
             <input
               type="number"
               class="form-control"
               id="updateInterval"
-              v-model="formData.updateInterval"
+              v-model.number="formData.updateInterval"
-              min="1000"
+              min="1"
-              step="1000"
+              max="3600"
-              required
             >
           </div>
 
@@ -77,7 +76,7 @@ const emit = defineEmits(['update:modelValue', 'save']);
 const formData = ref({
   apiUri: props.config.apiUri || '',
   apiKey: props.config.apiKey || '',
-  updateInterval: props.config.updateInterval || 5000
+  updateInterval: props.config.updateInterval / 1000
 });
 
 const saveConfig = () => {

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> 

pvc-vue/src/components/charts/HealthChart.vue

@@ -50,7 +50,11 @@ const props = defineProps({
   },
   chartData: {
     type: Object,
-    default: () => ({ labels: [], data: [] })
+    default: () => ({ labels: [], data: [], maintenance: [] })
+  },
+  maintenance: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -66,7 +70,15 @@ const chartOptions = {
     },
     tooltip: {
       callbacks: {
-        label: (context) => `${context.parsed.y}%`
+        label: (context) => {
+          const dataPoint = context.dataIndex;
+          const maintenanceData = props.chartData.maintenance || [];
+          const isInMaintenance = maintenanceData[dataPoint];
+          
+          return isInMaintenance 
+            ? `${context.parsed.y}% (Maintenance)` 
+            : `${context.parsed.y}%`;
+        }
       }
     },
     annotation: {
@@ -117,9 +129,14 @@ const chartOptions = {
   }
 };
 
-// Helper function to get health color based on value
+// Helper function to get health color based on value and maintenance status
-const getHealthColor = (value) => {
+const getHealthColor = (value, isInMaintenance) => {
-  if (value > 90) {
+  if (isInMaintenance) {
+    return {
+      border: 'rgba(13, 110, 253, 0.8)',  // Blue for maintenance
+      background: 'rgba(13, 110, 253, 0.1)'
+    };
+  } else if (value > 90) {
     return {
       border: 'rgba(40, 167, 69, 0.8)',  // Green
       background: 'rgba(40, 167, 69, 0.1)'
@@ -140,11 +157,13 @@ const getHealthColor = (value) => {
 const formattedChartData = computed(() => {
   const labels = props.chartData.labels || [];
   const data = props.chartData.data || [];
+  const maintenanceData = props.chartData.maintenance || [];
 
   // For single value or empty data
   if (data.length <= 1) {
     const value = data.length === 1 ? data[0] : props.value;
-    const color = getHealthColor(value);
+    const isInMaintenance = props.maintenance;
+    const color = getHealthColor(value, isInMaintenance);
 
     return {
       labels: labels.length ? labels : ['Health'],
@@ -173,16 +192,24 @@ const formattedChartData = computed(() => {
       data,
       segment: {
         borderColor: ctx => {
+          const index = ctx.p1DataIndex;
           const value = ctx.p1.parsed.y;
+          const isInMaintenance = maintenanceData[index];
+          
+          if (isInMaintenance) return 'rgba(13, 110, 253, 0.8)';  // Blue for maintenance
           if (value > 90) return 'rgba(40, 167, 69, 0.8)';  // Green
           if (value > 50) return 'rgba(255, 193, 7, 0.8)';  // Yellow
-          return 'rgba(220, 53, 69, 0.8)';                  // Red
+          return 'rgba(220, 53, 69, 0.8)';  // Red
         },
         backgroundColor: ctx => {
+          const index = ctx.p1DataIndex;
           const value = ctx.p1.parsed.y;
+          const isInMaintenance = maintenanceData[index];
+          
+          if (isInMaintenance) return 'rgba(13, 110, 253, 0.1)';  // Blue for maintenance
           if (value > 90) return 'rgba(40, 167, 69, 0.1)';  // Green
           if (value > 50) return 'rgba(255, 193, 7, 0.1)';  // Yellow
-          return 'rgba(220, 53, 69, 0.1)';                  // Red
+          return 'rgba(220, 53, 69, 0.1)';  // Red
         }
       },
       fill: true,
@@ -194,7 +221,8 @@ const formattedChartData = computed(() => {
       pointBorderColor: function(context) {
         const index = context.dataIndex;
         const value = context.dataset.data[index];
-        return getHealthColor(value).border;
+        const isInMaintenance = maintenanceData[index];
+        return getHealthColor(value, isInMaintenance).border;
       },
       pointBorderWidth: 1.5
     }]