gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(system-hub): add Network and Services widgets to Real-Time Metrics

Browse Source 
Added 2 new performance widgets:

🌐 Network Stats:
- Online/Offline status with badge
- Total download (RX) in GB
- Total upload (TX) in GB
- Network status indicator
- Cyan → Blue gradient

⚙️ Services Monitor:
- Running/Total services count
- Failed services count
- Health percentage (running/total)
- Status badges: healthy/issues/critical
- Green → Emerald gradient

All widgets now visible by default (6 total):
1. CPU Performance (with load histogram)
2. Memory Usage (with swap visualization)
3. Disk Space
4. Temperature
5. Network Stats (NEW)
6. Services Monitor (NEW)

Grid layout auto-adapts: 280px min per widget
This commit is contained in:
CyberMind-FR 2025-12-28 03:14:10 +01:00
parent 4255a23696
commit 14a5aca976
1 changed files with 80 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
luci-app-system-hub/htdocs/luci-static/resources/view/system-hub/overview.js
View File

@ -328,6 +328,8 @@ return view.extend({
var memory = this.healthData.memory || {};
var disk = this.healthData.disk || {};
var temp = this.healthData.temperature || {};
var network = this.healthData.network || {};
var services = this.healthData.services || {};
return E('div', { 'class': 'sh-realtime-metrics' }, [
// CPU with load trend bars
@ -478,6 +480,84 @@ return view.extend({
E('span', { 'class': 'sh-rt-detail-value' }, '85°C')
])
])
]),
// Network Stats (v0.3.2 - NEW)
E('div', { 'class': 'sh-rt-metric sh-rt-metric-network' }, [
E('div', { 'class': 'sh-rt-header' }, [
E('div', { 'class': 'sh-rt-title-group' }, [
E('span', { 'class': 'sh-rt-icon' }, '🌐'),
E('span', { 'class': 'sh-rt-title' }, 'Network Stats')
]),
E('div', { 'class': 'sh-rt-value-group' }, [
E('span', { 'class': 'sh-rt-value' }, network.wan_up ? 'Online' : 'Offline'),
E('span', { 'class': 'sh-rt-badge sh-rt-badge-' + (network.wan_up ? 'ok' : 'critical') },
network.wan_up ? 'connected' : 'disconnected')
])
]),
E('div', { 'class': 'sh-rt-progress-modern' }, [
E('div', {
'class': 'sh-rt-progress-fill sh-rt-gradient-network',
'style': 'width: ' + (network.wan_up ? 100 : 0) + '%'
})
]),
E('div', { 'class': 'sh-rt-details-grid' }, [
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Download'),
E('span', { 'class': 'sh-rt-detail-value' },
'↓ ' + ((network.rx_bytes || 0) / 1024 / 1024 / 1024).toFixed(2) + ' GB')
]),
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Upload'),
E('span', { 'class': 'sh-rt-detail-value' },
'↑ ' + ((network.tx_bytes || 0) / 1024 / 1024 / 1024).toFixed(2) + ' GB')
]),
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Status'),
E('span', { 'class': 'sh-rt-detail-value' }, network.status || 'unknown')
])
])
]),
// Services Monitor (v0.3.2 - NEW)
E('div', { 'class': 'sh-rt-metric sh-rt-metric-services' }, [
E('div', { 'class': 'sh-rt-header' }, [
E('div', { 'class': 'sh-rt-title-group' }, [
E('span', { 'class': 'sh-rt-icon' }, '⚙️'),
E('span', { 'class': 'sh-rt-title' }, 'Services Monitor')
]),
E('div', { 'class': 'sh-rt-value-group' }, [
E('span', { 'class': 'sh-rt-value' }, (services.running || 0) + '/' + ((services.running || 0) + (services.failed || 0))),
E('span', {
'class': 'sh-rt-badge sh-rt-badge-' + ((services.failed || 0) === 0 ? 'ok' : (services.failed || 0) > 3 ? 'critical' : 'warning')
}, (services.failed || 0) === 0 ? 'healthy' : 'issues')
])
]),
E('div', { 'class': 'sh-rt-progress-modern' }, [
E('div', {
'class': 'sh-rt-progress-fill sh-rt-gradient-services',
'style': 'width: ' + (((services.running || 0) + (services.failed || 0)) > 0
? Math.round(((services.running || 0) / ((services.running || 0) + (services.failed || 0))) * 100)
: 100) + '%'
})
]),
E('div', { 'class': 'sh-rt-details-grid' }, [
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Running'),
E('span', { 'class': 'sh-rt-detail-value' }, (services.running || 0) + ' services')
]),
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Failed'),
E('span', { 'class': 'sh-rt-detail-value' }, (services.failed || 0) + ' services')
]),
E('div', { 'class': 'sh-rt-detail' }, [
E('span', { 'class': 'sh-rt-detail-label' }, 'Health'),
E('span', { 'class': 'sh-rt-detail-value' },
(((services.running || 0) + (services.failed || 0)) > 0
? Math.round(((services.running || 0) / ((services.running || 0) + (services.failed || 0))) * 100)
: 100) + '%')
])
])
])
]);
},