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

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

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