From 1ce1813da061a68b72cc98c4543123465a62db7d Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 03:34:03 -0500
Subject: [PATCH] Fix heath card to match others

---
 pvc-vue/src/components/ClusterOverview.vue | 66 +++-------------------
 1 file changed, 9 insertions(+), 57 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 0b02279..963a77a 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -107,23 +107,19 @@
         </div>
 
         <div class="graphs-row">
-          <div class="health-card">
+          <!-- Health Card -->
+          <div class="metric-card">
             <div class="card-header">
               <h6 class="card-title mb-0 metric-label">Cluster Health</h6>
             </div>
             <div class="card-body">
-              <div class="health-content-wrapper">
-                <div class="health-graph">
-                  <div class="health-percentage">
-                    <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
-                      {{ clusterData.cluster_health?.health || 0 }}%
-                    </h4>
-                  </div>
-                  <Line
-                    :data="healthChartData"
-                    :options="healthChartOptions"
-                  />
-                </div>
+              <div class="metric-percentage">
+                <h4 class="metric-value">
+                  {{ clusterData.cluster_health?.health || 0 }}%
+                </h4>
+              </div>
+              <div class="chart-wrapper">
+                <Line :data="healthChartData" :options="chartOptions" />
               </div>
             </div>
           </div>
@@ -541,50 +537,6 @@ const chartOptions = {
   width: 100%;
 }
 
-.health-card {
-  background: white;
-  border: 1px solid rgba(0,0,0,0.125);
-  border-radius: 0.25rem;
-  width: 100%;
-}
-
-.health-content-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-  position: relative;
-}
-
-.health-graph {
-  position: relative;
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
-}
-
-.health-percentage {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 255, 255, 0.5);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 10px rgba(0,0,0,0.05);
-  z-index: 2;
-}
-
-.health-title {
-  font-size: 2.5rem;
-  margin: 0;
-  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-  line-height: 1;
-  color: #333;
-}
-
 .health-messages {
   padding: 0.5rem;
   background: rgba(0, 0, 0, 0.02);