From 3437f79e34d7cd7479591458dc926a10f9ddd322 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 28 Nov 2023 22:42:03 +0100 Subject: [PATCH 1/4] Add some tolerance to the autoscrolling feature of taillog Signed-off-by: DL6ER --- scripts/pi-hole/js/taillog.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/scripts/pi-hole/js/taillog.js b/scripts/pi-hole/js/taillog.js index 486cc321..b944a675 100644 --- a/scripts/pi-hole/js/taillog.js +++ b/scripts/pi-hole/js/taillog.js @@ -115,7 +115,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"); From 72e06da4da3a3665b88c80ca8e626fe959af14a9 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 28 Nov 2023 23:52:15 +0100 Subject: [PATCH 2/4] Add live Query Log feature Signed-off-by: DL6ER --- queries.lp | 5 ++++- scripts/pi-hole/js/footer.js | 1 + scripts/pi-hole/js/queries.js | 21 +++++++++++++++++++-- style/pi-hole.css | 7 +++++++ 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/queries.lp b/queries.lp index d0af917c..883afd19 100644 --- a/queries.lp +++ b/queries.lp @@ -152,7 +152,10 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')

Recent Queries

- Refresh +
+ + Refresh +
diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js index bddadaa5..d85f6fe7 100644 --- a/scripts/pi-hole/js/footer.js +++ b/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) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index eb3a79e6..98277efa 100644 --- a/scripts/pi-hole/js/queries.js +++ b/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: [ { diff --git a/style/pi-hole.css b/style/pi-hole.css index e9707ffd..65c96a12 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -1434,3 +1434,10 @@ 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; +} From f252c6ba83c345a305ac48cff6e5a7b831572f48 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Wed, 29 Nov 2023 12:03:01 +0100 Subject: [PATCH 3/4] Add overflow-wrap to ensure too long-lines don't overwrite other content in the Query Log details Signed-off-by: DL6ER --- scripts/pi-hole/js/queries.js | 2 +- style/pi-hole.css | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index eb3a79e6..db5c56e7 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -263,7 +263,7 @@ function formatInfo(data) { // Parse Query Status var queryStatus = parseQueryStatus(data); - var divStart = '
'; + var divStart = '
'; var statusInfo = ""; if (queryStatus.colorClass !== false) { statusInfo = diff --git a/style/pi-hole.css b/style/pi-hole.css index e9707ffd..2df41ca3 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -1434,3 +1434,8 @@ table.dataTable tbody > tr > .selected { .log-entry { padding-left: 0.5em; } + +.overflow-wrap { + overflow-wrap: break-word; + inline-size: auto; +} From 24095e215e618a7c0a68a0450e631f9fb485fdde Mon Sep 17 00:00:00 2001 From: DL6ER Date: Thu, 30 Nov 2023 22:11:27 +0100 Subject: [PATCH 4/4] Disable live updates when on-disk is selected Signed-off-by: DL6ER --- queries.lp | 2 +- scripts/pi-hole/js/queries.js | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/queries.lp b/queries.lp index 883afd19..676f1c5b 100644 --- a/queries.lp +++ b/queries.lp @@ -66,7 +66,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
-
+
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js index 98277efa..4c63c640 100644 --- a/scripts/pi-hole/js/queries.js +++ b/scripts/pi-hole/js/queries.js @@ -656,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() {