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:
parent
6507b1f04b
commit
8ae208dce6
1 changed files with 18 additions and 4 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue