Improve graph data point display

pvc-vue/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
         "bootstrap": "^5.3.3",
-        "chart.js": "^4.4.8",
+        "chart.js": "^4.4.1",
+        "chartjs-plugin-annotation": "^3.0.1",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
         "vue-chartjs": "^5.3.2"
@@ -983,6 +984,14 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-annotation": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+      "peerDependencies": {
+        "chart.js": ">=4.0.0"
+      }
+    },
     "node_modules/copy-anything": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",

pvc-vue/package.json

@@ -11,10 +11,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
     "bootstrap": "^5.3.3",
-    "chart.js": "^4.4.8",
+    "chart.js": "^4.4.1",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
-    "vue-chartjs": "^5.3.2"
+    "vue-chartjs": "^5.3.2",
+    "chartjs-plugin-annotation": "^3.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

pvc-vue/src/App.vue

@@ -1,21 +1,39 @@
 <template>
-  <nav class="navbar navbar-dark bg-dark">
+  <div class="d-flex">
-    <div class="container">
+    <!-- Sidebar -->
-      <span class="navbar-brand">PVC Cluster Dashboard</span>
+    <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
-      <button class="btn btn-primary config-toggle" @click="toggleConfig">
+      <div class="sidebar-header">
-        <i class="fas fa-cog"></i> Configure
+        <h5 class="text-white mb-0">PVC Dashboard</h5>
-      </button>
+        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
-    </div>
+          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
-  </nav>
+        </button>
-
+      </div>
-  <div class="container mt-4">
+      <div class="sidebar-content">
-    <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
+        <!-- Future navigation items can go here -->
-      {{ connectionStatusMessage }}
+      </div>
+      <div class="sidebar-footer">
+        <button class="btn btn-outline-light w-100" @click="toggleConfig">
+          <i class="fas fa-cog"></i> Configure
+        </button>
+      </div>
     </div>
 
-    <ClusterOverview :clusterData="clusterData" />
+    <!-- Main Content -->
-    <MetricsCharts :metricsData="metricsHistory" />
+    <div class="main-content" :class="{ 'expanded': sidebarCollapsed }">
-    <NodeStatus :nodeData="nodeData" />
+      <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
+        {{ connectionStatusMessage }}
+      </div>
+      <div class="content-grid">
+        <div class="overview-row">
+          <ClusterOverview 
+            :clusterData="clusterData"
+            :metricsHistory="metricsHistory.health"
+          />
+          <NodeStatus :nodeData="nodeData" />
+        </div>
+        <MetricsCharts :metricsData="metricsHistory" class="metrics-section" />
+      </div>
+    </div>
   </div>
 
   <ConfigPanel 
@@ -50,6 +68,12 @@ const connectionStatusClass = ref('alert-warning');
 
 let updateTimer = null;
 
+const sidebarCollapsed = ref(false);
+
+const toggleSidebar = () => {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+};
+
 const toggleConfig = () => {
   configPanelOpen.value = !configPanelOpen.value;
 };
