luci-mod-admin-full: unify DHCP lease status code

Merge the DHCP lease status code of the status overview and DHCP/DNS pages
into a single shared partial template.

Also remove some redundant markup on the index page and wireless assoc list
templates.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

3 files changed, 53 insertions, 221 deletions

diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm
index a1b2c8454..8fbbdc947 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/lease_status.htm
@@ -1,27 +1,11 @@
 <script type="text/javascript">//<![CDATA[
-	function duid2mac(duid) {
-		// DUID-LLT / Ethernet
-		if (duid.length === 28 && duid.substr(0, 8) === '00010001')
-			return duid.substr(16).replace(/(..)(?=..)/g, '$1:').toUpperCase();
-
-		// DUID-LL / Ethernet
-		if (duid.length === 20 && duid.substr(0, 8) === '00030001')
-			return duid.substr(8).replace(/(..)(?=..)/g, '$1:').toUpperCase();
-
-		return null;
-	}
-
-	var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>;
-
 	XHR.poll(5, '<%=url('admin/network/dhcplease_status')%>', null,
 		function(x, st)
 		{
 			var tb = document.getElementById('lease_status_table');
 			if (st && st[0] && tb)
 			{
-				/* clear all rows */
-				while (tb.firstElementChild !== tb.lastElementChild)
-					tb.removeChild(tb.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < st[0].length; i++)
 				{
@@ -34,16 +18,15 @@
 					else
 						timestr = String.format('%t', st[0][i].expires);
 
-					tb.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format((i % 2) + 1), [
-						E('<div class="td">', st[0][i].hostname || '?'),
-						E('<div class="td">', st[0][i].ipaddr),
-						E('<div class="td">', st[0][i].macaddr),
-						E('<div class="td">', timestr)
-					]));
+					rows.push([
+						st[0][i].hostname || '?',
+						st[0][i].ipaddr,
+						st[0][i].macaddr,
+						timestr
+					]);
 				}
 
-				if (tb.firstElementChild === tb.lastElementChild)
-					tb.appendChild(E('<div class="tr"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
+				cbi_update_table(tb, rows, '<em><%:There are no active leases.%></em>');
 			}
 
 			var tb6 = document.getElementById('lease6_status_table');
@@ -51,9 +34,7 @@
 			{
 				tb6.parentNode.style.display = 'block';
 
-				/* clear all rows */
-				while (tb6.firstElementChild !== tb6.lastElementChild)
-					tb6.removeChild(tb6.lastElementChild);
+				var rows = [];
 
 				for (var i = 0; i < st[1].length; i++)
 				{
@@ -66,60 +47,49 @@
 					else
 						timestr = String.format('%t', st[1][i].expires);
 
-					var host = hosts[duid2mac(st[1][i].duid)],
-					    name = st[1][i].hostname,
-					    hint = null;
-
-					if (!name) {
-						if (host)
-							hint = host.name || host.ipv4 || host.ipv6;
-					}
-					else {
-						if (host && host.name && st[1][i].hostname != host.name)
-							hint = host.name;
-					}
+					var name = st[1][i].hostname,
+					    hint = st[1][i].host_hint;
 
-					tb6.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format((i % 2) + 1), [
-						E('<div class="td nowrap">', hint ? '%h (%h)'.format(name || '?', hint) : (name || '?')),
-						E('<div class="td">', st[1][i].ip6addr),
-						E('<div class="td">', st[1][i].duid),
-						E('<div class="td">', timestr)
-					]));
+					rows.push([
+						hint ? '%h (%h)'.format(name || '?', hint) : (name || '?'),
+						st[1][i].ip6addr,
+						st[1][i].duid,
+						timestr
+					]);
 				}
 
-				if (tb6.firstElementChild === tb6.lastElementChild)
-					tb6.appendChild(E('<div class="tr"><div class="td"><em><br /><%:There are no active leases.%></em></div></div>'));
+				cbi_update_table(tb6, rows, '<em><%:There are no active leases.%></em>');
 			}
 		}
 	);
 //]]></script>
 
-<fieldset class="cbi-section">
-	<legend><%:Active DHCP Leases%></legend>
+<div class="cbi-section">
+	<h3><%:Active DHCP Leases%></h3>
 	<div class="table" id="lease_status_table">
-		<div class="tr">
+		<div class="tr table-titles">
 			<div class="th"><%:Hostname%></div>
 			<div class="th"><%:IPv4-Address%></div>
 			<div class="th"><%:MAC-Address%></div>
 			<div class="th"><%:Leasetime remaining%></div>
 		</div>
