iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: health bar coloring

Browse Source
This commit is contained in:
0x1d
2025-09-20 13:04:27 +02:00
parent b4aeb9d388
commit e4cfb77a67
3 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -20,8 +20,8 @@
<div class="nav-left"> <div class="nav-left">
<button class="nav-tab active" data-view="cluster">🌐 Cluster</button> <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="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="monitoring">📊 Monitoring</button>
<button class="nav-tab" data-view="firmware">📦 Firmware</button>
</div> </div>
<div class="nav-right"> <div class="nav-right">
<div class="theme-switcher"> <div class="theme-switcher">

22
public/scripts/components/MonitoringViewComponent.js
View File

@@ -122,6 +122,16 @@ class MonitoringViewComponent extends Component {
this.drawer.closeDrawer(); 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 // Clean up resources
cleanup() { cleanup() {
if (this.drawer) { 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-value">${Math.round(clusterSummary.totalCpu - clusterSummary.availableCpu)}MHz / ${Math.round(clusterSummary.totalCpu)}MHz</div>
<div class="stat-utilization"> <div class="stat-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${cpuUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
</div> </div>
<span class="utilization-text">${cpuUtilization}% used</span> <span class="utilization-text">${cpuUtilization}% used</span>
</div> </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-value">${this.viewModel.formatResourceValue(clusterSummary.totalMemory - clusterSummary.availableMemory, 'memory')} / ${this.viewModel.formatResourceValue(clusterSummary.totalMemory, 'memory')}</div>
<div class="stat-utilization"> <div class="stat-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${memoryUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
</div> </div>
<span class="utilization-text">${memoryUtilization}% used</span> <span class="utilization-text">${memoryUtilization}% used</span>
</div> </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-value">${this.viewModel.formatResourceValue(clusterSummary.totalStorage - clusterSummary.availableStorage, 'storage')} / ${this.viewModel.formatResourceValue(clusterSummary.totalStorage, 'storage')}</div>
<div class="stat-utilization"> <div class="stat-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${storageUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
</div> </div>
<span class="utilization-text">${storageUtilization}% used</span> <span class="utilization-text">${storageUtilization}% used</span>
</div> </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-value">${Math.round(cpuUsed)}MHz / ${Math.round(cpuTotal)}MHz</div>
<div class="resource-utilization"> <div class="resource-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${cpuUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
</div> </div>
<span class="utilization-text">${cpuUtilization}% used</span> <span class="utilization-text">${cpuUtilization}% used</span>
</div> </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-value">${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}</div>
<div class="resource-utilization"> <div class="resource-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${memoryUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
</div> </div>
<span class="utilization-text">${memoryUtilization}% used</span> <span class="utilization-text">${memoryUtilization}% used</span>
</div> </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-value">${this.viewModel.formatResourceValue(storageUsed, 'storage')} / ${this.viewModel.formatResourceValue(storageTotal, 'storage')}</div>
<div class="resource-utilization"> <div class="resource-utilization">
<div class="utilization-bar"> <div class="utilization-bar">
<div class="utilization-fill" style="width: ${storageUtilization}%"></div> <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
</div> </div>
<span class="utilization-text">${storageUtilization}% used</span> <span class="utilization-text">${storageUtilization}% used</span>
</div> </div>

17
public/styles/main.css
View File

@@ -4128,6 +4128,23 @@ html {
transition: width 0.3s ease; 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 { .utilization-text {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.75rem; font-size: 0.75rem;