@@ -98,6 +122,9 @@ const updateDashboard = async () => {
     const status = await api.fetchStatus();
     const nodes = await api.fetchNodes();
     
+    console.log('[API] Status Response:', status);
+    console.log('[API] Nodes Response:', nodes);
+    
     // Update state with new objects instead of mutating
     clusterData.value = { ...status };
     nodeData.value = [...nodes];
@@ -143,13 +170,96 @@ onUnmounted(() => {
 @import 'bootstrap/dist/css/bootstrap.min.css';
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
-.metric-card {
+.sidebar {
+  width: 250px;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 1rem;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.collapsed {
+  width: 60px;
+}
+
+.sidebar.collapsed .sidebar-header h5,
+.sidebar.collapsed .sidebar-content,
+.sidebar.collapsed .btn span {
+  display: none;
+}
+
+.sidebar-header {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.collapse-btn {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.collapse-btn:hover {
+  opacity: 1;
+}
+
+.sidebar-content {
+  flex-grow: 1;
+}
+
+.sidebar-footer {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255,255,255,0.1);
+}
+
+.main-content {
+  margin-left: 250px;
+  padding: 0.5rem;
+  width: calc(100% - 250px);
+  min-height: 100vh;
   transition: all 0.3s ease;
 }
-.metric-card:hover {
+
-  transform: translateY(-5px);
+.main-content.expanded {
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  margin-left: 60px;
+  width: calc(100% - 60px);
 }
+
+.content-grid {
+  display: flex;
+  flex-direction: column;
+  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 */
+}
+
 .status-healthy { color: #28a745; }
 .status-warning { color: #ffc107; }
 .status-error { color: #dc3545; }

pvc-vue/src/components/ClusterOverview.vue

@@ -1,28 +1,58 @@
 <template>
-  <div class="card mb-4">
+  <div class="card">
     <div class="card-header">
       <h5 class="mb-0">Cluster Overview</h5>
     </div>
     <div class="card-body">
-      <div class="row">
+      <div class="overview-container">
-        <!-- Card 1: Cluster Health -->
+        <div class="health-card">
-        <div class="col-md">
+          <div class="card-body">
-          <div class="card metric-card">
+            <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
-            <div class="card-body">
+            <div class="health-content-wrapper">
-              <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
+              <div class="health-graph">
-              <h4 :class="['card-title', getHealthClass(clusterData.cluster_health?.health)]">
+                <div class="health-percentage">
-                {{ clusterData.cluster_health?.health || 0 }}%
+                  <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
-              </h4>
+                    {{ clusterData.cluster_health?.health || 0 }}%
-              <small class="text-muted">
+                  </h4>
-                {{ clusterData.cluster_health?.messages?.join('<br>') || 'No issues' }}
+                </div>
-              </small>
+                <Line
+                  :data="healthChartData"
+                  :options="healthChartOptions"
+                />
+              </div>
+              <div class="health-messages">
+                <div class="messages-grid">
+                  <template v-if="clusterData.cluster_health?.messages?.length">
+                    <div 
+                      v-for="(msg, idx) in clusterData.cluster_health.messages" 
+                      :key="idx"
+                      :class="['health-message', getDeltaClass(msg.health_delta)]"
+                      :title="msg.text || 'No details available'"
+                    >
+                      <i class="fas fa-circle-exclamation me-1"></i>
+                      <span class="message-text">
+                        {{ msg.id || 'Unknown Issue' }}
+                        <span 
+                          v-if="msg.health_delta" 
+                          class="health-delta"
+                        >
+                          ({{ msg.health_delta }}%)
+                        </span>
+                      </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>
-
+        <div class="metrics-row">
-        <!-- Card 2: PVC Version -->
+          <!-- Card 2: PVC Version -->
-        <div class="col-md">
+          <div class="metric-card">
-          <div class="card metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
               <h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
@@ -31,11 +61,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 3: Nodes -->
+          <!-- Card 3: Nodes -->
-        <div class="col-md">
+          <div class="metric-card">
-          <div class="card metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
               <h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
@@ -44,11 +72,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 4: VMs -->
+          <!-- Card 4: VMs -->
-        <div class="col-md">
+          <div class="metric-card">
-          <div class="card metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">VMs</h6>
               <h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
@@ -64,11 +90,9 @@
               </small>
             </div>
           </div>
-        </div>
 
-        <!-- Card 5: Storage -->
+          <!-- Card 5: Storage -->
-        <div class="col-md">
+          <div class="metric-card">
-          <div class="card metric-card">
             <div class="card-body">
               <h6 class="card-subtitle mb-2 text-muted">Storage</h6>
               <div class="storage-metrics">
@@ -87,11 +111,44 @@
 </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({
   clusterData: {
     type: Object,
     required: true,
     default: () => ({})
+  },
+  metricsHistory: {
+    type: Object,
+    required: true,
+    default: () => ({ labels: [], data: [] })
   }
 });
 
@@ -100,16 +157,317 @@ const getHealthClass = (health) => {
   if (health > 50) return 'status-warning';
   return 'status-error';
 };
+
+const getHealthColors = (health) => {
+  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) => {
+  const value = Math.abs(delta);
+  if (value <= 5) return 'delta-low';
+  if (value <= 10) return 'delta-medium';
+  return 'delta-high';
+};
+
+const healthChartData = computed(() => {
+  return {
+    labels: props.metricsHistory.labels,
+    datasets: [{
+      data: props.metricsHistory.data,
+      fill: true,
+      segment: {
+        borderColor: (ctx) => {
+          const value = ctx.p1.parsed.y;
+          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 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) => {
+        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
+    }]
+  };
+});
+
+const healthChartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  clip: false,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context) => `${context.parsed.y}%`
+      }
+    },
+    annotation: {
+      annotations: {
+        warning: {
+          type: 'line',
+          yMin: 90,
+          yMax: 90,
+          borderColor: 'rgba(255, 193, 7, 0.2)',
+          borderWidth: 1,
+        },
+        danger: {
+          type: 'line',
+          yMin: 50,
+          yMax: 50,
+          borderColor: 'rgba(220, 53, 69, 0.2)',
+          borderWidth: 1,
+        }
+      }
+    }
+  },
+  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>
-.metric-card {
+.overview-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   height: 100%;
 }
 
+.health-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+}
+
+.health-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: calc(100% - 2rem); /* Account for header */
+  width: 100%;
+  position: relative;
+}
+
+.health-graph {
+  position: relative;
+  flex-grow: 1;
+  min-height: 0; /* Allow shrinking */
+  display: flex;
+  align-items: center;
+}
+
+.health-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;
+}
+
+.health-title {
+  font-size: 2.5rem;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+  line-height: 1;
+}
+
+.health-messages {
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 0.25rem;
+  position: relative;
+  bottom: 0;
+  min-height: 2.5rem;
+  max-height: 30%; /* Reduce maximum height */
+  overflow-y: auto;
+}
+
+.messages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 0.25rem;
+}
+
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  height: fit-content;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #28a745;
+}
+
+.health-message:hover {
+  &.delta-low {
+    background: rgba(40, 167, 69, 0.15);
+  }
+  &.delta-medium {
+    background: rgba(255, 193, 7, 0.15);
+  }
+  &.delta-high {
+    background: rgba(220, 53, 69, 0.15);
+  }
+}
+
+.health-message:hover::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  z-index: 1000;
+  width: max-content;
+  max-width: 300px;
+  margin-left: 0.5rem;
+  white-space: normal;
+}
+
+/* Adjust tooltip position if message is in the right half of the screen */
+@media (min-width: 768px) {
+  .health-message:hover::after {
+    left: auto;
+    right: 100%;
+    margin-left: 0;
+    margin-right: 0.5rem;
+  }
+}
+
+/* Custom scrollbar for the messages container */
+.health-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.health-messages::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+}
+
+.health-messages::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.health-messages::-webkit-scrollbar-thumb:hover {
+  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;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;  /* Darker green */
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.1);
+  color: #856404;  /* Darker yellow */
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.1);
+  color: #721c24;  /* Darker red */
+}
 </style>

