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

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

@@ -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>