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

Move health messages to dedicated card

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 02:59:05 -05:00
parent d7de43cfc7
commit 8842433a1d
1 changed files with 40 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,29 +124,6 @@
:options="healthChartOptions"
/>
</div>
<div class="health-messages">
<div class="messages-grid">
<template v-if="displayMessages.length">
<div
v-for="(msg, idx) in displayMessages"
:key="idx"
: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
v-if="msg.health_delta"
class="health-delta"
>
({{ msg.health_delta }}%)
</span>
</span>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
@ -201,6 +178,32 @@
</div>
</div>
</div>
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
</div>
<div class="card-body">
<div class="messages-grid">
<template v-if="displayMessages.length">
<div
v-for="(msg, idx) in displayMessages"
:key="idx"
: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 v-if="msg.health_delta" class="health-delta">
({{ msg.health_delta }}%)
</span>
</span>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
@ -520,7 +523,7 @@ const chartOptions = {
.overview-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 1rem;
width: 100%;
}
@ -542,7 +545,6 @@ const chartOptions = {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
width: 100%;
}
@ -557,11 +559,10 @@ const chartOptions = {
.health-graph {
position: relative;
flex-grow: 1;
min-height: 0;
display: flex;
align-items: center;
width: 100%;
overflow: hidden; /* Ensure graph doesn't overflow */
overflow: hidden;
}
.health-percentage {
@ -598,8 +599,9 @@ const chartOptions = {
.messages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.25rem;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
width: 100%;
}
.health-message {
@ -611,7 +613,9 @@ const chartOptions = {
overflow: hidden;
text-overflow: ellipsis;
position: relative;
height: fit-content;
height: 2.5em;
display: flex;
align-items: center;
}
.health-message.healthy {
@ -659,25 +663,6 @@ const chartOptions = {
}
}
/* Custom scrollbar for the messages container */
.health-messages::-webkit-scrollbar {
width: 6px;
}
.health-messages::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
}
.health-messages::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.health-messages::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.health-delta {
margin-left: 0.5rem;
font-size: 0.8em;
@ -776,20 +761,20 @@ const chartOptions = {
}
@media (max-width: 1400px) {
.metrics-row {
grid-template-columns: 1fr minmax(auto, 1.2fr) repeat(2, 1fr);
.messages-grid {
grid-template-columns: repeat(3, 1fr); /* 3 messages per row */
}
}
@media (max-width: 992px) {
.metrics-row {
grid-template-columns: 1fr minmax(auto, 1.2fr) 1fr;
.messages-grid {
grid-template-columns: repeat(2, 1fr); /* 2 messages per row */
}
}
@media (max-width: 576px) {
.metrics-row {
grid-template-columns: 1fr minmax(auto, 1.2fr);
.messages-grid {
grid-template-columns: 1fr; /* 1 message per row */
}
}