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

Fix heath card to match others

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 03:34:03 -05:00
parent 055f3b95e6
commit 1ce1813da0
1 changed files with 9 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,23 +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="chart-wrapper">
<Line :data="healthChartData" :options="chartOptions" />
</div>
</div>
</div>
@ -541,50 +537,6 @@ const chartOptions = {
width: 100%;
}
.health-card {
background: white;
border: 1px solid rgba(0,0,0,0.125);
border-radius: 0.25rem;
width: 100%;
}
.health-content-wrapper {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
position: relative;
}
.health-graph {
position: relative;
flex-grow: 1;
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
}
.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);