From e4cfb77a676d31e7c0c61fa8ddf1882fa73ed567 Mon Sep 17 00:00:00 2001
From: Patrick Balsiger <frupii@gmail.com>
Date: Sat, 20 Sep 2025 13:04:27 +0200
Subject: [PATCH] feat: health bar coloring

---
 public/index.html                             |  2 +-
 .../components/MonitoringViewComponent.js     | 22 ++++++++++++++-----
 public/styles/main.css                        | 17 ++++++++++++++
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index ad8137f..1348b7d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,8 +20,8 @@
             <div class="nav-left">
                 <button class="nav-tab active" data-view="cluster">🌐 Cluster</button>
                 <button class="nav-tab" data-view="topology">🔗 Topology</button>
-                <button class="nav-tab" data-view="firmware">📦 Firmware</button>
                 <button class="nav-tab" data-view="monitoring">📊 Monitoring</button>
+                <button class="nav-tab" data-view="firmware">📦 Firmware</button>
             </div>
             <div class="nav-right">
                 <div class="theme-switcher">
diff --git a/public/scripts/components/MonitoringViewComponent.js b/public/scripts/components/MonitoringViewComponent.js
index a025ca2..1f793cf 100644
--- a/public/scripts/components/MonitoringViewComponent.js
+++ b/public/scripts/components/MonitoringViewComponent.js
@@ -122,6 +122,16 @@ class MonitoringViewComponent extends Component {
         this.drawer.closeDrawer();
     }
 
+    // Get color class based on utilization percentage (same logic as gauges)
+    getUtilizationColorClass(percentage) {
+        const numPercentage = parseFloat(percentage);
+        
+        if (numPercentage === 0 || isNaN(numPercentage)) return 'utilization-empty';
+        if (numPercentage < 50) return 'utilization-green';
+        if (numPercentage < 80) return 'utilization-yellow';
+        return 'utilization-red';
+    }
+
     // Clean up resources
     cleanup() {
         if (this.drawer) {
@@ -223,7 +233,7 @@ class MonitoringViewComponent extends Component {
                             <div class="stat-value">${Math.round(clusterSummary.totalCpu - clusterSummary.availableCpu)}MHz / ${Math.round(clusterSummary.totalCpu)}MHz</div>
                             <div class="stat-utilization">
                                 <div class="utilization-bar">
-                                    <div class="utilization-fill" style="width: ${cpuUtilization}%"></div>
+                                    <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
                                 </div>
                                 <span class="utilization-text">${cpuUtilization}% used</span>
                             </div>
@@ -237,7 +247,7 @@ class MonitoringViewComponent extends Component {
                             <div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalMemory - clusterSummary.availableMemory, 'memory')} / ${this.viewModel.formatResourceValue(clusterSummary.totalMemory, 'memory')}</div>
                             <div class="stat-utilization">
                                 <div class="utilization-bar">
-                                    <div class="utilization-fill" style="width: ${memoryUtilization}%"></div>
+                                    <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
                                 </div>
                                 <span class="utilization-text">${memoryUtilization}% used</span>
                             </div>
@@ -251,7 +261,7 @@ class MonitoringViewComponent extends Component {
                             <div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalStorage - clusterSummary.availableStorage, 'storage')} / ${this.viewModel.formatResourceValue(clusterSummary.totalStorage, 'storage')}</div>
                             <div class="stat-utilization">
                                 <div class="utilization-bar">
-                                    <div class="utilization-fill" style="width: ${storageUtilization}%"></div>
+                                    <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
                                 </div>
                                 <span class="utilization-text">${storageUtilization}% used</span>
                             </div>
@@ -394,7 +404,7 @@ class MonitoringViewComponent extends Component {
                         <div class="resource-value">${Math.round(cpuUsed)}MHz / ${Math.round(cpuTotal)}MHz</div>
                         <div class="resource-utilization">
                             <div class="utilization-bar">
-                                <div class="utilization-fill" style="width: ${cpuUtilization}%"></div>
+                                <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
                             </div>
                             <span class="utilization-text">${cpuUtilization}% used</span>
                         </div>
@@ -405,7 +415,7 @@ class MonitoringViewComponent extends Component {
                         <div class="resource-value">${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}</div>
                         <div class="resource-utilization">
                             <div class="utilization-bar">
-                                <div class="utilization-fill" style="width: ${memoryUtilization}%"></div>
+                                <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
                             </div>
                             <span class="utilization-text">${memoryUtilization}% used</span>
                         </div>
@@ -416,7 +426,7 @@ class MonitoringViewComponent extends Component {
                         <div class="resource-value">${this.viewModel.formatResourceValue(storageUsed, 'storage')} / ${this.viewModel.formatResourceValue(storageTotal, 'storage')}</div>
                         <div class="resource-utilization">
                             <div class="utilization-bar">
-                                <div class="utilization-fill" style="width: ${storageUtilization}%"></div>
+                                <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
                             </div>
                             <span class="utilization-text">${storageUtilization}% used</span>
                         </div>
diff --git a/public/styles/main.css b/public/styles/main.css
index b75a9cd..92ad58c 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -4128,6 +4128,23 @@ html {
     transition: width 0.3s ease;
 }
 
+/* Utilization bar colors based on percentage (same as gauges) */
+.utilization-empty {
+    background: rgba(255, 255, 255, 0.1) !important;
+}
+
+.utilization-green {
+    background: linear-gradient(90deg, var(--accent-success), var(--accent-success)) !important;
+}
+
+.utilization-yellow {
+    background: linear-gradient(90deg, var(--accent-warning), var(--accent-warning)) !important;
+}
+
+.utilization-red {
+    background: linear-gradient(90deg, var(--accent-error), var(--accent-error)) !important;
+}
+
 .utilization-text {
     color: var(--text-secondary);
     font-size: 0.75rem;