pvc-vue/src/components/MetricsCharts.vue

@@ -1,27 +1,12 @@
 <template>
-  <div class="card mb-4">
+  <div class="card metrics-card">
     <div class="card-header">
       <h5 class="mb-0">Resource Utilization</h5>
     </div>
     <div class="card-body">
-      <div class="row">
+      <div class="metrics-grid">
-        <!-- Cluster Health Chart -->
-        <div class="col-md-3">
-          <div class="card">
-            <div class="card-header">
-              <h6 class="card-title mb-0">Health</h6>
-            </div>
-            <div class="card-body">
-              <Line
-                :data="healthChartData"
-                :options="chartOptions"
-              />
-            </div>
-          </div>
-        </div>
-
         <!-- CPU Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">CPU</h6>
@@ -36,7 +21,7 @@
         </div>
 
         <!-- Memory Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">Memory</h6>
@@ -51,7 +36,7 @@
         </div>
 
         <!-- Storage Utilization Chart -->
-        <div class="col-md-3">
+        <div class="metric-item">
           <div class="card">
             <div class="card-header">
               <h6 class="card-title mb-0">Storage</h6>
@@ -132,7 +117,8 @@ const chartOptions = {
       tension: 0.2
     },
     point: {
-      radius: 2
+      radius: 0,
+      hoverRadius: 4
     }
   },
   plugins: {
@@ -187,6 +173,46 @@ const storageChartData = computed(() => ({
 </script>
 
 <style scoped>
+.metrics-card {
+  grid-column: 1 / -1;  /* Make metrics card span full width */
+}
+
+.card-header {
+  padding: 0.5rem;
+}
+
+.card-body {
+  padding: 0.5rem;
+}
+
+.card-title {
+  margin-bottom: 0.5rem;
+}
+
+.metrics-grid {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 0;  /* Remove any default margins */
+}
+
+.metric-item {
+  min-height: 250px;
+  padding: 0;  /* Remove any default padding */
+}
+
+@media (max-width: 1400px) {
+  .metrics-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 .card-header h6 {
   font-size: 0.95rem;
   font-weight: 600;

pvc-vue/src/components/NodeStatus.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="card mb-4">
+  <div class="card">
     <div class="card-header">
-      <h5 class="mb-0">Node Status</h5>
+      <h5 class="mb-0">Node Overview</h5>
     </div>
     <div class="card-body">
       <div class="row">
         <template v-for="node in nodeData" :key="node.name">
-          <div class="col-md-4 mb-3">
+          <div class="col-md-4 node-wrapper">
             <div class="card">
               <div class="card-body">
                 <h5 class="card-title">{{ node.name }}</h5>
@@ -50,8 +50,6 @@ const getHealthClass = (health) => {
 };
 
 const formatMemory = (node) => {
-  console.log('Memory data for node:', node.name, node.memory);
-  
   if (!node.memory || typeof node.memory !== 'object') {
     return { used: 'N/A', total: 'N/A', percent: 'N/A' };
   }
@@ -59,7 +57,6 @@ const formatMemory = (node) => {
   // Convert MB to GB with 2 decimal places
   const toGB = (mb) => {
     if (typeof mb !== 'number' || isNaN(mb)) {
-      console.log('Invalid MB value:', mb);
       return 'N/A';
     }
     return (mb / 1024).toFixed(2);
@@ -70,8 +67,6 @@ const formatMemory = (node) => {
   const used = toGB(memoryData.used);
   const total = toGB(memoryData.total);
   
-  console.log('Converted memory values:', { used, total });
-  
   let percent = 'N/A';
   if (used !== 'N/A' && total !== 'N/A' && parseFloat(total) > 0) {
     percent = Math.round((parseFloat(used) / parseFloat(total)) * 100);
@@ -84,7 +79,19 @@ const formatMemory = (node) => {
 <style scoped>
 .card-title {
   font-size: 1.1rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-body {
+  padding: 0.5rem;
+}
+
+.row {
+  margin: -0.25rem;  /* Compensate for node-wrapper padding */
+}
+
+.node-wrapper {
+  padding: 0.25rem;  /* Half of our standard gap to create 0.5rem between cards */
 }
 
 .card-text {