Fix bug with VM name showing as filter

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>
-        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
-          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
-        </button>
+        <h5 class="text-white mb-0 text-center">
+          {{ clusterData.cluster_name || 'Cluster' }}
+        </h5>
       </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 }}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>
@@ -54,13 +71,14 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import ConfigPanel from './components/ConfigPanel.vue';
+import ConfigPanel from './components/general/ConfigPanel.vue';
 import { useApiStore } from './stores/api';
 
 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 = {};
@@ -129,7 +169,7 @@ const updateMetricsHistory = (timestamp, status) => {
 
     if (!metricsHistory.value.nodes[nodeName]) {
       metricsHistory.value.nodes[nodeName] = {
-        health: { labels: [], data: [] },
+        health: { labels: [], data: [], maintenance: [] },
         cpu: { labels: [], data: [] },
         memory: { labels: [], data: [] },
         allocated: { labels: [], data: [] }
@@ -157,8 +197,14 @@ const updateMetricsHistory = (timestamp, status) => {
 
       metricsHistory.value.nodes[nodeName][metric] = {
         labels: nodeLabels,
-        data: nodeData
+        data: nodeData,
+        ...(metric === 'health' ? { maintenance: [...(metricsHistory.value.nodes[nodeName][metric].maintenance || []), isInMaintenance] } : {})
       };
+      
+      // Trim maintenance array if needed
+      if (metric === 'health' && metricsHistory.value.nodes[nodeName][metric].maintenance.length > 180) {
+        metricsHistory.value.nodes[nodeName][metric].maintenance.shift();
+      }
     });
   });
 };
@@ -172,15 +218,32 @@ const updateDashboard = async () => {
   }
 
   try {
-    const status = await api.fetchStatus();
-    const nodes = await api.fetchNodes();
+    console.log(`${new Date().toISOString()} Starting API calls`);
+    
+    // Ensure all endpoints are called together in a single Promise.all
+    const [status, nodes, vms] = await Promise.all([
+      api.fetchStatus().then(res => {
+        console.log(`${new Date().toISOString()} Status API call complete`);
+        return res;
+      }),
+      api.fetchNodes().then(res => {
+        console.log(`${new Date().toISOString()} Nodes API call complete`);
+        return res;
+      }),
+      api.fetchVMs().then(res => {
+        console.log(`${new Date().toISOString()} VMs API call complete`);
+        return res;
+      })
+    ]);
 
     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);
@@ -199,7 +262,8 @@ const restartDashboard = () => {
     clearInterval(updateTimer);
   }
   updateDashboard();
-  updateTimer = setInterval(updateDashboard, api.config.updateInterval);
+  const intervalMs = api.config.updateInterval * 1000;
+  updateTimer = setInterval(updateDashboard, intervalMs);
 };
 
 onMounted(() => {
@@ -315,16 +379,16 @@ onUnmounted(() => {
 
 .sidebar-footer {
   margin-top: auto;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-top: 0.75rem;
+  padding: 0.75rem 0.25rem;
   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;
-  display: flex;
-  justify-content: center;
+  padding: 0.375rem;
+  height: 38px;
 }
 
 .content-grid {
@@ -420,8 +484,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/charts/HealthChart.vue

@@ -25,6 +25,7 @@ import { computed } from 'vue';
 import { Line } from 'vue-chartjs';
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import ValueCard from '../general/ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(
@@ -50,7 +51,11 @@ const props = defineProps({
   },
   chartData: {
     type: Object,
-    default: () => ({ labels: [], data: [] })
+    default: () => ({ labels: [], data: [], maintenance: [] })
+  },
+  maintenance: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -66,7 +71,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 +130,14 @@ const chartOptions = {
   }
 };
 
-// Helper function to get health color based on value
-const getHealthColor = (value) => {
-  if (value > 90) {
+// Helper function to get health color based on value and maintenance status
+const getHealthColor = (value, isInMaintenance) => {
+  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 +158,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 +193,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 +222,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
     }]

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

@@ -82,6 +82,7 @@ import {
   Tooltip,
   Legend
 } from 'chart.js';
+import ValueCard from '../general/ValueCard.vue';
 
 // Register Chart.js components
 ChartJS.register(

pvc-vue/src/components/general/CollapsibleSection.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="section-container" :class="{ 'collapsed': !isExpanded }">
+    <!-- Collapsed section indicator -->
+    <div v-if="!isExpanded" class="section-content-wrapper">
+      <div class="section-content">
+        <div class="collapsed-section-header">
+          <h5 class="section-title" v-if="title">{{ title }}</h5>
+        </div>
+      </div>
+      <div class="toggle-column">
+        <button class="section-toggle" @click="toggleSection">
+          <i class="fas fa-chevron-down"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Toggle button for expanded section -->
+    <div v-show="isExpanded" class="section-content-wrapper">
+      <div class="section-content">
+        <slot></slot>
+      </div>
+      <div class="toggle-column expanded">
+        <button class="section-toggle" @click="toggleSection">
+          <i class="fas fa-chevron-up"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  initiallyExpanded: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const isExpanded = ref(props.initiallyExpanded);
+
+const toggleSection = () => {
+  isExpanded.value = !isExpanded.value;
+};
+</script>
+
+<style scoped>
+.section-container {
+  position: relative;
+  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;
+}
+
+.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;
+}
+
+.section-toggle:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.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;
+}
+
+.toggle-column.expanded {
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
+}
+
+.section-container.collapsed {
+  margin-bottom: 0.5rem;
+}
+
+.section-container.collapsed .section-content-wrapper {
+  margin-bottom: 0;
+}
+
+.section-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #495057;
+}
+</style> 

pvc-vue/src/components/general/ConfigPanel.vue

@@ -36,16 +36,19 @@
           </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"
-              min="1000"
-              step="1000"
+              v-model.number="formData.updateInterval"
+              min="5"
+              max="300"
               required
             >
+            <div class="form-text">
+              Enter value in seconds (5-300, default: 15)
+            </div>
           </div>
 
           <div class="d-grid gap-2">
@@ -74,14 +77,20 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'save']);
 
+// Initialize form data with raw values from config
 const formData = ref({
   apiUri: props.config.apiUri || '',
   apiKey: props.config.apiKey || '',
-  updateInterval: props.config.updateInterval || 5000
+  updateInterval: props.config.updateInterval || 15 // Default to 15 seconds
 });
 
 const saveConfig = () => {
-  emit('save', { ...formData.value });
+  // Pass the raw values to parent
+  emit('save', {
+    apiUri: formData.value.apiUri,
+    apiKey: formData.value.apiKey,
+    updateInterval: formData.value.updateInterval // Pass seconds directly
+  });
 };
 
 const closePanel = () => {

pvc-vue/src/components/general/NodeSelectBar.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="node-select-bar">
+    <div class="node-select-row">
+      <button
+        v-for="node in nodes"
+        :key="node"
+        class="node-tab"
+        :class="{ 'active': modelValue === node }"
+        @click="selectNode(node)"
+      >
+        {{ node }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  nodes: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  value: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'select']);
+
+const selectedNode = ref(props.value || props.modelValue);
+
+const selectNode = (node) => {
+  selectedNode.value = node;
+  emit('update:modelValue', node);
+  emit('select', node);
+  
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
+};
+
+onMounted(() => {
+  // Restore selected node from localStorage if available
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodes.includes(savedNodeId)) {
+    // Only select if the node exists in the available nodes
+    selectedNode.value = savedNodeId;
+    emit('update:modelValue', savedNodeId);
+    emit('select', savedNodeId);
+  }
+});
+
+watch(() => props.value, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    selectedNode.value = newValue;
+  }
+});
+</script>
+
+<style scoped>
+.node-select-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: white;
+  border-radius: 0.25rem;
+  padding-top: 0.25rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.node-select-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
+}
+
+.node-tab {
+  padding: 0.45rem 0.75rem;
+  border: none;
+  background: none;
+  color: #495057;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.node-tab:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.node-tab.active {
+  color: #0d6efd;
+  background-color: rgba(13, 110, 253, 0.1);
+  border-bottom: 4px solid rgba(13, 110, 253, 0.25);
+  margin-bottom: -4px;
+}
+</style> 

pvc-vue/src/components/general/PageTitle.vue

