From 0d2ae8d65360d052cb45db9897e042fb388ba447 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Wed, 30 May 2018 14:50:14 +0200 Subject: [PATCH] luci-mod-admin-full: rework network and wifi status displays Use a more compact flex layout instead of the tabular display. Also rename "WAN status" to "Upstream" to avoid future confusion about wan interfaces vs. defaultroute interfaces. Signed-off-by: Jo-Philipp Wich --- .../luasrc/view/admin_status/index.htm | 339 ++++++++---------- 1 file changed, 144 insertions(+), 195 deletions(-) diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm index d22445b01..73e5516bf 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_status/index.htm @@ -6,6 +6,7 @@ <% local fs = require "nixio.fs" + local ipc = require "luci.ip" local util = require "luci.util" local stat = require "luci.tools.status" local ver = require "luci.version" @@ -58,6 +59,8 @@ } if wan then + local dev = wan:get_interface() + local link = dev and ipc.link(dev:name()) rv.wan = { ipaddr = wan:ipaddr(), gwaddr = wan:gwaddr(), @@ -66,12 +69,19 @@ expires = wan:expires(), uptime = wan:uptime(), proto = wan:proto(), + i18n = wan:get_i18n(), ifname = wan:ifname(), - link = wan:adminlink() + link = wan:adminlink(), + mac = dev and dev:mac(), + type = dev and dev:type(), + name = dev and dev:get_i18n(), + ether = link and link.type == 1 } end if wan6 then + local dev = wan6:get_interface() + local link = dev and ipc.link(dev:name()) rv.wan6 = { ip6addr = wan6:ip6addr(), gw6addr = wan6:gw6addr(), @@ -79,8 +89,13 @@ ip6prefix = wan6:ip6prefix(), uptime = wan6:uptime(), proto = wan6:proto(), + i18n = wan6:get_i18n(), ifname = wan6:ifname(), - link = wan6:adminlink() + link = wan6:adminlink(), + mac = dev and dev:mac(), + type = dev and dev:type(), + name = dev and dev:get_i18n(), + ether = link and link.type == 1 } end @@ -164,133 +179,95 @@ }); } - XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 }, - function(x, info) - { - if (!(npoll++ % 5)) - updateHosts(); + function labelList(items, offset) { + var rv = [ ]; - var si = document.getElementById('wan4_i'); - var ss = document.getElementById('wan4_s'); - var ifc = info.wan; + for (var i = offset || 0; i < items.length; i += 2) { + var label = items[i], + value = items[i+1]; - if (ifc && ifc.ifname && ifc.proto != 'none') - { - var s = String.format( - '<%:Type%>: %s
' + - '<%:Address%>: %s
' + - '<%:Netmask%>: %s
' + - '<%:Gateway%>: %s
', - ifc.proto, - (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0', - (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255', - (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0' - ); + if (value === undefined || value === null) + continue; - for (var i = 0; i < ifc.dns.length; i++) - { - s += String.format( - '<%:DNS%> %d: %s
', - i + 1, ifc.dns[i] - ); - } + if (label) + rv.push(E('strong', [label, ': '])); - if (ifc.expires > -1) - { - s += String.format( - '<%:Expires%>: %t
', - ifc.expires - ); - } - - if (ifc.uptime > 0) - { - s += String.format( - '<%:Connected%>: %t
', - ifc.uptime - ); - } - - ss.innerHTML = String.format('%s', s); - si.innerHTML = String.format( - '' + - '
%s', - ifc.link, ifc.ifname - ); - } - else - { - si.innerHTML = '
?'; - ss.innerHTML = '<%:Not connected%>'; - } + rv.push(value, E('br')); + } - <% if has_ipv6 then %> - var si6 = document.getElementById('wan6_i'); - var ss6 = document.getElementById('wan6_s'); - var ifc6 = info.wan6; + return rv; + } - if (ifc6 && ifc6.ifname && ifc6.proto != 'none') - { - var s = String.format( - '<%:Type%>: %s%s
', - ifc6.proto, (ifc6.ip6prefix) ? '-pd' : '' - ); + function renderBox(title, active, childs) { + childs = childs || []; + childs.unshift(E('span', labelList(arguments, 3))); - if (!ifc6.ip6prefix) - { - s += String.format( - '<%:Address%>: %s
', - (ifc6.ip6addr) ? ifc6.ip6addr : '::' - ); - } - else - { - s += String.format( - '<%:Prefix Delegated%>: %s
', - ifc6.ip6prefix - ); - if (ifc6.ip6addr) - { - s += String.format( - '<%:Address%>: %s
', - ifc6.ip6addr - ); - } - } + return E('div', { class: 'ifacebox' }, [ + E('div', { class: 'ifacebox-head center ' + (active ? 'active' : '') }, + E('strong', title)), + E('div', { class: 'ifacebox-body' }, childs) + ]); + } - s += String.format( - '<%:Gateway%>: %s
', - (ifc6.gw6addr) ? ifc6.gw6addr : '::' - ); + function renderBadge(icon, title) { + return E('span', { class: 'ifacebadge' }, [ + E('img', { src: icon, title: title || '' }), + E('span', labelList(arguments, 2)) + ]); + } - for (var i = 0; i < ifc6.dns.length; i++) - { - s += String.format( - '<%:DNS%> %d: %s
', - i + 1, ifc6.dns[i] - ); - } + XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 }, + function(x, info) + { + if (!(npoll++ % 5)) + updateHosts(); - if (ifc6.uptime > 0) - { - s += String.format( - '<%:Connected%>: %t
', - ifc6.uptime - ); - } + var us = document.getElementById('upstream_status_table'); + + while (us.lastElementChild) + us.removeChild(us.lastElementChild); + + var ifc = info.wan || {}; + + us.appendChild(renderBox( + '<%:IPv4 Upstream%>', + (ifc.ifname && ifc.proto != 'none'), + [ renderBadge( + '<%=resource%>/icons/%s.png'.format((ifc && ifc.type) ? ifc.type : 'ethernet_disabled'), null, + '<%:Device%>', ifc ? (ifc.name || ifc.ifname || '-') : '-', + '<%:MAC-Address%>', (ifc && ifc.ether) ? ifc.mac : null) ], + '<%:Protocol%>', ifc.i18n || E('em', '<%:Not connected%>'), + '<%:Address%>', (ifc.ipaddr) ? ifc.ipaddr : '0.0.0.0', + '<%:Netmask%>', (ifc.netmask && ifc.netmask != ifc.ipaddr) ? ifc.netmask : '255.255.255.255', + '<%:Gateway%>', (ifc.gwaddr) ? ifc.gwaddr : '0.0.0.0', + '<%:DNS%> 1', (ifc.dns) ? ifc.dns[0] : null, + '<%:DNS%> 2', (ifc.dns) ? ifc.dns[1] : null, + '<%:DNS%> 3', (ifc.dns) ? ifc.dns[2] : null, + '<%:DNS%> 4', (ifc.dns) ? ifc.dns[3] : null, + '<%:DNS%> 5', (ifc.dns) ? ifc.dns[4] : null, + '<%:Expires%>', (ifc.expires > -1) ? '%t'.format(ifc.expires) : null, + '<%:Connected%>', (ifc.uptime > 0) ? '%t'.format(ifc.uptime) : null)); - ss6.innerHTML = String.format('%s', s); - si6.innerHTML = String.format( - '' + - '
%s', - ifc6.link, ifc6.ifname - ); - } - else - { - si6.innerHTML = '
?'; - ss6.innerHTML = '<%:Not connected%>'; - } + <% if has_ipv6 then %> + var ifc6 = info.wan6 || {}; + + us.appendChild(renderBox( + '<%:IPv6 Upstream%>', + (ifc6.ifname && ifc6.proto != 'none'), + [ renderBadge( + '<%=resource%>/icons/%s.png'.format(ifc6.type || 'ethernet_disabled'), null, + '<%:Device%>', ifc6 ? (ifc6.name || ifc6.ifname || '-') : '-', + '<%:MAC-Address%>', (ifc6 && ifc6.ether) ? ifc6.mac : null) ], + '<%:Protocol%>', ifc6.i18n ? (ifc6.i18n + (ifc6.proto === 'dhcp' && ifc6.ip6prefix ? '-PD' : '')) : E('em', '<%:Not connected%>'), + '<%:Prefix Delegated%>', ifc6.ip6prefix, + '<%:Address%>', (ifc6.ip6prefix) ? (ifc6.ip6addr || null) : (ifc6.ipaddr || '::'), + '<%:Gateway%>', (ifc6.gw6addr) ? ifc6.gw6addr : '::', + '<%:DNS%> 1', (ifc6.dns) ? ifc6.dns[0] : null, + '<%:DNS%> 2', (ifc6.dns) ? ifc6.dns[1] : null, + '<%:DNS%> 3', (ifc6.dns) ? ifc6.dns[2] : null, + '<%:DNS%> 4', (ifc6.dns) ? ifc6.dns[3] : null, + '<%:DNS%> 5', (ifc6.dns) ? ifc6.dns[4] : null, + '<%:Connected%>', (ifc6.uptime > 0) ? '%t'.format(ifc6.uptime) : null)); <% end %> <% if has_dsl then %> @@ -417,11 +394,11 @@ hint = host.name; } - ls6.appendChild(E('
'.format((i % 2) + 1), [ - E('
', hint ? '
%h (%h)
'.format(name || '?', hint) : (name || '?')), - E('
', info.leases6[i].ip6addr), - E('
', info.leases6[i].duid), - E('
', timestr) + ls6.appendChild(E('
'.format((i % 2) + 1), [ + E('
', hint ? '
%h (%h)
'.format(name || '?', hint) : (name || '?')), + E('
', info.leases6[i].ip6addr), + E('
', info.leases6[i].duid), + E('
', timestr) ])); } @@ -442,12 +419,28 @@ for (var didx = 0; didx < info.wifinets.length; didx++) { var dev = info.wifinets[didx]; - var s = ''; + var net0 = (dev.networks && dev.networks[0]) ? dev.networks[0] : {}; + var vifs = []; for (var nidx = 0; nidx < dev.networks.length; nidx++) { var net = dev.networks[nidx]; var is_assoc = (net.bssid != '00:00:00:00:00:00' && net.channel && !net.disabled); + var num_assoc = 0; + + for (var bssid in net.assoclist) + { + var bss = net.assoclist[bssid]; + + bss.bssid = bssid; + bss.link = net.link; + bss.name = net.name; + bss.ifname = net.ifname; + bss.radio = dev.name; + + assoclist.push(bss); + num_assoc++; + } var icon; if (!is_assoc) @@ -463,61 +456,27 @@ else icon = "<%=resource%>/icons/signal-75-100.png"; - s += String.format( - '
' + - '' + - '
%d%%' + - '
' + - '<%:SSID%>: %h
' + - '<%:Mode%>: %s
' + - '<%:Channel%>: %d (%.3f <%:GHz%>)
' + - '<%:Bitrate%>: %s <%:Mbit/s%>
', - icon, net.signal, net.noise, - net.quality, - net.link, net.ssid || '?', - net.mode, - net.channel, net.frequency, - net.bitrate || '?' - ); - - if (is_assoc) - { - s += String.format( - '<%:BSSID%>: %s
' + - '<%:Encryption%>: %s', - net.bssid || '?', - net.encryption - ); - } - else - { - s += '<%:Wireless is disabled or not associated%>'; - } - - s += '
'; - - for (var bssid in net.assoclist) - { - var bss = net.assoclist[bssid]; - - bss.bssid = bssid; - bss.link = net.link; - bss.name = net.name; - bss.ifname = net.ifname; - bss.radio = dev.name; - - assoclist.push(bss); - } + vifs.push(renderBadge( + icon, + '<%:Signal%>: %d dBm / <%:Quality%>: %d%%'.format(net.signal, net.quality), + '<%:SSID%>', E('a', { href: net.link }, [ net.ssid || '?' ]), + '<%:Mode%>', net.mode, + '<%:BSSID%>', is_assoc ? (net.bssid || '-') : null, + '<%:Encryption%>', is_assoc ? net.encryption : null, + '<%:Associations%>', is_assoc ? (num_assoc || '-') : null, + null, is_assoc ? null : E('em', '<%:Wireless is disabled or not associated%>'))); } - if (!s) - s = '<%:No information available%>'; - - ws.appendChild(E('
', [ - E('
', dev.name), - E('
', s) - ])); + ws.appendChild(renderBox( + dev.device, dev.up || net0.up, + [ E('div', vifs) ], + '<%:Type%>', dev.name.replace(/^Generic | Wireless Controller .+$/g, ''), + '<%:Channel%>', net0.channel ? '%d (%.3f <%:GHz%>)'.format(net0.channel, net0.frequency) : '-', + '<%:Bitrate%>', net0.bitrate ? '%d <%:Mbit/s%>'.format(net0.bitrate) : '-')); } + + if (!ws.lastElementChild) + ws.appendChild(E('<%:No information available%>')); } var ac = document.getElementById('wifi_assoc_table'); @@ -560,11 +519,11 @@ .format(assoclist[i].link, assoclist[i].name)), E('
', assoclist[i].bssid), - E('
', - hint ? '
%h (%h)
'.format(name || '?', hint) : (name || '?')), + E('
', + hint ? '
%h (%h)
'.format(name || '?', hint) : (name || '?')), E('
%d / %d <%:dBm%>
' .format(assoclist[i].signal, assoclist[i].noise, assoclist[i].signal - assoclist[i].noise, icon, assoclist[i].signal, assoclist[i].noise)), - E('
', [ + E('
', [ E('', wifirate(assoclist[i], true)), E('
'), E('', wifirate(assoclist[i], false)) @@ -674,21 +633,11 @@
<%:Network%> +
+ <%:Collecting data...%> +
+
-
<%:IPv4 WAN Status%>
-
-

?
-
<%:Collecting data...%>
-
-
- <% if has_ipv6 then %> -
<%:IPv6 WAN Status%>
-
-

?
-
<%:Collecting data...%>
-
-
- <% end %>
<%:Active Connections%>
-
@@ -750,8 +699,8 @@
<%:Wireless%> -
-
<%:Collecting data...%>
+
+ <%:Collecting data...%>
-- 2.25.1