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

Improve card layouts

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-27 01:03:26 -05:00
parent 9375219fef
commit f8f1877925
1 changed files with 129 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,104 @@
</div>
<div class="card-body">
<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="health-card">
<div class="card-header">
@ -96,61 +194,6 @@
</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>
@ -403,7 +446,7 @@ const chartOptions = {
.metrics-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(8, 1fr);
gap: 0.5rem;
}
@ -578,28 +621,19 @@ const chartOptions = {
padding: 0.5rem;
display: flex;
flex-direction: column;
justify-content: center; /* Center vertically */
align-items: center; /* Center horizontally */
}
.metric-card .card-body > * {
flex: 1;
margin: 0; /* Remove any default margins */
}
.current-value {
font-size: 1.1rem;
.metric-card .metric-value {
font-size: 1.25rem;
font-weight: bold;
color: #333;
}
@media (max-width: 1400px) {
.graphs-row {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.graphs-row {
grid-template-columns: 1fr;
}
line-height: 1; /* Tighter line height */
}
.card-header h6 {
@ -618,4 +652,28 @@ const chartOptions = {
font-weight: bold;
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>