Improve health messages
This commit is contained in:
Joshua Boniface
parent
28b03222f0
commit
f41c71608d
@ -173,27 +173,31 @@
|
||||
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="messages-grid">
|
||||
<div class="messages-list">
|
||||
<template v-if="displayMessages.length">
|
||||
<div
|
||||
v-for="(msg, idx) in displayMessages"
|
||||
:key="idx"
|
||||
:class="[
|
||||
'health-message',
|
||||
getDeltaClass(msg.health_delta),
|
||||
{'full-width-message': isSpecialMessage(msg)}
|
||||
getDeltaClass(msg.health_delta, msg),
|
||||
]"
|
||||
:title="msg.text || 'No details available'"
|
||||
>
|
||||
<i class="fas fa-circle-exclamation me-1"></i>
|
||||
<span class="message-text">
|
||||
{{ msg.id || 'Unknown Issue' }}
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
{{ msg.text || 'No details available' }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="no-messages">
|
||||
No health messages to display
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user