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

Compare commits

base: parallelvirtualcluster:d7de43cfc76572da0a5372a5a7e5e04a76152208
Branches Tags
parallelvirtualcluster:master
..
compare: parallelvirtualcluster:1ce1813da061a68b72cc98c4543123465a62db7d
Branches Tags
parallelvirtualcluster:master

3 Commits
d7de43cfc7 ... 1ce1813da0

Author SHA1 Message Date
Joshua Boniface
1ce1813da0 Fix heath card to match others 2025-02-27 03:35:42 -05:00
Joshua Boniface
055f3b95e6 Fix graph widths 2025-02-27 03:08:07 -05:00
Joshua Boniface
8842433a1d Move health messages to dedicated card 2025-02-27 02:59:05 -05:00
1 changed files with 49 additions and 112 deletions
Show Stats Expand all files Collapse all files

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

@ -107,46 +107,19 @@
</div>
<div class="graphs-row">
<div class="health-card">
<!-- Health Card -->
<div class="metric-card">
<div class="card-header">
<h6 class="card-title mb-0 metric-label">Cluster Health</h6>
</div>
<div class="card-body">
<div class="health-content-wrapper">
<div class="health-graph">
<div class="health-percentage">
<h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
<div class="metric-percentage">
<h4 class="metric-value">
{{ clusterData.cluster_health?.health || 0 }}%
</h4>
</div>
<Line
:data="healthChartData"
: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 class="chart-wrapper">
<Line :data="healthChartData" :options="chartOptions" />
</div>
</div>
</div>
@ -201,6 +174,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,13 +519,13 @@ const chartOptions = {
.overview-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: 1rem;
width: 100%;
}
.graphs-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, calc(25% - 0.375rem)); /* Equal 1/4 width minus gap spacing */
gap: 0.5rem;
width: 100%;
}
@ -538,52 +537,6 @@ const chartOptions = {
width: 100%;
}
.health-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
height: 100%;
width: 100%;
}
.health-content-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
position: relative;
}
.health-graph {
position: relative;
flex-grow: 1;
min-height: 0;
display: flex;
align-items: center;
width: 100%;
overflow: hidden; /* Ensure graph doesn't overflow */
}
.health-percentage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.5);
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
z-index: 2;
}
.health-title {
font-size: 2.5rem;
margin: 0;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
line-height: 1;
color: #333;
}
.health-messages {
padding: 0.5rem;
background: rgba(0, 0, 0, 0.02);
@ -598,8 +551,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 +565,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 +615,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 +713,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 */
}
}