From 73df3bddb6a23eb79fea80e93e9c71dc46eeff82 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 10 May 2018 15:11:22 +0200
Subject: [PATCH] Add "Top Clients (blocked only)" table

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 index.php                   | 34 +++++++++++++++++++++++++---
 scripts/pi-hole/js/index.js | 44 ++++++++++++++++++++++++++++++++++---
 2 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/index.php b/index.php
index fe028232..b75edec5 100644
--- a/index.php
+++ b/index.php
@@ -7,7 +7,7 @@
 *    Please see LICENSE file for your rights under this license. */
     $indexpage = true;
     require "scripts/pi-hole/php/header.php";
-    require_once("scripts/pi-hole/php/gravity.php"); 
+    require_once("scripts/pi-hole/php/gravity.php");
 ?>
 <!-- Small boxes (Stat box) -->
 <div class="row">
@@ -217,7 +217,7 @@ if($boxedlayout)
 }
 else
 {
-  $tablelayout = "col-md-6 col-lg-4";
+  $tablelayout = "col-md-6 col-lg-6";
 }
 ?>
 <div class="row">
@@ -278,7 +278,35 @@ else
     <div class="<?php echo $tablelayout; ?>">
       <div class="box" id="client-frequency">
         <div class="box-header with-border">
-          <h3 class="box-title">Top Clients</h3>
+          <h3 class="box-title">Top Clients (total)</h3>
+        </div>
+        <!-- /.box-header -->
+        <div class="box-body">
+            <div class="table-responsive">
+                <table class="table table-bordered">
+                  <tbody>
+                    <tr>
+                    <th>Client</th>
+                    <th>Requests</th>
+                    <th>Frequency</th>
+                    </tr>
+                  </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="overlay">
+          <i class="fa fa-refresh fa-spin"></i>
+        </div>
+        <!-- /.box-body -->
+      </div>
+      <!-- /.box -->
+    </div>
+    <!-- /.col -->
+    <!-- /.col -->
+    <div class="<?php echo $tablelayout; ?>">
+      <div class="box" id="client-frequency-blocked">
+        <div class="box-header with-border">
+          <h3 class="box-title">Top Clients (blocked only)</h3>
         </div>
         <!-- /.box-header -->
         <div class="box-body">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 390c19b7..0fd513c4 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -360,7 +360,6 @@ function updateForwardedOverTime() {
     });
 }
 
-
 function updateClientsOverTime() {
     $.getJSON("api.php?overTimeDataClients&getClientNames", function(data) {
 
@@ -527,7 +526,7 @@ function escapeHtml(text) {
 }
 
 function updateTopClientsChart() {
-    $.getJSON("api.php?summaryRaw&getQuerySources", function(data) {
+    $.getJSON("api.php?summaryRaw&getQuerySources&topClientsBlocked", function(data) {
 
         if("FTLnotrunning" in data)
         {
@@ -566,17 +565,56 @@ function updateTopClientsChart() {
                     "</td> <td>" + data.top_sources[client] + "</td> <td> <div class=\"progress progress-sm\" title=\""+percentage.toFixed(1)+"% of " + data.dns_queries_today + "\"> <div class=\"progress-bar progress-bar-blue\" style=\"width: " +
                     percentage + "%\"></div> </div> </td> </tr> ");
             }
+        }
 
+        // Clear tables before filling them with data
+        $("#client-frequency-blocked td").parent().remove();
+        var clientblockedtable =  $("#client-frequency-blocked").find("tbody:last");
+        var client, percentage, clientname, clientip;
+        for (client in data.top_sources_blocked) {
+
+            if ({}.hasOwnProperty.call(data.top_sources_blocked, client)){
+                // Sanitize client
+                if(escapeHtml(client) !== client)
+                {
+                    // Make a copy with the escaped index if necessary
+                    data.top_sources_blocked[escapeHtml(client)] = data.top_sources_blocked[client];
+                }
+                client = escapeHtml(client);
+                if(client.indexOf("|") > -1)
+                {
+                    var idx = client.indexOf("|");
+                    clientname = client.substr(0, idx);
+                    clientip = client.substr(idx+1, client.length-idx);
+                }
+                else
+                {
+                    clientname = client;
+                    clientip = client;
+                }
+
+                var url = "<a href=\"queries.php?client="+clientip+"\" title=\""+clientip+"\">"+clientname+"</a>";
+                percentage = data.top_sources_blocked[client] / data.dns_queries_today * 100;
+                clientblockedtable.append("<tr> <td>" + url +
+                    "</td> <td>" + data.top_sources_blocked[client] + "</td> <td> <div class=\"progress progress-sm\" title=\""+percentage.toFixed(1)+"% of " + data.dns_queries_today + "\"> <div class=\"progress-bar progress-bar-blue\" style=\"width: " +
+                    percentage + "%\"></div> </div> </td> </tr> ");
+            }
         }
 
         // Remove table if there are no results (e.g. privacy mode enabled)
         if(jQuery.isEmptyObject(data.top_sources))
         {
             $("#client-frequency").parent().remove();
-            return;
+        }
+
+        // Remove table if there are no results (e.g. privacy mode enabled)
+        if(jQuery.isEmptyObject(data.top_sources_blocked))
+        {
+            $("#client-frequency-blocked").parent().remove();
         }
 
         $("#client-frequency .overlay").hide();
+        $("#client-frequency-blocked .overlay").hide();
         // Update top clients list data every ten seconds
         setTimeout(updateTopClientsChart, 10000);
     });