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..8a9b1809 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
@@ -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 =
@@ -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() {
diff --git a/scripts/pi-hole/js/taillog.js b/scripts/pi-hole/js/taillog.js
index 20e01177..65d1858f 100644
--- a/scripts/pi-hole/js/taillog.js
+++ b/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");
diff --git a/style/pi-hole.css b/style/pi-hole.css
index df26bf41..393738f5 100644
--- a/style/pi-hole.css
+++ b/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;
+}