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

Improve overview and charts

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 16:52:24 -05:00
parent 5aa2c910ba
commit c74952e1a4
2 changed files with 111 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pvcweb-vue/src/components/ClusterOverview.vue
View File

@ -5,8 +5,8 @@
</div>
<div class="card-body">
<div class="row">
<!-- Cluster Health -->
<div class="col-md-3">
<!-- Card 1: Cluster Health -->
<div class="col-md">
<div class="card metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
@ -20,42 +20,62 @@
</div>
</div>
<!-- Nodes -->
<div class="col-md-3">
<!-- Card 2: PVC Version -->
<div class="col-md">
<div class="card 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>
</div>
<!-- Card 3: Nodes -->
<div class="col-md">
<div class="card metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Nodes</h6>
<h4 class="card-title">
{{ clusterData.nodes?.total || 0 }} ({{ clusterData.primary_node || 'N/A' }})
</h4>
<small class="text-muted">Version: {{ clusterData.pvc_version || 'Unknown' }}</small>
<h4 class="card-title">{{ clusterData.nodes?.total || 0 }}</h4>
<small class="text-muted">
Primary: {{ clusterData.primary_node || 'N/A' }}
</small>
</div>
</div>
</div>
<!-- VMs -->
<div class="col-md-3">
<!-- Card 4: VMs -->
<div class="col-md">
<div class="card metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">VMs</h6>
<h4 class="card-title">{{ clusterData.vms?.total || 0 }} VMs</h4>
<h4 class="card-title">{{ clusterData.vms?.total || 0 }}</h4>
<small class="text-muted">
Memory: {{ Math.round(clusterData.resources?.memory?.utilization || 0) }}% used<br>
CPU: {{ Math.round(clusterData.resources?.cpu?.utilization || 0) }}% used
<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>
</div>
<!-- Storage -->
<div class="col-md-3">
<!-- Card 5: Storage -->
<div class="col-md">
<div class="card metric-card">
<div class="card-body">
<h6 class="card-subtitle mb-2 text-muted">Storage</h6>
<h4 class="card-title">{{ clusterData.osds?.total || 0 }} OSDs</h4>
<div class="storage-metrics">
<small class="text-muted">
Utilization: {{ Math.round(clusterData.resources?.disk?.utilization || 0) }}%<br>
Pools: {{ clusterData.pools || 0 }}
OSDs: {{ clusterData.osds?.total || 0 }}<br>
Pools: {{ clusterData.pools || 0 }}<br>
Volumes: {{ clusterData.volumes?.total || 0 }}
</small>
</div>
</div>
@ -63,6 +83,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
@ -80,3 +101,15 @@ const getHealthClass = (health) => {
return 'status-error';
};
</script>
<style scoped>
.metric-card {
height: 100%;
}
.storage-metrics {
min-height: 3.5rem;
display: flex;
align-items: center;
}
</style>

17
pvcweb-vue/src/components/MetricsCharts.vue
View File

@ -1,10 +1,15 @@
<template>
<div class="row mb-4">
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">Resource Utilization</h5>
</div>
<div class="card-body">
<div class="row">
<!-- Cluster Health Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Cluster Health</h6>
<h6 class="card-title mb-0">Health</h6>
</div>
<div class="card-body">
<Line
@ -19,7 +24,7 @@
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">CPU Utilization</h6>
<h6 class="card-title mb-0">CPU</h6>
</div>
<div class="card-body">
<Line
@ -34,7 +39,7 @@
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Memory Utilization</h6>
<h6 class="card-title mb-0">Memory</h6>
</div>
<div class="card-body">
<Line
@ -49,7 +54,7 @@
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Storage Utilization</h6>
<h6 class="card-title mb-0">Storage</h6>
</div>
<div class="card-body">
<Line
@ -60,6 +65,8 @@
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>