Merge branch 'development-v6' into fix/taillog_height

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
@@ -263,7 +263,7 @@ function formatInfo(data) {
 
   // Parse Query Status
   var queryStatus = parseQueryStatus(data);
-  var divStart = '<div class="col-xl-2 col-lg-4 col-md-6 col-12">';
+  var divStart = '<div class="col-xl-2 col-lg-4 col-md-6 col-12 overflow-wrap">';
   var statusInfo = "";
   if (queryStatus.colorClass !== false) {
     statusInfo =
@@ -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() {

scripts/pi-hole/js/taillog.js

@@ -137,7 +137,22 @@ function getData() {
 var gAutoScrolling = true;
 $("#output").on("scroll", function () {
   // Check if we are at the bottom of the output
-  if ($("#output").scrollTop() + $("#output").innerHeight() >= $("#output")[0].scrollHeight) {
+  //
+  // - $("#output")[0].scrollHeight: This gets the entire height of the content
+  //   of the "output" element, including the part that is not visible due to
+  //   scrolling.
+  // - $("#output").innerHeight(): This gets the inner height of the "output"
+  //   element, which is the visible part of the content.
+  // - $("#output").scrollTop(): This gets the number of pixels that the content
+  //   of the "output" element is scrolled vertically from the top.
+  //
+  // By subtracting the inner height and the scroll top from the scroll height,
+  // you get the distance from the bottom of the scrollable area.
+  const bottom =
+    $("#output")[0].scrollHeight - $("#output").innerHeight() - $("#output").scrollTop();
+  // Add a tolerance of four line heights
+  const tolerance = 4 * parseFloat($("#output").css("line-height"));
+  if (bottom <= tolerance) {
     // Auto-scrolling is enabled
     gAutoScrolling = true;
     $("#autoscrolling").addClass("fa-check");

style/pi-hole.css

@@ -1447,3 +1447,15 @@ table.dataTable tbody > tr > .selected {
 .log-entry {
   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;
+}