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

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

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

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

@ -1,61 +1,68 @@
<template> <template>
<div class="row mb-4"> <div class="card mb-4">
<!-- Cluster Health Chart --> <div class="card-header">
<div class="col-md-3"> <h5 class="mb-0">Resource Utilization</h5>
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">Cluster Health</h6>
</div>
<div class="card-body">
<Line
:data="healthChartData"
:options="chartOptions"
/>
</div>
</div>
</div> </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">Health</h6>
</div>
<div class="card-body">
<Line
:data="healthChartData"
:options="chartOptions"
/>
</div>
</div>
</div>
<!-- CPU Utilization Chart --> <!-- CPU Utilization Chart -->
<div class="col-md-3"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <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
:data="cpuChartData"
:options="chartOptions"
/>
</div>
</div>
</div> </div>
<div class="card-body">
<Line
:data="cpuChartData"
:options="chartOptions"
/>
</div>
</div>
</div>
<!-- Memory Utilization Chart --> <!-- Memory Utilization Chart -->
<div class="col-md-3"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <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
:data="memoryChartData"
:options="chartOptions"
/>
</div>
</div>
</div> </div>
<div class="card-body">
<Line
:data="memoryChartData"
:options="chartOptions"
/>
</div>
</div>
</div>
<!-- Storage Utilization Chart --> <!-- Storage Utilization Chart -->
<div class="col-md-3"> <div class="col-md-3">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h6 class="card-title mb-0">Storage Utilization</h6> <h6 class="card-title mb-0">Storage</h6>
</div> </div>
<div class="card-body"> <div class="card-body">
<Line <Line
:data="storageChartData" :data="storageChartData"
:options="chartOptions" :options="chartOptions"
/> />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>