CyberMind-FR
cf39eb6e1d
- Fixed minified RPC declaration in secubox/modules.js that caused false positive in validation - Added 30 missing menu entries across 10 modules: * bandwidth-manager: clients, schedules * client-guardian: zones, portal, logs, alerts, parental * crowdsec-dashboard: metrics * netdata-dashboard: system, processes, realtime, network * netifyd-dashboard: talkers, risks, devices * network-modes: router, accesspoint, relay, sniffer * secubox: settings * system-hub: components, diagnostics, health, remote, settings * vhost-manager: internal, ssl, redirects * wireguard-dashboard: traffic, config - All modules now pass comprehensive validation (0 errors, 0 warnings) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
204 lines
8.2 KiB
JavaScript
204 lines
8.2 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require poll';
|
|
'require dom';
|
|
'require ui';
|
|
'require wireguard-dashboard.api as api';
|
|
|
|
return view.extend({
|
|
title: _('WireGuard Dashboard'),
|
|
|
|
load: function() {
|
|
return api.getAllData();
|
|
},
|
|
|
|
render: function(data) {
|
|
var status = data.status || {};
|
|
var interfaces = (data.interfaces || {}).interfaces || [];
|
|
var peers = (data.peers || {}).peers || [];
|
|
|
|
var activePeers = peers.filter(function(p) { return p.status === 'active'; }).length;
|
|
|
|
var view = E('div', { 'class': 'wireguard-dashboard' }, [
|
|
// Header
|
|
E('div', { 'class': 'wg-header' }, [
|
|
E('div', { 'class': 'wg-logo' }, [
|
|
E('div', { 'class': 'wg-logo-icon' }, '🔐'),
|
|
E('div', { 'class': 'wg-logo-text' }, ['Wire', E('span', {}, 'Guard')])
|
|
]),
|
|
E('div', { 'class': 'wg-header-info' }, [
|
|
E('div', {
|
|
'class': 'wg-status-badge ' + (status.interface_count > 0 ? '' : 'offline')
|
|
}, [
|
|
E('span', { 'class': 'wg-status-dot' }),
|
|
status.interface_count > 0 ? 'VPN Active' : 'No Tunnels'
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Quick Stats
|
|
E('div', { 'class': 'wg-quick-stats' }, [
|
|
E('div', { 'class': 'wg-quick-stat' }, [
|
|
E('div', { 'class': 'wg-quick-stat-header' }, [
|
|
E('span', { 'class': 'wg-quick-stat-icon' }, '🌐'),
|
|
E('span', { 'class': 'wg-quick-stat-label' }, 'Interfaces')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat-value' }, status.interface_count || 0),
|
|
E('div', { 'class': 'wg-quick-stat-sub' }, 'Active tunnels')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat' }, [
|
|
E('div', { 'class': 'wg-quick-stat-header' }, [
|
|
E('span', { 'class': 'wg-quick-stat-icon' }, '👥'),
|
|
E('span', { 'class': 'wg-quick-stat-label' }, 'Total Peers')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat-value' }, status.total_peers || 0),
|
|
E('div', { 'class': 'wg-quick-stat-sub' }, 'Configured')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat', 'style': '--stat-gradient: linear-gradient(135deg, #10b981, #34d399)' }, [
|
|
E('div', { 'class': 'wg-quick-stat-header' }, [
|
|
E('span', { 'class': 'wg-quick-stat-icon' }, '✅'),
|
|
E('span', { 'class': 'wg-quick-stat-label' }, 'Active Peers')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat-value' }, status.active_peers || 0),
|
|
E('div', { 'class': 'wg-quick-stat-sub' }, 'Connected now')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat' }, [
|
|
E('div', { 'class': 'wg-quick-stat-header' }, [
|
|
E('span', { 'class': 'wg-quick-stat-icon' }, '📥'),
|
|
E('span', { 'class': 'wg-quick-stat-label' }, 'Downloaded')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat-value' }, api.formatBytes(status.total_rx || 0)),
|
|
E('div', { 'class': 'wg-quick-stat-sub' }, 'Total received')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat' }, [
|
|
E('div', { 'class': 'wg-quick-stat-header' }, [
|
|
E('span', { 'class': 'wg-quick-stat-icon' }, '📤'),
|
|
E('span', { 'class': 'wg-quick-stat-label' }, 'Uploaded')
|
|
]),
|
|
E('div', { 'class': 'wg-quick-stat-value' }, api.formatBytes(status.total_tx || 0)),
|
|
E('div', { 'class': 'wg-quick-stat-sub' }, 'Total sent')
|
|
])
|
|
]),
|
|
|
|
// Interfaces
|
|
E('div', { 'class': 'wg-card' }, [
|
|
E('div', { 'class': 'wg-card-header' }, [
|
|
E('div', { 'class': 'wg-card-title' }, [
|
|
E('span', { 'class': 'wg-card-title-icon' }, '🔗'),
|
|
'WireGuard Interfaces'
|
|
]),
|
|
E('div', { 'class': 'wg-card-badge' }, interfaces.length + ' tunnel' + (interfaces.length !== 1 ? 's' : ''))
|
|
]),
|
|
E('div', { 'class': 'wg-card-body' },
|
|
interfaces.length > 0 ?
|
|
E('div', { 'class': 'wg-charts-grid' },
|
|
interfaces.map(function(iface) {
|
|
return E('div', { 'class': 'wg-interface-card' }, [
|
|
E('div', { 'class': 'wg-interface-header' }, [
|
|
E('div', { 'class': 'wg-interface-name' }, [
|
|
E('div', { 'class': 'wg-interface-icon' }, '🌐'),
|
|
E('div', {}, [
|
|
E('h3', {}, iface.name),
|
|
E('p', {}, 'Listen port: ' + (iface.listen_port || 'N/A'))
|
|
])
|
|
]),
|
|
E('span', { 'class': 'wg-interface-status ' + iface.state }, iface.state)
|
|
]),
|
|
E('div', { 'class': 'wg-interface-details' }, [
|
|
E('div', { 'class': 'wg-interface-detail' }, [
|
|
E('div', { 'class': 'wg-interface-detail-label' }, 'Public Key'),
|
|
E('div', { 'class': 'wg-interface-detail-value' }, api.shortenKey(iface.public_key, 12))
|
|
]),
|
|
E('div', { 'class': 'wg-interface-detail' }, [
|
|
E('div', { 'class': 'wg-interface-detail-label' }, 'IPv4 Address'),
|
|
E('div', { 'class': 'wg-interface-detail-value' }, iface.ipv4_address || 'N/A')
|
|
]),
|
|
E('div', { 'class': 'wg-interface-detail' }, [
|
|
E('div', { 'class': 'wg-interface-detail-label' }, 'MTU'),
|
|
E('div', { 'class': 'wg-interface-detail-value' }, iface.mtu || 1420)
|
|
]),
|
|
E('div', { 'class': 'wg-interface-detail' }, [
|
|
E('div', { 'class': 'wg-interface-detail-label' }, 'Traffic'),
|
|
E('div', { 'class': 'wg-interface-detail-value' },
|
|
'↓' + api.formatBytes(iface.rx_bytes) + ' / ↑' + api.formatBytes(iface.tx_bytes))
|
|
])
|
|
])
|
|
]);
|
|
})
|
|
) :
|
|
E('div', { 'class': 'wg-empty' }, [
|
|
E('div', { 'class': 'wg-empty-icon' }, '🔐'),
|
|
E('div', { 'class': 'wg-empty-text' }, 'No WireGuard interfaces configured'),
|
|
E('p', {}, 'Configure a WireGuard interface in Network settings')
|
|
])
|
|
)
|
|
]),
|
|
|
|
// Recent Peers
|
|
peers.length > 0 ? E('div', { 'class': 'wg-card' }, [
|
|
E('div', { 'class': 'wg-card-header' }, [
|
|
E('div', { 'class': 'wg-card-title' }, [
|
|
E('span', { 'class': 'wg-card-title-icon' }, '👥'),
|
|
'Connected Peers'
|
|
]),
|
|
E('div', { 'class': 'wg-card-badge' }, activePeers + '/' + peers.length + ' active')
|
|
]),
|
|
E('div', { 'class': 'wg-card-body' }, [
|
|
E('div', { 'class': 'wg-peer-grid' },
|
|
peers.slice(0, 6).map(function(peer) {
|
|
return E('div', { 'class': 'wg-peer-card ' + (peer.status === 'active' ? 'active' : '') }, [
|
|
E('div', { 'class': 'wg-peer-header' }, [
|
|
E('div', { 'class': 'wg-peer-info' }, [
|
|
E('div', { 'class': 'wg-peer-icon' }, peer.status === 'active' ? '✅' : '👤'),
|
|
E('div', {}, [
|
|
E('p', { 'class': 'wg-peer-name' }, 'Peer ' + peer.short_key),
|
|
E('p', { 'class': 'wg-peer-key' }, api.shortenKey(peer.public_key, 16))
|
|
])
|
|
]),
|
|
E('span', { 'class': 'wg-peer-status ' + api.getPeerStatusClass(peer.status) }, peer.status)
|
|
]),
|
|
E('div', { 'class': 'wg-peer-details' }, [
|
|
E('div', { 'class': 'wg-peer-detail' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'Endpoint'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, peer.endpoint || '(none)')
|
|
]),
|
|
E('div', { 'class': 'wg-peer-detail' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'Last Handshake'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, api.formatHandshake(peer.handshake_ago))
|
|
]),
|
|
E('div', { 'class': 'wg-peer-detail', 'style': 'grid-column: span 2' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'Allowed IPs'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, peer.allowed_ips || 'N/A')
|
|
])
|
|
]),
|
|
E('div', { 'class': 'wg-peer-traffic' }, [
|
|
E('div', { 'class': 'wg-peer-traffic-item' }, [
|
|
E('div', { 'class': 'wg-peer-traffic-icon' }, '📥'),
|
|
E('div', { 'class': 'wg-peer-traffic-value rx' }, api.formatBytes(peer.rx_bytes)),
|
|
E('div', { 'class': 'wg-peer-traffic-label' }, 'Received')
|
|
]),
|
|
E('div', { 'class': 'wg-peer-traffic-item' }, [
|
|
E('div', { 'class': 'wg-peer-traffic-icon' }, '📤'),
|
|
E('div', { 'class': 'wg-peer-traffic-value tx' }, api.formatBytes(peer.tx_bytes)),
|
|
E('div', { 'class': 'wg-peer-traffic-label' }, 'Sent')
|
|
])
|
|
])
|
|
]);
|
|
})
|
|
)
|
|
])
|
|
]) : ''
|
|
]);
|
|
|
|
// Include CSS
|
|
var cssLink = E('link', { 'rel': 'stylesheet', 'href': L.resource('wireguard-dashboard/dashboard.css') });
|
|
document.head.appendChild(cssLink);
|
|
|
|
return view;
|
|
},
|
|
|
|
handleSaveApply: null,
|
|
handleSave: null,
|
|
handleReset: null
|
|
});
|