Add health messages for nodes
This commit is contained in:
Joshua Boniface
parent
e6da8ec2c0
commit
779dbe1632
@ -153,6 +153,52 @@
|
||||
/>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
|
||||
<!-- Health Details Section -->
|
||||
<CollapsibleSection title="Health Details" :initially-expanded="sections.health">
|
||||
<div class="health-details-row">
|
||||
<!-- Health messages card -->
|
||||
<div class="metric-card">
|
||||
<div class="card-header">
|
||||
<h6 class="card-title mb-0 metric-label">Health Messages</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="messages-list">
|
||||
<template v-if="nodeHealthMessages.length">
|
||||
<div
|
||||
v-for="(msg, idx) in nodeHealthMessages"
|
||||
:key="idx"
|
||||
:class="[
|
||||
'health-message',
|
||||
getHealthMessageClass(msg),
|
||||
]"
|
||||
>
|
||||
<div class="message-header">
|
||||
<i class="fas" :class="getMessageIcon(msg)"></i>
|
||||
<span class="message-id">{{ msg.name }}</span>
|
||||
<span v-if="msg.health_delta > 0" class="health-delta">
|
||||
(-{{ msg.health_delta }}%)
|
||||
</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
{{ getMessageContent(msg) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="health-message healthy">
|
||||
<div class="message-header">
|
||||
<i class="fas fa-circle-check me-1"></i>
|
||||
<span class="message-id">Node healthy</span>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
Node is at full health with no faults
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
|
||||
<!-- No node selected message -->
|
||||
@ -204,7 +250,8 @@ const sections = ref({
|
||||
graphs: true,
|
||||
cpu: true,
|
||||
resources: true,
|
||||
vms: true
|
||||
vms: true,
|
||||
health: true
|
||||
});
|
||||
|
||||
// State for selected node and tab scrolling
|
||||
@ -451,6 +498,50 @@ const handleNodeSelect = (node) => {
|
||||
selectedNode.value = node;
|
||||
// Any other node selection handling logic
|
||||
};
|
||||
|
||||
// Process node health messages
|
||||
const nodeHealthMessages = computed(() => {
|
||||
if (!selectedNodeData.value || !selectedNodeData.value.health_details) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const healthDetails = selectedNodeData.value.health_details;
|
||||
// Make sure we're getting an array of health details
|
||||
if (Array.isArray(healthDetails)) {
|
||||
return healthDetails;
|
||||
} else if (typeof healthDetails === 'object') {
|
||||
// If it's an object, convert to array
|
||||
return Object.values(healthDetails);
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
// Helper function to determine message class based on health status
|
||||
const getHealthMessageClass = (msg) => {
|
||||
if (msg.health_delta >= 25) {
|
||||
return 'delta-high'; // Red for critical issues (>=25%)
|
||||
}
|
||||
if (msg.health_delta > 0) {
|
||||
return 'delta-medium';
|
||||
}
|
||||
return 'delta-low'; // Green for healthy items
|
||||
};
|
||||
|
||||
// Helper function to get appropriate icon for health message
|
||||
const getMessageIcon = (msg) => {
|
||||
if (msg.health_delta >= 25) {
|
||||
return 'fa-circle-exclamation me-1'; // Warning icon for significant issues
|
||||
}
|
||||
if (msg.health_delta > 0) {
|
||||
return 'fa-info-circle me-1'; // Info icon for minor issues
|
||||
}
|
||||
return 'fa-circle-check me-1'; // Checkmark for healthy items
|
||||
};
|
||||
|
||||
// Helper function to format message content
|
||||
const getMessageContent = (msg) => {
|
||||
return msg.message || 'No details available';
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -476,6 +567,12 @@ const handleNodeSelect = (node) => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.health-details-row {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive grid layouts */
|
||||
@media (min-width: 1201px) {
|
||||
.info-row {
|
||||
@ -493,6 +590,10 @@ const handleNodeSelect = (node) => {
|
||||
.resources-row-memory {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
.health-details-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 801px) and (max-width: 1200px) {
|
||||
@ -511,6 +612,10 @@ const handleNodeSelect = (node) => {
|
||||
.resources-row-memory {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.health-details-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@ -520,6 +625,126 @@ const handleNodeSelect = (node) => {
|
||||
.resources-row-memory {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.health-details-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.health-message {
|
||||
font-size: 0.875rem;
|
||||
text-align: left;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
/* Default styling - will be overridden by delta classes */
|
||||
background: rgba(108, 117, 125, 0.15);
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.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: pre-line; /* Allow line breaks in content */
|
||||
color: inherit;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.health-message.healthy {
|
||||
background: rgba(40, 167, 69, 0.1);
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-low {
|
||||
background: rgba(40, 167, 69, 0.15); /* Green background */
|
||||
color: #0d5524;
|
||||
}
|
||||
|
||||
.delta-medium {
|
||||
background: rgba(255, 193, 7, 0.15); /* Yellow background */
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.delta-high {
|
||||
background: rgba(220, 53, 69, 0.15); /* Red background */
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.delta-info {
|
||||
background: rgba(13, 110, 253, 0.15); /* Blue background */
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.health-delta {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-width: 180px;
|
||||
background: white;
|
||||
border: 1px solid rgba(0,0,0,0.125);
|
||||
border-radius: 0.25rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-card .card-header {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-header h6 {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.metric-card .card-body {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user