From 97de6bda82b05d6b338cb82575ba306ca292e0fc Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Fri, 28 Feb 2025 20:24:58 -0500
Subject: [PATCH] Split overview charts into discrete components

---
 pvc-vue/src/components/ClusterOverview.vue    | 407 ++++++------------
 pvc-vue/src/components/ConfigPanel.vue        |   6 +-
 pvc-vue/src/components/NodeStatus.vue         |   8 +-
 pvc-vue/src/components/PageTitle.vue          |   2 +-
 pvc-vue/src/components/charts/CPUChart.vue    | 202 +++++++++
 pvc-vue/src/components/charts/HealthChart.vue | 291 +++++++++++++
 pvc-vue/src/components/charts/MemoryChart.vue | 202 +++++++++
 .../src/components/charts/StorageChart.vue    | 202 +++++++++
 pvc-vue/src/views/Nodes.vue                   | 115 +++--
 pvc-vue/src/views/Overview.vue                |   4 +-
 10 files changed, 1095 insertions(+), 344 deletions(-)
 create mode 100644 pvc-vue/src/components/charts/CPUChart.vue
 create mode 100644 pvc-vue/src/components/charts/HealthChart.vue
 create mode 100644 pvc-vue/src/components/charts/MemoryChart.vue
 create mode 100644 pvc-vue/src/components/charts/StorageChart.vue

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 503ea49..1dad63b 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -143,72 +143,33 @@
       <div v-show="sections.graphs" class="section-content-wrapper">
         <div class="section-content">
           <div class="graphs-row">
-            <!-- Health Card -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0 metric-label">Cluster Health</h6>
-              </div>
-              <div class="card-body">
-                <div class="metric-percentage">
-                  <h4 class="metric-value">
-                    {{ clusterData.cluster_health?.health || 0 }}%
-                  </h4>
-                </div>
-                <div class="chart-wrapper">
-                  <Line :data="healthChartData" :options="healthChartOptions" />
-                </div>
-              </div>
-            </div>
+            <!-- Health Chart -->
+            <HealthChart
+              title="Cluster Health"
+              :value="clusterHealth"
+              :chart-data="healthChartData"
+            />
+
             <!-- CPU Chart -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">CPU Utilization</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <div class="metric-percentage">
