luci-mod-admin-full: align assoclist in wifi overview with status index page

Signed-off-by: Jo-Philipp Wich <jow@openwrt.org>

1 files changed, 31 insertions, 28 deletions

diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm
index f82d06dcd..4632673a7 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_overview.htm
@@ -88,12 +88,7 @@
 		end
 	end
 
-	local devices  = ntm:get_wifidevs()
-	local arpcache = { }
-	ip.neighbors({ family = 4 }, function(n)
-		if n.mac and n.dest then arpcache[n.mac:upper()] = n.dest:string() end
-	end)
-
+	local devices = ntm:get_wifidevs()
 	local netlist = { }
 	local netdevs = { }
 
@@ -119,7 +114,6 @@
 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
 <script type="text/javascript">//<![CDATA[
 	var wifidevs = <%=luci.http.write_json(netdevs)%>;
-	var arptable = <%=luci.http.write_json(arpcache)%>;
 
 	var is_reconnecting = false;
 
@@ -178,6 +172,8 @@
 		);
 	}
 
+	var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>;
+
 	XHR.poll(5, '<%=url('admin/network/wireless_status', table.concat(netlist, ","))%>', null,
 		function(x, st)
 		{
@@ -218,8 +214,8 @@
 					var sig = document.getElementById(iw.id + '-iw-signal');
 					if (sig)
 						sig.innerHTML = String.format(
-							'<img src="%s" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>" /><br />' +
-							'<small>%d%%</small>', icon, iw.signal, iw.noise, p
+							'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>"><img src="%s" /> %d%%</span>',
+							iw.signal, iw.noise, icon, p
 						);
 
 					var toggle = document.getElementById(iw.id + '-iw-toggle');
@@ -310,25 +306,35 @@
 								icon = "<%=resource%>/icons/signal-75-100.png";
 
 							tr.insertCell(-1).innerHTML = String.format(
-								'<img src="%s" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%>" />',
-								icon, assoclist[j].signal, assoclist[j].noise
+								'<span class="ifacebadge" title="%q"><img src="<%=resource%>/icons/wifi.png" /> %h</span>',
+								iw.device.name, iw.ifname
 							);
 
 							tr.insertCell(-1).innerHTML = nowrap(String.format('%h', iw.ssid ? iw.ssid : '?'));
 							tr.insertCell(-1).innerHTML = assoclist[j].bssid;
 
-							tr.insertCell(-1).innerHTML = arptable[assoclist[j].bssid]
-								? arptable[assoclist[j].bssid] : '?';
+							var host = hosts[assoclist[j].bssid];
+							if (host)
+								tr.insertCell(-1).innerHTML = String.format(
+									'<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis">%s</div>',
+									((host.name && (host.ipv4 || host.ipv6))
+										? '%h (%s)'.format(host.name, host.ipv4 || host.ipv6)
+										: '%h'.format(host.name || host.ipv4 || host.ipv6)).nobr()
+								);
+							else
+								tr.insertCell(-1).innerHTML = '?';
 
-							tr.insertCell(-1).innerHTML = nowrap(String.format('%d <%:dBm%>', assoclist[j].signal));
-							tr.insertCell(-1).innerHTML = nowrap(String.format('%d <%:dBm%>', assoclist[j].noise));
+							tr.insertCell(-1).innerHTML = String.format(
+								'<span class="ifacebadge" title="<%:Signal%>: %d <%:dBm%> / <%:Noise%>: %d <%:dBm%> / <%:SNR%>: %d"><img src="%s" /> %d / %d <%:dBm%></span>',
+								assoclist[j].signal, assoclist[j].noise, assoclist[j].signal - assoclist[j].noise,
+								icon,
+								assoclist[j].signal, assoclist[j].noise
+							);
 
 							tr.insertCell(-1).innerHTML = nowrap((assoclist[j].rx_mcs > -1)
 								? String.format('%.1f <%:Mbit/s%>, MCS %d, %d<%:MHz%>', assoclist[j].rx_rate / 1000, assoclist[j].rx_mcs, assoclist[j].rx_40mhz ? 40 : 20)
 								: String.format('%.1f <%:Mbit/s%>', assoclist[j].rx_rate / 1000)
-							);
-
-							tr.insertCell(-1).innerHTML = nowrap((assoclist[j].tx_mcs > -1)
+							) + '<br />' + nowrap((assoclist[j].tx_mcs > -1)
 								? String.format('%.1f <%:Mbit/s%>, MCS %d, %d<%:MHz%>', assoclist[j].tx_rate / 1000, assoclist[j].tx_mcs, assoclist[j].tx_40mhz ? 40 : 20)
 								: String.format('%.1f <%:Mbit/s%>', assoclist[j].tx_rate / 1000)
 							);
@@ -400,9 +406,8 @@
 				<% for i, net in ipairs(nets) do %>
 				<tr class="cbi-section-table-row cbi-rowstyle-<%=1 + ((i-1) % 2)%>">
 					<td></td>
-					<td class="cbi-value-field" style="width:16px; padding:3px" id="<%=net:id()%>-iw-signal">
-						<img src="<%=resource%>/icons/signal-none.png" title="<%:Not associated%>" /><br />
-						<small>0%</small>
+					<td class="cbi-value-field" style="vertical-align:middle; padding:3px" id="<%=net:id()%>-iw-signal">
+						<span class="ifacebadge" title="<%:Not associated%>"><img src="<%=resource%>/icons/signal-none.png" /> 0%</span>
 					</td>
 					<td class="cbi-value-field" style="vertical-align:middle; text-align:left; padding:3px" id="<%=net:id()%>-iw-status">
 						<em><%:Collecting data...%></em>
@@ -432,19 +437,17 @@
 	<h2><%:Associated Stations%></h2>
 
 	<fieldset class="cbi-section">
-		<table class="cbi-section-table" style="margin:10px" id="iw-assoclist">
+		<table class="cbi-section-table valign-middle" style="margin:10px" id="iw-assoclist">
 			<tr class="cbi-section-table-titles">
 				<th class="cbi-section-table-cell"></th>
 				<th class="cbi-section-table-cell"><%:SSID%></th>
 				<th class="cbi-section-table-cell"><%:MAC-Address%></th>
-				<th class="cbi-section-table-cell"><%:IPv4-Address%></th>
-				<th class="cbi-section-table-cell"><%:Signal%></th>
-				<th class="cbi-section-table-cell"><%:Noise%></th>
-				<th class="cbi-section-table-cell"><%:RX Rate%></th>
-				<th class="cbi-section-table-cell"><%:TX Rate%></th>
+				<th class="cbi-section-table-cell"><%:Host%></th>
+				<th class="cbi-section-table-cell"><%:Signal%> / <%:Noise%></th>
+				<th class="cbi-section-table-cell"><%:RX Rate%> / <%:TX Rate%></th>
 			</tr>
 			<tr class="cbi-section-table-row cbi-rowstyle-2">
-				<td class="cbi-value-field" colspan="8">
+				<td class="cbi-value-field" colspan="6">
 					<em><%:Collecting data...%></em>
 				</td>
 			</tr>