From 94f32735a7f953c430a05dcc2ff411887607b866 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Sat, 1 Mar 2025 16:53:24 -0500
Subject: [PATCH] Refactor Nodes into a component

---
 pvc-vue/src/components/NodeOverview.vue | 1043 ++++++++++++++++++++++
 pvc-vue/src/views/Nodes.vue             | 1054 +----------------------
 2 files changed, 1050 insertions(+), 1047 deletions(-)
 create mode 100644 pvc-vue/src/components/NodeOverview.vue

diff --git a/pvc-vue/src/components/NodeOverview.vue b/pvc-vue/src/components/NodeOverview.vue
new file mode 100644
index 0000000..e2c0f2d
--- /dev/null
+++ b/pvc-vue/src/components/NodeOverview.vue
@@ -0,0 +1,1043 @@
+<template>
+  <div class="overview-container">
+    <!-- Node Tabs -->
+    <div class="node-tabs-wrapper">
+      <div class="node-tabs" ref="tabsContainer">
+        <button
+          v-for="node in nodeData"
+          :key="node.name"
+          class="node-tab"
+          :class="{ 'active': selectedNode === node.name }"
+          @click="selectNode(node.name)"
+        >
+          {{ node.name }}
+        </button>
+      </div>
+      <!-- Tab scroll buttons -->
+      <button class="tab-scroll-button left" @click="scrollTabs('left')" v-show="showLeftScroll">
+        <i class="fas fa-chevron-left"></i>
+      </button>
+      <button class="tab-scroll-button right" @click="scrollTabs('right')" v-show="showRightScroll">
+        <i class="fas fa-chevron-right"></i>
+      </button>
+    </div>
+
+    <!-- Node Details -->
+    <div v-if="selectedNodeData" class="node-details">
+      <!-- Information Cards Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.info }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.info" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Node Information</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('info')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.info" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="info-row">
+              <!-- 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>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('info')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Utilization Graphs Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.graphs" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">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>
+        </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="Node Health"
+                :value="selectedNodeData.health || 0"
+                :chart-data="nodeHealthChartData"
+              />
+
+              <!-- 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>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('graphs')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- CPU Resources Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.cpu }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.cpu" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">CPU Resources</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('cpu')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.cpu" class="section-content-wrapper">
+          <div class="section-content">
+            <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>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('cpu')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Memory Resources Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.resources }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.resources" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Memory Resources</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('resources')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.resources" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="resources-row-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>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('resources')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Running VMs Section -->
+      <div class="section-container" :class="{ 'collapsed': !sections.vms }">
+        <!-- Collapsed section indicator -->
+        <div v-if="!sections.vms" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="collapsed-section-header">
+              <h6 class="card-title mb-0 metric-label">Running VMs</h6>
+            </div>
+          </div>
+          <div class="toggle-column">
+            <button class="section-toggle" @click="toggleSection('vms')">
+              <i class="fas fa-chevron-down"></i>
+            </button>
+          </div>
+        </div>
+        <!-- Toggle button for expanded section -->
+        <div v-show="sections.vms" class="section-content-wrapper">
+          <div class="section-content">
+            <div class="vms-container">
+              <div class="vms-card">
+                <div class="card-header">
+                  <h6 class="card-title mb-0">
+                    <span class="metric-label">Running VMs</span>
+                  </h6>
+                </div>
+                <div class="card-body">
+                  <div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
+                    <p>No VMs running on this node</p>
+                  </div>
+                  <div v-else class="vm-list" :style="{ 
+                    'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))` 
+                  }">
+                    <div
+                      v-for="vm in selectedNodeData.running_domains"
+                      :key="vm"
+                      class="vm-item"
+                      @click="handleVmClick(vm)"
+                      title="View VM details"
+                    >
+                      {{ vm }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="toggle-column expanded">
+            <button class="section-toggle" @click="toggleSection('vms')">
+              <i class="fas fa-chevron-up"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- No node selected message -->
+    <div v-else class="no-node-selected">
+      <p>Select a node to view details</p>
+    </div>
+  </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 './ValueCard.vue';
+
+// 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: () => ({})
+  }
+});
+
+// State for sections (expanded/collapsed)
+const sections = ref({
+  info: true,
+  graphs: true,
+  cpu: true,
+  resources: true,
+  vms: true
+});
+
+// Toggle section visibility
+const toggleSection = (section) => {
+  sections.value[section] = !sections.value[section];
+};
+
+// 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';
+};
+
+// Prepare chart data for the node
+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
+    };
+  }
+
+  // Fallback to current value only
+  return {
+    labels: ['Health'],
+    data: [selectedNodeData.value?.health || 0]
+  };
+});
+
+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';
+};
+
+// Handle VM click (placeholder until VMs page is implemented)
+const handleVmClick = (vmName) => {
+  console.log(`VM clicked: ${vmName}`);
+  alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
+};
+
+// Calculate the minimum width for VM items based on the longest VM name
+const calculateVmItemMinWidth = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
+    return 100; // Default minimum width
+  }
+  
+  // Find the longest VM name
+  const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
+    return current.length > longest.length ? current : longest;
+  }, '');
+  
+  // Calculate width based on character count (approx 8px per character plus padding)
+  const minWidth = Math.max(100, longestVmName.length * 8 + 32);
+  return minWidth;
+});
+
+// Initialize the component
+onMounted(() => {
+  // Select the first node by default if available
+  if (props.nodeData && props.nodeData.length > 0) {
+    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);
+});
+</script>
+
+<style scoped>
+/* Add these missing styles from the original Nodes.vue */
+.overview-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Node tabs styling */
+.node-tabs-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  margin-bottom: 1rem;
+}
+
+.node-tabs {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none; /* Hide scrollbar for Firefox */
+  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+  scroll-behavior: smooth;
+  padding: 0 40px; /* Make room for scroll buttons */
+}
+
+.node-tabs::-webkit-scrollbar {
+  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
+}
+
+.node-tab {
+  padding: 0.5rem 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+  color: #495057;
+}
+
+.node-tab:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.node-tab.active {
+  border-bottom: 2px solid #0d6efd;
+  color: #0d6efd;
+  font-weight: 600;
+}
+
+.tab-scroll-button {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 40px;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.tab-scroll-button.left {
+  left: 0;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.tab-scroll-button.right {
+  right: 0;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+}
+
+/* Node details styling */
+.node-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.no-node-selected {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border-radius: 0.25rem;
+  color: #666;
+}
+
+/* Section styling */
+.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;
+}
+
+.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+/* Responsive grid layouts */
+@media (min-width: 1201px) {
+  .metrics-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .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);
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .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);
+  }
+}
+
+@media (max-width: 800px) {
+  .metrics-row,
+  .info-row,
+  .graphs-row,
+  .resources-row-cpu,
+  .resources-row-memory {
+    grid-template-columns: 1fr;
+  }
+}
+
+.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;
+  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;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: center;
+  align-items: center;
+}
+
+.metric-card .metric-value {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+/* Add back the VM-specific styles */
+.vms-container {
+  width: 100%;
+}
+
+.vms-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+}
+
+.vms-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;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vms-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+}
+
+.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%;
+}
+
+.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;
+}
+
+.vm-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Also add back these missing utility styles */
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.1);
+  z-index: 2;
+}
+
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: 500;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+/* Status colors */
+.status-healthy { color: #28a745; }
+.status-warning { color: #ffc107; }
+.status-error { color: #dc3545; }
+
+/* Chart colors */
+.chart-cpu {
+  background: white;
+  border: none;
+}
+
+.chart-memory {
+  background: white;
+  border: none;
+}
+
+.chart-storage, .chart-allocated {
+  background: white;
+  border: none;
+}
+
+.chart-health {
+  background: white;
+  border: none;
+}
+
+/* Toggle column styles */
+.toggle-column.expanded {
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
+}
+
+/* Section container styles */
+.section-container.collapsed {
+  margin-bottom: 0.5rem;
+}
+
+.section-container.collapsed .section-content-wrapper {
+  margin-bottom: 0;
+}
+</style> 
\ No newline at end of file
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index c5b1e85..5b804db 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -1,351 +1,19 @@
 <template>
   <div class="content-grid">
     <PageTitle title="Nodes" />
-
-    <!-- Node Tabs -->
-    <div class="node-tabs-wrapper">
-      <div class="node-tabs" ref="tabsContainer">
-        <button
-          v-for="node in nodeData"
-          :key="node.name"
-          class="node-tab"
-          :class="{ 'active': selectedNode === node.name }"
-          @click="selectNode(node.name)"
-        >
-          {{ node.name }}
-        </button>
-      </div>
-      <!-- Tab scroll buttons -->
-      <button class="tab-scroll-button left" @click="scrollTabs('left')" v-show="showLeftScroll">
-        <i class="fas fa-chevron-left"></i>
-      </button>
-      <button class="tab-scroll-button right" @click="scrollTabs('right')" v-show="showRightScroll">
-        <i class="fas fa-chevron-right"></i>
-      </button>
-    </div>
-
-    <!-- Node Details -->
-    <div v-if="selectedNodeData" class="node-details">
-      <!-- Information Cards Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.info }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.info" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Node Information</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('info')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.info" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="info-row">
-              <!-- 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>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('info')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Utilization Graphs Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.graphs" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">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>
-        </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="Node Health"
-                :value="selectedNodeData.health || 0"
-                :chart-data="nodeHealthChartData"
-              />
-
-              <!-- 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>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('graphs')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- CPU Resources Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.cpu }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.cpu" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">CPU Resources</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('cpu')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.cpu" class="section-content-wrapper">
-          <div class="section-content">
-            <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>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('cpu')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Memory Resources Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.resources }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Memory Resources</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.resources" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="resources-row-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>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('resources')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Running VMs Section -->
-      <div class="section-container" :class="{ 'collapsed': !sections.vms }">
-        <!-- Collapsed section indicator -->
-        <div v-if="!sections.vms" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="collapsed-section-header">
-              <h6 class="card-title mb-0 metric-label">Running VMs</h6>
-            </div>
-          </div>
-          <div class="toggle-column">
-            <button class="section-toggle" @click="toggleSection('vms')">
-              <i class="fas fa-chevron-down"></i>
-            </button>
-          </div>
-        </div>
-        <!-- Toggle button for expanded section -->
-        <div v-show="sections.vms" class="section-content-wrapper">
-          <div class="section-content">
-            <div class="vms-container">
-              <div class="vms-card">
-                <div class="card-header">
-                  <h6 class="card-title mb-0">
-                    <span class="metric-label">Running VMs</span>
-                  </h6>
-                </div>
-                <div class="card-body">
-                  <div v-if="!selectedNodeData.running_domains || selectedNodeData.running_domains.length === 0" class="no-vms">
-                    <p>No VMs running on this node</p>
-                  </div>
-                  <div v-else class="vm-list" :style="{ 
-                    'grid-template-columns': `repeat(auto-fill, minmax(${calculateVmItemMinWidth}px, 1fr))` 
-                  }">
-                    <div
-                      v-for="vm in selectedNodeData.running_domains"
-                      :key="vm"
-                      class="vm-item"
-                      @click="handleVmClick(vm)"
-                      title="View VM details"
-                    >
-                      {{ vm }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="toggle-column expanded">
-            <button class="section-toggle" @click="toggleSection('vms')">
-              <i class="fas fa-chevron-up"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- No node selected message -->
-    <div v-else class="no-node-selected">
-      <p>Select a node to view details</p>
-    </div>
+    <NodeOverview
+      :nodeData="nodeData"
+      :metricsData="metricsData"
+      :clusterData="clusterData"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import PageTitle from '../components/PageTitle.vue';
-import CPUChart from '../components/charts/CPUChart.vue';
-import MemoryChart from '../components/charts/MemoryChart.vue';
-import StorageChart from '../components/charts/StorageChart.vue';
-import HealthChart from '../components/charts/HealthChart.vue';
-import ValueCard from '../components/ValueCard.vue';
+import NodeOverview from '../components/NodeOverview.vue';
 
-// Implement formatBytes function directly
-function formatBytes(bytes, decimals = 2) {
-  if (bytes === undefined || bytes === null) return 'N/A';
-  if (bytes === 0) return '0 B';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-// 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';
-};
-
-const props = defineProps({
+defineProps({
   nodeData: {
     type: Array,
     required: true,
@@ -362,268 +30,6 @@ const props = defineProps({
     default: () => ({})
   }
 });
-
-// State for sections (expanded/collapsed)
-const sections = ref({
-  info: true,
-  graphs: true,
-  cpu: true,
-  resources: true,
-  vms: true
-});
-
-// Toggle section visibility
-const toggleSection = (section) => {
-  sections.value[section] = !sections.value[section];
-};
-
-// 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);
-};
-
-// Prepare chart data for the node
-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
-    };
-  }
-
-  // Fallback to current value only
-  return {
-    labels: ['Health'],
-    data: [selectedNodeData.value.health || 0]
-  };
-});
-
-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
-// Determine color for daemon state
-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';
-};
-
-// Determine color for coordinator state
-const getCoordinatorStateColor = (state) => {
-  if (!state) return '';
-
-  if (state === 'primary') return 'green';
-  if (state === 'secondary') return 'blue';
-  if (state === 'hypervisor') return 'gray';
-  return '';
-};
-
-// Determine color for domain state
-const getDomainStateColor = (state) => {
-  if (!state) return '';
-
-  if (state === 'ready') return 'green';
-  if (['flushing', 'flushed', 'unflushing'].includes(state)) return 'blue';
-  return 'gray';
-};
-
-// Handle VM click (placeholder until VMs page is implemented)
-const handleVmClick = (vmName) => {
-  console.log(`VM clicked: ${vmName}`);
-  // You can show a toast notification or modal here
-  alert(`The VMs page is not yet implemented. You clicked on VM: ${vmName}`);
-};
-
-// Calculate the minimum width for VM items based on the longest VM name
-const calculateVmItemMinWidth = computed(() => {
-  if (!selectedNodeData.value || !selectedNodeData.value.running_domains || !selectedNodeData.value.running_domains.length) {
-    return 100; // Default minimum width
-  }
-  
-  // Find the longest VM name
-  const longestVmName = selectedNodeData.value.running_domains.reduce((longest, current) => {
-    return current.length > longest.length ? current : longest;
-  }, '');
-  
-  // Calculate width based on character count (approx 8px per character plus padding)
-  const minWidth = Math.max(100, longestVmName.length * 8 + 32);
-  return minWidth;
-});
-
-// Initialize the component
-onMounted(() => {
-  // Select the first node by default if available
-  if (props.nodeData && props.nodeData.length > 0) {
-    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);
-});
 </script>
 
 <style scoped>
