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>

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(),

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(
+						while (s.firstChild)
-							'<img src="<%=resource%>/icons/%s%s.png" style="width:16px; height:16px; vertical-align:middle" />',
+							s.removeChild(s.firstChild);
-								(ifc.is_dynamic || ifc.is_alias) ? 'alias' : ifc.type,
+
-								ifc.is_up ? '' : '_disabled'
+						s.appendChild(render_iface(ifc));
-						);
 
 						if (ifc.subdevices && ifc.subdevices.length)
 						{
-							stat += ' <strong>(';
+							var sifs = [ ' (' ];
 
 							for (var j = 0; j < ifc.subdevices.length; j++)
-							{
+								sifs.push(render_iface(ifc.subdevices[j]));
-								var sif = ifc.subdevices[j];
 
-								stat += String.format(
+							sifs.push(')');
-									'<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
-								);
-							}
 
-							stat += ')</strong>';
+							s.appendChild(E('span', {}, sifs));
 						}
 
-						stat += String.format(
+						s.appendChild(E('br'));
-							'<br /><small>%h</small>',
+						s.appendChild(E('small', {}, ifc.is_alias ? '<%:Alias of "%s"%>'.format(ifc.is_alias) : ifc.name));
-								ifc.name
-						);
-
-						s.innerHTML = stat;
 					}
 
 					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);