feat(system-hub): add Network and Services widgets to Real-Time Metrics
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:
parent
4255a23696
commit
14a5aca976
@ -328,6 +328,8 @@ return view.extend({
|
|||||||
var memory = this.healthData.memory || {};
|
var memory = this.healthData.memory || {};
|
||||||
var disk = this.healthData.disk || {};
|
var disk = this.healthData.disk || {};
|
||||||
var temp = this.healthData.temperature || {};
|
var temp = this.healthData.temperature || {};
|
||||||
|
var network = this.healthData.network || {};
|
||||||
|
var services = this.healthData.services || {};
|
||||||
|
|
||||||
return E('div', { 'class': 'sh-realtime-metrics' }, [
|
return E('div', { 'class': 'sh-realtime-metrics' }, [
|
||||||
// CPU with load trend bars
|
// CPU with load trend bars
|
||||||
@ -478,6 +480,84 @@ return view.extend({
|
|||||||
E('span', { 'class': 'sh-rt-detail-value' }, '85°C')
|
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) + '%')
|
||||||
|
])
|
||||||
|
])
|
||||||
])
|
])
|
||||||
]);
|
]);
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user