Fix up healthy message

pvc-vue/package-lock.json

@@ -14,7 +14,8 @@
         "chartjs-plugin-annotation": "^3.0.1",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
-        "vue-chartjs": "^5.3.2"
+        "vue-chartjs": "^5.3.2",
+        "vue-router": "^4.2.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -1376,6 +1377,25 @@
         "chart.js": "^4.1.1",
         "vue": "^3.0.0-0 || ^2.7.0"
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
     }
   }
 }

pvc-vue/package.json

@@ -15,7 +15,8 @@
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-chartjs": "^5.3.2",
-    "chartjs-plugin-annotation": "^3.0.1"
+    "chartjs-plugin-annotation": "^3.0.1",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

pvc-vue/src/App.vue

@@ -10,10 +10,14 @@
       </div>
       <div class="sidebar-content">
         <nav class="nav-menu">
-          <router-link to="/" class="nav-item active">
+          <router-link to="/" class="nav-item" active-class="active" data-title="Overview">
             <i class="fas fa-home"></i>
             <span class="nav-text">Overview</span>
           </router-link>
+          <router-link to="/nodes" class="nav-item" active-class="active" data-title="Nodes">
+            <i class="fas fa-server"></i>
+            <span class="nav-text">Nodes</span>
+          </router-link>
         </nav>
       </div>
       <div class="sidebar-footer">
@@ -29,13 +33,11 @@
       <div v-if="showConnectionStatus" :class="['alert', connectionStatusClass]">
         {{ connectionStatusMessage }}
       </div>
-      <div class="content-grid">
+      <router-view 
-        <ClusterOverview 
         :clusterData="clusterData"
         :metricsData="metricsHistory"
+        :nodeData="nodeData"
       />
-        <NodeStatus :nodeData="nodeData" />
-      </div>
     </div>
   </div>
 
@@ -48,9 +50,6 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import ClusterOverview from './components/ClusterOverview.vue';
-import MetricsCharts from './components/MetricsCharts.vue';
-import NodeStatus from './components/NodeStatus.vue';
 import ConfigPanel from './components/ConfigPanel.vue';
 import { useApiStore } from './stores/api';
 
@@ -306,6 +305,7 @@ onUnmounted(() => {
   text-decoration: none;
   transition: all 0.2s;
   border-left: 3px solid transparent;
+  position: relative;
 }
 
 .nav-item:hover {
@@ -335,15 +335,42 @@ onUnmounted(() => {
   display: none;
 }
 
+/* Add tooltip effect for collapsed sidebar */
+.sidebar.collapsed .nav-item:hover::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #343a40;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  z-index: 1010;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  margin-left: 0.5rem;
+}
+
+/* Add a small arrow to the tooltip */
+.sidebar.collapsed .nav-item:hover::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #343a40 transparent transparent;
+  margin-left: 0.25rem;
+  z-index: 1011;
+}
+
 .sidebar.collapsed .nav-item {
   padding: 0.75rem 0.25rem;
   justify-content: center;
 }
 
-.sidebar.collapsed .nav-item i {
-  margin-right: 0;
-}
-
 .sidebar.collapsed .sidebar-footer .btn {
   padding: 0.375rem 0.5rem;
   display: flex;

pvc-vue/src/components/ClusterOverview.vue

@@ -1,13 +1,23 @@
 <template>
-  <div class="card">
-    <button class="card-header header-button" @click="isCollapsed = !isCollapsed">
-      <div class="d-flex justify-content-between align-items-center w-100">
-        <h5 class="mb-0">Cluster Overview</h5>
-        <i class="fas" :class="isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'"></i>
-      </div>
-    </button>
-    <div class="card-body" v-show="!isCollapsed">
   <div class="overview-container">
+    <!-- Information Cards Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.info }">
+      <!-- Collapsed section indicator -->
+      <div v-if="!sections.info" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">Cluster Information</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.info" class="section-content-wrapper">
+        <div class="section-content">
           <div class="metrics-row">
             <!-- Card 1: Cluster Name -->
             <div class="metric-card">
@@ -105,7 +115,33 @@
               </div>
             </div>
           </div>
+        </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('info')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
+        </div>
+      </div>
+    </div>
 
+    <!-- Utilization Graphs Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.graphs }">
+      <!-- Collapsed section indicator -->
+      <div v-if="!sections.graphs" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">Health & Utilization Graphs</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('graphs')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.graphs" class="section-content-wrapper">
+        <div class="section-content">
           <div class="graphs-row">
             <!-- Health Card -->
             <div class="metric-card">
