From 8842433a1d56e85a7d2cff13b5773a8a9d0fddef Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 02:59:05 -0500
Subject: [PATCH] Move health messages to dedicated card

---
 pvc-vue/src/components/ClusterOverview.vue | 95 +++++++++-------------
 1 file changed, 40 insertions(+), 55 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 1383215..8e490d1 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -124,29 +124,6 @@
                     :options="healthChartOptions"
                   />
                 </div>
-                <div class="health-messages">
-                  <div class="messages-grid">
-                    <template v-if="displayMessages.length">
-                      <div 
-                        v-for="(msg, idx) in displayMessages" 
-                        :key="idx"
-                        :class="['health-message', getDeltaClass(msg.health_delta)]"
-                        :title="msg.text || 'No details available'"
-                      >
-                        <i class="fas fa-circle-exclamation me-1"></i>
-                        <span class="message-text">
-                          {{ msg.id || 'Unknown Issue' }}
-                          <span 
-                            v-if="msg.health_delta" 
-                            class="health-delta"
-                          >
-                            ({{ msg.health_delta }}%)
-                          </span>
-                        </span>
-                      </div>
-                    </template>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -201,6 +178,32 @@
             </div>
           </div>
         </div>
+
+        <div class="metric-card">
+          <div class="card-header">
+            <h6 class="card-title mb-0 metric-label">Cluster Health Messages</h6>
+          </div>
+          <div class="card-body">
+            <div class="messages-grid">
+              <template v-if="displayMessages.length">
+                <div 
+                  v-for="(msg, idx) in displayMessages" 
+                  :key="idx"
+                  :class="['health-message', getDeltaClass(msg.health_delta)]"
+                  :title="msg.text || 'No details available'"
+                >
+                  <i class="fas fa-circle-exclamation me-1"></i>
+                  <span class="message-text">
+                    {{ msg.id || 'Unknown Issue' }}
+                    <span v-if="msg.health_delta" class="health-delta">
+                      ({{ msg.health_delta }}%)
+                    </span>
+                  </span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -520,7 +523,7 @@ const chartOptions = {
 .overview-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 1rem;
   width: 100%;
 }
 
@@ -542,7 +545,6 @@ const chartOptions = {
   background: white;
   border: 1px solid rgba(0,0,0,0.125);
   border-radius: 0.25rem;
-  height: 100%;
   width: 100%;
 }
 
@@ -557,11 +559,10 @@ const chartOptions = {
 .health-graph {
   position: relative;
   flex-grow: 1;
-  min-height: 0;
   display: flex;
   align-items: center;
   width: 100%;
-  overflow: hidden;  /* Ensure graph doesn't overflow */
+  overflow: hidden;
 }
 
 .health-percentage {
@@ -598,8 +599,9 @@ const chartOptions = {
 
 .messages-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 0.25rem;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  width: 100%;
 }
 
 .health-message {
@@ -611,7 +613,9 @@ const chartOptions = {
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
-  height: fit-content;
+  height: 2.5em;
+  display: flex;
+  align-items: center;
 }
 
 .health-message.healthy {
@@ -659,25 +663,6 @@ const chartOptions = {
   }
 }
 
-/* Custom scrollbar for the messages container */
-.health-messages::-webkit-scrollbar {
-  width: 6px;
-}
-
-.health-messages::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 3px;
-}
-
-.health-messages::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-
-.health-messages::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
-}
-
 .health-delta {
   margin-left: 0.5rem;
   font-size: 0.8em;
@@ -776,20 +761,20 @@ const chartOptions = {
 }
 
 @media (max-width: 1400px) {
-  .metrics-row {
-    grid-template-columns: 1fr minmax(auto, 1.2fr) repeat(2, 1fr);
+  .messages-grid {
+    grid-template-columns: repeat(3, 1fr);  /* 3 messages per row */
   }
 }
 
 @media (max-width: 992px) {
-  .metrics-row {
-    grid-template-columns: 1fr minmax(auto, 1.2fr) 1fr;
+  .messages-grid {
+    grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
   }
 }
 
 @media (max-width: 576px) {
-  .metrics-row {
-    grid-template-columns: 1fr minmax(auto, 1.2fr);
+  .messages-grid {
+    grid-template-columns: 1fr;  /* 1 message per row */
   }
 }