Add live Query Log feature (#2880)

queries.lp

@@ -66,7 +66,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
                         </div>
                     </div>
                     <div class="form-group col-md-6">
-                        <div><input type="checkbox" id="disk"><label for="disk">Query on-disk data. This is <em>a lot</em> slower but necessary if you want to obtain queries older than 24 hours.</label></div>
+                        <div><input type="checkbox" id="disk"><label for="disk">Query on-disk data. This is <em>a lot</em> slower but necessary if you want to obtain queries older than 24 hours. This option disables live update.</label></div>
                     </div>
                 </div>
                 <div class="row">
@@ -152,7 +152,10 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
         <div class="box" id="recent-queries">
             <div class="box-header with-border">
                 <h3 class="box-title">Recent Queries</h3>
-                <a id="refresh" href="#" class="btn btn-sm btn-info btn-flat pull-right">Refresh</a>
+                <div class="pull-right align-click-options">
+                    <span><input type="checkbox" id="live"><label for="live">Live update</label></span>
+                    <a id="refresh" href="#" class="btn btn-sm btn-info btn-flat">Refresh</a>
+                </div>
             </div>
             <!-- /.box-header -->
             <div class="box-body">

scripts/pi-hole/js/footer.js

@@ -15,6 +15,7 @@ var settingsLevel = 0;
 const REFRESH_INTERVAL = {
   logs: 500, // 0.5 sec (logs page)
   summary: 1000, // 1 sec (dashboard)
+  query_log: 2000, // 2 sec (Query Log)
   blocking: 10000, // 10 sec (all pages, sidebar)
   metrics: 10000, // 10 sec (settings page)
   system: 20000, // 20 sec (all pages, sidebar)

scripts/pi-hole/js/queries.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license.  */
 
-/* global moment:false, utils:false */
+/* global moment:false, utils:false, REFRESH_INTERVAL:false */
 
 const beginningOfTime = 1262304000; // Jan 01 2010, 00:00 in seconds
 const endOfTime = 2147483647; // Jan 19, 2038, 03:14 in seconds
@@ -470,6 +470,19 @@ function getAPIURL(filters) {
   return encodeURI(apiurl);
 }
 
+var liveMode = false;
+$("#live").prop("checked", liveMode);
+$("#live").on("click", function () {
+  liveMode = $(this).prop("checked");
+  liveUpdate();
+});
+
+function liveUpdate() {
+  if (liveMode) {
+    refreshTable();
+  }
+}
+
 $(function () {
   // Do we want to filter queries?
   var GETDict = utils.parseQueryString();
@@ -512,6 +525,10 @@ $(function () {
       dataFilter: function (d) {
         var json = jQuery.parseJSON(d);
         cursor = json.cursor; // Extract cursor from original data
+        if (liveMode) {
+          utils.setTimer(liveUpdate, REFRESH_INTERVAL.query_log);
+        }
+
         return d;
       },
     },
@@ -521,7 +538,7 @@ $(function () {
       "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
       "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     autoWidth: false,
-    processing: true,
+    processing: false,
     order: [[0, "desc"]],
     columns: [
       {
@@ -639,6 +656,17 @@ $(function () {
   });
 
   $("#refresh").on("click", refreshTable);
+
+  // Disable live mode when #disk is checked
+  $("#disk").on("click", function () {
+    if ($(this).prop("checked")) {
+      $("#live").prop("checked", false);
+      $("#live").prop("disabled", true);
+      liveMode = false;
+    } else {
+      $("#live").prop("disabled", false);
+    }
+  });
 });
 
 function refreshTable() {

style/pi-hole.css

@@ -1435,6 +1435,13 @@ table.dataTable tbody > tr > .selected {
   padding-left: 0.5em;
 }
 
+.align-click-options {
+  align-items: center;
+  display: grid;
+  grid-auto-flow: column;
+  grid-column-gap: 15px;
+}
+
 .overflow-wrap {
   overflow-wrap: break-word;
   inline-size: auto;