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>

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 4680687883fd223ce31a9b9e17151d71e335d4d9..31b94162536ce0f3c0d6d320fa628f8706e263c5 100644 (file)
--- 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 f56b3e0ade509790b5b77fb1512ab088ed9acaca..2c89d10430c8230e88d4c102d2f848fc89a36705 100644 (file)
--- 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);