Show explicitly which hostname belongs to which IP address when hovering over the hostnames. Note that the IP addresses and host names were already in the same order, before.

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/groups-clients.js

@@ -279,7 +279,6 @@ function addClient() {
     return;
   }
 
-
   // Validate input, can be:
   // - IPv4 address (with and without CIDR)
   // - IPv6 address (with and without CIDR)
@@ -290,7 +289,12 @@ function addClient() {
     ip = ip.toUpperCase();
   } else if (!utils.validateHostname(ip)) {
     utils.enableAll();
-    utils.showAlert("warning", "", "Warning", "Input is neither a valid IP or MAC address nor a valid host name!");
+    utils.showAlert(
+      "warning",
+      "",
+      "Warning",
+      "Input is neither a valid IP or MAC address nor a valid host name!"
+    );
     return;
   }
 

scripts/pi-hole/js/network.js

@@ -112,10 +112,12 @@ $(document).ready(function () {
         $("td:eq(3)", row).html("<em>unknown</em>");
       } else {
         var names = [];
+        var name = "";
         maxiter = Math.min(data.name.length, MAXIPDISPLAY);
         index = 0;
         for (index = 0; index < maxiter; index++) {
-          var name = data.name[index];
+          name = data.name[index];
+          if (name.length === 0) continue;
           names.push('<a href="queries.php?client=' + name + '">' + name + "</a>");
         }
 
@@ -125,9 +127,20 @@ $(document).ready(function () {
           names.push("...");
         }
 
+        maxiter = Math.min(data.ip.length, data.name.length);
+        var allnames = [];
+        for (index = 0; index < maxiter; index++) {
+          name = data.name[index];
+          if (name.length > 0) {
+            allnames.push(name + " (" + data.ip[index] + ")");
+          } else {
+            allnames.push("No host name for " + data.ip[index] + " known");
+          }
+        }
+
         $("td:eq(3)", row).html(names.join("<br>"));
         $("td:eq(3)", row).hover(function () {
-          this.title = data.name.join("\n");
+          this.title = allnames.join("\n");
         });
       }