From c74952e1a40ebff87af4141083f2be5af596b286 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshua.boniface@buildops.com>
Date: Wed, 26 Feb 2025 16:52:24 -0500
Subject: [PATCH] Improve overview and charts

---
 pvcweb-vue/src/components/ClusterOverview.vue |  73 ++++++++----
 pvcweb-vue/src/components/MetricsCharts.vue   | 109 ++++++++++--------
 2 files changed, 111 insertions(+), 71 deletions(-)

diff --git a/pvcweb-vue/src/components/ClusterOverview.vue b/pvcweb-vue/src/components/ClusterOverview.vue
index b0da4d8..19f5b9b 100644
--- a/pvcweb-vue/src/components/ClusterOverview.vue
+++ b/pvcweb-vue/src/components/ClusterOverview.vue
@@ -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,43 +20,64 @@
           </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>
-              <small class="text-muted">
-                Utilization: {{ Math.round(clusterData.resources?.disk?.utilization || 0) }}%<br>
-                Pools: {{ clusterData.pools || 0 }}
-              </small>
+              <div class="storage-metrics">
+                <small class="text-muted">
+                  OSDs: {{ clusterData.osds?.total || 0 }}<br>
+                  Pools: {{ clusterData.pools || 0 }}<br>
+                  Volumes: {{ clusterData.volumes?.total || 0 }}
+                </small>
+              </div>
             </div>
           </div>
         </div>
@@ -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>
diff --git a/pvcweb-vue/src/components/MetricsCharts.vue b/pvcweb-vue/src/components/MetricsCharts.vue
index c3c7e36..3294903 100644
--- a/pvcweb-vue/src/components/MetricsCharts.vue
+++ b/pvcweb-vue/src/components/MetricsCharts.vue
@@ -1,61 +1,68 @@
 <template>
-  <div class="row mb-4">
-    <!-- Cluster Health Chart -->
-    <div class="col-md-3">
-      <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 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">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>
+        <!-- CPU Utilization Chart -->
+        <div class="col-md-3">
+          <div class="card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">CPU</h6>
+            </div>
+            <div class="card-body">
+              <Line
+                :data="cpuChartData"
+                :options="chartOptions"
+              />
+            </div>
+          </div>
         </div>
-        <div class="card-body">
-          <Line
-            :data="cpuChartData"
-            :options="chartOptions"
-          />
-        </div>
-      </div>
-    </div>
 
-    <!-- Memory Utilization Chart -->
-    <div class="col-md-3">
-      <div class="card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">Memory Utilization</h6>
+        <!-- Memory Utilization Chart -->
+        <div class="col-md-3">
+          <div class="card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">Memory</h6>
+            </div>
+            <div class="card-body">
+              <Line
+                :data="memoryChartData"
+                :options="chartOptions"
+              />
+            </div>
+          </div>
         </div>
-        <div class="card-body">
-          <Line
-            :data="memoryChartData"
-            :options="chartOptions"
-          />
-        </div>
-      </div>
-    </div>
 
-    <!-- Storage Utilization Chart -->
-    <div class="col-md-3">
-      <div class="card">
-        <div class="card-header">
-          <h6 class="card-title mb-0">Storage Utilization</h6>
-        </div>
-        <div class="card-body">
-          <Line
-            :data="storageChartData"
-            :options="chartOptions"
-          />
+        <!-- Storage Utilization Chart -->
+        <div class="col-md-3">
+          <div class="card">
+            <div class="card-header">
+              <h6 class="card-title mb-0">Storage</h6>
+            </div>
+            <div class="card-body">
+              <Line
+                :data="storageChartData"
+                :options="chartOptions"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>