diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue index 9740209..9b9c9f4 100644 --- a/pvc-vue/src/components/ClusterOverview.vue +++ b/pvc-vue/src/components/ClusterOverview.vue @@ -173,27 +173,31 @@
Cluster Health Messages
-
+
+
+ No health messages to display +
@@ -289,7 +293,7 @@ const displayMessages = computed(() => { messages.push({ id: "Cluster is in maintenance", health_delta: null, - text: "Cluster is currently in maintenance mode", + text: "Cluster is currently in maintenance mode - health checks are not reported and fencing is disabled", maintenance: true }); } @@ -327,12 +331,28 @@ const getHealthColors = (health) => { return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red }; -const getDeltaClass = (delta) => { - if (delta === null) return 'delta-info'; // For maintenance and healthy messages - const value = Math.abs(delta); - if (value <= 5) return 'delta-low'; - if (value <= 10) return 'delta-medium'; - return 'delta-high'; +const getDeltaClass = (delta, msg) => { + // Special case for maintenance mode message + if (msg && msg.id === 'Cluster is in maintenance') { + return 'delta-info'; + } + + // 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 ''; // Zero delta - default gray + 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(() => { @@ -546,12 +566,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 = {}; @@ -708,13 +722,7 @@ const processStateHistory = (currentStateGroups, historyArray, timeLabels, color datasets.push({ label: capitalizeState(state), data: data, - borderColor: stateInfo.color, - borderWidth: 2, - fill: false, - tension: 0.1, - pointRadius: 0, - currentCount: stateInfo.currentCount, - hidden: true // Hide from chart but keep in legend + borderColor: ctx => ctx.p0.parsed.y === 0 && ctx.p1.parsed.y === 0 ? 'transparent' : undefined }); } return; @@ -997,11 +1005,20 @@ onMounted(() => { width: 100%; } -.messages-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); +.messages-list { + display: flex; + flex-direction: column; gap: 0.5rem; width: 100%; + max-height: 300px; + overflow-y: auto; +} + +.no-messages { + text-align: center; + color: #666; + padding: 1rem; + font-style: italic; } .metric-card { @@ -1091,14 +1108,14 @@ onMounted(() => { } /* Match graphs: 2 across at this breakpoint */ - .messages-grid { + .messages-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1148px) { /* Match graphs: 1 across at this breakpoint */ - .messages-grid { + .messages-list { grid-template-columns: 1fr; } } @@ -1109,7 +1126,7 @@ onMounted(() => { } /* Allow messages to be narrower on very small screens */ - .messages-grid { + .messages-list { grid-template-columns: 1fr; /* Already 1fr from previous breakpoint */ } @@ -1135,26 +1152,36 @@ onMounted(() => { .health-message { font-size: 0.875rem; text-align: left; - padding: 0.25rem 0.5rem; + padding: 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 */ flex: 1; /* Take up available space */ - background: rgba(220, 53, 69, 0.15); /* Default red background */ - color: #721c24; /* Default red text */ + /* Default styling - will be overridden by delta classes */ + background: rgba(108, 117, 125, 0.15); /* Default gray background */ + color: #495057; /* Default gray text */ } -.message-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +.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 { @@ -1162,55 +1189,28 @@ onMounted(() => { 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 5px rgba(0,0,0,0.1); - z-index: 1000; - width: max-content; - max-width: 300px; - margin-left: 0.5rem; - white-space: normal; -} - -@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 */ + background: rgba(40, 167, 69, 0.15); /* Green background */ color: #0d5524; } .delta-medium { - background: rgba(255, 193, 7, 0.15); /* Darker yellow background */ + background: rgba(255, 193, 7, 0.15); /* Yellow background */ color: #856404; } .delta-high { - background: rgba(220, 53, 69, 0.15); /* Darker red background */ + background: rgba(220, 53, 69, 0.15); /* Red background */ color: #721c24; } .delta-info { - background: rgba(13, 110, 253, 0.15); /* Darker blue background */ + background: rgba(13, 110, 253, 0.15); /* Blue background */ color: #0d6efd; }