Fix heath card to match others
This commit is contained in:
parent
055f3b95e6
commit
1ce1813da0
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user