Improve health card

pvc-vue/src/App.vue

@@ -240,11 +240,11 @@ onUnmounted(() => {
   display: grid;
   gap: 1rem;
   grid-template-columns: 2fr 3fr;
-  min-height: 500px;
 }
 
 .overview-row > * {
   height: 100%;
+  min-height: 400px;
 }
 
 @media (max-width: 1200px) {

pvc-vue/src/components/ClusterOverview.vue

@@ -10,32 +10,32 @@
             <h6 class="card-subtitle mb-2 text-muted">Cluster Health</h6>
             <div class="health-content">
               <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="health-overlay">
+              <div class="health-messages">
-                <div class="health-status">
+                <div class="messages-grid">
-                  <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
+                  <template v-if="clusterData.cluster_health?.messages?.length">
-                    {{ clusterData.cluster_health?.health || 0 }}%
+                    <div 
-                  </h4>
+                      v-for="(msg, idx) in clusterData.cluster_health.messages" 
-                  <div class="health-messages">
+                      :key="idx"
-                    <template v-if="clusterData.cluster_health?.messages?.length">
+                      class="health-message"
-                      <div 
+                      :title="msg.text || 'No details available'"
-                        v-for="(msg, idx) in clusterData.cluster_health.messages" 
+                    >
-                        :key="idx"
+                      <i class="fas fa-circle-exclamation me-1"></i>
-                        class="health-message"
+                      <span class="message-text">{{ msg.id || 'Unknown Issue' }}</span>
-                        :title="msg.text || 'No details available'"
-                      >
-                        <i class="fas fa-circle-exclamation me-1"></i>
-                        <span class="message-text">{{ msg.id || 'Unknown Issue' }}</span>
-                      </div>
-                    </template>
-                    <div v-else class="health-message healthy">
-                      <i class="fas fa-check-circle me-1"></i>
-                      <span>No issues detected</span>
                     </div>
+                  </template>
+                  <div v-else class="health-message healthy">
+                    <i class="fas fa-check-circle me-1"></i>
+                    <span>No issues detected</span>
                   </div>
                 </div>
               </div>
@@ -171,7 +171,8 @@ const healthChartData = computed(() => {
       borderColor: colors.border,
       borderWidth: 1.5,
       tension: 0.4,
-      pointRadius: 0
+      pointRadius: 2,
+      pointBackgroundColor: colors.border
     }]
   };
 });
@@ -188,22 +189,23 @@ const healthChartOptions = {
     x: {
       display: false,
       grid: {
-        display: false
+        display: false,
-      }
+      },
     },
     y: {
       display: false,
       grid: {
-        display: false
+        display: false,
       },
       min: 0,
       max: 100,
-      beginAtZero: true
     }
   },
   animation: false,
   interaction: {
-    enabled: false
+    enabled: true,
+    mode: 'nearest',
+    intersect: false
   }
 };
 </script>
@@ -224,43 +226,29 @@ const healthChartOptions = {
 }
 
 .health-content {
-  position: relative;
+  display: flex;
-  height: 250px;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 300px;
+  height: auto;
   width: 100%;
 }
 
 .health-graph {
-  position: absolute;
+  position: relative;
-  top: 0;
+  height: 200px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
 }
 
-.health-overlay {
+.health-percentage {
   position: absolute;
-  top: 0;
+  top: 50%;
-  left: 0;
+  left: 50%;
-  width: 100%;
+  transform: translate(-50%, -50%);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-
-.health-status {
-  text-align: center;
-  padding: 1rem;
   background: rgba(255, 255, 255, 0.9);
+  padding: 1rem;
   border-radius: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  min-width: 300px;
-  max-width: 400px;
   box-shadow: 0 0 10px rgba(0,0,0,0.05);
+  z-index: 2;
 }
 
 .health-title {
@@ -270,14 +258,16 @@ const healthChartOptions = {
 }
 
 .health-messages {
-  display: flex;
+  padding: 1rem;
-  flex-direction: column;
+  background: rgba(0, 0, 0, 0.02);
-  gap: 0.5rem;
-  max-height: 100px;
-  overflow-y: auto;
-  background: rgba(255, 255, 255, 0.95);
   border-radius: 0.25rem;
-  padding: 0.5rem;
+  flex-grow: 1;
+}
+
+.messages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 0.5rem;
 }
 
 .health-message {
@@ -291,6 +281,7 @@ const healthChartOptions = {
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
+  height: fit-content;
 }
 
 .health-message.healthy {