-		<div class="tr">
-			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		<div class="tr placeholder">
+			<div class="td"><em><%:Collecting data...%></em></div>
 		</div>
 	</div>
-</fieldset>
+</div>
 
-<fieldset class="cbi-section" style="display:none">
-	<legend><%:Active DHCPv6 Leases%></legend>
+<div class="cbi-section" style="display:none">
+	<h3><%:Active DHCPv6 Leases%></h3>
 	<div class="table" id="lease6_status_table">
-		<div class="tr">
+		<div class="tr table-titles">
 			<div class="th"><%:Host%></div>
 			<div class="th"><%:IPv6-Address%></div>
 			<div class="th"><%:DUID%></div>
 			<div class="th"><%:Leasetime remaining%></div>
 		</div>
-		<div class="tr">
-			<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
+		<div class="tr placeholder">
+			<div class="td"><em><%:Collecting data...%></em></div>
 		</div>
 	</div>
-</fieldset>
+</div>
diff --git a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm
index f3e2313ee..b6f84c060 100644
--- a/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm
+++ b/modules/luci-mod-admin-full/luasrc/view/admin_network/wifi_assoclist.htm
@@ -68,17 +68,15 @@
 	);
 //]]></script>
 
-<div class="cbi-section-node">
-	<div class="table" id="wifi_assoclist_table">
-		<div class="tr table-titles">
-			<div class="th nowrap"><%:Network%></div>
-			<div class="th hide-xs"><%:MAC-Address%></div>
-			<div class="th nowrap"><%:Host%></div>
-			<div class="th nowrap"><%:Signal%> / <%:Noise%></div>
-			<div class="th nowrap"><%:RX Rate%> / <%:TX Rate%></div>
-		</div>
-		<div class="tr placeholder">
-			<div class="td"><em><%:Collecting data...%></em></div>
-		</div>
+<div class="table" id="wifi_assoclist_table">
+	<div class="tr table-titles">
+		<div class="th nowrap"><%:Network%></div>
+		<div class="th hide-xs"><%:MAC-Address%></div>
+		<div class="th nowrap"><%:Host%></div>
+		<div class="th nowrap"><%:Signal%> / <%:Noise%></div>
+		<div class="th nowrap"><%:RX Rate%> / <%:TX Rate%></div>
+	</div>
+	<div class="tr placeholder">
+		<div class="td"><em><%:Collecting data...%></em></div>
 	</div>
 </div>
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 6083a8a2c..9aee30b5f 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
@@ -53,8 +53,6 @@
 			swap       = swapinfo,
 			connmax    = conn_max,
 			conncount  = conn_count,
-			leases     = stat.dhcp_leases(),
-			leases6    = stat.dhcp6_leases(),
 			wifinets   = stat.wifi_networks()
 		}
 
@@ -111,11 +109,6 @@
 		luci.http.write_json(rv)
 
 		return
-	elseif luci.http.formvalue("hosts") == "1" then
-		luci.http.prepare_content("application/json")
-		luci.http.write_json(luci.sys.net.host_hints())
-
-		return
 	end
 -%>
 
@@ -140,27 +133,6 @@
 		);
 	}
 