@@ -174,38 +210,100 @@
               </div>
             </div>
           </div>
+        </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('graphs')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
+        </div>
+      </div>
+    </div>
 
+    <!-- Health Messages Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.messages }">
+      <!-- Collapsed section indicator -->
+      <div v-if="!sections.messages" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">Health Messages</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('messages')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.messages" class="section-content-wrapper">
+        <div class="section-content">
           <!-- Health messages card -->
           <div class="metric-card">
             <div class="card-header">
-            <h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
+              <h6 class="card-title mb-0 metric-label">Health Messages</h6>
             </div>
             <div class="card-body">
-            <div class="messages-grid">
+              <div class="messages-list">
                 <template v-if="displayMessages.length">
                   <div 
                     v-for="(msg, idx) in displayMessages" 
                     :key="idx"
                     :class="[
                       'health-message', 
-                    getDeltaClass(msg.health_delta),
+                      getDeltaClass(msg.health_delta, msg),
-                    {'full-width-message': isSpecialMessage(msg)}
                     ]"
-                  :title="msg.text || 'No details available'"
                   >
+                    <div class="message-header">
                       <i class="fas fa-circle-exclamation me-1"></i>
-                  <span class="message-text">
+                      <span class="message-id">{{ getMessageId(msg) }}</span>
-                    {{ msg.id || 'Unknown Issue' }}
+                      <span v-if="showHealthDelta(msg)" class="health-delta">
-                    <span v-if="msg.health_delta" class="health-delta">
+                        (-{{ msg.health_delta }}%)
-                      ({{ msg.health_delta }}%)
-                    </span>
                       </span>
                     </div>
+                    <div class="message-content">
+                      {{ getMessageText(msg) }}
+                    </div>
+                  </div>
                 </template>
+                <div v-else class="health-message healthy">
+                  <div class="message-header">
+                    <i class="fas fa-circle-check me-1"></i>
+                    <span class="message-id">Cluster healthy</span>
+                  </div>
+                  <div class="message-content">
+                    Cluster is at full health with no faults
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('messages')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
         </div>
       </div>
     </div>
 
+    <!-- States Graphs Section -->
+    <div class="section-container" :class="{ 'collapsed': !sections.states }">
+      <!-- Collapsed section indicator -->
+      <div v-if="!sections.states" class="section-content-wrapper">
+        <div class="section-content">
+          <div class="collapsed-section-header">
+            <h6 class="card-title mb-0 metric-label">State Graphs</h6>
+          </div>
+        </div>
+        <div class="toggle-column">
+          <button class="section-toggle" @click="toggleSection('states')">
+            <i class="fas fa-chevron-down"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Toggle button for expanded section -->
+      <div v-show="sections.states" class="section-content-wrapper">
+        <div class="section-content">
           <!-- States Graphs Row -->
           <div class="states-graphs-row">
             <!-- Node States Graph -->
@@ -245,6 +343,12 @@
             </div>
           </div>
         </div>
+        <div class="toggle-column expanded">
+          <button class="section-toggle" @click="toggleSection('states')">
+            <i class="fas fa-chevron-up"></i>
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -291,37 +395,22 @@ const props = defineProps({
   }
 });
 
