luci-app-wireguard: show a hint when nothing is configured

When no wireguard interface is configured, the wireguard status page will
simply display a blank page only containing a heading.

Print a short notice stating that no interfaces are configured. Also
use actual table elements for table markup while we're at it.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2021-11-18 19:34:56 +01:00
parent 6507b1f04b
commit 8ae208dce6

View file

@ -74,19 +74,26 @@ function generatePeerRows(peers) {
var peerData = parsePeerData(peer); var peerData = parsePeerData(peer);
var iconSrc = getTunnelIcon(peer.latest_handshake); var iconSrc = getTunnelIcon(peer.latest_handshake);
peerRows.push(E('div', { peerRows.push(E('tr', {
'class': 'tr cbi-section-table-row' 'class': 'tr cbi-section-table-row'
}, [ }, [
E('div', { E('td', {
'class': 'td peer-name', 'class': 'td peer-name',
'style': 'width: 25%; font-size: 0.9rem;' 'style': 'width: 25%; font-size: 0.9rem;'
}, peer.name), }, peer.name),
E('div', { 'class': 'td', 'data-section-id': peer.name }, E('td', { 'class': 'td', 'data-section-id': peer.name },
generatePeerTable(peerData, iconSrc) generatePeerTable(peerData, iconSrc)
) )
])); ]));
}); });
if (!peerRows.length) {
peerRows.push(
E('tr', { 'class': 'tr placeholder' },
E('td', { 'class': 'td' },
E('em', _('No peer information available')))));
}
return peerRows; return peerRows;
} }
@ -124,6 +131,7 @@ return view.extend({
load: function () { load: function () {
return callGetWgInstances(); return callGetWgInstances();
}, },
poll_status: function (nodes, ifaces) { poll_status: function (nodes, ifaces) {
Object.keys(ifaces).forEach(function (ifaceName) { Object.keys(ifaces).forEach(function (ifaceName) {
var iface = ifaces[ifaceName]; var iface = ifaces[ifaceName];
@ -164,6 +172,7 @@ return view.extend({
}); });
}); });
}, },
render: function (ifaces) { render: function (ifaces) {
var m, s, o, ss; var m, s, o, ss;
@ -171,6 +180,7 @@ return view.extend({
m.tabbed = true; m.tabbed = true;
var ifaceNames = Object.keys(ifaces); var ifaceNames = Object.keys(ifaces);
for (var i = ifaceNames.length - 1; i >= 0; i--) { for (var i = ifaceNames.length - 1; i >= 0; i--) {
var ifaceName = ifaceNames[i]; var ifaceName = ifaceNames[i];
var iface = ifaces[ifaceName]; var iface = ifaces[ifaceName];
@ -193,13 +203,16 @@ return view.extend({
ss.render = L.bind(function (view, section_id) { ss.render = L.bind(function (view, section_id) {
return E('div', { 'class': 'cbi-section' }, [ return E('div', { 'class': 'cbi-section' }, [
E('h3', _('Peers')), E('h3', _('Peers')),
E('div', { 'class': 'table cbi-section-table' }, E('table', { 'class': 'table cbi-section-table' },
generatePeerRows(this.peers)) generatePeerRows(this.peers))
]); ]);
}, iface, this); }, iface, this);
} }
return m.render().then(L.bind(function (m, nodes) { return m.render().then(L.bind(function (m, nodes) {
if (!ifaceNames.length)
nodes.appendChild(E('p', {}, E('em', _('No WireGuard interfaces configured.'))));
poll.add(L.bind(function () { poll.add(L.bind(function () {
return callGetWgInstances().then( return callGetWgInstances().then(
L.bind(this.poll_status, this, nodes) L.bind(this.poll_status, this, nodes)
@ -208,6 +221,7 @@ return view.extend({
return nodes; return nodes;
}, this, m)); }, this, m));
}, },
handleReset: null, handleReset: null,
handleSaveApply: null, handleSaveApply: null,
handleSave: null handleSave: null