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

Add storage chart

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 16:46:29 -05:00
parent 303d2d6001
commit 5aa2c910ba
2 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pvcweb-vue/src/App.vue
View File

@ -40,7 +40,8 @@ const nodeData = ref([]);
const metricsHistory = ref({
cpu: { labels: [], data: [] },
memory: { labels: [], data: [] },
health: { labels: [], data: [] }
health: { labels: [], data: [] },
storage: { labels: [], data: [] }
});
const showConnectionStatus = ref(false);
@ -64,7 +65,8 @@ const updateMetricsHistory = (timestamp, status) => {
const metrics = {
cpu: status.resources?.cpu?.utilization || 0,
memory: status.resources?.memory?.utilization || 0,
health: status.cluster_health?.health || 0
health: status.cluster_health?.health || 0,
storage: status.resources?.disk?.utilization || 0
};
Object.keys(metrics).forEach(metric => {

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

@ -1,10 +1,25 @@
<template>
<div class="row mb-4">
<!-- CPU Usage Chart -->
<div class="col-md-4">
<!-- Cluster Health Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">CPU Usage</h5>
<h6 class="card-title mb-0">Cluster Health</h6>
</div>
<div class="card-body">
<Line
:data="healthChartData"
:options="chartOptions"
/>
</div>
</div>
</div>
<!-- CPU Utilization Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h6 class="card-title mb-0">CPU Utilization</h6>
</div>
<div class="card-body">
<Line
@ -15,11 +30,11 @@
</div>
</div>
<!-- Memory Usage Chart -->
<div class="col-md-4">
<!-- Memory Utilization Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Memory Usage</h5>
<h6 class="card-title mb-0">Memory Utilization</h6>
</div>
<div class="card-body">
<Line
@ -30,15 +45,15 @@
</div>
</div>
<!-- Cluster Health Chart -->
<div class="col-md-4">
<!-- Storage Utilization Chart -->
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Cluster Health</h5>
<h6 class="card-title mb-0">Storage Utilization</h6>
</div>
<div class="card-body">
<Line
:data="healthChartData"
:data="storageChartData"
:options="chartOptions"
/>
</div>
@ -79,7 +94,8 @@ const props = defineProps({
default: () => ({
cpu: { labels: [], data: [] },
memory: { labels: [], data: [] },
health: { labels: [], data: [] }
health: { labels: [], data: [] },
storage: { labels: [], data: [] }
})
}
});
@ -122,10 +138,20 @@ const chartOptions = {
};
// Computed chart data objects
const healthChartData = computed(() => ({
labels: props.metricsData.health.labels,
datasets: [{
label: 'Health %',
data: props.metricsData.health.data,
borderColor: 'rgb(255, 99, 132)',
fill: false
}]
}));
const cpuChartData = computed(() => ({
labels: props.metricsData.cpu.labels,
datasets: [{
label: 'CPU Usage %',
label: 'CPU %',
data: props.metricsData.cpu.data,
borderColor: 'rgb(75, 192, 192)',
fill: false
@ -135,20 +161,27 @@ const cpuChartData = computed(() => ({
const memoryChartData = computed(() => ({
labels: props.metricsData.memory.labels,
datasets: [{
label: 'Memory Usage %',
label: 'Memory %',
data: props.metricsData.memory.data,
borderColor: 'rgb(153, 102, 255)',
fill: false
}]
}));
const healthChartData = computed(() => ({
labels: props.metricsData.health.labels,
const storageChartData = computed(() => ({
labels: props.metricsData.storage?.labels || [],
datasets: [{
label: 'Cluster Health %',
data: props.metricsData.health.data,
borderColor: 'rgb(255, 99, 132)',
label: 'Storage %',
data: props.metricsData.storage?.data || [],
borderColor: 'rgb(255, 159, 64)',
fill: false
}]
}));
</script>
<style scoped>
.card-header h6 {
font-size: 0.95rem;
font-weight: 600;
}
</style>