Adjust styling of utilization graphs

pvc-vue/src/App.vue

@@ -13,7 +13,8 @@
       </div>
       <div class="sidebar-footer">
         <button class="btn btn-outline-light w-100" @click="toggleConfig">
-          <i class="fas fa-cog"></i> Configure
+          <i class="fas fa-cog"></i>
+          <span class="config-text ms-2">Configure</span>
         </button>
       </div>
     </div>
@@ -24,15 +25,12 @@
         {{ connectionStatusMessage }}
       </div>
       <div class="content-grid">
-        <div class="overview-row">
         <ClusterOverview 
           :clusterData="clusterData"
-            :metricsHistory="metricsHistory.health"
+          :metricsData="metricsHistory"
         />
         <NodeStatus :nodeData="nodeData" />
       </div>
-        <MetricsCharts :metricsData="metricsHistory" class="metrics-section" />
-      </div>
     </div>
   </div>
 
@@ -59,7 +57,8 @@ const metricsHistory = ref({
   cpu: { labels: [], data: [] },
   memory: { labels: [], data: [] },
   health: { labels: [], data: [] },
-  storage: { labels: [], data: [] }
+  storage: { labels: [], data: [] },
+  maintenance: { labels: [], data: [] }
 });
 
 const showConnectionStatus = ref(false);
