Fix maintenance mode message

pvc-vue/src/components/ClusterOverview.vue

@@ -100,6 +100,7 @@
               title="Cluster Health"
               :value="clusterHealth"
               :chart-data="healthChartData"
+              :maintenance="isMaintenanceMode"
             />
 
             <!-- CPU Chart -->
@@ -167,7 +168,7 @@
                     ]"
                   >
                     <div class="message-header">
-                      <i class="fas fa-circle-exclamation me-1"></i>
+                      <i class="fas" :class="getMessageIcon(msg)"></i>
                       <span class="message-id">{{ getMessageId(msg) }}</span>
                       <span v-if="showHealthDelta(msg)" class="health-delta">
                         (-{{ msg.health_delta }}%)
@@ -322,8 +323,22 @@ const displayMessages = computed(() => {
     messages.push(...props.clusterData.cluster_health.messages);
   }
 
+  // Add maintenance mode message if the cluster is in maintenance mode
+  if (props.clusterData.maintenance === "true") {
+    messages.unshift({
+      id: 'Cluster is in maintenance',
+      text: 'Cluster is currently in maintenance mode - faults are not recorded and fencing is disabled',
+      health_delta: null, // Use null to indicate no delta should be shown
+      maintenance: true // Flag to identify this as a maintenance message
+    });
+  }
+
   // Sort messages by health delta (highest impact first)
   return messages.sort((a, b) => {
+    // Always keep maintenance message at the top
+    if (a.maintenance) return -1;
+    if (b.maintenance) return 1;
+    
     // If health_delta is not available, use 0
     const deltaA = a.health_delta || 0;
     const deltaB = b.health_delta || 0;
@@ -373,7 +388,8 @@ const getDeltaClass = (delta, msg) => {
 // Simplified chart data for the new chart components
 const healthChartData = computed(() => ({
   labels: props.metricsData.health.labels,
-  data: props.metricsData.health.data
+  data: props.metricsData.health.data,
+  maintenance: props.metricsData.maintenance.data
 }));
 
 const cpuChartData = computed(() => ({
@@ -927,6 +943,22 @@ const getMessageId = (msg) => {
 const getMessageText = (msg) => {
   return msg.text || 'No details available';
 };
+
+// Add a function to determine which icon to show for a message
+const getMessageIcon = (msg) => {
+  if (msg.maintenance) {
+    return 'fa-gear me-1'; // Use gear icon for maintenance with margin
+  } else if (msg.id === 'CLUSTER_HEALTHY') {
+    return 'fa-circle-check me-1'; // Use check icon for healthy with margin
+  } else {
+    return 'fa-circle-exclamation me-1'; // Default warning icon with margin
+  }
+};
+
+// Add a computed property to check maintenance mode
+const isMaintenanceMode = computed(() => {
+  return props.clusterData.maintenance === "true";
+});
 </script>
 
 <style scoped>