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

feat: add labels to nodes in monitoring

Browse Source
This commit is contained in:
0x1d
2025-09-20 22:13:39 +02:00
parent 491ddb86b8
commit 9d4b68e7fc
2 changed files with 95 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -361,7 +361,7 @@ class MonitoringViewComponent extends Component {
}
renderNodeCard(nodeData) {
const { ip, hostname, resources, hasResources, error, resourceSource } = nodeData;
const { ip, hostname, resources, hasResources, error, resourceSource, labels } = nodeData;
if (!hasResources) {
@@ -374,8 +374,21 @@ class MonitoringViewComponent extends Component {
<div class="node-status">
<span class="status-badge error">❌ No Resources</span>
</div>
${labels && Object.keys(labels).length > 0 ? `
<div class="node-labels">
<div class="labels-container">
${Object.entries(labels).map(([key, value]) =>
`<span class="label-chip">${key}: ${value}</span>`
).join('')}
</div>
<div class="labels-divider"></div>
</div>
` : ''}
<div class="node-error">
${error || 'Monitoring endpoint not available'}
<div class="error-label">⚠️ Error</div>
<div class="error-message">${error || 'Monitoring endpoint not available'}</div>
</div>
${nodeData.lastSeen ? `
<div class="node-uptime">
@@ -446,6 +459,17 @@ class MonitoringViewComponent extends Component {
<span class="status-badge ${resourceSource === 'monitoring' ? 'success' : 'warning'}">${resourceSourceText}</span>
</div>
${labels && Object.keys(labels).length > 0 ? `
<div class="node-labels">
<div class="labels-container">
${Object.entries(labels).map(([key, value]) =>
`<span class="label-chip">${key}: ${value}</span>`
).join('')}
</div>
<div class="labels-divider"></div>
</div>
` : ''}
${system.uptime_formatted ? `
<div class="node-uptime">
<div class="uptime-label">⏱️ Uptime</div>
@@ -469,7 +493,9 @@ class MonitoringViewComponent extends Component {
<div class="node-resources">
<div class="resource-item">
<div class="resource-label">⚡ CPU</div>
<div class="resource-value">${Math.round(cpuUsed)}MHz / ${Math.round(cpuTotal)}MHz</div>
<div class="resource-value">
<span class="value-label">Used:</span> ${Math.round(cpuUsed)}MHz / <span class="value-label">Total:</span> ${Math.round(cpuTotal)}MHz
</div>
<div class="resource-utilization">
<div class="utilization-bar">
<div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
@@ -480,7 +506,9 @@ class MonitoringViewComponent extends Component {
<div class="resource-item">
<div class="resource-label">🧠 Memory</div>
<div class="resource-value">${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}</div>
<div class="resource-value">
<span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}
</div>
<div class="resource-utilization">
<div class="utilization-bar">
<div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
@@ -491,7 +519,9 @@ class MonitoringViewComponent extends Component {
<div class="resource-item">
<div class="resource-label">💾 Storage</div>
<div class="resource-value">${this.viewModel.formatResourceValue(storageUsed, 'storage')} / ${this.viewModel.formatResourceValue(storageTotal, 'storage')}</div>
<div class="resource-value">
<span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(storageUsed, 'storage')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(storageTotal, 'storage')}
</div>
<div class="resource-utilization">
<div class="utilization-bar">
<div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>