-                  <h4 class="metric-value">
-                    {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
-                  </h4>
-                </div>
-                <div class="chart-wrapper">
-                  <Line :data="cpuChartData" :options="chartOptions" />
-                </div>
-              </div>
-            </div>
+            <CPUChart
+              title="CPU Utilization"
+              :value="cpuUtilization"
+              :chart-data="cpuChartData"
+            />
+
             <!-- Memory Chart -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">Memory Utilization</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <div class="metric-percentage">
-                  <h4 class="metric-value">
-                    {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
-                  </h4>
-                </div>
-                <Line :data="memoryChartData" :options="chartOptions" />
-              </div>
-            </div>
+            <MemoryChart
+              title="Memory Utilization"
+              :value="memoryUtilization"
+              :chart-data="memoryChartData"
+            />
+
             <!-- Storage Chart -->
-            <div class="metric-card">
-              <div class="card-header">
-                <h6 class="card-title mb-0">
-                  <span class="metric-label">Storage Utilization</span>
-                </h6>
-              </div>
-              <div class="card-body">
-                <div class="metric-percentage">
-                  <h4 class="metric-value">
-                    {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
-                  </h4>
-                </div>
-                <Line :data="storageChartData" :options="chartOptions" />
-              </div>
-            </div>
+            <StorageChart
+              title="Storage Utilization"
+              :value="storageUtilization"
+              :chart-data="storageChartData"
+            />
           </div>
         </div>
         <div class="toggle-column expanded">
@@ -245,11 +206,11 @@
             <div class="card-body">
               <div class="messages-list">
                 <template v-if="displayMessages.length">
-                  <div 
-                    v-for="(msg, idx) in displayMessages" 
+                  <div
+                    v-for="(msg, idx) in displayMessages"
                     :key="idx"
                     :class="[
-                      'health-message', 
+                      'health-message',
                       getDeltaClass(msg.health_delta, msg),
                     ]"
                   >
@@ -317,7 +278,7 @@
                 <Line :data="nodeStatesChartData" :options="statesChartOptions" />
               </div>
             </div>
-            
+
             <!-- VM States Graph -->
             <div class="metric-card">
               <div class="card-header">
@@ -329,7 +290,7 @@
                 <Line :data="vmStatesChartData" :options="statesChartOptions" />
               </div>
             </div>
-            
+
             <!-- OSD States Graph -->
             <div class="metric-card">
               <div class="card-header">
@@ -368,6 +329,10 @@ 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';
 
 // Register Chart.js components
 ChartJS.register(
@@ -397,13 +362,13 @@ const props = defineProps({
 
 const displayMessages = computed(() => {
   const messages = [];
-  
+
   // Check if there are any health messages
   if (props.clusterData.cluster_health?.messages) {
     // Add all messages from the cluster health data
     messages.push(...props.clusterData.cluster_health.messages);
   }
-  
+
   // Sort messages by health delta (highest impact first)
   return messages.sort((a, b) => {
     // If health_delta is not available, use 0
@@ -433,17 +398,17 @@ const getDeltaClass = (delta, msg) => {
   if (msg && msg.id === 'Cluster is in maintenance') {
     return 'delta-info';
   }
-  
+
   // Special case for plugin error messages (the ones with 25%)
   if (msg && (msg.id === 'NODE_PLUGIN_PSQL_HV3' || msg.id === 'NODE_PLUGIN_ZKPR_HV3')) {
     return 'delta-high';  // These should be red
   }
-  
+
   // Special case for "No problems" message
   if (msg && msg.id === 'CLUSTER_HEALTHY') {
     return 'delta-low';
   }
-  
+
   // Handle numeric deltas
   if (delta === undefined || delta === null) return '';
   if (delta === 0) return 'delta-low';   // Zero delta - green like healthy messages
@@ -452,59 +417,45 @@ const getDeltaClass = (delta, msg) => {
   return 'delta-info';
 };
 
-const healthChartData = computed(() => {
-  return {
-    labels: props.metricsData.health.labels,
-    datasets: [{
-      data: props.metricsData.health.data,
-      fill: true,
-      segment: {
-        borderColor: (ctx) => {
-          console.log('Context:', ctx);
-          console.log('Maintenance data:', props.metricsData.maintenance?.data);
-          console.log('Available indices:', ctx.p0?.parsed?.x, ctx.p1?.parsed?.x);
-          const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
-          console.log('Point', ctx.p0.parsed.x, 'Maintenance:', maintenanceAtPoint);
-          if (maintenanceAtPoint === true) {
-            console.log('Using blue color for maintenance');
-            return 'rgba(13, 110, 253, 0.2)';
-          }
-          const value = ctx.p1.parsed.y;
-          console.log('Using health-based color:', value);
-          if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
-          if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
-          return 'rgba(220, 53, 69, 0.2)';                  // Red
-        },
-        backgroundColor: (ctx) => {
-          const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.p0.parsed.x];
-          if (maintenanceAtPoint === true) {
-            return 'rgba(13, 110, 253, 0.1)';
-          }
-          const value = ctx.p1.parsed.y;
-          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
-        }
-      },
-      borderWidth: 1.5,
-      tension: 0.4,
-      pointRadius: 0,
-      pointHoverRadius: 4,
-      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',  // Light background for all points
-      pointBorderColor: (ctx) => {
-        const maintenanceAtPoint = props.metricsData.maintenance?.data[ctx.dataIndex];
-        if (maintenanceAtPoint === true) return 'rgba(13, 110, 253, 0.5)';  // Blue for maintenance
-        if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
-        const value = ctx.raw;
-        if (value > 90) return 'rgba(40, 167, 69, 0.5)';  // Green
-        if (value > 50) return 'rgba(255, 193, 7, 0.5)';  // Yellow
-        return 'rgba(220, 53, 69, 0.5)';                  // Red
-      },
-      pointBorderWidth: 1.5
-    }]
-  };
-});
+// Simplified chart data for the new chart components
+const healthChartData = computed(() => ({
+  labels: props.metricsData.health.labels,
+  data: props.metricsData.health.data
+}));
 
+const cpuChartData = computed(() => ({
+  labels: props.metricsData.cpu.labels,
+  data: props.metricsData.cpu.data
+}));
+
+const memoryChartData = computed(() => ({
+  labels: props.metricsData.memory.labels,
+  data: props.metricsData.memory.data
+}));
+
+const storageChartData = computed(() => ({
+  labels: props.metricsData.storage?.labels || [],
+  data: props.metricsData.storage?.data || []
+}));
+
+// Current values for the charts
+const clusterHealth = computed(() =>
+  props.clusterData.cluster_health?.health || 0
+);
+
+const cpuUtilization = computed(() =>
+  props.metricsData.cpu.data[props.metricsData.cpu.data.length - 1] || 0
+);
+
+const memoryUtilization = computed(() =>
+  props.metricsData.memory.data[props.metricsData.memory.data.length - 1] || 0
+);
+
+const storageUtilization = computed(() =>
+  props.metricsData.storage?.data[props.metricsData.storage?.data.length - 1] || 0
+);
+
+// Health chart options for the threshold lines
 const healthChartOptions = {
   responsive: true,
   maintainAspectRatio: false,
@@ -568,108 +519,11 @@ const healthChartOptions = {
   }
 };
 
-const cpuChartData = computed(() => ({
-  labels: props.metricsData.cpu.labels,
-  datasets: [{
-    label: 'CPU',
-    data: props.metricsData.cpu.data,
-    borderColor: 'rgb(75, 192, 192)',
-    fill: true,
-    backgroundColor: 'rgba(75, 192, 192, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(75, 192, 192, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const memoryChartData = computed(() => ({
-  labels: props.metricsData.memory.labels,
-  datasets: [{
-    label: 'Memory',
-    data: props.metricsData.memory.data,
-    borderColor: 'rgb(153, 102, 255)',
-    fill: true,
-    backgroundColor: 'rgba(153, 102, 255, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(153, 102, 255, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const storageChartData = computed(() => ({
-  labels: props.metricsData.storage?.labels || [],
-  datasets: [{
-    label: 'Storage',
-    data: props.metricsData.storage?.data || [],
-    borderColor: 'rgb(255, 159, 64)',
-    fill: true,
-    backgroundColor: 'rgba(255, 159, 64, 0.1)',
-    borderWidth: 1.5,
-    tension: 0.4,
-    pointRadius: 0,
-    pointHoverRadius: 4,
-    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
-    pointBorderColor: 'rgba(255, 159, 64, 0.5)',
-    pointBorderWidth: 1.5
-  }]
-}));
-
-const chartOptions = {
-  responsive: true,
-  maintainAspectRatio: false,
-  clip: false,
-  resizeDelay: 0,
-  responsiveAnimationDuration: 0,  /* Disable resize animation */
-  plugins: {
-    legend: {
-      display: false
-    },
-    tooltip: {
-      callbacks: {
-        label: (context) => `${context.parsed.y}%`
-      }
-    }
-  },
-  scales: {
-    x: {
-      display: false,
-      grid: {
-        display: false
-      }
-    },
-    y: {
-      display: false,
-      grid: {
-        display: false
-      },
-      min: 0,
-      max: 100
-    }
-  },
-  animation: false,
-  interaction: {
-    enabled: true,
-    mode: 'nearest',
-    intersect: false
-  },
-  onResize: (chart, size) => {
-    chart.resize();  /* Force resize on container change */
-  }
-};
-
 // Helper function to group objects by state
 const groupByState = (items, stateExtractor) => {
   const groups = {};
   if (!items || !Array.isArray(items)) return groups;
-  
+
   items.forEach(item => {
     const state = stateExtractor(item);
     if (!groups[state]) {
@@ -677,7 +531,7 @@ const groupByState = (items, stateExtractor) => {
     }
     groups[state].push(item);
   });
-  
+
   return groups;
 };
 
@@ -699,7 +553,7 @@ const updateStateHistory = (newStates, historyArray, maxPoints = 20) => {
   if (!newStates || Object.keys(newStates).length === 0) {
     return;
   }
-  
+
   // Check if there are any actual items in the states
   const hasItems = Object.values(newStates).some(items => items && items.length > 0);
   if (!hasItems) {
@@ -711,7 +565,7 @@ const updateStateHistory = (newStates, historyArray, maxPoints = 20) => {
     timestamp: Date.now(),
     states: JSON.parse(JSON.stringify(newStates)) // Deep copy to prevent reference issues
   });
-  
+
   // Limit history length
   if (historyArray.length > maxPoints) {
     historyArray.shift();
@@ -724,40 +578,40 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
   const allStates = new Map();
   const datasets = [];
   const stateData = {};
-  
+
   // Skip processing if no history data yet
   if (historyArray.length === 0) {
     return [];
   }
-  
+
   // Skip processing if current state groups are empty
   if (!currentStateGroups || Object.keys(currentStateGroups).length === 0) {
     return [];
   }
-  
+
   // Initialize data structure for all time points
   timeLabels.forEach((_, index) => {
     stateData[index] = {};
   });
-  
+
   // Process historical data
   if (historyArray.length > 0) {
     // Map history entries to time points in the chart
     const historyStep = historyArray.length / timeLabels.length;
-    
+
     timeLabels.forEach((_, timeIndex) => {
       // Find the corresponding history entry for this time point
       const historyIndex = Math.min(
         Math.floor(timeIndex * historyStep),
         historyArray.length - 1
       );
-      
+
       const historyEntry = historyArray[historyIndex];
       if (historyEntry && historyEntry.states) {
         // Record states at this time point
         Object.entries(historyEntry.states).forEach(([state, items]) => {
           stateData[timeIndex][state] = items.length;
-          
+
           // Track this state
           if (!allStates.has(state)) {
             allStates.set(state, {
@@ -769,12 +623,12 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
       }
     });
   }
-  
+
   // Add current states that might not be in history yet
   Object.entries(currentStateGroups).forEach(([state, items]) => {
     const lastIndex = timeLabels.length - 1;
     stateData[lastIndex][state] = items.length;
-    
+
     if (!allStates.has(state)) {
       allStates.set(state, {
         color: colorFunction(state),
@@ -785,16 +639,16 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
       allStates.get(state).currentCount = items.length;
     }
   });
-  
+
   // Create datasets for Chart.js
   const totalCount = Object.values(currentStateGroups)
     .reduce((sum, items) => sum + items.length, 0);
-  
+
   // Skip if total count is 0
   if (totalCount === 0) {
     return [];
   }
-  
+
   datasets.push({
     label: 'Total',
     data: Array(timeLabels.length).fill(totalCount),
@@ -806,14 +660,14 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
     order: 999,
     currentCount: totalCount
   });
-  
+
   // Add a line for each state
   allStates.forEach((stateInfo, state) => {
     // Create data array from historical state data
     const data = timeLabels.map((_, index) => {
       return stateData[index][state] || 0;
     });
-    
+
     // Skip drawing lines for states with all zero values
     if (data.every(value => value === 0)) {
       // Still add to legend if current count is not zero
@@ -826,7 +680,7 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
       }
       return;
     }
-    
+
     datasets.push({
       label: capitalizeState(state),
       data: data,
@@ -842,7 +696,7 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
       }
     });
   });
-  
+
   return datasets;
 };
 
@@ -863,12 +717,12 @@ const nodeStateColors = (state) => {
 // Node states processing
 const nodeStatesChartData = computed(() => {
   const labels = props.metricsData.health.labels;
-  
+
   // Only process if we have history data
   if (nodeStateHistory.value.length === 0) {
     return { labels, datasets: [] };
   }
-  
+
   // Process node states with history
   const datasets = processStateHistory(
     nodeStateGroups.value,
@@ -876,7 +730,7 @@ const nodeStatesChartData = computed(() => {
     labels,
     nodeStateColors
   );
-  
+
   return { labels, datasets };
 });
 
@@ -896,12 +750,12 @@ const vmStateColors = (state) => {
 // VM states processing
 const vmStatesChartData = computed(() => {
   const labels = props.metricsData.health.labels;
-  
+
   // Only process if we have history data
   if (vmStateHistory.value.length === 0) {
     return { labels, datasets: [] };
   }
-  
+
   // Process VM states with history
   const datasets = processStateHistory(
     vmStateGroups.value,
@@ -909,7 +763,7 @@ const vmStatesChartData = computed(() => {
     labels,
     vmStateColors
   );
-  
+
   return { labels, datasets };
 });
 
@@ -929,12 +783,12 @@ const osdStateColors = (state) => {
 // OSD states processing
 const osdStatesChartData = computed(() => {
   const labels = props.metricsData.health.labels;
-  
+
   // Only process if we have history data
   if (osdStateHistory.value.length === 0) {
     return { labels, datasets: [] };
   }
-  
+
   // Process OSD states with history
   const datasets = processStateHistory(
     osdStateGroups.value,
@@ -942,7 +796,7 @@ const osdStatesChartData = computed(() => {
     labels,
     osdStateColors
   );
-  
+
   return { labels, datasets };
 });
 
@@ -965,8 +819,8 @@ const statesChartOptions = {
           // Custom legend labels with counts
           const datasets = chart.data.datasets;
           return datasets.map(dataset => ({
-            text: dataset.currentCount !== undefined ? 
-              `${dataset.label}: ${dataset.currentCount}` : 
+            text: dataset.currentCount !== undefined ?
+              `${dataset.label}: ${dataset.currentCount}` :
               dataset.label,
             fillStyle: dataset.borderColor,
             strokeStyle: dataset.borderColor,
@@ -1019,30 +873,30 @@ watch(() => props.clusterData, (newData) => {
     if (!newData.detail) {
       return;
     }
-    
+
     // Update node state history
     const nodeStates = groupByState(newData.detail?.node, (node) => {
       return `${node.daemon_state}, ${node.domain_state}`;
     });
-    
+
     // Only update if we have actual node states
     if (Object.keys(nodeStates).length > 0) {
       updateStateHistory(nodeStates, nodeStateHistory.value);
     }
-    
+
     // Update VM state history
     const vmStates = groupByState(newData.detail?.vm, (vm) => vm.state);
-    
+
     // Only update if we have actual VM states
     if (Object.keys(vmStates).length > 0) {
       updateStateHistory(vmStates, vmStateHistory.value);
     }
-    
+
     // Update OSD state history
     const osdStates = groupByState(newData.detail?.osd, (osd) => {
       return `${osd.up}, ${osd.in}`;
     });
-    
+
     // Only update if we have actual OSD states
     if (Object.keys(osdStates).length > 0) {
       updateStateHistory(osdStates, osdStateHistory.value);
@@ -1057,23 +911,23 @@ onMounted(() => {
     const nodeStates = groupByState(props.clusterData.detail?.node, (node) => {
       return `${node.daemon_state}, ${node.domain_state}`;
     });
-    
+
     // Only initialize if we have actual node states
     if (Object.keys(nodeStates).length > 0) {
       updateStateHistory(nodeStates, nodeStateHistory.value);
     }
-    
+
     const vmStates = groupByState(props.clusterData.detail?.vm, (vm) => vm.state);
-    
+
     // Only initialize if we have actual VM states
     if (Object.keys(vmStates).length > 0) {
       updateStateHistory(vmStates, vmStateHistory.value);
     }
-    
+
     const osdStates = groupByState(props.clusterData.detail?.osd, (osd) => {
       return `${osd.up}, ${osd.in}`;
     });
-    
+
     // Only initialize if we have actual OSD states
     if (Object.keys(osdStates).length > 0) {
       updateStateHistory(osdStates, osdStateHistory.value);
@@ -1100,7 +954,7 @@ const showHealthDelta = (msg) => {
   if (msg.id === 'CLUSTER_HEALTHY') {
     return false;
   }
-  
+
   // Show delta for all other messages that have a delta value
   return msg.health_delta !== undefined && msg.health_delta !== null;
 };
@@ -1111,7 +965,7 @@ const getMessageId = (msg) => {
   if (msg.id === 'CLUSTER_HEALTHY') {
     return 'Cluster is healthy with no faults';
   }
-  
+
   // Return the original ID for all other messages
   return msg.id || 'Unknown Issue';
 };
@@ -1239,12 +1093,12 @@ const getMessageText = (msg) => {
   .metrics-row {
     grid-template-columns: repeat(4, 1fr);
   }
-  
+
   /* 4x1 for health/utilization graphs in full width */
   .graphs-row {
     grid-template-columns: repeat(4, 1fr);
   }
-  
+
   /* 3x1 for state graphs in full width */
   .states-graphs-row {
     grid-template-columns: repeat(3, 1fr);
@@ -1255,12 +1109,12 @@ const getMessageText = (msg) => {
   .metrics-row {
     grid-template-columns: repeat(2, 1fr); /* 2 columns when between 800px and 1200px */
   }
-  
+
   /* 2x2 for health/utilization graphs in medium width */
   .graphs-row {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   /* 1x3 for state graphs in medium width (vertical stack) */
   .states-graphs-row {
     grid-template-columns: 1fr;
@@ -1271,12 +1125,12 @@ const getMessageText = (msg) => {
   .metrics-row {
     grid-template-columns: 1fr; /* 1 column when <= 800px */
   }
-  
+
   /* 1x4 for health/utilization graphs in narrow width */
   .graphs-row {
     grid-template-columns: 1fr;
   }
-  
+
   /* 1x3 for state graphs in narrow width */
   .states-graphs-row {
     grid-template-columns: 1fr;
@@ -1394,8 +1248,13 @@ const getMessageText = (msg) => {
 .chart-wrapper {
   position: relative;
   width: 100%;
-  height: 100%;
-  min-width: 0;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
 }
 
 /* Add new style for full-width messages */
diff --git a/pvc-vue/src/components/ConfigPanel.vue b/pvc-vue/src/components/ConfigPanel.vue
index 3c51257..7a53180 100644
--- a/pvc-vue/src/components/ConfigPanel.vue
+++ b/pvc-vue/src/components/ConfigPanel.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Overlay that captures clicks outside the panel -->
-    <div 
-      v-if="modelValue" 
+    <div
+      v-if="modelValue"
       class="config-overlay"
       @click="closePanel"
     ></div>
-    
+   
     <div class="config-panel" :class="{ 'open': modelValue }">
       <div class="config-content" @click.stop>
         <h3>Configuration</h3>
diff --git a/pvc-vue/src/components/NodeStatus.vue b/pvc-vue/src/components/NodeStatus.vue
index 6f61e2c..58012fb 100644
--- a/pvc-vue/src/components/NodeStatus.vue
+++ b/pvc-vue/src/components/NodeStatus.vue
@@ -60,7 +60,7 @@ const formatMemory = (node) => {
   if (!node.memory || typeof node.memory !== 'object') {
     return { used: 'N/A', total: 'N/A', percent: 'N/A' };
   }
-  
+ 
   // Convert MB to GB with 2 decimal places
   const toGB = (mb) => {
     if (typeof mb !== 'number' || isNaN(mb)) {
@@ -68,17 +68,17 @@ const formatMemory = (node) => {
     }
     return (mb / 1024).toFixed(2);
   };
-  
+ 
   // Extract values from the Proxy object
   const memoryData = Object.assign({}, node.memory);
   const used = toGB(memoryData.used);
   const total = toGB(memoryData.total);
-  
+ 
   let percent = 'N/A';
   if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) {
     percent = Math.round((parseFloat(used) / parseFloat(total)) * 100);
   }
-  
+ 
   return { used, total, percent };
 };
 </script>
diff --git a/pvc-vue/src/components/PageTitle.vue b/pvc-vue/src/components/PageTitle.vue
index 590bce9..abeea76 100644
--- a/pvc-vue/src/components/PageTitle.vue
+++ b/pvc-vue/src/components/PageTitle.vue
@@ -37,4 +37,4 @@ defineProps({
   display: flex;
   gap: 0.5rem;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/components/charts/CPUChart.vue b/pvc-vue/src/components/charts/CPUChart.vue
new file mode 100644
index 0000000..3cbe51e
--- /dev/null
+++ b/pvc-vue/src/components/charts/CPUChart.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-cpu"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'CPU Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'CPU',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(75, 192, 192)',
+    fill: true,
+    backgroundColor: 'rgba(75, 192, 192, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(75, 192, 192, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.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-cpu {
+  background: white;
+  border: none;
+}
+
+.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;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/components/charts/HealthChart.vue b/pvc-vue/src/components/charts/HealthChart.vue
new file mode 100644
index 0000000..dc1f860
--- /dev/null
+++ b/pvc-vue/src/components/charts/HealthChart.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-health"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+  annotationPlugin
+);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Health'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    },
+    annotation: {
+      annotations: {
+        criticalLine: {
+          type: 'line',
+          yMin: 50,
+          yMax: 50,
+          borderColor: 'rgba(220, 53, 69, 0.5)',
+          borderWidth: 1,
+          borderDash: [5, 5]
+        },
+        warningLine: {
+          type: 'line',
+          yMin: 90,
+          yMax: 90,
+          borderColor: 'rgba(255, 193, 7, 0.5)',
+          borderWidth: 1,
+          borderDash: [5, 5]
+        }
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+// Helper function to get health color based on value
+const getHealthColor = (value) => {
+  if (value > 90) {
+    return {
+      border: 'rgba(40, 167, 69, 0.8)',  // Green
+      background: 'rgba(40, 167, 69, 0.1)'
+    };
+  } else if (value > 50) {
+    return {
+      border: 'rgba(255, 193, 7, 0.8)',  // Yellow
+      background: 'rgba(255, 193, 7, 0.1)'
+    };
+  } else {
+    return {
+      border: 'rgba(220, 53, 69, 0.8)',  // Red
+      background: 'rgba(220, 53, 69, 0.1)'
+    };
+  }
+};
+
+const formattedChartData = computed(() => {
+  const labels = props.chartData.labels || [];
+  const data = props.chartData.data || [];
+
+  // For single value or empty data
+  if (data.length <= 1) {
+    const value = data.length === 1 ? data[0] : props.value;
+    const color = getHealthColor(value);
+
+    return {
+      labels: labels.length ? labels : ['Health'],
+      datasets: [{
+        label: 'Health',
+        data: data.length ? data : [value],
+        borderColor: color.border,
+        backgroundColor: color.background,
+        fill: true,
+        borderWidth: 1.5,
+        tension: 0.4,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+        pointBorderColor: color.border,
+        pointBorderWidth: 1.5
+      }]
+    };
+  }
+
+  // For historical data with multiple values
+  return {
+    labels,
+    datasets: [{
+      label: 'Health',
+      data,
+      segment: {
+        borderColor: ctx => {
+          const value = ctx.p1.parsed.y;
+          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
+        },
+        backgroundColor: ctx => {
+          const value = ctx.p1.parsed.y;
+          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
+        }
+      },
+      fill: true,
+      borderWidth: 1.5,
+      tension: 0.4,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+      pointBorderColor: function(context) {
+        const index = context.dataIndex;
+        const value = context.dataset.data[index];
+        return getHealthColor(value).border;
+      },
+      pointBorderWidth: 1.5
+    }]
+  };
+});
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.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-health {
+  background: white;
+  border: none;
+}
+
+/* Add these styles to match the original design */
+.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;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/components/charts/MemoryChart.vue b/pvc-vue/src/components/charts/MemoryChart.vue
new file mode 100644
index 0000000..7e06485
--- /dev/null
+++ b/pvc-vue/src/components/charts/MemoryChart.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-memory"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Memory Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'Memory',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(153, 102, 255)',
+    fill: true,
+    backgroundColor: 'rgba(153, 102, 255, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(153, 102, 255, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.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-memory {
+  background: white;
+  border: none;
+}
+
+.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;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/components/charts/StorageChart.vue b/pvc-vue/src/components/charts/StorageChart.vue
new file mode 100644
index 0000000..e27aee3
--- /dev/null
+++ b/pvc-vue/src/components/charts/StorageChart.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="metric-card">
+    <div class="card-header">
+      <h6 class="card-title mb-0">
+        <span class="metric-label">{{ title }}</span>
+      </h6>
+    </div>
+    <div class="card-body">
+      <div class="metric-percentage">
+        <h4 class="metric-value">{{ value }}%</h4>
+      </div>
+      <div class="chart-wrapper">
+        <Line
+          :data="formattedChartData"
+          :options="chartOptions"
+          class="chart-storage"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler } from 'chart.js';
+
+// Register Chart.js components
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Storage Utilization'
+  },
+  value: {
+    type: Number,
+    default: 0
+  },
+  chartData: {
+    type: Object,
+    default: () => ({ labels: [], data: [] })
+  }
+});
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  resizeDelay: 0,
+  responsiveAnimationDuration: 0,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    }
+  },
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false
+      }
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false
+      },
+      min: 0,
+      max: 100
+    }
+  },
+  animation: false,
+  interaction: {
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
+  },
+  onResize: (chart, size) => {
+    chart.resize();
+  }
+};
+
+const formattedChartData = computed(() => ({
+  labels: props.chartData.labels || [],
+  datasets: [{
+    label: 'Storage',
+    data: props.chartData.data || [],
+    borderColor: 'rgb(255, 159, 64)',
+    fill: true,
+    backgroundColor: 'rgba(255, 159, 64, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(255, 159, 64, 0.5)',
+    pointBorderWidth: 1.5
+  }]
+}));
+</script>
+
+<style scoped>
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  min-height: 160px;
+  overflow: hidden;
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  margin: 0;
+}
+
+.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-storage {
+  background: white;
+  border: none;
+}
+
+.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;
+}
+
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/views/Nodes.vue b/pvc-vue/src/views/Nodes.vue
index a674fc6..82724b7 100644
--- a/pvc-vue/src/views/Nodes.vue
+++ b/pvc-vue/src/views/Nodes.vue
@@ -1,14 +1,14 @@
 <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" 
+        <button
+          v-for="node in nodeData"
           :key="node.name"
-          class="node-tab" 
+          class="node-tab"
           :class="{ 'active': selectedNode === node.name }"
           @click="selectNode(node.name)"
         >
@@ -23,7 +23,7 @@
         <i class="fas fa-chevron-right"></i>
       </button>
     </div>
-    
+
     <!-- Node Details -->
     <div v-if="selectedNodeData" class="node-details">
       <!-- Information Cards Section -->
@@ -170,35 +170,31 @@
           <div class="section-content">
             <div class="graphs-row">
               <!-- Health Chart -->
-              <MetricsChart 
+              <HealthChart
                 title="Node Health"
                 :value="selectedNodeData.health || 0"
                 :chart-data="nodeHealthChartData"
-                chart-type="health"
               />
-              
+
               <!-- CPU Utilization Chart -->
-              <MetricsChart 
+              <CPUChart
                 title="CPU Utilization"
                 :value="calculateCpuUtilization(selectedNodeData)"
                 :chart-data="nodeCpuChartData"
-                chart-type="cpu"
               />
-              
+
               <!-- Memory Utilization Chart -->
-              <MetricsChart 
+              <MemoryChart
                 title="Memory Utilization"
                 :value="calculateMemoryUtilization(selectedNodeData)"
                 :chart-data="nodeMemoryChartData"
-                chart-type="memory"
               />
-              
+
               <!-- Allocated Memory Chart -->
-              <MetricsChart 
+              <StorageChart
                 title="Allocated Memory"
                 :value="calculateAllocatedMemory(selectedNodeData)"
                 :chart-data="nodeAllocatedMemoryChartData"
-                chart-type="storage"
               />
             </div>
           </div>
@@ -209,7 +205,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- Memory Resources Section -->
       <div class="section-container" :class="{ 'collapsed': !sections.resources }">
         <!-- Collapsed section indicator -->
@@ -240,7 +236,7 @@
                   <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.total) }}</h4>
                 </div>
               </div>
-              
+
               <!-- Used Memory -->
               <div class="metric-card">
                 <div class="card-header">
@@ -252,7 +248,7 @@
                   <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.used) }}</h4>
                 </div>
               </div>
-              
+
               <!-- Free Memory -->
               <div class="metric-card">
                 <div class="card-header">
@@ -264,7 +260,7 @@
                   <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.free) }}</h4>
                 </div>
               </div>
-              
+
               <!-- Allocated Memory -->
               <div class="metric-card">
                 <div class="card-header">
@@ -276,7 +272,7 @@
                   <h4 class="metric-value">{{ formatMemory(selectedNodeData.memory?.allocated) }}</h4>
                 </div>
               </div>
-              
+
               <!-- Provisioned Memory -->
               <div class="metric-card">
                 <div class="card-header">
@@ -298,7 +294,7 @@
         </div>
       </div>
     </div>
-    
+
     <!-- No node selected message -->
     <div v-else class="no-node-selected">
       <p>Select a node to view details</p>
@@ -309,19 +305,22 @@
 <script setup>
 import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import PageTitle from '../components/PageTitle.vue';
-import MetricsChart from '../components/MetricsCharts.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';
 
 // 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];
 }
 
@@ -329,7 +328,7 @@ function formatBytes(bytes, decimals = 2) {
 function formatMemory(bytes) {
   if (bytes === undefined || bytes === null) return 'N/A';
   if (bytes === 0) return '0 GB';
-  
+
   // Convert to GB with 2 decimal places
   const gbValue = (bytes / (1024 * 1024 * 1024)).toFixed(2);
   return `${gbValue} GB`;
@@ -380,14 +379,14 @@ const selectedNodeData = computed(() => {
 // 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();
   });
@@ -396,12 +395,12 @@ const selectNode = (nodeName) => {
 // 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
 };
@@ -409,10 +408,10 @@ const checkScrollButtons = () => {
 // 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),
@@ -424,7 +423,7 @@ const scrollTabs = (direction) => {
       behavior: 'smooth'
     });
   }
-  
+
   // Check scroll buttons after scrolling
   setTimeout(checkScrollButtons, 300);
 };
@@ -432,7 +431,7 @@ const scrollTabs = (direction) => {
 // 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);
 };
@@ -440,7 +439,7 @@ const calculateCpuUtilization = (nodeData) => {
 // Calculate memory utilization (memory.used / memory.total * 100)
 const calculateMemoryUtilization = (nodeData) => {
   if (!nodeData || !nodeData.memory || !nodeData.memory.used || !nodeData.memory.total) return 0;
-  
+
   const utilization = (nodeData.memory.used / nodeData.memory.total) * 100;
   return Math.round(utilization);
 };
@@ -448,25 +447,23 @@ const calculateMemoryUtilization = (nodeData) => {
 // Calculate allocated memory (memory.allocated / memory.total * 100)
 const calculateAllocatedMemory = (nodeData) => {
   if (!nodeData || !nodeData.memory || !nodeData.memory.allocated || !nodeData.memory.total) return 0;
-  
+
   const utilization = (nodeData.memory.allocated / nodeData.memory.total) * 100;
   return Math.round(utilization);
 };
 
-// Prepare chart data for MetricsChart component
+// Prepare chart data for the node
 const nodeHealthChartData = computed(() => {
-  if (!selectedNodeData.value) return { labels: [], data: [] };
-  
   // 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'],
@@ -475,18 +472,16 @@ const nodeHealthChartData = computed(() => {
 });
 
 const nodeCpuChartData = computed(() => {
-  if (!selectedNodeData.value) return { labels: [], data: [] };
-  
   // 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'],
@@ -496,17 +491,17 @@ const nodeCpuChartData = computed(() => {
 
 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'],
@@ -516,17 +511,17 @@ const nodeMemoryChartData = computed(() => {
 
 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'],
@@ -540,7 +535,7 @@ onMounted(() => {
   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);
@@ -552,7 +547,7 @@ watch(() => props.nodeData, () => {
   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 });
@@ -735,11 +730,11 @@ onUnmounted(() => {
   .metrics-row {
     grid-template-columns: repeat(4, 1fr);
   }
-  
+
   .graphs-row {
     grid-template-columns: repeat(4, 1fr);
   }
-  
+
   .resources-row {
     grid-template-columns: repeat(5, 1fr);
   }
@@ -749,11 +744,11 @@ onUnmounted(() => {
   .metrics-row {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .graphs-row {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .resources-row {
     grid-template-columns: repeat(5, 1fr);
   }
@@ -917,4 +912,4 @@ onUnmounted(() => {
   background: white;
   border: none;
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/pvc-vue/src/views/Overview.vue b/pvc-vue/src/views/Overview.vue
index 495f09d..389e10d 100644
--- a/pvc-vue/src/views/Overview.vue
+++ b/pvc-vue/src/views/Overview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content-grid">
     <PageTitle title="Cluster Overview" />
-    <ClusterOverview 
+    <ClusterOverview
       :clusterData="clusterData"
       :metricsData="metricsData"
     />
@@ -24,4 +24,4 @@ defineProps({
     default: () => ({})
   }
 });
-</script> 
\ No newline at end of file
+</script>
\ No newline at end of file