More tweaks to health output

pvc-vue/src/components/ClusterOverview.vue

@@ -26,11 +26,19 @@
                     <div 
                       v-for="(msg, idx) in clusterData.cluster_health.messages" 
                       :key="idx"
-                      class="health-message"
+                      :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>
+                      <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 v-else class="health-message healthy">
@@ -156,21 +164,44 @@ const getHealthColors = (health) => {
   return { bg: 'rgba(220, 53, 69, 0.1)', border: 'rgba(220, 53, 69, 0.2)' };                    // Red
 };
 
+const getDeltaClass = (delta) => {
+  const value = Math.abs(delta);
+  if (value <= 5) return 'delta-low';
+  if (value <= 10) return 'delta-medium';
+  return 'delta-high';
+};
+
 const healthChartData = computed(() => {
   const health = props.clusterData.cluster_health?.health || 0;
-  const colors = getHealthColors(health);
   
   return {
     labels: props.metricsHistory.labels,
     datasets: [{
       data: props.metricsHistory.data,
       fill: true,
-      backgroundColor: colors.bg,
+      segment: {
-      borderColor: colors.border,
+        borderColor: (ctx) => {
+          const value = ctx.p1.parsed.y;
+          if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
+          if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
+          return 'rgba(220, 53, 69, 0.2)';                  // Red
+        },
+        backgroundColor: (ctx) => {
+          const value = ctx.p1.parsed.y;
+          if (value > 90) return 'rgba(40, 167, 69, 0.1)';  // Green
+          if (value > 50) return 'rgba(255, 193, 7, 0.1)';  // Yellow
+          return 'rgba(220, 53, 69, 0.1)';                  // Red
+        }
+      },
       borderWidth: 1.5,
       tension: 0.4,
       pointRadius: 2,
-      pointBackgroundColor: colors.border
+      pointBackgroundColor: (ctx) => {
+        const value = ctx.parsed.y;
+        if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
+        if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
+        return 'rgba(220, 53, 69, 0.2)';                  // Red
+      }
     }]
   };
 });
@@ -305,8 +336,6 @@ const healthChartOptions = {
   text-align: left;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
-  background: rgba(220, 53, 69, 0.1);
-  color: #dc3545;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -320,12 +349,16 @@ const healthChartOptions = {
 }
 
 .health-message:hover {
-  background: rgba(0, 0, 0, 0.05);
+  &.delta-low {
-}
-
-.health-message.healthy:hover {
     background: rgba(40, 167, 69, 0.15);
   }
+  &.delta-medium {
+    background: rgba(255, 193, 7, 0.15);
+  }
+  &.delta-high {
+    background: rgba(220, 53, 69, 0.15);
+  }
+}
 
 .health-message:hover::after {
   content: attr(title);
@@ -415,4 +448,24 @@ const healthChartOptions = {
 .metric-card .card-body {
   padding: 0.5rem;
 }
+
+.health-delta {
+  margin-left: 0.5rem;
+  font-size: 0.8em;
+}
+
+.delta-low {
+  background: rgba(40, 167, 69, 0.1);
+  color: #0d5524;  /* Darker green */
+}
+
+.delta-medium {
+  background: rgba(255, 193, 7, 0.1);
+  color: #856404;  /* Darker yellow */
+}
+
+.delta-high {
+  background: rgba(220, 53, 69, 0.1);
+  color: #721c24;  /* Darker red */
+}
 </style>