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

Improve health card

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 23:14:39 -05:00
parent f97e3f2203
commit 5d0f390dec
2 changed files with 52 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pvc-vue/src/App.vue
View File

@ -240,11 +240,11 @@ onUnmounted(() => {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
grid-template-columns: 2fr 3fr; grid-template-columns: 2fr 3fr;
min-height: 500px;
} }
.overview-row > * { .overview-row > * {
height: 100%; height: 100%;
min-height: 400px;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {

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

@ -10,17 +10,18 @@
<h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6> <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
<div class="health-content"> <div class="health-content">
<div class="health-graph"> <div class="health-graph">
<div class="health-percentage">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
</div>
<Line <Line
:data="healthChartData" :data="healthChartData"
:options="healthChartOptions" :options="healthChartOptions"
/> />
</div> </div>
<div class="health-overlay">
<div class="health-status">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
<div class="health-messages"> <div class="health-messages">
<div class="messages-grid">
<template v-if="clusterData.cluster_health?.messages?.length"> <template v-if="clusterData.cluster_health?.messages?.length">
<div <div
v-for="(msg, idx) in clusterData.cluster_health.messages" v-for="(msg, idx) in clusterData.cluster_health.messages"
@ -41,7 +42,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="metrics-row"> <div class="metrics-row">
<!-- Card 2: PVC Version --> <!-- Card 2: PVC Version -->
<div class="metric-card"> <div class="metric-card">
@ -171,7 +171,8 @@ const healthChartData = computed(() => {
borderColor: colors.border, borderColor: colors.border,
borderWidth: 1.5, borderWidth: 1.5,
tension: 0.4, tension: 0.4,
pointRadius: 0 pointRadius: 2,
pointBackgroundColor: colors.border
}] }]
}; };
}); });
@ -188,22 +189,23 @@ const healthChartOptions = {
x: { x: {
display: false, display: false,
grid: { grid: {
display: false display: false,
} },
}, },
y: { y: {
display: false, display: false,
grid: { grid: {
display: false display: false,
}, },
min: 0, min: 0,
max: 100, max: 100,
beginAtZero: true
} }
}, },
animation: false, animation: false,
interaction: { interaction: {
enabled: false enabled: true,
mode: 'nearest',
intersect: false
} }
}; };
</script> </script>
@ -224,43 +226,29 @@ const healthChartOptions = {
} }
.health-content { .health-content {
position: relative; display: flex;
height: 250px; flex-direction: column;
gap: 1rem;
min-height: 300px;
height: auto;
width: 100%; width: 100%;
} }
.health-graph { .health-graph {
position: absolute; position: relative;
top: 0; height: 200px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
} }
.health-overlay { .health-percentage {
position: absolute; position: absolute;
top: 0; top: 50%;
left: 0; left: 50%;
width: 100%; transform: translate(-50%, -50%);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.health-status {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 300px;
max-width: 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.05); box-shadow: 0 0 10px rgba(0,0,0,0.05);
z-index: 2;
} }
.health-title { .health-title {
@ -270,14 +258,16 @@ const healthChartOptions = {
} }
.health-messages { .health-messages {
display: flex; padding: 1rem;
flex-direction: column; background: rgba(0, 0, 0, 0.02);
gap: 0.5rem;
max-height: 100px;
overflow-y: auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.5rem; flex-grow: 1;
}
.messages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.5rem;
} }
.health-message { .health-message {
@ -291,6 +281,7 @@ const healthChartOptions = {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; position: relative;
height: fit-content;
} }
.health-message.healthy { .health-message.healthy {