Add health messages for nodes

pvc-vue/src/components/pages/nodes/NodeOverview.vue

@@ -153,6 +153,52 @@
         />
       </div>
     </CollapsibleSection>
+
+    <!-- Health Details Section -->
+    <CollapsibleSection title="Health Details" :initially-expanded="sections.health">
+      <div class="health-details-row">
+        <!-- Health messages card -->
+        <div class="metric-card">
+          <div class="card-header">
+            <h6 class="card-title mb-0 metric-label">Health Messages</h6>
+          </div>
+          <div class="card-body">
+            <div class="messages-list">
+              <template v-if="nodeHealthMessages.length">
+                <div
+                  v-for="(msg, idx) in nodeHealthMessages"
+                  :key="idx"
+                  :class="[
+                    'health-message',
+                    getHealthMessageClass(msg),
+                  ]"
+                >
+                  <div class="message-header">
+                    <i class="fas" :class="getMessageIcon(msg)"></i>
+                    <span class="message-id">{{ msg.name }}</span>
+                    <span v-if="msg.health_delta > 0" class="health-delta">
+                      (-{{ msg.health_delta }}%)
+                    </span>
+                  </div>
+                  <div class="message-content">
+                    {{ getMessageContent(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">Node healthy</span>
+                </div>
+                <div class="message-content">
+                  Node is at full health with no faults
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CollapsibleSection>
   </div>
 
   <!-- No node selected message -->
@@ -204,7 +250,8 @@ const sections = ref({
   graphs: true,
   cpu: true,
   resources: true,
-  vms: true
+  vms: true,
+  health: true
 });
 
 // State for selected node and tab scrolling
@@ -451,6 +498,50 @@ const handleNodeSelect = (node) => {
   selectedNode.value = node;
   // Any other node selection handling logic
 };
+
+// Process node health messages
+const nodeHealthMessages = computed(() => {
+  if (!selectedNodeData.value || !selectedNodeData.value.health_details) {
+    return [];
+  }
+
+  const healthDetails = selectedNodeData.value.health_details;
+  // Make sure we're getting an array of health details
+  if (Array.isArray(healthDetails)) {
+    return healthDetails;
+  } else if (typeof healthDetails === 'object') {
+    // If it's an object, convert to array
+    return Object.values(healthDetails);
+  }
+  return [];
+});
+
+// Helper function to determine message class based on health status
+const getHealthMessageClass = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'delta-high'; // Red for critical issues (>=25%)
+  }
+  if (msg.health_delta > 0) {
+    return 'delta-medium';
+  }
+  return 'delta-low'; // Green for healthy items
+};
+
+// Helper function to get appropriate icon for health message
+const getMessageIcon = (msg) => {
+  if (msg.health_delta >= 25) {
+    return 'fa-circle-exclamation me-1'; // Warning icon for significant issues
+  }
+  if (msg.health_delta > 0) {
+    return 'fa-info-circle me-1'; // Info icon for minor issues
+  }
+  return 'fa-circle-check me-1'; // Checkmark for healthy items
+};
+
+// Helper function to format message content
+const getMessageContent = (msg) => {
+  return msg.message || 'No details available';
+};
 </script>
 
 <style scoped>
@@ -476,6 +567,12 @@ const handleNodeSelect = (node) => {
   width: 100%;
 }
 
+.health-details-row {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+}
+
 /* Responsive grid layouts */
 @media (min-width: 1201px) {
   .info-row {
@@ -493,6 +590,10 @@ const handleNodeSelect = (node) => {
   .resources-row-memory {
     grid-template-columns: repeat(5, 1fr);
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (min-width: 801px) and (max-width: 1200px) {
@@ -511,6 +612,10 @@ const handleNodeSelect = (node) => {
   .resources-row-memory {
     grid-template-columns: repeat(3, 1fr);
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 800px) {
@@ -520,6 +625,126 @@ const handleNodeSelect = (node) => {
   .resources-row-memory {
     grid-template-columns: 1fr;
   }
+
+  .health-details-row {
+    grid-template-columns: 1fr;
+  }
 }
 
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  align-self: flex-start;
+}
+
+.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;
+  flex: 1;
+  /* Default styling - will be overridden by delta classes */
+  background: rgba(108, 117, 125, 0.15);
+  color: #495057;
+}
+
+.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: pre-line; /* Allow line breaks in content */
+  color: inherit;
+  opacity: 0.9;
+}
+
+.health-message.healthy {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;
+}
+
+.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.15);  /* Blue background */
+  color: #0d6efd;
+}
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.metric-card {
+  min-width: 180px;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.metric-card .card-header {
+  background-color: rgba(0, 0, 0, 0.03);
+  padding: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  height: 38px;
+  display: flex;
+  align-items: center;
+}
+
+.card-header h6 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.metric-card .card-body {
+  flex: 1;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  overflow: visible;
+  justify-content: flex-start;
+  align-items: center;
+}
 </style>