Fix up healthy message

pvc-vue/src/components/ClusterOverview.vue

@@ -255,18 +255,24 @@
                   >
                     <div class="message-header">
                       <i class="fas fa-circle-exclamation me-1"></i>
-                      <span class="message-id">{{ msg.id || 'Unknown Issue' }}</span>
-                      <span v-if="msg.health_delta" class="health-delta">
-                        ({{ msg.health_delta }}%)
+                      <span class="message-id">{{ getMessageId(msg) }}</span>
+                      <span v-if="showHealthDelta(msg)" class="health-delta">
+                        (-{{ msg.health_delta }}%)
                       </span>
                     </div>
                     <div class="message-content">
-                      {{ msg.text || 'No details available' }}
+                      {{ getMessageText(msg) }}
                     </div>
                   </div>
                 </template>
-                <div v-else class="no-messages">
-                  No health messages to display
+                <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>
@@ -392,32 +398,19 @@ const props = defineProps({
 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 - health checks are not reported and fencing is disabled",
-      maintenance: true
-    });
-  }
-  
-  // Add other messages if they exist
-  if (props.clusterData.cluster_health?.messages?.length) {
+  // Check if there are any health messages
+  if (props.clusterData.cluster_health?.messages) {
+    // Add all messages from the cluster health data
     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;
+  // Sort messages by health delta (highest impact first)
+  return messages.sort((a, b) => {
+    // If health_delta is not available, use 0
+    const deltaA = a.health_delta || 0;
+    const deltaB = b.health_delta || 0;
+    return deltaB - deltaA;  // Sort descending
+  });
 });
 
 const getHealthClass = (health) => {
@@ -453,7 +446,7 @@ const getDeltaClass = (delta, msg) => {
   
   // Handle numeric deltas
   if (delta === undefined || delta === null) return '';
-  if (delta === 0) return '';            // Zero delta - default gray
+  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';
@@ -1098,6 +1091,33 @@ const sections = ref({
 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>
@@ -1309,7 +1329,17 @@ const toggleSection = (section) => {
 
 .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 {
@@ -1492,4 +1522,11 @@ const toggleSection = (section) => {
   color: #495057;
   font-weight: 600;
 }
+
+/* Style for the "No issues detected" message */
+.no-messages {
+  text-align: center;
+  padding: 1rem;
+  font-weight: 500;
+}
 </style>