From 5aa2c910ba2163e20ce60bcd4a261daaaca36362 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshua.boniface@buildops.com>
Date: Wed, 26 Feb 2025 16:46:29 -0500
Subject: [PATCH] Add storage chart

---
 pvcweb-vue/src/App.vue                      |  6 +-
 pvcweb-vue/src/components/MetricsCharts.vue | 69 +++++++++++++++------
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/pvcweb-vue/src/App.vue b/pvcweb-vue/src/App.vue
index 3d0ab7e..0211e53 100644
--- a/pvcweb-vue/src/App.vue
+++ b/pvcweb-vue/src/App.vue
@@ -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 => {
diff --git a/pvcweb-vue/src/components/MetricsCharts.vue b/pvcweb-vue/src/components/MetricsCharts.vue
index 07a2a0e..c3c7e36 100644
--- a/pvcweb-vue/src/components/MetricsCharts.vue
+++ b/pvcweb-vue/src/components/MetricsCharts.vue
@@ -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>