diff options
author | Jo-Philipp Wich <jo@mein.io> | 2018-07-15 15:18:00 +0200 |
---|---|---|
committer | Jo-Philipp Wich <jo@mein.io> | 2018-07-15 16:23:19 +0200 |
commit | a48a14259976013359c22c27b269786287ab131b (patch) | |
tree | 38935774510c6e4646e4785926e97f5ac0f5e0da /modules/luci-mod-admin-full/luasrc | |
parent | 2787a52d6dc9cb2027ba1c24d029e08b4ac33b62 (diff) |
luci-mod-admin-full: improve interface overview display
Remove the guessing of primary interfaces for now as we cannot yet properly
track parent / child interface relations.
Instead, add tooltips to the interface icons displaying detailed physical
layer information per netdev.
For dynamic or true alias interfaces (using "@" notation), skip the
reporting of MAC and traffic stats.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Diffstat (limited to 'modules/luci-mod-admin-full/luasrc')
-rw-r--r-- | modules/luci-mod-admin-full/luasrc/controller/admin/network.lua | 2 | ||||
-rw-r--r-- | modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview_status.htm | 69 |
2 files changed, 37 insertions, 34 deletions
diff --git a/modules/luci-mod-admin-full/luasrc/controller/admin/network.lua b/modules/luci-mod-admin-full/luasrc/controller/admin/network.lua index 4680687883..31b9416253 100644 --- a/modules/luci-mod-admin-full/luasrc/controller/admin/network.lua +++ b/modules/luci-mod-admin-full/luasrc/controller/admin/network.lua @@ -211,6 +211,7 @@ function iface_status(ifaces) errors = net:errors(), name = device:shortname(), type = device:type(), + typename = device:get_type_i18n(), ifname = device:name(), macaddr = device:mac(), is_up = net:is_up() and device:is_up(), @@ -228,6 +229,7 @@ function iface_status(ifaces) data.subdevices[#data.subdevices+1] = { name = device:shortname(), type = device:type(), + typename = device:get_type_i18n(), ifname = device:name(), macaddr = device:mac(), is_up = device:is_up(), diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview_status.htm index f56b3e0ade..2c89d10430 100644 --- a/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview_status.htm +++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/iface_overview_status.htm @@ -30,21 +30,33 @@ networks.push(n.getAttribute('data-network')); }); + function render_iface(ifc) { + return E('span', { class: 'cbi-tooltip-container' }, [ + E('img', { 'class' : 'middle', 'src': '<%=resource%>/icons/%s%s.png'.format( + ifc.is_alias ? 'alias' : ifc.type, + ifc.is_up ? '' : '_disabled') }), + E('span', { 'class': 'cbi-tooltip ifacebadge large' }, [ + E('img', { 'src': '<%=resource%>/icons/%s%s.png'.format( + ifc.type, ifc.is_up ? '' : '_disabled') }), + E('span', { 'class': 'left' }, [ + E('strong', '<%:Type%>: '), ifc.typename, E('br'), + E('strong', '<%:Device%>: '), ifc.ifname, E('br'), + E('strong', '<%:Connected%>: '), ifc.is_up ? '<%:yes%>' : '<%:no%>', E('br'), + ifc.macaddr ? E('strong', '<%:MAC%>: ') : '', + ifc.macaddr ? ifc.macaddr : '', + ifc.macaddr ? E('br') : '', + E('strong', '<%:RX%>: '), '%.2mB (%d <%:Pkts.%>)'.format(ifc.rx_bytes, ifc.rx_packets), E('br'), + E('strong', '<%:TX%>: '), '%.2mB (%d <%:Pkts.%>)'.format(ifc.tx_bytes, ifc.tx_packets) + ]) + ]) + ]); + } + XHR.poll(5, '<%=url('admin/network/iface_status')%>/' + networks.join(','), null, function(x, ifcs) { if (ifcs) { - var primary_devices = { }; - - for (var idx = 0; idx < ifcs.length; idx++) - { - var ifc = ifcs[idx]; - - if (!ifc.is_alias && !ifc.is_dynamic) - primary_devices[ifc.name] = ifc; - } - for (var idx = 0; idx < ifcs.length; idx++) { var ifc = ifcs[idx]; @@ -53,37 +65,25 @@ var s = document.getElementById(ifc.id + '-ifc-devices'); if (s) { - var stat = String.format( - '<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px; vertical-align:middle" />', - (ifc.is_dynamic || ifc.is_alias) ? 'alias' : ifc.type, - ifc.is_up ? '' : '_disabled' - ); + while (s.firstChild) + s.removeChild(s.firstChild); + + s.appendChild(render_iface(ifc)); if (ifc.subdevices && ifc.subdevices.length) { - stat += ' <strong>('; + var sifs = [ ' (' ]; for (var j = 0; j < ifc.subdevices.length; j++) - { - var sif = ifc.subdevices[j]; - - stat += String.format( - '<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px; vertical-align:middle" title="%h" />', - sif.type, - sif.is_up ? '' : '_disabled', - sif.name - ); - } + sifs.push(render_iface(ifc.subdevices[j])); - stat += ')</strong>'; - } + sifs.push(')'); - stat += String.format( - '<br /><small>%h</small>', - ifc.name - ); + s.appendChild(E('span', {}, sifs)); + } - s.innerHTML = stat; + s.appendChild(E('br')); + s.appendChild(E('small', {}, ifc.is_alias ? '<%:Alias of "%s"%>'.format(ifc.is_alias) : ifc.name)); } var d = document.getElementById(ifc.id + '-ifc-description'); @@ -106,7 +106,8 @@ html += String.format('<strong><%:Uptime%>:</strong> %t<br />', ifc.uptime); } - if (!primary_devices[ifc.name] || primary_devices[ifc.name] === ifc) + + if (!ifc.is_dynamic && !ifc.is_alias) { if (ifc.macaddr) html += String.format('<strong><%:MAC-Address%>:</strong> %s<br />', ifc.macaddr); |