@@ -633,450 +39,4 @@ onUnmounted(() => {
   gap: 0.5rem;
   width: 100%;
 }
-
-/* Node tabs styling */
-.node-tabs-wrapper {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
-  margin-bottom: 1rem;
-}
-
-.node-tabs {
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none; /* Hide scrollbar for Firefox */
-  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
-  scroll-behavior: smooth;
-  padding: 0 40px; /* Make room for scroll buttons */
-}
-
-.node-tabs::-webkit-scrollbar {
-  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
-}
-
-.node-tab {
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: all 0.2s;
-  color: #495057;
-}
-
-.node-tab:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.node-tab.active {
-  border-bottom: 2px solid #0d6efd;
-  color: #0d6efd;
-  font-weight: 600;
-}
-
-.tab-scroll-button {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 40px;
-  background: rgba(255, 255, 255, 0.9);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.tab-scroll-button.left {
-  left: 0;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.tab-scroll-button.right {
-  right: 0;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-/* Node details styling */
-.node-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.no-node-selected {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 200px;
-  background-color: rgba(0, 0, 0, 0.03);
-  border-radius: 0.25rem;
-  color: #666;
-}
-
-/* Section styling */
-.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;
-}
-
-.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;
-}
-
-.metrics-row, .graphs-row, .resources-row-cpu, .resources-row-memory, .info-row {
-  display: grid;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-/* Responsive grid layouts */
-@media (min-width: 1201px) {
-  .metrics-row {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .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);
-  }
-}
-
-@media (min-width: 801px) and (max-width: 1200px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .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);
-  }
-}
-
-@media (max-width: 800px) {
-  .metrics-row,
-  .info-row,
-  .graphs-row,
-  .resources-row-cpu,
-  .resources-row-memory {
-    grid-template-columns: 1fr;
-  }
-}
-
-.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;
-  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;
-}
-
-.metric-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-  justify-content: center;
-  align-items: center;
-}
-
-.metric-card .metric-value {
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-align: center;
-  white-space: nowrap;
-  min-width: fit-content;
-}
-
-.metric-label {
-  color: #495057;
-  font-weight: 600;
-}
-
-.metric-percentage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.8);
-  padding: 0.25rem 0.75rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0,0,0,0.1);
-  z-index: 2;
-}
-
-.metric-percentage .metric-value {
-  font-size: 2.5rem;
-  font-weight: 500;
-  color: #333;
-  line-height: 1;
-  margin: 0;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-}
-
-.chart-wrapper {
-  position: relative;
-  width: 100%;
-  height: 160px;
-  min-height: 160px;
-  overflow: hidden;
-  border: none;
-  border-radius: 0;
-  background-color: white;
-  margin: 0;
-}
-
-/* Additional styles from ClusterOverview.vue */
-.section-container.collapsed {
-  margin-bottom: 0.5rem;
-}
-
-.section-container.collapsed .section-content-wrapper {
-  margin-bottom: 0;
-}
-
-.toggle-column.expanded {
-  top: 0;
-  right: 0;
-  height: 100%;
-  display: flex;
-  align-items: flex-start;
-  padding-top: 4px;
-}
-
-/* Status colors */
-.status-healthy { color: #28a745; }
-.status-warning { color: #ffc107; }
-.status-error { color: #dc3545; }
-
-/* Health delta classes */
-.delta-high {
-  background: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
-}
-
-.delta-medium {
-  background: rgba(255, 193, 7, 0.1);
-  color: #d39e00;
-}
-
-.delta-low {
-  background: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-}
-
-/* Chart colors */
-.chart-cpu {
-  background: white;
-  border: none;
-}
-
-.chart-memory {
-  background: white;
-  border: none;
-}
-
-.chart-storage, .chart-allocated {
-  background: white;
-  border: none;
-}
-
-.chart-health {
-  background: white;
-  border: none;
-}
-
-/* Running VMs section styles */
-.vms-container {
-  width: 100%;
-}
-
-.vms-card {
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  overflow: hidden;
-}
-
-.vms-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;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.vms-card .card-body {
-  flex: 1;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  overflow: visible;
-}
-
-.vm-count {
-  font-size: 0.8rem;
-  color: #6c757d;
-  font-weight: normal;
-  margin-left: 0.5rem;
-}
-
-.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%;
-}
-
-.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;
-}
-
-.vm-item:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.1);
-}
 </style>
\ No newline at end of file