@@ -21,7 +21,6 @@ defineProps({
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

pvc-vue/src/components/general/VMSearchBar.vue

@@ -0,0 +1,979 @@
+<template>
+  <div class="vm-selector-bar" ref="controlsBar">
+    <div class="vm-selector-row">
+      <button 
+        class="btn btn-outline-secondary list-toggle-btn" 
+        @click="toggleList"
+        :class="{ 
+          'active': showList && !isFilterActive,
+          'filtering': showList && isFilterActive
+        }"
+        :title="showList ? (isFilterActive ? 'Show all VMs' : 'Filter VMs') : 'Show VM list'"
+      >
+        <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="inputValue"
+          @input="handleSearch"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @click="handleSearchClick"
+          :class="{ 'search-active': showList && isFilterActive }"
+          class="form-control search-input"
+        >
+        <button 
+          v-if="shouldShowClearButton"
+          class="btn-clear" 
+          @click.stop="handleClearButton"
+          :title="showList ? 'Clear search' : 'Clear selected VM'"
+        >
+          <i class="fas fa-times"></i>
+        </button>
+      </div>
+      
+      <div class="filter-dropdown" ref="filterDropdown">
+        <button 
+          class="btn btn-outline-secondary dropdown-toggle" 
+          :disabled="!showList"
+          @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" ref="filterMenu">
+          <div class="filter-section">
+            <h6>State</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="handleFilterToggle('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="handleFilterToggle('nodes', node)"
+                >
+                  {{ node }}
+                </button>
+              </div>
+            </div>
+          </div>
+          
+          <div class="filter-actions">
+            <button class="btn btn-sm btn-outline-secondary" @click="handleResetFilters">Reset All</button>
+            <button class="btn btn-sm btn-primary" @click="showFilterMenu = false">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- VM List -->
+    <div v-if="showList" class="vm-list-container">
+      <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" ref="vmListContainer">
+        <button
+          v-for="vm in filteredVMs"
+          :key="vm.name"
+          :data-vm-name="vm.name"
+          class="vm-list-item"
+          :class="{ 'active': isVMSelected(vm.name) }"
+          @click="handleVMSelect(vm)"
+        >
+          <div v-if="isVMSelected(vm.name)" class="active-indicator"></div>
+          <div class="vm-item-content">
+            <div class="vm-name">{{ vm.name }}</div>
+            <div class="vm-state" :class="getStateClass(vm.state)">
+              <i class="fas fa-circle state-indicator"></i>
+              <span>{{ vm.state }}</span>
+            </div>
+            <div v-if="vm.node" class="vm-node">
+              <i class="fas fa-server node-icon"></i>
+              <span>{{ vm.node }}</span>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true
+  },
+  showList: {
+    type: Boolean,
+    required: true
+  },
+  showClearButton: {
+    type: Boolean,
+    default: true
+  },
+  vmList: {
+    type: Array,
+    required: true
+  },
+  selectedVM: {
+    type: String,
+    default: ''
+  },
+  vmFromUrl: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'search',
+  'focus',
+  'blur',
+  'clear',
+  'toggle-list',
+  'select-vm',
+  'toggle-filter',
+  'reset-filters',
+  'clear-vm'
+]);
+
+// UI state refs
+const showFilterMenu = ref(false);
+const filterDropdown = ref(null);
+const filterMenu = ref(null);
+const controlsBar = ref(null);
+const vmListContainer = ref(null);
+
+// Search state refs
+const inputValue = ref('');
+const searchText = ref('');
+const isFilterActive = ref(false);
+
+// Filter state
+const appliedFilters = ref({
+  states: {},
+  nodes: {}
+});
+
+// Add a computed property to determine if the clear button should be shown
+const shouldShowClearButton = computed(() => {
+  // Show when:
+  // 1. List is open and there's a search query
+  // 2. List is closed and there's a selected VM
+  return (props.showList && props.modelValue && props.showClearButton) || 
+         (!props.showList && (props.selectedVM || localStorage.getItem('selectedVMId')));
+});
+
+// Add a computed property to check if a VM is selected
+const isVMSelected = (vmName) => {
+  return props.selectedVM === vmName || 
+         props.vmFromUrl === vmName || 
+         localStorage.getItem('selectedVMId') === vmName;
+};
+
+// Initialize the component
+onMounted(() => {
+  // Set up click outside handler
+  document.addEventListener('click', handleClickOutside);
+  
+  // Get the selected VM from localStorage
+  const savedVMId = localStorage.getItem('selectedVMId');
+  
+  // Restore search text from localStorage if available
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  // Initialize input value based on context
+  if (!props.showList) {
+    // If list is closed, show the selected VM name in the input
+    const effectiveVM = props.selectedVM || props.vmFromUrl || savedVMId;
+    if (effectiveVM) {
+      // Find the VM in the list to get its full name
+      const vm = props.vmList.find(v => v.name === effectiveVM);
+      if (vm) {
+        inputValue.value = vm.name;
+      } else {
+        inputValue.value = effectiveVM;
+      }
+    }
+  } else if (props.showList) {
+    // If list is open
+    if (props.modelValue) {
+      // If there's a model value, use it
+      inputValue.value = props.modelValue;
+      searchText.value = props.modelValue;
+    } else if (savedSearchText) {
+      // If there's saved search text, restore it
+      inputValue.value = savedSearchText;
+      searchText.value = savedSearchText;
+      emit('update:modelValue', savedSearchText);
+    }
+  }
+  
+  // Always restore the search text ref from localStorage
+  if (savedSearchText) {
+    searchText.value = savedSearchText;
+  }
+  
+  // Load saved filters
+  loadFiltersFromLocalStorage();
+  
+  // If the list is visible on mount, scroll to selected VM
+  if (props.showList) {
+    nextTick(() => {
+      scrollToSelectedVM();
+    });
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+// Handle search input
+const handleSearch = (event) => {
+  const value = event.target.value;
+  inputValue.value = value;
+  
+  // Update search text ref
+  searchText.value = value;
+  
+  // Update the model
+  emit('update:modelValue', value);
+  emit('search', value);
+  
+  // Save to localStorage for search history
+  if (value) {
+    localStorage.setItem('vmSearchText', value);
+  } else {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Update filter state
+  isFilterActive.value = !!value;
+};
+
+// Handle focus on search input
+const handleFocus = (event) => {
+  // If the list is not shown, show it
+  if (!props.showList) {
+    emit('toggle-list');
+  } else {
+    // If the list is already shown, activate filtering
+    isFilterActive.value = true;
+    
+    // Restore search text if available
+    if (searchText.value) {
+      inputValue.value = searchText.value;
+      emit('update:modelValue', searchText.value);
+    }
+  }
+  
+  emit('focus', event);
+};
+
+// Handle blur on search input
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+
+// Handle click on search input
+const handleSearchClick = () => {
+  if (props.showList) {
+    // When clicking the search input while list is open, activate filtering
+    isFilterActive.value = true;
+    
+    // Restore search text if available
+    if (searchText.value && searchText.value !== inputValue.value) {
+      inputValue.value = searchText.value;
+      emit('update:modelValue', searchText.value);
+    }
+  }
+};
+
+// Toggle the VM list
+const toggleList = () => {
+  emit('toggle-list');
+  
+  // When toggling the list, ensure search text is preserved
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  if (!props.showList) {
+    // When opening the list, restore search text if available
+    if (savedSearchText && !inputValue.value) {
+      nextTick(() => {
+        inputValue.value = savedSearchText;
+        searchText.value = savedSearchText;
+        emit('update:modelValue', savedSearchText);
+      });
+    }
+  }
+};
+
+// Handle clear button click
+const handleClearButton = () => {
+  if (props.showList) {
+    // If the list is open, clear the search
+    clearSearch();
+  } else {
+    // If the list is closed, clear the selected VM
+    clearSelectedVM();
+  }
+};
+
+// Clear search
+const clearSearch = () => {
+  inputValue.value = '';
+  searchText.value = '';
+  isFilterActive.value = false;
+  
+  // Clear search text from localStorage
+  localStorage.removeItem('vmSearchText');
+  
+  emit('update:modelValue', '');
+  emit('clear');
+  
+  // Scroll to selected VM after clearing search
+  nextTick(() => {
+    scrollToSelectedVM();
+    
+    // Focus the search input after clearing
+    const searchInput = document.querySelector('.search-input');
+    if (searchInput) {
+      searchInput.focus();
+    }
+  });
+};
+
+// Clear selected VM
+const clearSelectedVM = () => {
+  // Clear the input value
+  inputValue.value = '';
+  
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Don't clear vmSearchText - that's for search history
+  // Only clear if the input value matches the selected VM
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  if (savedSearchText === savedVMId) {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Show the VM list
+  emit('toggle-list');
+  
+  // Emit event to parent component
+  emit('clear-vm');
+};
+
+// Select a VM
+const handleVMSelect = (vm) => {
+  console.log('Selecting VM:', vm);
+  
+  // Update the input value to show the selected VM
+  inputValue.value = vm.name;
+  
+  // Save the current search text before selecting a VM
+  if (props.modelValue) {
+    searchText.value = props.modelValue;
+    // Save to localStorage
+    localStorage.setItem('vmSearchText', props.modelValue);
+  }
+  
+  // Save selected VM to localStorage
+  localStorage.setItem('selectedVMId', vm.name);
+  
+  emit('select-vm', vm);
+};
+
+// Handle click outside
+const handleClickOutside = (event) => {
+  // Handle filter menu clicks
+  if (showFilterMenu.value && 
+      filterMenu.value && 
+      !filterMenu.value.contains(event.target) && 
+      !filterDropdown.value.contains(event.target)) {
+    showFilterMenu.value = false;
+  }
+  
+  // Handle closing the VM list when clicking outside
+  if (props.showList && 
+      controlsBar.value && 
+      !controlsBar.value.contains(event.target)) {
+    emit('toggle-list');
+  }
+};
+
+// Toggle filter menu
+const toggleFilterMenu = () => {
+  showFilterMenu.value = !showFilterMenu.value;
+};
+
+// Filter toggle
+const handleFilterToggle = (type, value) => {
+  appliedFilters.value[type][value] = !appliedFilters.value[type][value];
+  saveFiltersToLocalStorage();
+};
+
+// Reset filters
+const handleResetFilters = () => {
+  Object.keys(appliedFilters.value.states).forEach(state => {
+    appliedFilters.value.states[state] = false;
+  });
+  Object.keys(appliedFilters.value.nodes).forEach(node => {
+    appliedFilters.value.nodes[node] = false;
+  });
+  saveFiltersToLocalStorage();
+  showFilterMenu.value = false;
+};
+
+// Computed properties
+const filteredVMs = computed(() => {
+  let filtered = [...props.vmList];
+  
+  // Apply text filter only if filtering is active
+  if (isFilterActive.value && props.modelValue) {
+    const query = props.modelValue.toLowerCase();
+    filtered = filtered.filter(vm => 
+      vm.name.toLowerCase().includes(query)
+    );
+  }
+  
+  // Apply state filters
+  const activeStates = Object.entries(appliedFilters.value.states)
+    .filter(([_, isActive]) => isActive)
+    .map(([state]) => state);
+  if (activeStates.length > 0) {
+    filtered = filtered.filter(vm => activeStates.includes(vm.state));
+  }
+  
+  // Apply node filters
+  const 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;
+});
+
+// Calculate available states from vmList
+const availableStates = computed(() => {
+  const states = new Set();
+  props.vmList.forEach(vm => {
+    if (vm.state) states.add(vm.state);
+  });
+  
+  // Convert to array and ensure all important states are included
+  const statesArray = Array.from(states);
+  const importantStates = ['start', 'disable', 'migrate', 'unmigrate', 'provision', 'mirror', 'stop', 'fail', 'shutdown', 'restart'];
+  
+  // Add any missing important states
+  importantStates.forEach(state => {
+    if (!statesArray.includes(state)) {
+      statesArray.push(state);
+    }
+  });
+  
+  // Sort with 'start' first, then alphabetically
+  return statesArray.sort((a, b) => {
+    if (a.toLowerCase() === 'start') return -1;
+    if (b.toLowerCase() === 'start') return 1;
+    return a.localeCompare(b);
+  });
+});
+
+// Calculate available nodes from vmList
+const availableNodes = computed(() => {
+  const nodes = new Set();
+  props.vmList.forEach(vm => {
+    if (vm.node) nodes.add(vm.node);
+  });
+  return Array.from(nodes).sort();
+});
+
+// Initialize filters when states/nodes change
+watch([availableStates, availableNodes], ([states, nodes]) => {
+  // Initialize any new states
+  states.forEach(state => {
+    if (!(state in appliedFilters.value.states)) {
+      appliedFilters.value.states[state] = false;
+    }
+  });
+  
+  // Initialize any new nodes
+  nodes.forEach(node => {
+    if (!(node in appliedFilters.value.nodes)) {
+      appliedFilters.value.nodes[node] = false;
+    }
+  });
+  
+  // Save updated filters
+  saveFiltersToLocalStorage();
+});
+
+// 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;
+});
+
+// Update function name from getStatusClass to getStateClass
+const getStateClass = (state) => {
+  if (!state) return 'status-unknown';
+  
+  const lowerState = state.toLowerCase();
+  
+  // Green for running VMs
+  if (lowerState === 'start') {
+    return 'status-running';
+  }
+  
+  // Blue for provisioning, migration, etc.
+  if (['disable', 'migrate', 'unmigrate', 'provision'].includes(lowerState)) {
+    return 'status-provisioning';
+  }
+  
+  // Purple for mirror
+  if (lowerState === 'mirror') {
+    return 'status-mirror';
+  }
+  
+  // Red for stopped or failed VMs
+  if (['stop', 'fail'].includes(lowerState)) {
+    return 'status-stopped';
+  }
+  
+  // Yellow for shutdown or restart
+  if (['shutdown', 'restart'].includes(lowerState)) {
+    return 'status-restarting';
+  }
+  
+  // Default to unknown (black) for any other states
+  return 'status-unknown';
+};
+
+// Watch for changes in showList
+watch(() => props.showList, (isVisible) => {
+  if (!isVisible) {
+    // When list is closed, show selected VM
+    const effectiveVM = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
+    if (effectiveVM) {
+      inputValue.value = effectiveVM;
+      
+      // Don't clear the model value when closing the list
+      // This ensures the search text is preserved
+      if (!props.modelValue && searchText.value) {
+        emit('update:modelValue', searchText.value);
+      }
+    }
+  } else {
+    // When list is opened, show search text if available
+    if (searchText.value) {
+      inputValue.value = searchText.value;
+      // Ensure the model value is updated to match the search text
+      if (props.modelValue !== searchText.value) {
+        emit('update:modelValue', searchText.value);
+      }
+    } else {
+      inputValue.value = '';
+    }
+    
+    // Scroll to selected VM when list opens
+    scrollToSelectedVM();
+  }
+});
+
+// Watch for changes in selectedVM or vmFromUrl
+watch([() => props.selectedVM, () => props.vmFromUrl], ([selectedVM, vmFromUrl]) => {
+  if (!props.showList) {
+    const effectiveVM = selectedVM || vmFromUrl || localStorage.getItem('selectedVMId');
+    if (effectiveVM) {
+      inputValue.value = effectiveVM;
+    }
+  }
+});
+
+// Add a function to scroll to the selected VM
+const scrollToSelectedVM = () => {
+  nextTick(() => {
+    // Find the first selected VM
+    const selectedVMName = props.selectedVM || props.vmFromUrl || localStorage.getItem('selectedVMId');
+    if (selectedVMName && vmListContainer.value) {
+      const activeElement = vmListContainer.value.querySelector(`[data-vm-name="${selectedVMName}"]`);
+      if (activeElement) {
+        // Scroll the element into view
+        activeElement.scrollIntoView({ block: 'center', behavior: 'smooth' });
+      }
+    }
+  });
+};
+
+// Add localStorage persistence for filters
+const saveFiltersToLocalStorage = () => {
+  localStorage.setItem('vmFilters', JSON.stringify(appliedFilters.value));
+};
+
+const loadFiltersFromLocalStorage = () => {
+  const savedFilters = localStorage.getItem('vmFilters');
+  if (savedFilters) {
+    try {
+      const parsedFilters = JSON.parse(savedFilters);
+      // Merge saved filters with current filters to handle new states/nodes
+      appliedFilters.value = {
+        states: { ...appliedFilters.value.states, ...parsedFilters.states },
+        nodes: { ...appliedFilters.value.nodes, ...parsedFilters.nodes }
+      };
+    } catch (e) {
+      console.error('Error parsing saved filters:', e);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.vm-selector-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background-color: white;
+  border-radius: 0.25rem;
+  padding-top: 0.25rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.vm-selector-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.75rem !important;
+}
+
+.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;
+  transition: color 0.2s;
+  z-index: 5; /* Ensure it's above other elements */
+}
+
+.btn-clear:hover {
+  color: #dc3545; /* Red color on hover */
+}
+
+.list-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.list-toggle-btn.active {
+  background-color: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
+
+.list-toggle-btn.filtering {
+  background-color: white;
+  color: #212529;
+  border-color: #6c757d;
+}
+
+.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;
+}
+
+/* VM List styles */
+.vm-list-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  overflow: hidden;
+  margin-top: -0.5rem;
+  padding-bottom: 0.25rem;
+}
+
+.vm-list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  padding-bottom: 0.25rem;
+}
+
+.vm-list-item {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: none !important;
+  background-color: white;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  width: 100%;
+}
+
+.vm-list-item:last-child {
+  border-bottom: none !important;
+  margin-bottom: 0.25rem;
+}
+
+.vm-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+}
+
+.vm-list-item.active {
+  background-color: rgba(13, 110, 253, 0.15) !important;
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+.vm-list-item.active::before {
+  content: '';
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 4px !important;
+  background-color: #0d6efd !important;
+  z-index: 2 !important;
+}
+
+.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active {
+  background-color: rgba(13, 110, 253, 0.15) !important;
+  position: relative !important;
+}
+
+.vm-selector-bar .vm-list-container .vm-list .vm-list-item.active::before {
+  content: '';
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 4px !important;
+  background-color: #0d6efd !important;
+}
+
+.vm-item-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+}
+
+.vm-name {
+  font-weight: 500;
+  flex: 1;
+}
+
+.vm-state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  width: 100px;
+}
+
+.vm-node {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #6c757d;
+  width: 100px;
+}
+
+.node-icon {
+  font-size: 0.75rem;
+}
+
+.state-indicator {
+  font-size: 0.625rem;
+}
+
+/* Status colors - updated */
+.status-running {
+  color: #28a745; /* Green */
+}
+
+.status-stopped {
+  color: #dc3545; /* Red */
+}
+
+.status-provisioning {
+  color: #0d6efd; /* Blue */
+}
+
+.status-mirror {
+  color: #6f42c1; /* Purple */
+}
+
+.status-restarting {
+  color: #ffc107; /* Yellow */
+}
+
+.no-vms-message {
+  padding: 2rem;
+  text-align: center;
+  color: #6c757d;
+}
+
+/* Filter menu styles */
+.filter-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 1000;
+  min-width: 350px;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  background-color: white;
+  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;
+  padding-bottom: 0.25rem;
+}
+
+.filter-options-dropdown {
+  max-height: 200px;
+  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;
+}
+
+.active-indicator {
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 4px !important;
+  background-color: #0d6efd !important;
+  z-index: 2 !important;
+}
+
+.search-input.search-active {
+  border-color: #0d6efd;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+</style> 

pvc-vue/src/components/pages/nodes/NodeOverview.vue

@@ -0,0 +1,760 @@
+<template>
+  <NodeSelectBar
+    v-model="selectedNode"
+    :nodes="availableNodes"
+    @select="handleNodeSelect"
+  />
+
+  <!-- Node Details -->
+  <div v-if="selectedNodeData" class="content-container">
+    <!-- Information Cards Section -->
+    <CollapsibleSection title="Node Information" :initially-expanded="sections.info">
+      <div class="info-row">
+        <!-- Card 1: Daemon State -->
+        <ValueCard
+          title="Daemon State"
+          :value="selectedNodeData.daemon_state || 'Unknown'"
+          :bg-color="getDaemonStateColor(selectedNodeData.daemon_state)"
+        />
+
+        <!-- Card 2: Coordinator State -->
+        <ValueCard
+          title="Coordinator State"
+          :value="selectedNodeData.coordinator_state || 'Unknown'"
+          :bg-color="getCoordinatorStateColor(selectedNodeData.coordinator_state)"
+        />
+
+        <!-- Card 3: Domain State -->
+        <ValueCard
+          title="Domain State"
+          :value="selectedNodeData.domain_state || 'Unknown'"
+          :bg-color="getDomainStateColor(selectedNodeData.domain_state)"
+        />
+
+        <!-- Card 4: PVC Version -->
+        <ValueCard
+          title="PVC Version"
+          :value="selectedNodeData.pvc_version || 'Unknown'"
+        />
+
+        <!-- Card 5: Kernel Version -->
+        <ValueCard
+          title="Kernel Version"
+          :value="selectedNodeData.kernel || 'Unknown'"
+        />
+
+        <!-- Card 6: VM Count -->
+        <ValueCard
+          title="VM Count"
+          :value="selectedNodeData.domains_count || 0"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Utilization Graphs Section -->
+    <CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
+      <div class="graphs-row">
+        <!-- Health Chart -->
+        <HealthChart
+          title="Node Health"
+          :value="selectedNodeData.health || 0"
+          :chart-data="nodeHealthChartData"
+          :maintenance="isMaintenanceMode"
+        />
+
+        <!-- CPU Utilization Chart -->
+        <CPUChart
+          title="CPU Utilization"
+          :value="calculateCpuUtilization(selectedNodeData)"
+          :chart-data="nodeCpuChartData"
+        />
+
+        <!-- Memory Utilization Chart -->
+        <MemoryChart
+          title="Memory Utilization"
+          :value="calculateMemoryUtilization(selectedNodeData)"
+          :chart-data="nodeMemoryChartData"
+        />
+
+        <!-- Allocated Memory Chart -->
+        <StorageChart
+          title="Allocated Memory"
+          :value="calculateAllocatedMemory(selectedNodeData)"
+          :chart-data="nodeAllocatedMemoryChartData"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- CPU Resources Section -->
+    <CollapsibleSection title="CPU Resources" :initially-expanded="sections.cpu">
+      <div class="resources-row-cpu">
+        <!-- Card 1: Host CPUs -->
+        <ValueCard
+          title="Host CPUs"
+          :value="selectedNodeData.cpu_count || 0"
+        />
+
+        <!-- Card 2: Guest CPUs -->
+        <ValueCard
+          title="Guest CPUs"
+          :value="selectedNodeData.vcpu?.allocated || 0"
+        />
+
+        <!-- Card 3: Load -->
+        <ValueCard
+          title="Load"
+          :value="selectedNodeData.load || 0"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Memory Resources Section -->
+    <CollapsibleSection title="Memory Resources" :initially-expanded="sections.resources">
+      <div class="resources-row-memory">
+        <!-- Total Memory -->
+        <ValueCard
+          title="Total Memory"
+          :value="formatMemory(selectedNodeData.memory?.total)"
+        />
+
+        <!-- Used Memory -->
+        <ValueCard
+          title="Used Memory"
+          :value="formatMemory(selectedNodeData.memory?.used)"
+        />
+
+        <!-- Free Memory -->
+        <ValueCard
+          title="Free Memory"
+          :value="formatMemory(selectedNodeData.memory?.free)"
+        />
+
+        <!-- Allocated Memory -->
+        <ValueCard
+          title="Allocated Memory"
+          :value="formatMemory(selectedNodeData.memory?.allocated)"
+        />
+
+        <!-- Provisioned Memory -->
+        <ValueCard
+          title="Provisioned Memory"
+          :value="formatMemory(selectedNodeData.memory?.provisioned)"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Running VMs Section -->
+    <CollapsibleSection title="Running VMs" :initially-expanded="sections.vms">
+      <div class="vm-list-row">
+        <NodeVMList 
+          :vmData="props.vmData"
+          :nodeData="props.nodeData"
+          :nodeName="selectedNode"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Health Details Section -->
+    <CollapsibleSection title="Health Details" :initially-expanded="sections.health">
+      <div class="health-details-row">
+        <!-- Health messages card -->
+        <div class="metric-card">
+          <div class="card-header">
+            <h6 class="card-title mb-0 metric-label">Health Messages</h6>
+          </div>
+          <div class="card-body">
+            <div class="messages-list">
+              <template v-if="nodeHealthMessages.length">
+                <div
+                  v-for="(msg, idx) in nodeHealthMessages"
+                  :key="idx"
+                  :class="[
+                    'health-message',
+                    getHealthMessageClass(msg),
+                  ]"
+                >
+                  <div class="message-header">
+                    <i class="fas" :class="getMessageIcon(msg)"></i>
+                    <span class="message-id">{{ msg.name }}</span>
+                    <span v-if="msg.health_delta > 0" class="health-delta">
+                      (-{{ msg.health_delta }}%)
+                    </span>
+                  </div>
+                  <div class="message-content">
+                    {{ getMessageContent(msg) }}
+                  </div>
+                </div>
+              </template>
+              <div v-else class="health-message healthy">
+                <div class="message-header">
+                  <i class="fas fa-circle-check me-1"></i>
+                  <span class="message-id">Node healthy</span>
+                </div>
+                <div class="message-content">
+                  Node is at full health with no faults
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+
+  <!-- No node selected message -->
+  <div v-else class="no-node-selected">
+    <p>Select a node to view details</p>
+  </div>
+</template>
+
+<script setup>
+// Import all the same components and functions from the original Nodes.vue
+import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
+import CPUChart from '../../charts/CPUChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import NodeSelectBar from '../../general/NodeSelectBar.vue';
+import NodeVMList from './NodeVMList.vue';
+import { useRouter, useRoute } from 'vue-router';
+
+// Move all the props, refs, computed properties, and functions from Nodes.vue
+const props = defineProps({
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+
+// State for sections (expanded/collapsed)
+const sections = ref({
+  info: true,
+  graphs: true,
+  cpu: true,
+  resources: true,
+  vms: true,
+  health: true
+});
+
+// State for selected node and tab scrolling
+const selectedNode = ref('');
+const tabsContainer = ref(null);
+const showLeftScroll = ref(false);
+const showRightScroll = ref(false);
+
+// Get the selected node data
+const selectedNodeData = computed(() => {
+  if (!selectedNode.value || !props.nodeData) return null;
+  return props.nodeData.find(node => node.name === selectedNode.value) || null;
+});
+
+// Select a node
+const selectNode = (nodeName) => {
+  selectedNode.value = nodeName;
+
+  // Scroll the selected tab into view
+  nextTick(() => {
+    const activeTab = tabsContainer.value?.querySelector('.node-tab.active');
+    if (activeTab) {
+      activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+
+    // Check if scroll buttons should be shown
+    checkScrollButtons();
+  });
+};
+
+// Check if scroll buttons should be shown
+const checkScrollButtons = () => {
+  if (!tabsContainer.value) return;
+
+  const { scrollLeft, scrollWidth, clientWidth } = tabsContainer.value;
+
+  // Show left scroll button if not at the beginning
+  showLeftScroll.value = scrollLeft > 0;
+
+  // Show right scroll button if not at the end
+  showRightScroll.value = scrollLeft + clientWidth < scrollWidth - 1; // -1 for rounding errors
+};
+
+// Scroll tabs left or right
+const scrollTabs = (direction) => {
+  if (!tabsContainer.value) return;
+
+  const scrollAmount = tabsContainer.value.clientWidth / 2;
+  const currentScroll = tabsContainer.value.scrollLeft;
+
+  if (direction === 'left') {
+    tabsContainer.value.scrollTo({
+      left: Math.max(0, currentScroll - scrollAmount),
+      behavior: 'smooth'
+    });
+  } else {
+    tabsContainer.value.scrollTo({
+      left: currentScroll + scrollAmount,
+      behavior: 'smooth'
+    });
+  }
+
+  // Check scroll buttons after scrolling
+  setTimeout(checkScrollButtons, 300);
+};
+
+// Calculate CPU utilization (load / cpu_count * 100)
+const calculateCpuUtilization = (nodeData) => {
+  if (!nodeData || !nodeData.load || !nodeData.cpu_count) return 0;
+
+  const utilization = (nodeData.load / nodeData.cpu_count) * 100;
+  return Math.round(utilization);
+};
+
+// Calculate memory utilization
+const calculateMemoryUtilization = (node) => {
+  if (!node || !node.memory) return 0;
+  const used = node.memory.used || 0;
+  const total = node.memory.total || 1; // Avoid division by zero
+  if (total === 0) return 0;
+  return Math.round((used / total) * 100);
+};
+
+// Calculate allocated memory
+const calculateAllocatedMemory = (node) => {
+  if (!node || !node.memory) return 0;
+  const allocated = node.memory.allocated || 0;
+  const total = node.memory.total || 1; // Avoid division by zero
+  if (total === 0) return 0;
+  return Math.round((allocated / total) * 100);
+};
+
+// Format memory values
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  // The values are already in MB, so we just need to convert to GB
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+// Check if the cluster is in maintenance mode
+const isMaintenanceMode = computed(() => {
+  return props.clusterData.maintenance === "true";
+});
+
+// Update the nodeHealthChartData computed property to include maintenance data
+const nodeHealthChartData = computed(() => {
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value?.name];
+
+  if (nodeMetrics && nodeMetrics.health && nodeMetrics.health.data.length > 0) {
+    return {
+      labels: nodeMetrics.health.labels,
+      data: nodeMetrics.health.data,
+      maintenance: nodeMetrics.health.maintenance || []
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Health'],
+    data: [selectedNodeData.value?.health || 0],
+    maintenance: [isMaintenanceMode.value]
+  };
+});
+
+const nodeCpuChartData = computed(() => {
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value?.name];
+
+  if (nodeMetrics && nodeMetrics.cpu && nodeMetrics.cpu.data.length > 0) {
+    return {
+      labels: nodeMetrics.cpu.labels,
+      data: nodeMetrics.cpu.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['CPU'],
+    data: [calculateCpuUtilization(selectedNodeData.value)]
+  };
+});
+
+const nodeMemoryChartData = computed(() => {
+  if (!selectedNodeData.value) return { labels: [], data: [] };
+
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value.name];
+
+  if (nodeMetrics && nodeMetrics.memory && nodeMetrics.memory.data.length > 0) {
+    return {
+      labels: nodeMetrics.memory.labels,
+      data: nodeMetrics.memory.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Memory'],
+    data: [calculateMemoryUtilization(selectedNodeData.value)]
+  };
+});
+
+const nodeAllocatedMemoryChartData = computed(() => {
+  if (!selectedNodeData.value) return { labels: [], data: [] };
+
+  // Get node metrics history if available
+  const nodeMetrics = props.metricsData.nodes?.[selectedNodeData.value.name];
+
+  if (nodeMetrics && nodeMetrics.allocated && nodeMetrics.allocated.data.length > 0) {
+    return {
+      labels: nodeMetrics.allocated.labels,
+      data: nodeMetrics.allocated.data
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Allocated'],
+    data: [calculateAllocatedMemory(selectedNodeData.value)]
+  };
+});
+
+// Helper functions for state colors
+const getDaemonStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'run') return 'green';
+  if (['init', 'shutdown'].includes(state)) return 'yellow';
+  if (['stop', 'dead', 'fenced'].includes(state)) return 'red';
+  return 'blue';
+};
+
+const getCoordinatorStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'primary') return 'green';
+  if (state === 'secondary') return 'blue';
+  if (state === 'hypervisor') return 'gray';
+  return '';
+};
+
+const getDomainStateColor = (state) => {
+  if (!state) return '';
+
+  if (state === 'ready') return 'green';
+  if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
+  return 'gray';
+};
+
+// Initialize the component
+onMounted(() => {
+  // Check if there's a saved node selection
+  const savedNodeId = localStorage.getItem('selectedNodeId');
+  if (savedNodeId && props.nodeData.some(node => node.name === savedNodeId)) {
+    selectNode(savedNodeId);
+  } else if (props.nodeData && props.nodeData.length > 0) {
+    // Fall back to selecting the first node
+    selectNode(props.nodeData[0].name);
+  }
+
+  // Check if scroll buttons should be shown
+  window.addEventListener('resize', checkScrollButtons);
+  nextTick(checkScrollButtons);
+});
+
+// Watch for changes in the nodes data
+watch(() => props.nodeData, () => {
+  // If the currently selected node no longer exists, select the first available node
+  if (props.nodeData && props.nodeData.length > 0 && !props.nodeData.find(node => node.name === selectedNode.value)) {
+    selectNode(props.nodeData[0].name);
+  }
+
+  // Check if scroll buttons should be shown
+  nextTick(checkScrollButtons);
+}, { deep: true });
+
+// Clean up event listeners
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScrollButtons);
+});
+
+const availableNodes = computed(() => {
+  return props.nodeData.map(node => node.name).sort();
+});
+
+const handleNodeSelect = (node) => {
+  selectedNode.value = node;
+  // Save to localStorage
+  localStorage.setItem('selectedNodeId', node);
+};
+
+// Process node health messages
+const nodeHealthMessages = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.health_details) {
+    return [];
+  }
+
+  const healthDetails = selectedNodeData.value.health_details;
+  // Make sure we're getting an array of health details
+  if (Array.isArray(healthDetails)) {
+    return healthDetails;
+  } else if (typeof healthDetails === 'object') {
+    // If it's an object, convert to array
+    return Object.values(healthDetails);
+  }
+  return [];
+});
+
+// Helper function to determine message class based on health status
+const getHealthMessageClass = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'delta-high'; // Red for critical issues (>=25%)
+  }
+  if (msg.health_delta > 0) {
+    return 'delta-medium';
+  }
+  return 'delta-low'; // Green for healthy items
+};
+
+// Helper function to get appropriate icon for health message
+const getMessageIcon = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'fa-circle-exclamation me-1'; // Warning icon for significant issues
+  }
+  if (msg.health_delta > 0) {
+    return 'fa-info-circle me-1'; // Info icon for minor issues
+  }
+  return 'fa-circle-check me-1'; // Checkmark for healthy items
+};
+
+// Helper function to format message content
+const getMessageContent = (msg) => {
+  return msg.message || 'No details available';
+};
+
+const selectVM = (vmId) => {
+  // Store the VM ID in localStorage so it will be selected when the VMs page loads
+  localStorage.setItem('selectedVMId', vmId);
+};
+</script>
+
+<style scoped>
+/* Add these missing styles from the original Nodes.vue */
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.info-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .vm-list-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.health-details-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Responsive grid layouts */
+@media (min-width: 1201px) {
+  .info-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .graphs-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .resources-row-cpu {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .health-details-row {
+    grid-template-columns: 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-cpu {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .resources-row-memory {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 800px) {
+  .info-row,
+  .graphs-row,
+  .resources-row-cpu,
+  .resources-row-memory {
+    grid-template-columns: 1fr;
+  }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  align-self: flex-start;
+}
+
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  position: relative;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  /* Default styling - will be overridden by delta classes */
+  background: rgba(108, 117, 125, 0.15);
+  color: #495057;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.message-id {
+  font-weight: 600;
+}
+
+.message-content {
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: pre-line; /* Allow line breaks in content */
+  color: inherit;
+  opacity: 0.9;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Green background */
+  color: #0d5524;
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.15);  /* Yellow background */
+  color: #856404;
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.15);  /* Red background */
+  color: #721c24;
+}
+
+.delta-info {
+  background: rgba(13, 110, 253, 0.15);  /* Blue background */
+  color: #0d6efd;
+}
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.metric-card {
+  min-width: 180px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.metric-card .card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: flex-start;
+  align-items: center;
+}
+</style> 

pvc-vue/src/components/pages/nodes/NodeStatus.vue.bak

@@ -38,6 +38,7 @@
 
 <script setup>
 import { ref } from 'vue';
+import ValueCard from '../../general/ValueCard.vue';
 
 const props = defineProps({
   nodeData: {

pvc-vue/src/components/pages/nodes/NodeVMList.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="vms-container">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">Running VMs</span>
+      </h6>
+    </div>
+    <div v-if="!runningDomains || runningDomains.length === 0" class="no-vms">
+      No VMs running on this node
+    </div>
+    <div v-else class="vm-list" :style="{ 
+      'grid-template-columns': `repeat(auto-fill, minmax(150px, 1fr))` 
+    }">
+      <div 
+        v-for="vmName in runningDomains" 
+        :key="vmName" 
+        class="vm-item"
+        @click="selectVMAndNavigate(vmName)"
+      >
+        {{ vmName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { navigateToVM } from '../../../services/navigation';
+
+const props = defineProps({
+  vmData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  nodeName: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+
+// Get the selected node data
+const nodeData = computed(() => {
+  if (!props.nodeName || !props.nodeData || props.nodeData.length === 0) {
+    console.log('No node selected or no node data available');
+    return null;
+  }
+  
+  const node = props.nodeData.find(node => node.name === props.nodeName);
+  console.log(`Node data for ${props.nodeName}:`, node);
+  return node;
+});
+
+// Get running domains from the node data
+const runningDomains = computed(() => {
+  if (!nodeData.value || !nodeData.value.running_domains) {
+    console.log('No running domains found for node:', props.nodeName);
+    return [];
+  }
+  
+  console.log(`Found ${nodeData.value.running_domains.length} running domains on node ${props.nodeName}:`, nodeData.value.running_domains);
+  return nodeData.value.running_domains;
+});
+
+// Navigate to VM details using the navigation service
+const selectVMAndNavigate = (vmName) => {
+  navigateToVM(vmName, router);
+};
+</script>
+
+<style scoped>
+.vms-container {
+  min-width: 180px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+}
+
+.no-vms {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #6c757d;
+  font-style: italic;
+}
+
+.vm-list {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.vm-item {
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.015);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 500;
+  color: #333;
+  transition: all 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  display: block;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.vm-node {
+  font-size: 0.7rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+</style> 

pvc-vue/src/components/pages/overview/ClusterOverview.vue

@@ -1,268 +1,181 @@
 <template>
-  <div class="overview-container">
+  <div class="content-container">
     <!-- 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">Cluster Information</h6>
-          </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('info')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
+    <CollapsibleSection title="Cluster Information" :initially-expanded="sections.info">
+      <div class="metrics-row">
+        <!-- Card 1: PVC Version -->
+        <ValueCard 
+          title="PVC Version" 
+          :value="clusterData.pvc_version || 'Unknown'" 
+        />
+
+        <!-- Card 2: Primary Node -->
+        <ValueCard 
+          title="Primary Node" 
+          :value="clusterData.primary_node || 'N/A'" 
+        />
+
+        <!-- Card 3: Nodes -->
+        <ValueCard 
+          title="Nodes" 
+          :value="clusterData.nodes?.total || 0" 
+        />
+
+        <!-- Card 4: VMs -->
+        <ValueCard 
+          title="VMs" 
+          :value="clusterData.vms?.total || 0" 
+        />
+
+        <!-- Card 5: Networks -->
+        <ValueCard 
+          title="Networks" 
+          :value="clusterData.networks || 0" 
+        />
+
+        <!-- Card 6: OSDs -->
+        <ValueCard 
+          title="OSDs" 
+          :value="clusterData.osds?.total || 0" 
+        />
+
+        <!-- Card 7: Pools -->
+        <ValueCard 
+          title="Pools" 
+          :value="clusterData.pools || 0" 
+        />
+
+        <!-- Card 8: Volumes -->
+        <ValueCard 
+          title="Volumes" 
+          :value="clusterData.volumes || 0" 
+        />
       </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.info" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="metrics-row">
-            <!-- Card 1: PVC Version -->
-            <ValueCard 
-              title="PVC Version" 
-              :value="clusterData.pvc_version || 'Unknown'" 
-            />
-
-            <!-- Card 2: Primary Node -->
-            <ValueCard 
-              title="Primary Node" 
-              :value="clusterData.primary_node || 'N/A'" 
-            />
-
-            <!-- Card 3: Nodes -->
-            <ValueCard 
-              title="Nodes" 
-              :value="clusterData.nodes?.total || 0" 
-            />
-
-            <!-- Card 4: VMs -->
-            <ValueCard 
-              title="VMs" 
-              :value="clusterData.vms?.total || 0" 
-            />
-
-            <!-- Card 5: Networks -->
-            <ValueCard 
-              title="Networks" 
-              :value="clusterData.networks || 0" 
-            />
-
-            <!-- Card 6: OSDs -->
-            <ValueCard 
-              title="OSDs" 
-              :value="clusterData.osds?.total || 0" 
-            />
-
-            <!-- Card 7: Pools -->
-            <ValueCard 
-              title="Pools" 
-              :value="clusterData.pools || 0" 
-            />
-
-            <!-- Card 8: Volumes -->
-            <ValueCard 
-              title="Volumes" 
-              :value="clusterData.volumes || 0" 
-            />
-          </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>
+    </CollapsibleSection>
 
     <!-- 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">Health & 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>
+    <CollapsibleSection title="Health & Utilization Graphs" :initially-expanded="sections.graphs">
+      <div class="graphs-row">
+        <!-- Health Chart -->
+        <HealthChart
+          title="Cluster Health"
+          :value="clusterHealth"
+          :chart-data="healthChartData"
+          :maintenance="isMaintenanceMode"
+        />
+
+        <!-- CPU Chart -->
+        <CPUChart
+          title="CPU Utilization"
+          :value="cpuUtilization"
+          :chart-data="cpuChartData"
+        />
+
+        <!-- Memory Chart -->
+        <MemoryChart
+          title="Memory Utilization"
+          :value="memoryUtilization"
+          :chart-data="memoryChartData"
+        />
+
+        <!-- Storage Chart -->
+        <StorageChart
+          title="Storage Utilization"
+          :value="storageUtilization"
+          :chart-data="storageChartData"
+        />
       </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.graphs" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="graphs-row">
-            <!-- Health Chart -->
-            <HealthChart
-              title="Cluster Health"
-              :value="clusterHealth"
-              :chart-data="healthChartData"
-            />
-
-            <!-- CPU Chart -->
-            <CPUChart
-              title="CPU Utilization"
-              :value="cpuUtilization"
-              :chart-data="cpuChartData"
-            />
-
-            <!-- Memory Chart -->
-            <MemoryChart
-              title="Memory Utilization"
-              :value="memoryUtilization"
-              :chart-data="memoryChartData"
-            />
-
-            <!-- Storage Chart -->
-            <StorageChart
-              title="Storage Utilization"
-              :value="storageUtilization"
-              :chart-data="storageChartData"
-            />
-          </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>
+    </CollapsibleSection>
 
     <!-- Health Messages Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.messages }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.messages" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
+    <CollapsibleSection title="Health Messages" :initially-expanded="sections.messages">
+      <div class="section-content">
+        <!-- Health messages card -->
+        <div class="metric-card">
+          <div class="card-header">
             <h6 class="card-title mb-0 metric-label">Health Messages</h6>
           </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('messages')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
-      </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.messages" class="section-content-wrapper">
-        <div class="section-content">
-          <!-- Health messages card -->
-          <div class="metric-card">
-            <div class="card-header">
-              <h6 class="card-title mb-0 metric-label">Health Messages</h6>
-            </div>
-            <div class="card-body">
-              <div class="messages-list">
-                <template v-if="displayMessages.length">
-                  <div
-                    v-for="(msg, idx) in displayMessages"
-                    :key="idx"
-                    :class="[
-                      'health-message',
-                      getDeltaClass(msg.health_delta, msg),
-                    ]"
-                  >
-                    <div class="message-header">
-                      <i class="fas fa-circle-exclamation me-1"></i>
-                      <span class="message-id">{{ getMessageId(msg) }}</span>
-                      <span v-if="showHealthDelta(msg)" class="health-delta">
-                        (-{{ msg.health_delta }}%)
-                      </span>
-                    </div>
-                    <div class="message-content">
-                      {{ getMessageText(msg) }}
-                    </div>
-                  </div>
-                </template>
-                <div v-else class="health-message healthy">
+          <div class="card-body">
+            <div class="messages-list">
+              <template v-if="displayMessages.length">
+                <div
+                  v-for="(msg, idx) in displayMessages"
+                  :key="idx"
+                  :class="[
+                    'health-message',
+                    getDeltaClass(msg.health_delta, msg),
+                  ]"
+                >
                   <div class="message-header">
-                    <i class="fas fa-circle-check me-1"></i>
-                    <span class="message-id">Cluster healthy</span>
+                    <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 }}%)
+                    </span>
                   </div>
                   <div class="message-content">
-                    Cluster is at full health with no faults
+                    {{ getMessageText(msg) }}
                   </div>
                 </div>
+              </template>
+              <div v-else class="health-message healthy">
+                <div class="message-header">
+                  <i class="fas fa-circle-check me-1"></i>
+                  <span class="message-id">Cluster healthy</span>
+                </div>
+                <div class="message-content">
+                  Cluster is at full health with no faults
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('messages')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
       </div>
-    </div>
+    </CollapsibleSection>
 
     <!-- States Graphs Section -->
-    <div class="section-container" :class="{ 'collapsed': !sections.states }">
-      <!-- Collapsed section indicator -->
-      <div v-if="!sections.states" class="section-content-wrapper">
-        <div class="section-content">
-          <div class="collapsed-section-header">
-            <h6 class="card-title mb-0 metric-label">State Graphs</h6>
+    <CollapsibleSection title="State Graphs" :initially-expanded="sections.states">
+      <div class="section-content">
+        <!-- States Graphs Row -->
+        <div class="states-graphs-row">
+          <!-- Node States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Node States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="nodeStatesChartData" :options="statesChartOptions" />
+            </div>
           </div>
-        </div>
-        <div class="toggle-column">
-          <button class="section-toggle" @click="toggleSection('states')">
-            <i class="fas fa-chevron-down"></i>
-          </button>
-        </div>
-      </div>
-      <!-- Toggle button for expanded section -->
-      <div v-show="sections.states" class="section-content-wrapper">
-        <div class="section-content">
-          <!-- States Graphs Row -->
-          <div class="states-graphs-row">
-            <!-- Node States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">Node States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="nodeStatesChartData" :options="statesChartOptions" />
-              </div>
-            </div>
 
-            <!-- VM States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">VM States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="vmStatesChartData" :options="statesChartOptions" />
-              </div>
+          <!-- VM States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">VM States</span>
+              </h6>
             </div>
+            <div class="card-body">
+              <Line :data="vmStatesChartData" :options="statesChartOptions" />
+            </div>
+          </div>
 
-            <!-- OSD States Graph -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">OSD States</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <Line :data="osdStatesChartData" :options="statesChartOptions" />
-              </div>
+          <!-- OSD States Graph -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">OSD States</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <Line :data="osdStatesChartData" :options="statesChartOptions" />
             </div>
           </div>
         </div>
-        <div class="toggle-column expanded">
-          <button class="section-toggle" @click="toggleSection('states')">
-            <i class="fas fa-chevron-up"></i>
-          </button>
-        </div>
       </div>
-    </div>
+    </CollapsibleSection>
   </div>
 </template>
 
@@ -281,11 +194,12 @@ import {
   Filler
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import CPUChart from './charts/CPUChart.vue';
-import MemoryChart from './charts/MemoryChart.vue';
-import StorageChart from './charts/StorageChart.vue';
-import HealthChart from './charts/HealthChart.vue';
-import ValueCard from './ValueCard.vue';
+import CPUChart from '../../charts/CPUChart.vue';
+import MemoryChart from '../../charts/MemoryChart.vue';
+import StorageChart from '../../charts/StorageChart.vue';
+import HealthChart from '../../charts/HealthChart.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
 
 // Register Chart.js components
 ChartJS.register(
@@ -322,8 +236,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 +301,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(() => ({
@@ -896,11 +825,6 @@ const sections = ref({
   states: true
 });
 
-// Toggle section visibility
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
 // Add a new function to determine if we should show the health delta
 const showHealthDelta = (msg) => {
   // Don't show delta for "No issues detected" or similar messages
@@ -927,14 +851,31 @@ 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>
-.overview-container {
+.content-container {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   width: 100%;
+  padding-top: 0.25rem;
 }
 
 .metrics-row {

pvc-vue/src/components/pages/vms/VMDetail.vue.bak

@@ -0,0 +1,157 @@
+<template>
+  <div class="vm-detail">
+    <!-- Basic Info Section -->
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-row">
+        <ValueCard 
+          title="State" 
+          :value="vm.state || 'Unknown'"
+          :status="getStateColor(vm.state)"
+        />
+        <ValueCard 
+          title="Node" 
+          :value="vm.node || 'N/A'"
+        />
+        <ValueCard 
+          title="CPUs" 
+          :value="vm.vcpus || 0"
+        />
+        <ValueCard 
+          title="Memory" 
+          :value="formatMemory(vm.memory)"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="resources-row">
+        <ValueCard 
+          title="Disk Size" 
+          :value="formatStorage(vm.disk_size)"
+        />
+        <ValueCard 
+          title="Network IPs" 
+          :value="vm.ips?.join(', ') || 'None'"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Networks Section -->
+    <CollapsibleSection 
+      v-if="vm.networks?.length" 
+      title="Network Interfaces" 
+      :initially-expanded="sections.networks"
+    >
+      <div class="networks-row">
+        <div v-for="network in vm.networks" :key="network.vni" class="network-card">
+          <ValueCard title="Interface" :value="network.vni" />
+          <ValueCard title="Type" :value="network.type" />
+          <ValueCard title="MAC" :value="network.mac" />
+          <ValueCard title="Source" :value="network.source" />
+        </div>
+      </div>
+    </CollapsibleSection>
+
+    <!-- Storage Section -->
+    <CollapsibleSection 
+      v-if="vm.disks?.length" 
+      title="Storage" 
+      :initially-expanded="sections.storage"
+    >
+      <div class="storage-row">
+        <div v-for="disk in vm.disks" :key="disk.dev" class="storage-card">
+          <ValueCard title="Device" :value="disk.dev" />
+          <ValueCard title="Type" :value="disk.type" />
+          <ValueCard title="Bus" :value="disk.bus" />
+          <ValueCard title="Source" :value="disk.name" />
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
+
+const props = defineProps({
+  vm: {
+    type: Object,
+    required: true
+  }
+});
+
+// Section visibility state
+const sections = ref({
+  info: true,
+  resources: true,
+  networks: true,
+  storage: true
+});
+
+// Helper functions
+const getStateColor = (state) => {
+  if (!state) return '';
+  switch(state.toLowerCase()) {
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
+  }
+};
+
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
+};
+</script>
+
+<style scoped>
+.vm-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.info-row,
+.resources-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.networks-row,
+.storage-row {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.network-card,
+.storage-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 0.25rem;
+}
+
+@media (min-width: 1201px) {
+  .info-row { grid-template-columns: repeat(4, 1fr); }
+  .resources-row { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 1200px) {
+  .info-row { grid-template-columns: repeat(2, 1fr); }
+  .resources-row { grid-template-columns: 1fr; }
+}
+</style> 

pvc-vue/src/components/pages/vms/VMOverview.vue

@@ -0,0 +1,440 @@
+<template>
+  <VMSearchBar
+    :key="`vm-search-${selectedVM}`"
+    v-model="searchQuery"
+    :selected-vm="selectedVM"
+    :vm-from-url="route.query.vm"
+    :show-list="showVMList"
+    :show-clear-button="true"
+    :vm-list="props.vmData"
+    @search="handleSearch"
+    @focus="handleSearchFocus"
+    @blur="handleSearchBlur"
+    @clear="clearSearch"
+    @toggle-list="toggleVMList"
+    @select-vm="selectVM"
+    @clear-vm="clearSelectedVM"
+  />
+
+  <!-- VM Details -->
+  <div v-if="selectedVMData && !showVMList" class="content-container">
+    <CollapsibleSection title="VM Information" :initially-expanded="sections.info">
+      <div class="info-grid-general">
+        <ValueCard 
+          title="State" 
+          :value="selectedVMData.state || 'Unknown'"
+          :status="getStateColor(selectedVMData.state)"
+        />
+        <ValueCard 
+          title="Node" 
+          :value="selectedVMData.node || 'N/A'"
+        />
+        <ValueCard 
+          title="CPUs" 
+          :value="selectedVMData.vcpus || 0"
+        />
+        <ValueCard 
+          title="Memory" 
+          :value="formatMemory(selectedVMData.memory)"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Resources Section -->
+    <CollapsibleSection title="Resources" :initially-expanded="sections.resources">
+      <div class="info-grid-resources">
+        <ValueCard 
+          title="Disk Size" 
+          :value="formatStorage(selectedVMData.disk_size)"
+        />
+        <ValueCard 
+          title="Network IPs" 
+          :value="selectedVMData.ips?.join(', ') || 'None'"
+        />
+      </div>
+    </CollapsibleSection>
+
+    <!-- Networks Section -->
+    <CollapsibleSection 
+      v-if="selectedVMData.networks?.length" 
+      title="Network Interfaces" 
+      :initially-expanded="sections.networks"
+    >
+      <div class="cards-stack">
+        <div v-for="network in selectedVMData.networks" 
+              :key="network.vni" 
+              class="detail-card"
+        >
+          <ValueCard title="Interface" :value="network.vni" />
+          <ValueCard title="Type" :value="network.type" />
+          <ValueCard title="MAC" :value="network.mac" />
+          <ValueCard title="Source" :value="network.source" />
+        </div>
+      </div>
+    </CollapsibleSection>
+
+    <!-- Storage Section -->
+    <CollapsibleSection 
+      v-if="selectedVMData.disks?.length" 
+      title="Storage" 
+      :initially-expanded="sections.storage"
+    >
+      <div class="cards-stack">
+        <div v-for="disk in selectedVMData.disks" 
+              :key="disk.dev" 
+              class="detail-card"
+        >
+          <ValueCard title="Device" :value="disk.dev" />
+          <ValueCard title="Type" :value="disk.type" />
+          <ValueCard title="Bus" :value="disk.bus" />
+          <ValueCard title="Source" :value="disk.name" />
+        </div>
+      </div>
+    </CollapsibleSection>
+  </div>
+
+  <!-- Loading and no-selection states -->
+  <div v-if="!selectedVMData && !showVMList" class="content-container">
+    <div v-if="isLoading" class="loading-container">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <p class="mt-2 text-muted">Loading VM details...</p>
+    </div>
+    <div v-else class="no-content-message">
+      <div class="alert alert-info">
+        <i class="fas fa-info-circle me-2"></i>
+        <span v-if="invalidVMSelected">
+          Selected VM does not exist
+        </span>
+        <span v-else>
+          Please select a VM from the list to view its details
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import CollapsibleSection from '../../general/CollapsibleSection.vue';
+import ValueCard from '../../general/ValueCard.vue';
+import VMSearchBar from '../../general/VMSearchBar.vue';
+
+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: () => ({})
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Use ref and sync with route
+const selectedVM = ref('');
+const searchQuery = ref('');
+const showVMList = ref(true);
+const searchActive = ref(false);
+const invalidVMSelected = ref(false);
+const isLoading = ref(false);
+const sections = ref({
+  info: true,
+  graphs: true,
+  resources: true,
+  network: true,
+  storage: true
+});
+
+// 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;
+});
+
+// Handle search input
+const handleSearch = (value) => {
+  searchQuery.value = value;
+  searchActive.value = true;
+  
+  // Store the search query in localStorage for persistence
+  if (value) {
+    localStorage.setItem('vmSearchQuery', value);
+    // Also save to vmSearchText for consistency
+    localStorage.setItem('vmSearchText', value);
+  } else {
+    localStorage.removeItem('vmSearchQuery');
+    // Don't remove vmSearchText here - it's used for search history
+  }
+};
+
+// Handle search focus
+const handleSearchFocus = () => {
+  if (!showVMList.value) {
+    showVMList.value = true;
+  }
+  searchActive.value = true;
+};
+
+// Handle search blur
+const handleSearchBlur = (event) => {
+  // Keep blur logic for handling clicks outside
+  // ... existing blur logic ...
+};
+
+// Toggle VM list visibility
+const toggleVMList = () => {
+  showVMList.value = !showVMList.value;
+  
+  if (showVMList.value) {
+    // When opening the list
+    searchActive.value = false;
+    invalidVMSelected.value = false;
+    
+    // Restore search text if available
+    const savedSearchText = localStorage.getItem('vmSearchText');
+    if (savedSearchText && !searchQuery.value) {
+      searchQuery.value = savedSearchText;
+    }
+  }
+};
+
+// Select a VM
+const selectVM = (vm) => {
+  console.log('VMOverview selectVM called with:', vm);
+  
+  // Update the ref
+  selectedVM.value = vm.name;
+  invalidVMSelected.value = false;
+  
+  // Close the VM list
+  showVMList.value = false;
+  
+  // Save to localStorage
+  localStorage.setItem('selectedVMId', vm.name);
+  
+  // No URL parameter update
+};
+
+// Clear search
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchActive.value = false;
+  localStorage.removeItem('vmSearchQuery');
+};
+
+// Add a method to clear the selected VM
+const clearSelectedVM = () => {
+  // Clear the selected VM
+  selectedVM.value = '';
+  invalidVMSelected.value = false;
+  
+  // Clear the search query in this component
+  searchQuery.value = '';
+  
+  // Show the VM list
+  showVMList.value = true;
+  
+  // Clear VM selection from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Don't clear vmSearchText unless it matches the VM name
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  if (savedSearchText === savedVMId) {
+    localStorage.removeItem('vmSearchText');
+  }
+  
+  // Clear URL parameter if it exists
+  if (route.query.vm) {
+    router.replace({ path: '/vms' }, { replace: true });
+  }
+};
+
+// Lifecycle hooks
+onMounted(() => {
+  console.log('VMOverview mounted');
+  isLoading.value = true;
+  
+  // Check sources in priority order:
+  // 1. localStorage (for returning to the page or navigating from other pages)
+  // 2. URL query parameter (for backward compatibility)
+  const savedVMId = localStorage.getItem('selectedVMId');
+  const vmFromQuery = route.query.vm;
+  
+  // Restore previous search query from localStorage
+  const savedSearch = localStorage.getItem('vmSearchQuery');
+  const savedSearchText = localStorage.getItem('vmSearchText');
+  
+  // If we have a VM to select
+  let vmToSelect = savedVMId || vmFromQuery;
+  
+  if (vmToSelect && props.vmData.length > 0) {
+    // Check if the VM exists
+    const vmExists = props.vmData.some(v => v.name === vmToSelect);
+    
+    if (vmExists) {
+      selectedVM.value = vmToSelect;
+      showVMList.value = false;
+      
+      // Set the search query to the VM name for display in the search bar
+      searchQuery.value = vmToSelect;
+      
+      // If from URL, save to localStorage for persistence
+      if (vmFromQuery && !savedVMId) {
+        localStorage.setItem('selectedVMId', vmFromQuery);
+        
+        // Remove the VM ID from the URL without reloading the page
+        router.replace({ path: '/vms' }, { replace: true });
+      }
+    } else {
+      console.log('Selected VM does not exist:', vmToSelect);
+      invalidVMSelected.value = true;
+      localStorage.removeItem('selectedVMId');
+      
+      // Only clear search text if it matches the VM name
+      if (savedSearchText === vmToSelect) {
+        localStorage.removeItem('vmSearchText');
+      }
+      
+      // Show the VM list with any saved search
+      showVMList.value = true;
+      if (savedSearch) {
+        searchQuery.value = savedSearch;
+      } else if (savedSearchText) {
+        searchQuery.value = savedSearchText;
+      }
+    }
+  } else {
+    // No VM selected, show the list with any saved search
+    showVMList.value = true;
+    if (savedSearch) {
+      searchQuery.value = savedSearch;
+    } else if (savedSearchText) {
+      searchQuery.value = savedSearchText;
+    }
+  }
+  
+  isLoading.value = false;
+});
+
+// Watch for changes in the selected VM
+watch(selectedVM, (newValue) => {
+  if (newValue) {
+    // Save to localStorage whenever it changes
+    localStorage.setItem('selectedVMId', newValue);
+  } else {
+    localStorage.removeItem('selectedVMId');
+  }
+});
+
+// Watch for changes in the VM data
+watch(() => props.vmData, (newData) => {
+  if (selectedVM.value && newData.length > 0) {
+    // Verify the VM still exists
+    const vmExists = newData.some(vm => vm.name === selectedVM.value);
+    invalidVMSelected.value = !vmExists;
+    
+    if (!vmExists) {
+      // If VM no longer exists, clear localStorage
+      localStorage.removeItem('selectedVMId');
+    }
+  }
+}, { deep: true });
+
+// Helper functions
+const getStateColor = (state) => {
+  if (!state) return '';
+  switch(state.toLowerCase()) {
+    case 'start': return 'success';
+    case 'stop': return 'danger';
+    case 'disable': return 'warning';
+    default: return '';
+  }
+};
+
+const formatMemory = (memoryMB) => {
+  if (!memoryMB) return '0 GB';
+  return Math.round(memoryMB / 1024) + ' GB';
+};
+
+const formatStorage = (sizeGB) => {
+  if (!sizeGB) return '0 GB';
+  if (sizeGB < 1024) return sizeGB + ' GB';
+  return (sizeGB / 1024).toFixed(1) + ' TB';
+};
+</script>
+
+<style scoped>
+.content-container {
+  background-color: white;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  width: 100%;
+  padding-top: 0.25rem;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.no-content-message {
+  text-align: center;
+  padding: 2rem;
+}
+
+.info-grid-general {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.info-grid-resources {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.cards-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-card {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .info-grid-general,
+  .info-grid-resources {
+    grid-template-columns: 1fr;
+  }
+  
+  .detail-card {
+    grid-template-columns: 1fr;
+  }
+}
+</style> 

pvc-vue/src/main.js

@@ -3,6 +3,9 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 
+// Add global styles
+import './assets/styles.css';
+
 // Create the app
 const app = createApp(App);
 

pvc-vue/src/services/navigation.js

@@ -0,0 +1,39 @@
+import { useRouter } from 'vue-router';
+
+/**
+ * Navigate to a VM without using URL parameters
+ * @param {string} vmId - The ID of the VM to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToVM(vmId, router) {
+  // Save the VM ID to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Navigate to the VMs page
+  router.push('/vms');
+}
+
+/**
+ * Navigate to a node without using URL parameters
+ * @param {string} nodeId - The ID of the node to navigate to
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function navigateToNode(nodeId, router) {
+  // Save the node ID to localStorage
+  localStorage.setItem('selectedNodeId', nodeId);
+  
+  // Navigate to the Nodes page
+  router.push('/nodes');
+}
+
+/**
+ * Clear the selected VM and return to the default VM page view
+ * @param {import('vue-router').Router} router - Vue Router instance
+ */
+export function clearSelectedVM(router) {
+  // Clear from localStorage
+  localStorage.removeItem('selectedVMId');
+  
+  // Navigate to the VMs page without query parameters
+  router.push('/vms');
+} 

pvc-vue/src/stores/api.js

@@ -6,7 +6,7 @@ export const useApiStore = defineStore('api', () => {
   const config = ref({
     apiUri: localStorage.getItem('pvc_api_uri') || '',
     apiKey: localStorage.getItem('pvc_api_key') || '',
-    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 5000
+    updateInterval: parseInt(localStorage.getItem('pvc_update_interval')) || 15 // Default to 15s
   });
 
   // Computed
@@ -16,12 +16,18 @@ export const useApiStore = defineStore('api', () => {
 
   // Actions
   const updateConfig = (newConfig) => {
-    config.value = { ...newConfig };
+    // Ensure interval is between 5 and 300 seconds
+    const interval = Math.min(300, Math.max(5, parseInt(newConfig.updateInterval) || 15));
+    
+    config.value = {
+      ...newConfig,
+      updateInterval: interval
+    };
     
     // Save to localStorage
     localStorage.setItem('pvc_api_uri', newConfig.apiUri);
     localStorage.setItem('pvc_api_key', newConfig.apiKey);
-    localStorage.setItem('pvc_update_interval', newConfig.updateInterval.toString());
+    localStorage.setItem('pvc_update_interval', interval.toString());
   };
 
   const fetchStatus = async () => {

pvc-vue/src/stores/cluster.js

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useClusterStore = defineStore('cluster', {
+  state: () => ({
+    clusterData: {}
+  }),
+  
+  actions: {
+    setClusterData(data) {
+      this.clusterData = data;
+    }
+  }
+}); 

pvc-vue/src/stores/vm.js

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia';
+
+export const useVMStore = defineStore('vm', {
+  state: () => ({
+    vmList: [],
+    metrics: {}
+  }),
+  
+  actions: {
+    setVMList(vms) {
+      this.vmList = vms;
+    },
+    setMetrics(metrics) {
+      this.metrics = metrics;
+    }
+  }
+}); 

pvc-vue/src/utils/vmSelection.js

@@ -0,0 +1,32 @@
+/**
+ * Selects a VM and saves the selection to localStorage
+ * @param {string} vmId - The ID of the VM to select
+ * @param {import('vue-router').Router} router - Vue Router instance (optional)
+ */
+export function selectVM(vmId, router = null) {
+  // Save to localStorage
+  localStorage.setItem('selectedVMId', vmId);
+  
+  // Optionally update URL if router is provided
+  if (router) {
+    router.push({ 
+      path: '/vms',
+      query: { vm: vmId }
+    });
+  }
+}
+
+/**
+ * Gets the currently selected VM from localStorage
+ * @returns {string|null} The selected VM ID or null if none is selected
+ */
+export function getSelectedVM() {
+  return localStorage.getItem('selectedVMId');
+}
+
+/**
+ * Clears the selected VM from localStorage
+ */
+export function clearSelectedVM() {
+  localStorage.removeItem('selectedVMId');
+} 

pvc-vue/src/views/Overview.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup>
-import ClusterOverview from '../components/ClusterOverview.vue';
-import PageTitle from '../components/PageTitle.vue';
+import ClusterOverview from '../components/pages/overview/ClusterOverview.vue';
+import PageTitle from '../components/general/PageTitle.vue';
 
 defineProps({
   clusterData: {

pvc-vue/vite.config.js

@@ -1,6 +1,11 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
+function getTimestamp() {
+  const now = new Date();
+  return now.toISOString().replace('T', ' ').replace('Z', '');
+}
+
 export default defineConfig({
   plugins: [vue()],
   server: {
@@ -21,7 +26,7 @@ export default defineConfig({
               const requestPath = req.url.replace('/api', '');
               proxyReq.path = `${apiPath}${requestPath}`;
 
-              console.log(`Proxying to: ${options.target}${proxyReq.path}`);
+              console.log(`${getTimestamp()} Proxying to: ${options.target}${proxyReq.path}`);
             }
 
             if (req.headers['x-api-key']) {