Improve graph data point display

More tweaks to health output
Fix graph of health
2025-02-26 23:54:22 -05:00 · 2025-02-26 23:49:46 -05:00 · 2025-02-26 23:37:07 -05:00 · 2025-02-26 23:20:19 -05:00 · 2025-02-26 23:14:39 -05:00 · 2025-02-26 23:10:10 -05:00
6 changed files with 593 additions and 82 deletions
--- a/pvc-vue/package-lock.json
+++ b/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",
--- a/pvc-vue/package.json
+++ b/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",
--- a/pvc-vue/src/App.vue
+++ b/pvc-vue/src/App.vue
@ -1,22 +1,40 @@
 <template>
-  <nav class="navbar navbar-dark bg-dark">
-    <div class="container">
-      <span class="navbar-brand">PVC Cluster Dashboard</span>
-      <button class="btn btn-primary config-toggle" @click="toggleConfig">
+  <div class="d-flex">
+    <!-- Sidebar -->
+    <div class="sidebar bg-dark" :class="{ 'collapsed': sidebarCollapsed }">
+      <div class="sidebar-header">
+        <h5 class="text-white mb-0">PVC Dashboard</h5>
+        <button class="btn btn-link text-white p-0 collapse-btn" @click="toggleSidebar">
+          <i class="fas" :class="sidebarCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
+        </button>
+      </div>
+      <div class="sidebar-content">
+        <!-- Future navigation items can go here -->
+      </div>
+      <div class="sidebar-footer">
+        <button class="btn btn-outline-light w-100" @click="toggleConfig">
          <i class="fas fa-cog"></i> Configure
        </button>
      </div>
-  </nav>
+    </div>

-  <div class="container mt-4">
+    <!-- Main Content -->
+    <div class="main-content" :class="{ 'expanded': sidebarCollapsed }">
      <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
        {{ connectionStatusMessage }}
      </div>
-
-    <ClusterOverview :clusterData="clusterData" />
-    <MetricsCharts :metricsData="metricsHistory" />
+      <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 
    v-model="configPanelOpen"
@ -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);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+
+.main-content.expanded {
+  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; }
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/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">
-        <!-- Card 1: Cluster Health -->
-        <div class="col-md">
-          <div class="card metric-card">
+      <div class="overview-container">
+        <div class="health-card">
          <div class="card-body">
            <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
-              <h4 :class="['card-title', getHealthClass(clusterData.cluster_health?.health)]">
+            <div class="health-content-wrapper">
+              <div class="health-graph">
+                <div class="health-percentage">
+                  <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
                    {{ clusterData.cluster_health?.health || 0 }}%
                  </h4>
-              <small class="text-muted">
-                {{ clusterData.cluster_health?.messages?.join('<br>') || 'No issues' }}
-              </small>
+                </div>
+                <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 -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <div class="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 -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <div class="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 -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <div class="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 -->
-        <div class="col-md">
-          <div class="card metric-card">
+          <div class="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>
--- a/pvc-vue/src/components/MetricsCharts.vue
+++ b/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">
-        <!-- 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>
-
+      <div class="metrics-grid">
        <!-- 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;
--- a/pvc-vue/src/components/NodeStatus.vue
+++ b/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 {
Author	SHA1	Message	Date
Joshua Boniface	18a32315ea	Improve graph data point display	2025-02-26 23:54:22 -05:00
Joshua Boniface	bc1ca6d8ab	More tweaks to health output	2025-02-26 23:49:46 -05:00
Joshua Boniface	ba94b0d4d9	Fix graph of health	2025-02-26 23:37:07 -05:00
Joshua Boniface	e2c45ecf5c	Improve layouts	2025-02-26 23:20:19 -05:00
Joshua Boniface	5d0f390dec	Improve health card	2025-02-26 23:14:39 -05:00
Joshua Boniface	f97e3f2203	Improve page layout	2025-02-26 23:10:10 -05:00