-	function duid2mac(duid) {
-		// DUID-LLT / Ethernet
-		if (duid.length === 28 && duid.substr(0, 8) === '00010001')
-			return duid.substr(16).replace(/(..)(?=..)/g, '$1:').toUpperCase();
-
-		// DUID-LL / Ethernet
-		if (duid.length === 20 && duid.substr(0, 8) === '00030001')
-			return duid.substr(8).replace(/(..)(?=..)/g, '$1:').toUpperCase();
-
-		return null;
-	}
-
-	var npoll = 1;
-	var hosts = <%=luci.http.write_json(luci.sys.net.host_hints())%>;
-
-	function updateHosts() {
-		XHR.get('<%=REQUEST_URI%>', { hosts: 1 }, function(x, data) {
-			hosts = data;
-		});
-	}
-
 	function labelList(items, offset) {
 		var rv = [ ];
 
@@ -201,9 +173,6 @@
 	XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
 		function(x, info)
 		{
-			if (!(npoll++ % 5))
-				updateHosts();
-
 			var us = document.getElementById('upstream_status_table');
 
 			while (us.lastElementChild)
@@ -312,77 +281,6 @@
 				);
 			<% end %>
 
-			<% if has_dhcp then %>
-			var ls = document.getElementById('lease_status_table');
-			if (ls)
-			{
-				var rows = [];
-
-				for (var i = 0; i < info.leases.length; i++)
-				{
-					var timestr;
-
-					if (info.leases[i].expires === false)
-						timestr = '<em><%:unlimited%></em>';
-					else if (info.leases[i].expires <= 0)
-						timestr = '<em><%:expired%></em>';
-					else
-						timestr = String.format('%t', info.leases[i].expires);
-
-					rows.push([
-						info.leases[i].hostname ? info.leases[i].hostname : '?',
-						info.leases[i].ipaddr,
-						info.leases[i].macaddr,
-						timestr
-					]);
-				}
-
-				cbi_update_table(ls, rows, '<em><%:There are no active leases.%></em>');
-			}
-
-			var ls6 = document.getElementById('lease6_status_table');
-			if (ls6 && info.leases6)
-			{
-				ls6.parentNode.parentNode.style.display = 'block';
-
-				var rows = [];
-
-				for (var i = 0; i < info.leases6.length; i++)
-				{
-					var timestr;
-
-					if (info.leases6[i].expires === false)
-						timestr = '<em><%:unlimited%></em>';
-					else if (info.leases6[i].expires <= 0)
-						timestr = '<em><%:expired%></em>';
-					else
-						timestr = String.format('%t', info.leases6[i].expires);
-
-					var host = hosts[duid2mac(info.leases6[i].duid)],
-					    name = info.leases6[i].hostname,
-					    hint = null;
-
-					if (!name) {
-						if (host)
-							hint = host.name || host.ipv4 || host.ipv6;
-					}
-					else {
-						if (host && host.name && info.leases6[i].hostname != host.name)
-							hint = host.name;
-					}
-
-					rows.push([
-						hint ? '%h (%h)'.format(name || '?', hint) : (name || '?'),
-						info.leases6[i].ip6addr,
-						info.leases6[i].duid,
-						timestr
-					]);
-				}
-
-				cbi_update_table(ls6, rows, '<em><%:There are no active leases.%></em>');
-			}
-			<% end %>
-
 			<% if has_wifi then %>
 			var ws = document.getElementById('wifi_status_table');
 			if (ws)
@@ -545,58 +443,24 @@
 	</div>
 </div>
 
-<% if has_dhcp then %>
-<div class="cbi-section">
-	<h3><%:DHCP Leases%></h3>
-
-	<div class="cbi-section-node">
-		<div class="table" id="lease_status_table">
-			<div class="tr table-titles">
-				<div class="th"><%:Hostname%></div>
-				<div class="th"><%:IPv4-Address%></div>
-				<div class="th"><%:MAC-Address%></div>
-				<div class="th"><%:Leasetime remaining%></div>
-			</div>
-			<div class="tr cbi-section-table-row">
-				<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
-			</div>
-		</div>
-	</div>
-</div>
-
-<div class="cbi-section" style="display:none">
-	<h3><%:DHCPv6 Leases%></h3>
-
-	<div class="cbi-section-node">
-		<div class="table" id="lease6_status_table">
-			<div class="tr table-titles">
-				<div class="th"><%:Host%></div>
-				<div class="th"><%:IPv6-Address%></div>
-				<div class="th"><%:DUID%></div>
-				<div class="th"><%:Leasetime remaining%></div>
-			</div>
-			<div class="tr cbi-section-table-row">
-				<div class="td" colspan="4"><em><br /><%:Collecting data...%></em></div>
-			</div>
-		</div>
-	</div>
-</div>
-<% end %>
+<%
+	if has_dhcp then
+		include("admin_network/lease_status")
+	end
+%>
 
 <% if has_dsl then %>
 <div class="cbi-section">
 	<h3><%:DSL%></h3>
 
-	<div class="cbi-section-node">
-		<div class="table" width="100%">
-			<div class="tr">
-				<div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div>
-				<div class="td">
-					<div class="table">
-						<div class="tr">
-							<div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
-							<div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
-						</div>
+	<div class="table" width="100%">
+		<div class="tr">
+			<div class="td left" width="33%" style="vertical-align:top"><%:DSL Status%></div>
+			<div class="td">
+				<div class="table">
+					<div class="tr">
+						<div class="td" id="dsl_i" style="width:16px; text-align:center; padding:3px"><img src="<%=resource%>/icons/ethernet_disabled.png" /><br /><small>?</small></div>
+						<div class="td left" id="dsl_s" style="vertical-align:middle; padding: 3px"><em><%:Collecting data...%></em></div>
 					</div>
 				</div>
 			</div>