122 lines
4.5 KiB
JavaScript
122 lines
4.5 KiB
JavaScript
'use strict';
|
|
'require view';
|
|
'require poll';
|
|
'require dom';
|
|
'require ui';
|
|
'require wireguard-dashboard.api as api';
|
|
|
|
return view.extend({
|
|
title: _('WireGuard Peers'),
|
|
|
|
load: function() {
|
|
return api.getPeers();
|
|
},
|
|
|
|
render: function(data) {
|
|
var peers = (data || {}).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'), ' Peers'])
|
|
]),
|
|
E('div', { 'class': 'wg-header-info' }, [
|
|
E('div', { 'class': 'wg-status-badge' }, [
|
|
E('span', { 'class': 'wg-status-dot' }),
|
|
activePeers + '/' + peers.length + ' Active'
|
|
])
|
|
])
|
|
]),
|
|
|
|
// Peers Grid
|
|
E('div', { 'class': 'wg-card' }, [
|
|
E('div', { 'class': 'wg-card-header' }, [
|
|
E('div', { 'class': 'wg-card-title' }, [
|
|
E('span', { 'class': 'wg-card-title-icon' }, '📋'),
|
|
'All Peers'
|
|
]),
|
|
E('div', { 'class': 'wg-card-badge' }, peers.length + ' configured')
|
|
]),
|
|
E('div', { 'class': 'wg-card-body' },
|
|
peers.length > 0 ?
|
|
E('div', { 'class': 'wg-peer-grid' },
|
|
peers.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' ? '✅' :
|
|
peer.status === 'idle' ? '💤' : '👤'),
|
|
E('div', {}, [
|
|
E('p', { 'class': 'wg-peer-name' }, 'Peer ' + peer.short_key),
|
|
E('p', { 'class': 'wg-peer-key' }, peer.interface)
|
|
])
|
|
]),
|
|
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' }, 'Public Key'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, api.shortenKey(peer.public_key, 20))
|
|
]),
|
|
E('div', { 'class': 'wg-peer-detail' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'Endpoint'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, peer.endpoint || '(roaming)')
|
|
]),
|
|
E('div', { 'class': 'wg-peer-detail' }, [
|
|
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-detail' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'Keepalive'),
|
|
E('span', { 'class': 'wg-peer-detail-value' },
|
|
peer.keepalive > 0 ? peer.keepalive + 's' : 'off')
|
|
]),
|
|
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' }, [
|
|
E('span', { 'class': 'wg-peer-detail-label' }, 'PSK'),
|
|
E('span', { 'class': 'wg-peer-detail-value' }, peer.preshared_key ? '✓ Set' : '✗ None')
|
|
])
|
|
]),
|
|
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')
|
|
])
|
|
])
|
|
]);
|
|
})
|
|
) :
|
|
E('div', { 'class': 'wg-empty' }, [
|
|
E('div', { 'class': 'wg-empty-icon' }, '👥'),
|
|
E('div', { 'class': 'wg-empty-text' }, 'No peers configured'),
|
|
E('p', {}, 'Add peers to your WireGuard interfaces')
|
|
])
|
|
)
|
|
])
|
|
]);
|
|
|
|
// 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
|
|
});
|