From 425b6ba5a7fda70f71e0f4a2ec74c33a5798c262 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Fri, 14 Jun 2019 19:17:52 +0200
Subject: [PATCH] Show at only the three most recent IP addresses for each
 device. The hover text of contains all IP addresses.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 api_db.php                    |  2 +-
 scripts/pi-hole/js/network.js | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/api_db.php b/api_db.php
index 747f114f..b2015e81 100644
--- a/api_db.php
+++ b/api_db.php
@@ -74,7 +74,7 @@ if(isset($_GET["network"]) && $auth)
 	{
 		$id = $res["id"];
 		$ipaddr = array();
-		$ips = $db->query("SELECT ip FROM network_addresses WHERE network_id = $id");
+		$ips = $db->query("SELECT ip FROM network_addresses WHERE network_id = $id ORDER BY lastSeen DESC");
 		while($ips !== false && $ip = $ips->fetchArray(SQLITE3_ASSOC))
 			array_push($ipaddr,$ip["ip"]);
 		if(count($ipaddr) > 0)
diff --git a/scripts/pi-hole/js/network.js b/scripts/pi-hole/js/network.js
index 48fa178b..52aa2ec0 100644
--- a/scripts/pi-hole/js/network.js
+++ b/scripts/pi-hole/js/network.js
@@ -8,6 +8,9 @@ var tableApi;
 
 var APIstring = "api_db.php?network";
 
+// How many IPs do we show at most per device?
+var MAXIPDISPLAY = 3;
+
 function refreshData() {
     tableApi.ajax.url(APIstring).load();
 }
@@ -113,12 +116,15 @@ $(document).ready(function() {
              // Set number of queries to localized string (add thousand separators)
              $("td:eq(6)", row).html(data["numQueries"].toLocaleString());
 
-            // Client -> jump to Query Log on click
-            $("td:eq(0)", row).click( function () { openInNewTab("/admin/queries.php?client="+this.innerHTML); } );
-            $("td:eq(0)", row).css("cursor","pointer");
-            $("td:eq(0)", row).hover(
-              function () { this.title="Click to show recent queries made by "+this.innerHTML; this.style.color="#72afd2"; },
-              function () { this.style.color=""; } );
+            var ips = data["ip"];
+            var shortips = ips;
+            if(ips.length > MAXIPDISPLAY)
+            {
+                shortips = ips.slice(0,MAXIPDISPLAY-1);
+                shortips.push("...");
+            }
+            $("td:eq(0)", row).html(shortips.join("<br>"));
+            $("td:eq(0)", row).hover(function () { this.title=ips.join("\n");});
 
             // MAC + Vendor field if available
             if(data["macVendor"] && data["macVendor"].length > 0)