-const isCollapsed = ref(false);
-
 const displayMessages = computed(() => {
   const messages = [];
   
-  // Add maintenance message if maintenance is "true"
+  // Check if there are any health messages
-  if (props.clusterData.maintenance === "true") {
+  if (props.clusterData.cluster_health?.messages) {
-    messages.push({
+    // Add all messages from the cluster health data
-      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"
+  // Sort messages by health delta (highest impact first)
-  if (messages.length === 0) {
+  return messages.sort((a, b) => {
-    messages.push({
+    // If health_delta is not available, use 0
-      id: "No issues detected",
+    const deltaA = a.health_delta || 0;
-      health_delta: null,
+    const deltaB = b.health_delta || 0;
-      text: "System is healthy",
+    return deltaB - deltaA;  // Sort descending
-      health_delta: 0  // This will trigger the delta-low class for green styling
   });
-  }
-  
-  return messages;
 });
 
 const getHealthClass = (health) => {
@@ -339,12 +428,28 @@ const getHealthColors = (health) => {
   return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' };                   // Red
 };
 
-const getDeltaClass = (delta) => {
+const getDeltaClass = (delta, msg) => {
-  if (delta === null) return 'delta-info';  // For maintenance and healthy messages
+  // Special case for maintenance mode message
-  const value = Math.abs(delta);
+  if (msg && msg.id === 'Cluster is in maintenance') {
-  if (value <= 5) return 'delta-low';
+    return 'delta-info';
-  if (value <= 10) return 'delta-medium';
+  }
-  return 'delta-high';
+  
+  // 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
+  if (Math.abs(delta) > 10) return 'delta-high';  // Large delta (>10%) - red
+  if (Math.abs(delta) > 0) return 'delta-medium'; // Small delta (1-10%) - yellow
+  return 'delta-info';
 };
 
 const healthChartData = computed(() => {
@@ -558,12 +663,6 @@ const chartOptions = {
   }
 };
 
-// Add a new function to identify special messages
-const isSpecialMessage = (msg) => {
-  return msg.maintenance === true || 
-         msg.id === "No issues detected";
-};
-
 // Helper function to group objects by state
 const groupByState = (items, stateExtractor) => {
   const groups = {};
@@ -720,13 +819,7 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color
         datasets.push({
           label: capitalizeState(state),
           data: data,
-          borderColor: stateInfo.color,
+          borderColor: ctx => ctx.p0.parsed.y === 0 && ctx.p1.parsed.y === 0 ? 'transparent' : undefined
-          borderWidth: 2,
-          fill: false,
-          tension: 0.1,
-          pointRadius: 0,
-          currentCount: stateInfo.currentCount,
-          hidden: true  // Hide from chart but keep in legend
         });
       }
       return;
@@ -985,129 +1078,82 @@ onMounted(() => {
     }
   }
 });
+
+// Section visibility state
+const sections = ref({
+  info: true,
+  graphs: true,
+  messages: true,
+  states: true
+});
+
+// Toggle section visibility
+const toggleSection = (section) => {
+  sections.value[section] = !sections.value[section];
+};
+
+// Add a new function to determine if we should show the health delta
+const showHealthDelta = (msg) => {
+  // Don't show delta for "No issues detected" or similar messages
+  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;
+};
+
+// Function to customize message IDs
+const getMessageId = (msg) => {
+  // Replace "System is healthy" with "Cluster is healthy with no faults"
+  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';
+};
+
+// Function to customize message text
+const getMessageText = (msg) => {
+  return msg.text || 'No details available';
+};
 </script>
 
 <style scoped>
 .overview-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.graphs-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);  /* Equal width columns */
   gap: 0.5rem;
   width: 100%;
 }
 
 .metrics-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);  /* Start with 8 equal columns */
   gap: 0.5rem;
   width: 100%;
 }
 
-.health-messages {
+.graphs-row {
-  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%;
-  overflow-y: auto;
-  margin-top: auto;  /* Push to bottom of container */
-}
-
-.messages-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr); /* Match graphs: 4 across by default */
   gap: 0.5rem;
   width: 100%;
 }
 
-.health-message {
+.messages-list {
-  font-size: 0.875rem;
-  text-align: left;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  height: auto;
-  min-height: 2.5em;
-  white-space: nowrap;  /* Prevent text wrapping */
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  min-width: 0;  /* Allow shrinking within grid cell */
+  gap: 0.5rem;
-  flex: 1;  /* Take up available space */
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
-/* Add specific handling for message text to prevent wrapping */
+.no-messages {
-.message-text {
+  text-align: center;
-  white-space: nowrap;
+  color: #666;
-  overflow: hidden;
+  padding: 1rem;
-  text-overflow: ellipsis;
+  font-style: italic;
-}
-
-.health-message.healthy {
-  background: rgba(40, 167, 69, 0.1);
-  color: #28a745;
-}
-
-.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;
-  }
-}
-
-.health-delta {
-  margin-left: 0.5rem;
-  font-size: 0.8em;
-}
-
-.delta-low {
-  background: rgba(40, 167, 69, 0.15);  /* Darker green background */
-  color: #0d5524;
-}
-
-.delta-medium {
-  background: rgba(255, 193, 7, 0.15);  /* Darker yellow background */
-  color: #856404;
-}
-
-.delta-high {
-  background: rgba(220, 53, 69, 0.15);  /* Darker red background */
-  color: #721c24;
-}
-
-.delta-info {
-  background: rgba(13, 110, 253, 0.15);  /* Darker blue background */
-  color: #0d6efd;
 }
 
 .metric-card {
@@ -1120,10 +1166,13 @@ onMounted(() => {
   flex-direction: column;
   min-width: 0;
   width: 100%;  /* Take full width of grid cell */
+  overflow: hidden; /* Ensure content doesn't overflow */
 }
 
 .metric-card .card-header {
-  text-align: left;
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
 }
 
 .card-header h6 {
@@ -1132,6 +1181,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin: 0;
 }
 
 .metric-card .card-body {
@@ -1183,64 +1233,137 @@ onMounted(() => {
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
-@media (max-width: 1500px) {
+@media (min-width: 1201px) {
   .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);
+  }
+}
+
+@media (min-width: 801px) and (max-width: 1200px) {
+  .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);
   }
   
-  /* Match graphs: 2 across at this breakpoint */
+  /* 1x3 for state graphs in medium width (vertical stack) */
-  .messages-grid {
+  .states-graphs-row {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 1148px) {
-  /* Match graphs: 1 across at this breakpoint */
-  .messages-grid {
     grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 740px) {
+@media (max-width: 800px) {
-  .metrics-row, .graphs-row {
+  .metrics-row {
+    grid-template-columns: 1fr; /* 1 column when <= 800px */
+  }
+  
+  /* 1x4 for health/utilization graphs in narrow width */
+  .graphs-row {
     grid-template-columns: 1fr;
   }
   
-  /* Allow messages to be narrower on very small screens */
+  /* 1x3 for state graphs in narrow width */
-  .messages-grid {
+  .states-graphs-row {
-    grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */
+    grid-template-columns: 1fr;
   }
+}
 
-  /* Even on small screens, ensure messages have reasonable width */
+/* Base styles for graphs-row and states-graphs-row */
-  .health-message {
+.graphs-row, .states-graphs-row {
-    min-width: 0; /* Allow shrinking */
+  display: grid;
-    white-space: normal; /* Allow text wrapping on small screens */
+  gap: 0.5rem;
-  }
+  width: 100%;
-  
-  .message-text {
-    white-space: normal; /* Allow text wrapping on small screens */
-  }
-  
-  .metric-card {
-    min-width: 0;
-  }
 }
 
 .status-maintenance {
   color: #0d6efd;  /* Bootstrap blue */
 }
 
+.health-message {
+  font-size: 0.875rem;
+  text-align: left;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  position: relative;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;  /* Allow shrinking within grid cell */
+  flex: 1;  /* Take up available space */
+  /* Default styling - will be overridden by delta classes */
+  background: rgba(108, 117, 125, 0.15);  /* Default gray background */
+  color: #495057;  /* Default gray text */
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.message-id {
+  font-weight: 600;
+}
+
+.message-content {
+  font-size: 0.8rem;
+  line-height: 1.4;
+  white-space: normal;
+  color: inherit;
+  opacity: 0.9;
+}
+
 .health-message.healthy {
   background: rgba(40, 167, 69, 0.1);
-  color: #28a745;
+  color: #0d5524; /* Match the delta-low text color */
+}
+
+.health-message.healthy .message-id {
+  font-weight: 600;
+}
+
+.health-message.healthy .message-content {
+  font-size: 0.8rem;
+  line-height: 1.4;
+  opacity: 0.9;
+}
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.15);  /* Green background */
+  color: #0d5524;
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.15);  /* Yellow background */
+  color: #856404;
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.15);  /* Red background */
+  color: #721c24;
 }
 
 .delta-info {
-  background: rgba(13, 110, 253, 0.1);
+  background: rgba(13, 110, 253, 0.15);  /* Blue background */
   color: #0d6efd;
 }
 
@@ -1305,41 +1428,105 @@ onMounted(() => {
   padding: 0.5rem;  /* Consistent padding on all sides */
 }
 
-/* New row for the 3 state graphs with wider minimum width */
-.states-graphs-row {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
-  gap: 0.5rem;
-  width: 100%;
-}
-
-/* Responsive behavior for state graphs */
-@media (max-width: 1500px) {
-  .states-graphs-row {
-    grid-template-columns: repeat(3, 1fr);  /* Keep 3 columns at this breakpoint */
-  }
-}
-
-@media (max-width: 1148px) {
-  .states-graphs-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 columns at medium size */
-  }
-  
-  /* Make state graphs have a wider minimum width */
-  .states-graphs-row .metric-card {
-    min-width: 216px;  /* 20% wider than the 180px for other cards */
-  }
-}
-
-@media (max-width: 740px) {
-  .states-graphs-row {
-    grid-template-columns: 1fr;  /* 1 column at small size */
-  }
-}
-
 /* Darker legend text for better readability */
 :deep(.chartjs-legend-item) {
   color: #333 !important;
   font-weight: 500 !important;
 }
+
+/* Updated section styling */
+.section-container {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+/* New content wrapper with toggle column */
+.section-content-wrapper {
+  display: flex;
+  position: relative; /* Add position relative to contain absolute positioned elements */
+}
+
+.section-content {
+  flex: 1;
+  min-width: 0; /* Allow content to shrink if needed */
+  padding-right: 40px; /* Make room for the toggle button */
+}
+
+.toggle-column {
+  position: absolute;
+  top: 4px; /* Position at exactly 4px from the top in both views */
+  right: 0;
+  width: 40px;
+  height: 30px;
+  z-index: 10;
+  padding-left: 6px; /* Add left padding to the toggle column */
+}
+
+.section-toggle {
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.section-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #333;
+}
+
+.section-toggle:focus {
+  outline: none;
+}
+
+/* Replace collapsed section indicator with header */
+.collapsed-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.03); /* Match card header background */
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+  height: 38px; /* Match the height of card headers */
+  width: 100%; /* Ensure it takes full width of its container */
+}
+
+.collapsed-section-header .card-title {
+  margin: 0;
+  color: #495057; /* Match the exact color of expanded card titles */
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+/* Ensure toggle column is properly aligned with card headers */
+.metric-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  height: 38px; /* Ensure consistent height */
+}
+
+/* Ensure the metric-label class is consistent */
+.metric-label {
+  color: #495057;
+  font-weight: 600;
+}
+
+/* Style for the "No issues detected" message */
+.no-messages {
+  text-align: center;
+  padding: 1rem;
+  font-weight: 500;
+}
 </style>

pvc-vue/src/components/PageTitle.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="page-title-container">
+    <h1 class="page-title">{{ title }}</h1>
+    <div class="page-actions" v-if="$slots.actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.page-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.page-title {
+  font-size: 1.75rem;
+  font-weight: 500;
+  margin: 0;
+  color: #333;
+}
+
+.page-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+</style> 

pvc-vue/src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import App from './App.vue';
+import router from './router';
 
 // Create the app
 const app = createApp(App);
@@ -9,5 +10,8 @@ const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
 
+// Use the router
+app.use(router);
+
 // Mount the app
 app.mount('#app');

pvc-vue/src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Overview from '../views/Overview.vue';
+import Nodes from '../views/Nodes.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Overview',
+    component: Overview
+  },
+  {
+    path: '/nodes',
+    name: 'Nodes',
+    component: Nodes
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+export default router; 

pvc-vue/src/views/Nodes.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="content-grid">
+    <PageTitle title="Nodes" />
+    <NodeStatus :nodeData="nodeData" />
+  </div>
+</template>
+
+<script setup>
+import NodeStatus from '../components/NodeStatus.vue';
+import PageTitle from '../components/PageTitle.vue';
+
+defineProps({
+  nodeData: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+});
+</script> 

pvc-vue/src/views/Overview.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="content-grid">
+    <PageTitle title="Cluster Overview" />
+    <ClusterOverview 
+      :clusterData="clusterData"
+      :metricsData="metricsData"
+    />
+  </div>
+</template>
+
+<script setup>
+import ClusterOverview from '../components/ClusterOverview.vue';
+import PageTitle from '../components/PageTitle.vue';
+
+defineProps({
+  clusterData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  },
+  metricsData: {
+    type: Object,
+    required: true,
+    default: () => ({})
+  }
+});
+</script>