diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue index 0faef84..dc52acb 100644 --- a/pvc-vue/src/components/ClusterOverview.vue +++ b/pvc-vue/src/components/ClusterOverview.vue @@ -255,18 +255,24 @@ >
- {{ msg.id || 'Unknown Issue' }} - - ({{ msg.health_delta }}%) + {{ getMessageId(msg) }} + + (-{{ msg.health_delta }}%)
- {{ msg.text || 'No details available' }} + {{ getMessageText(msg) }}
-
- No health messages to display +
+
+ + Cluster healthy +
+
+ Cluster is at full health with no faults +
@@ -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'; +};