Improve card layouts
This commit is contained in:
Joshua Boniface
parent
9375219fef
commit
f8f1877925
@ -5,6 +5,104 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="overview-container">
|
<div class="overview-container">
|
||||||
|
<div class="metrics-row">
|
||||||
|
<!-- Card 1: Cluster Name -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Cluster</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.cluster_name || 'Unknown' }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 2: Version -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Version</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.pvc_version || 'Unknown' }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 4: Nodes -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Nodes</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.nodes?.total || 0 }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 5: Primary -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Primary Node</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.primary_node || 'N/A' }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 6: VMs -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">VMs</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.vms?.total || 0 }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 7: OSDs -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">OSDs</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.osds?.total || 0 }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 8: Pools -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Pools</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.pools || 0 }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 9: Volumes -->
|
||||||
|
<div class="metric-card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h6 class="card-title mb-0">
|
||||||
|
<span class="metric-label">Volumes</span>
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="metric-value">{{ clusterData.volumes || 0 }}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="graphs-row">
|
<div class="graphs-row">
|
||||||
<div class="health-card">
|
<div class="health-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
@ -96,61 +194,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="metrics-row">
|
|
||||||
<!-- Card 2: PVC Version -->
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6 class="card-subtitle mb-2 text-muted">PVC Version</h6>
|
|
||||||
<h4 class="card-title">{{ clusterData.pvc_version || 'Unknown' }}</h4>
|
|
||||||
<small class="text-muted">
|
|
||||||
Cluster ID: {{ clusterData.cluster_id || 'N/A' }}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 3: Nodes -->
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
|
|
||||||
<h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
|
|
||||||
<small class="text-muted">
|
|
||||||
Primary: {{ clusterData.primary_node || 'N/A' }}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 4: VMs -->
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6 class="card-subtitle mb-2 text-muted">VMs</h6>
|
|
||||||
<h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
|
|
||||||
<small class="text-muted">
|
|
||||||
<template v-if="clusterData.vms?.per_node">
|
|
||||||
<span v-for="(count, node) in clusterData.vms.per_node" :key="node">
|
|
||||||
{{ node }}: {{ count }}<br>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
Distribution: N/A
|
|
||||||
</template>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Card 5: Storage -->
|
|
||||||
<div class="metric-card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h6 class="card-subtitle mb-2 text-muted">Storage</h6>
|
|
||||||
<div class="storage-metrics">
|
|
||||||
<small class="text-muted">
|
|
||||||
OSDs: {{ clusterData.osds?.total || 0 }}<br>
|
|
||||||
Pools: {{ clusterData.pools || 0 }}<br>
|
|
||||||
Volumes: {{ clusterData.volumes?.total || 0 }}
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -403,7 +446,7 @@ const chartOptions = {
|
|||||||
|
|
||||||
.metrics-row {
|
.metrics-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
grid-template-columns: repeat(8, 1fr);
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -578,28 +621,19 @@ const chartOptions = {
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center; /* Center vertically */
|
||||||
|
align-items: center; /* Center horizontally */
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-card .card-body > * {
|
.metric-card .card-body > * {
|
||||||
flex: 1;
|
margin: 0; /* Remove any default margins */
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-value {
|
.metric-card .metric-value {
|
||||||
font-size: 1.1rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
line-height: 1; /* Tighter line height */
|
||||||
|
|
||||||
@media (max-width: 1400px) {
|
|
||||||
.graphs-row {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.graphs-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header h6 {
|
.card-header h6 {
|
||||||
@ -618,4 +652,28 @@ const chartOptions = {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1400px) {
|
||||||
|
.graphs-row {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
.metrics-row {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.metrics-row {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.graphs-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.metrics-row {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user