pvc-vue/src/components/ClusterOverview.vue

@@ -107,19 +107,46 @@
         </div>
 
         <div class="graphs-row">
-          <!-- Health Card -->
+          <div class="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="metric-percentage">
+              <div class="health-content-wrapper">
-                <h4 class="metric-value">
+                <div class="health-graph">
-                  {{ clusterData.cluster_health?.health || 0 }}%
+                  <div class="health-percentage">
-                </h4>
+                    <h4 :class="['health-title', getHealthClass(clusterData.cluster_health?.health)]">
-              </div>
+                      {{ clusterData.cluster_health?.health || 0 }}%
-              <div class="chart-wrapper">
+                    </h4>
-                <Line :data="healthChartData" :options="chartOptions" />
+                  </div>
+                  <Line
+                    :data="healthChartData"
+                    :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>
@@ -174,32 +201,6 @@
             </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>
@@ -519,13 +520,13 @@ const chartOptions = {
 .overview-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   width: 100%;
 }
 
 .graphs-row {
   display: grid;
-  grid-template-columns: repeat(4, calc(25% - 0.375rem));  /* Equal 1/4 width minus gap spacing */
+  grid-template-columns: repeat(4, 1fr);
   gap: 0.5rem;
   width: 100%;
 }
@@ -537,6 +538,52 @@ const chartOptions = {
   width: 100%;
 }
 
+.health-card {
+  background: white;
+  border: 1px solid rgba(0,0,0,0.125);
+  border-radius: 0.25rem;
+  height: 100%;
+  width: 100%;
+}
+
+.health-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  position: relative;
+}
+
+.health-graph {
+  position: relative;
+  flex-grow: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;  /* Ensure graph doesn't overflow */
+}
+
+.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);
@@ -551,9 +598,8 @@ const chartOptions = {
 
 .messages-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 0.5rem;
+  gap: 0.25rem;
-  width: 100%;
 }
 
 .health-message {
@@ -565,9 +611,7 @@ const chartOptions = {
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
-  height: 2.5em;
+  height: fit-content;
-  display: flex;
-  align-items: center;
 }
 
 .health-message.healthy {
@@ -615,6 +659,25 @@ 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;
@@ -713,20 +776,20 @@ const chartOptions = {
 }
 
 @media (max-width: 1400px) {
-  .messages-grid {
+  .metrics-row {
-    grid-template-columns: repeat(3, 1fr);  /* 3 messages per row */
+    grid-template-columns: 1fr minmax(auto, 1.2fr) repeat(2, 1fr);
   }
 }
 
 @media (max-width: 992px) {
-  .messages-grid {
+  .metrics-row {
-    grid-template-columns: repeat(2, 1fr);  /* 2 messages per row */
+    grid-template-columns: 1fr minmax(auto, 1.2fr) 1fr;
   }
 }
 
 @media (max-width: 576px) {
-  .messages-grid {
+  .metrics-row {
-    grid-template-columns: 1fr;  /* 1 message per row */
+    grid-template-columns: 1fr minmax(auto, 1.2fr);
   }
 }