parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More tweaks to health output

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 23:49:46 -05:00
parent ba94b0d4d9
commit bc1ca6d8ab
1 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
pvc-vue/src/components/ClusterOverview.vue
View File

@ -26,11 +26,19 @@
<div
v-for="(msg, idx) in clusterData.cluster_health.messages"
:key="idx"
class="health-message"
:class="['health-message', getDeltaClass(msg.health_delta)]"
:title="msg.text || 'No details available'"
>
<i class="fas fa-circle-exclamation me-1"></i>
<span class="message-text">{{ msg.id || 'Unknown Issue' }}</span>
<span class="message-text">
{{ msg.id || 'Unknown Issue' }}
<span
v-if="msg.health_delta"
class="health-delta"
>
({{ msg.health_delta }}%)
</span>
</span>
</div>
</template>
<div v-else class="health-message healthy">
@ -156,21 +164,44 @@ const getHealthColors = (health) => {
return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' }; // Red
};
const getDeltaClass = (delta) => {
const value = Math.abs(delta);
if (value <= 5) return 'delta-low';
if (value <= 10) return 'delta-medium';
return 'delta-high';
};
const healthChartData = computed(() => {
const health = props.clusterData.cluster_health?.health || 0;
const colors = getHealthColors(health);
return {
labels: props.metricsHistory.labels,
datasets: [{
data: props.metricsHistory.data,
fill: true,
backgroundColor: colors.bg,
borderColor: colors.border,
segment: {
borderColor: (ctx) => {
const value = ctx.p1.parsed.y;
if (value > 90) return 'rgba(40, 167, 69, 0.2)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.2)'; // Yellow
return 'rgba(220, 53, 69, 0.2)'; // Red
},
backgroundColor: (ctx) => {
const value = ctx.p1.parsed.y;
if (value > 90) return 'rgba(40, 167, 69, 0.1)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.1)'; // Yellow
return 'rgba(220, 53, 69, 0.1)'; // Red
}
},
borderWidth: 1.5,
tension: 0.4,
pointRadius: 2,
pointBackgroundColor: colors.border
pointBackgroundColor: (ctx) => {
const value = ctx.parsed.y;
if (value > 90) return 'rgba(40, 167, 69, 0.2)'; // Green
if (value > 50) return 'rgba(255, 193, 7, 0.2)'; // Yellow
return 'rgba(220, 53, 69, 0.2)'; // Red
}
}]
};
});
@ -305,8 +336,6 @@ const healthChartOptions = {
text-align: left;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -320,11 +349,15 @@ const healthChartOptions = {
}
.health-message:hover {
background: rgba(0, 0, 0, 0.05);
}
.health-message.healthy:hover {
background: rgba(40, 167, 69, 0.15);
&.delta-low {
background: rgba(40, 167, 69, 0.15);
}
&.delta-medium {
background: rgba(255, 193, 7, 0.15);
}
&.delta-high {
background: rgba(220, 53, 69, 0.15);
}
}
.health-message:hover::after {
@ -415,4 +448,24 @@ const healthChartOptions = {
.metric-card .card-body {
padding: 0.5rem;
}
.health-delta {
margin-left: 0.5rem;
font-size: 0.8em;
}
.delta-low {
background: rgba(40, 167, 69, 0.1);
color: #0d5524; /* Darker green */
}
.delta-medium {
background: rgba(255, 193, 7, 0.1);
color: #856404; /* Darker yellow */
}
.delta-high {
background: rgba(220, 53, 69, 0.1);
color: #721c24; /* Darker red */
}
</style>