treewide: Update JS using luci-rpc getHostHints

Update frontend JS code which uses luci-rpc getHostHints to support the new
response format which removes the `ipv4` and `ipv6` host hint string fields
and replaces them with `ipaddrs` and `ip6addrs` weighted string list fields.

Signed-off-by: Niels Widger <niels@qacafe.com>
[rework code to be forwards/backwards compatible, fix some Network.Hosts
 methods, fix IP choice ordering, change commit subject, rewrap commit
 message]
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

2 files changed, 31 insertions, 13 deletions

diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
index 253b37b846..0d1420772e 100644
--- a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/dhcp.js
@@ -450,7 +450,11 @@ return view.extend({
 
 			node.addEventListener('cbi-dropdown-change', L.bind(function(ipopt, section_id, ev) {
 				var mac = ev.detail.value.value;
-				if (mac == null || mac == '' || !hosts[mac] || !hosts[mac].ipv4)
+				if (mac == null || mac == '' || !hosts[mac])
+					return;
+
+				var iphint = L.toArray(hosts[mac].ipaddrs || hosts[mac].ipv4)[0];
+				if (iphint == null)
 					return;
 
 				var ip = ipopt.formvalue(section_id);
@@ -459,13 +463,13 @@ return view.extend({
 
 				var node = ipopt.map.findElement('id', ipopt.cbid(section_id));
 				if (node)
-					dom.callClassMethod(node, 'setValue', hosts[mac].ipv4);
+					dom.callClassMethod(node, 'setValue', iphint);
 			}, this, ipopt, section_id));
 
 			return node;
 		};
 		Object.keys(hosts).forEach(function(mac) {
-			var hint = hosts[mac].name || hosts[mac].ipv4;
+			var hint = hosts[mac].name || L.toArray(hosts[mac].ipaddrs || hosts[mac].ipv4)[0];
 			so.value(mac, hint ? '%s (%s)'.format(mac, hint) : mac);
 		});
 
@@ -501,11 +505,18 @@ return view.extend({
 
 			return true;
 		};
+
+		var ipaddrs = {};
+
 		Object.keys(hosts).forEach(function(mac) {
-			if (hosts[mac].ipv4) {
-				var hint = hosts[mac].name;
-				so.value(hosts[mac].ipv4, hint ? '%s (%s)'.format(hosts[mac].ipv4, hint) : hosts[mac].ipv4);
-			}
+			var addrs = L.toArray(hosts[mac].ipaddrs || hosts[mac].ipv4);
+
+			for (var i = 0; i < addrs.length; i++)
+				ipaddrs[addrs[i]] = hosts[mac].name;
+		});
+
+		L.sortedKeys(ipaddrs, null, 'addr').forEach(function(ipv4) {
+			so.value(ipv4, ipaddrs[ipv4] ? '%s (%s)'.format(ipv4, ipaddrs[ipv4]) : ipv4);
 		});
 
 		so = ss.option(form.Value, 'leasetime', _('Lease time'));
@@ -563,7 +574,7 @@ return view.extend({
 									exp = '%t'.format(lease.expires);
 
 								var hint = lease.macaddr ? hosts[lease.macaddr] : null,
-								    name = hint ? (hint.name || hint.ipv4 || hint.ipv6) : null,
+								    name = hint ? (hint.name || L.toArray(hint.ipaddrs || hint.ipv4)[0] || L.toArray(hint.ip6addrs || hint.ipv6)[0]) : null,
 								    host = null;
 
 								if (name && lease.hostname && lease.hostname != name && lease.ip6addr != name)
diff --git a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/hosts.js b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/hosts.js
index cd0dacbf67..93ebf5ba68 100644
--- a/modules/luci-mod-network/htdocs/luci-static/resources/view/network/hosts.js
+++ b/modules/luci-mod-network/htdocs/luci-static/resources/view/network/hosts.js
@@ -31,11 +31,18 @@ return view.extend({
 		o = s.option(form.Value, 'ip', _('IP address'));
 		o.datatype = 'ipaddr';
 		o.rmempty = true;
-		L.sortedKeys(hosts, 'ipv4', 'addr').forEach(function(mac) {
-			o.value(hosts[mac].ipv4, '%s (%s)'.format(
-				hosts[mac].ipv4,
-				hosts[mac].name || mac
-			));
+
+		var ipaddrs = {};
+
+		Object.keys(hosts).forEach(function(mac) {
+			var addrs = L.toArray(hosts[mac].ipaddrs || hosts[mac].ipv4);
+
+			for (var i = 0; i < addrs.length; i++)
+				ipaddrs[addrs[i]] = hosts[mac].name || mac;
+		});
+
+		L.sortedKeys(ipaddrs, null, 'addr').forEach(function(ipv4) {
+			o.value(ipv4, '%s (%s)'.format(ipv4, ipaddrs[ipv4]));
 		});
 
 		return m.render();