@@ -85,17 +84,19 @@ const saveConfig = async (newConfig) => {
 };
 
 const updateMetricsHistory = (timestamp, status) => {
-  // Create new arrays instead of mutating
   const metrics = {
     cpu: status.resources?.cpu?.utilization || 0,
     memory: status.resources?.memory?.utilization || 0,
     health: status.cluster_health?.health || 0,
-    storage: status.resources?.disk?.utilization || 0
+    storage: status.resources?.disk?.utilization || 0,
+    maintenance: status.maintenance === "true" ? true : false
   };
 
   Object.keys(metrics).forEach(metric => {
     const labels = [...metricsHistory.value[metric].labels, timestamp];
-    const data = [...metricsHistory.value[metric].data, Math.round(metrics[metric])];
+    const data = [...metricsHistory.value[metric].data, 
+      typeof metrics[metric] === 'boolean' ? metrics[metric] : Math.round(metrics[metric])
+    ];
     
     // Keep only last 180 points
     if (labels.length > 180) {
@@ -188,7 +189,7 @@ onUnmounted(() => {
 
 .sidebar.collapsed .sidebar-header h5,
 .sidebar.collapsed .sidebar-content,
-.sidebar.collapsed .btn span {
+.sidebar.collapsed .config-text {
   display: none;
 }
 
@@ -220,6 +221,12 @@ onUnmounted(() => {
   border-top: 1px solid rgba(255,255,255,0.1);
 }
 
+.sidebar.collapsed .sidebar-footer .btn {
+  padding: 0.375rem;
+  display: flex;
+  justify-content: center;
+}
+
 .main-content {
   margin-left: 250px;
   padding: 0.5rem;
@@ -239,23 +246,6 @@ onUnmounted(() => {
   gap: 0.5rem;
 }
 
-.overview-row {
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: 2fr 3fr;
-}
-
-.overview-row > * {
-  height: 100%;
-  min-height: 400px;
-}
-
-@media (max-width: 1200px) {
-  .overview-row {
-    grid-template-columns: 1fr;
-  }
-}
-
 .metric-card {
   /* Remove transition and hover effect */
 }

pvc-vue/src/components/ClusterOverview.vue

@@ -5,9 +5,110 @@
     </div>
     <div class="card-body">
       <div class="overview-container">
-        <div class="health-card">
+        <div class="metrics-row">
+          <!-- Card 1: Cluster Name -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Cluster</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 2: Version -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Version</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 4: Nodes -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Nodes</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 5: Primary -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Primary Node</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 6: VMs -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">VMs</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 7: OSDs -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">OSDs</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 8: Pools -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Pools</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
+            </div>
+          </div>
+
+          <!-- Card 9: Volumes -->
+          <div class="metric-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">
+                <span class="metric-label">Volumes</span>
+              </h6>
+            </div>
+            <div class="card-body">
+              <h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
+            </div>
+          </div>
+        </div>
+
+        <div class="graphs-row">
+          <div class="health-card">
+            <div class="card-header">
+              <h6 class="card-title mb-0 metric-label">Cluster Health</h6>
+            </div>
             <div class="card-body">
-            <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
               <div class="health-content-wrapper">
                 <div class="health-graph">
                   <div class="health-percentage">
@@ -22,9 +123,9 @@
                 </div>
                 <div class="health-messages">
                   <div class="messages-grid">
-                  <template v-if="clusterData.cluster_health?.messages?.length">
+                    <template v-if="displayMessages.length">
                       <div 
-                      v-for="(msg, idx) in clusterData.cluster_health.messages" 
+                        v-for="(msg, idx) in displayMessages" 
                         :key="idx"
                         :class="['health-message', getDeltaClass(msg.health_delta)]"
                         :title="msg.text || 'No details available'"
@@ -41,67 +142,57 @@
                         </span>
                       </div>
                     </template>
-                  <div v-else class="health-message healthy">
-                    <i class="fas fa-check-circle me-1"></i>
-                    <span>No issues detected</span>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+          <!-- CPU Chart -->
-        <div class="metrics-row">
-          <!-- Card 2: PVC Version -->
           <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">
-              <h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
+              <div class="metric-percentage">
-              <h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
+                <h4 class="metric-value">
-              <small class="text-muted">
+                  {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
-                Cluster ID: {{ clusterData.cluster_id || 'N/A' }}
+                </h4>
-              </small>
+              </div>
+              <Line :data="cpuChartData" :options="chartOptions" />
             </div>
           </div>
-
+          <!-- Memory Chart -->
-          <!-- Card 3: Nodes -->
           <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">
-              <h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
+              <div class="metric-percentage">
-              <h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
+                <h4 class="metric-value">
-              <small class="text-muted">
+                  {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
-                Primary: {{ clusterData.primary_node || 'N/A' }}
+                </h4>
-              </small>
+              </div>
+              <Line :data="memoryChartData" :options="chartOptions" />
             </div>
           </div>
-
+          <!-- Storage Chart -->
-          <!-- Card 4: VMs -->
           <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">
-              <h6 class="card-subtitle mb-2 text-muted">VMs</h6>
+              <div class="metric-percentage">
-              <h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
+                <h4 class="metric-value">
-              <small class="text-muted">
+                  {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
-                <template v-if="clusterData.vms?.per_node">
+                </h4>
-                  <span v-for="(count, node) in clusterData.vms.per_node" :key="node">
-                    {{ node }}: {{ count }}<br>
-                  </span>
-                </template>
-                <template v-else>
-                  Distribution: N/A
-                </template>
-              </small>
-            </div>
-          </div>
-
-          <!-- Card 5: Storage -->
-          <div class="metric-card">
-            <div class="card-body">
-              <h6 class="card-subtitle mb-2 text-muted">Storage</h6>
-              <div class="storage-metrics">
-                <small class="text-muted">
-                  OSDs: {{ clusterData.osds?.total || 0 }}<br>
-                  Pools: {{ clusterData.pools || 0 }}<br>
-                  Volumes: {{ clusterData.volumes?.total || 0 }}
-                </small>
               </div>
+              <Line :data="storageChartData" :options="chartOptions" />
             </div>
           </div>
         </div>
@@ -145,13 +236,44 @@ const props = defineProps({
     required: true,
     default: () => ({})
   },
-  metricsHistory: {
+  metricsData: {
     type: Object,
     required: true,
-    default: () => ({ labels: [], data: [] })
+    default: () => ({})
   }
 });
 
+const displayMessages = computed(() => {
+  const messages = [];
+  
+  // Add maintenance message if maintenance is "true"
+  if (props.clusterData.maintenance === "true") {
+    messages.push({
+      id: "Cluster is in maintenance",
+      health_delta: null,
+      text: "Cluster is currently in maintenance mode",
+      maintenance: true
+    });
+  }
+  
+  // Add other messages if they exist
+  if (props.clusterData.cluster_health?.messages?.length) {
+    messages.push(...props.clusterData.cluster_health.messages);
+  }
+  
+  // If no messages and not in maintenance, show "No issues"
+  if (messages.length === 0) {
+    messages.push({
+      id: "No issues detected",
+      health_delta: null,
+      text: "System is healthy",
+      health_delta: 0  // This will trigger the delta-low class for green styling
+    });
+  }
+  
+  return messages;
+});
+
 const getHealthClass = (health) => {
   if (health > 90) return 'status-healthy';
   if (health > 50) return 'status-warning';
@@ -159,12 +281,16 @@ const getHealthClass = (health) => {
 };
 
 const getHealthColors = (health) => {
+  if (props.clusterData.maintenance === "true") {
+    return { bg: 'rgba(13, 110, 253, 0.1)', border: 'rgba(13, 110, 253, 0.2)' };  // Blue
+  }
   if (health > 90) return { bg: 'rgba(40, 167, 69, 0.1)', border: 'rgba(40, 167, 69, 0.2)' };  // Green
   if (health > 50) return { bg: 'rgba(255, 193, 7, 0.1)', border: 'rgba(255, 193, 7, 0.2)' };  // Yellow
   return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' };                    // Red
 };
 
 const getDeltaClass = (delta) => {
+  if (delta === null) return 'delta-info';  // For maintenance and healthy messages
   const value = Math.abs(delta);
   if (value <= 5) return 'delta-low';
   if (value <= 10) return 'delta-medium';
@@ -173,18 +299,32 @@ const getDeltaClass = (delta) => {
 
 const healthChartData = computed(() => {
   return {
-    labels: props.metricsHistory.labels,
+    labels: props.metricsData.health.labels,
     datasets: [{
-      data: props.metricsHistory.data,
+      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
@@ -197,6 +337,8 @@ const healthChartData = computed(() => {
       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
@@ -263,6 +405,98 @@ const healthChartOptions = {
     intersect: false
   }
 };
+
+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,
+  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
+  }
+};
 </script>
 
 <style scoped>
@@ -270,7 +504,18 @@ const healthChartOptions = {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  height: 100%;
+}
+
+.graphs-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
+
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 0.5rem;
 }
 
 .health-card {
@@ -284,7 +529,6 @@ const healthChartOptions = {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  height: calc(100% - 2rem); /* Account for header */
   width: 100%;
   position: relative;
 }
@@ -292,7 +536,7 @@ const healthChartOptions = {
 .health-graph {
   position: relative;
   flex-grow: 1;
-  min-height: 0; /* Allow shrinking */
+  min-height: 0;
   display: flex;
   align-items: center;
 }
@@ -314,6 +558,7 @@ const healthChartOptions = {
   margin: 0;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   line-height: 1;
+  color: #333;
 }
 
 .health-messages {
@@ -323,8 +568,9 @@ const healthChartOptions = {
   position: relative;
   bottom: 0;
   min-height: 2.5rem;
-  max-height: 30%; /* Reduce maximum height */
+  max-height: 30%;
   overflow-y: auto;
+  margin-top: auto;  /* Push to bottom of container */
 }
 
 .messages-grid {
@@ -409,48 +655,6 @@ const healthChartOptions = {
   background: rgba(0, 0, 0, 0.3);
 }
 
-.metrics-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
-}
-
-.metric-card {
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-}
-
-.storage-metrics {
-  min-height: 3.5rem;
-  display: flex;
-  align-items: center;
-}
-
-@media (max-width: 1400px) {
-  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 992px) {
-  .metrics-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-.card-body {
-  padding: 0.5rem;
-}
-
-.card-subtitle {
-  margin-bottom: 0.5rem !important;
-}
-
-.metric-card .card-body {
-  padding: 0.5rem;
-}
-
 .health-delta {
   margin-left: 0.5rem;
   font-size: 0.8em;
@@ -470,4 +674,106 @@ const healthChartOptions = {
   background: rgba(220, 53, 69, 0.1);
   color: #721c24;  /* Darker red */
 }
+
+.delta-info {
+  background: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
+
+.metric-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.metric-card .metric-value {
+  font-size: 1.25rem;  /* Return to original size for metric cards */
+  font-weight: bold;
+  color: #333;
+  line-height: 1;
+  margin: 0;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.metric-label {
+  color: #666;
+}
+
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.5);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+  z-index: 2;
+}
+
+/* Style for the percentage overlay in graphs */
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: normal;  /* Match health graph */
+  color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+@media (max-width: 1400px) {
+  .graphs-row {
+    grid-template-columns: 1fr 1fr;
+  }
+  .metrics-row {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (max-width: 992px) {
+  .metrics-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 576px) {
+  .graphs-row {
+    grid-template-columns: 1fr;
+  }
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.status-maintenance {
+  color: #0d6efd;  /* Bootstrap blue */
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #28a745;
+}
+
+.delta-info {
+  background: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
 </style>

pvc-vue/src/components/MetricsCharts.vue

@@ -9,7 +9,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">CPU</h6>
+              <h6 class="card-title mb-0">
+                CPU
+                <span class="current-value">
+                  {{ props.metricsData.cpu.data[props.metricsData.cpu.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -24,7 +29,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">Memory</h6>
+              <h6 class="card-title mb-0">
+                Memory
+                <span class="current-value">
+                  {{ props.metricsData.memory.data[props.metricsData.memory.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -39,7 +49,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">Storage</h6>
+              <h6 class="card-title mb-0">
+                Storage
+                <span class="current-value">
+                  {{ props.metricsData.storage?.data[props.metricsData.storage?.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -123,7 +138,8 @@ const chartOptions = {
   },
   plugins: {
     legend: {
-      position: 'top'
+      position: 'top',
+      display: false  // Hide legend completely
     }
   },
   animation: false,
@@ -144,7 +160,7 @@ const healthChartData = computed(() => ({
 const cpuChartData = computed(() => ({
   labels: props.metricsData.cpu.labels,
   datasets: [{
-    label: 'CPU %',
+    label: 'CPU',
     data: props.metricsData.cpu.data,
     borderColor: 'rgb(75, 192, 192)',
     fill: false
@@ -154,7 +170,7 @@ const cpuChartData = computed(() => ({
 const memoryChartData = computed(() => ({
   labels: props.metricsData.memory.labels,
   datasets: [{
-    label: 'Memory %',
+    label: 'Memory',
     data: props.metricsData.memory.data,
     borderColor: 'rgb(153, 102, 255)',
     fill: false
@@ -164,7 +180,7 @@ const memoryChartData = computed(() => ({
 const storageChartData = computed(() => ({
   labels: props.metricsData.storage?.labels || [],
   datasets: [{
-    label: 'Storage %',
+    label: 'Storage',
     data: props.metricsData.storage?.data || [],
     borderColor: 'rgb(255, 159, 64)',
     fill: false
@@ -216,5 +232,14 @@ const storageChartData = computed(() => ({
 .card-header h6 {
   font-size: 0.95rem;
   font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.current-value {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #333;
 }
 </style>