Add live-tail of all log files as well as local DNS and CNAME records handling (add new and delete existing records is still TODO at this point)

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/taillog.js

@@ -5,45 +5,124 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-var offset,
-  timer,
-  pre,
-  scrolling = true;
+/* global moment: false, apiFailure: false */
 
-// Check every 200msec for fresh data
-var interval = 200;
+var nextID = 0;
+
+// Check every 0.5s for fresh data
+const interval = 500;
+
+// Maximum number of lines to display
+const maxlines = 5000;
+
+// Fade in new lines
+const fadeIn = true;
+
+// Mark new lines with a red line above them
+const markUpdates = true;
 
 // Function that asks the API for new data
-function reloadData() {
-  clearTimeout(timer);
-  $.getJSON("scripts/pi-hole/php/tailLog.php?offset=" + offset, function (data) {
-    pre.append(data.lines);
+function getData() {
+  // Only update when spinner is spinning
+  if (!$("#feed-icon").hasClass("fa-play")) {
+    // Restart timer
+    setTimeout(getData, interval);
+    return;
+  }
 
-    if (scrolling && offset !== data.offset) {
-      pre.scrollTop(pre[0].scrollHeight);
-    }
+  var GETDict = {};
+  window.location.search
+    .substr(1)
+    .split("&")
+    .forEach(function (item) {
+      GETDict[item.split("=")[0]] = item.split("=")[1];
+    });
+  if (!("file" in GETDict)) {
+    window.location.href += "?file=dnsmasq";
+    return;
+  }
 
-    offset = data.offset;
-  });
+  $.ajax({
+    url: "/api/logs/" + GETDict.file + "?nextID=" + nextID,
+    method: "GET",
+  })
+    .done(function (data) {
+      if (data.log.length === 0) {
+        if (nextID === 0) {
+          $("#output").html("<i>*** Log file is empty ***</i>");
+        }
 
-  timer = setTimeout(reloadData, interval);
+        // Restart timer
+        setTimeout(getData, interval);
+        return;
+      }
+
+      // We have new lines
+      if (markUpdates && nextID > 0) {
+        // Add red fading out background to new lines
+        $("#output").append('<hr class="hr-small">').children(":last").fadeOut(2000);
+      }
+
+      data.log.forEach(function (line) {
+        // Add new line to output
+        $("#output").append(
+          '<span><span style="border-left: 2px red" class="left-line">&nbsp;</span><span class="text-muted">' +
+            moment(1000 * line.timestamp).format("YYYY-MM-DD HH:mm:ss.SSS") +
+            "</span> " +
+            line.message +
+            "<br></span>"
+        );
+        if (fadeIn) {
+          //$(".left-line:last").fadeOut(2000);
+          $("#output").children(":last").hide().fadeIn("fast");
+        }
+      });
+
+      // Limit output to <maxlines> lines
+      var lines = $("#output").val().split("\n");
+      if (lines.length > maxlines) {
+        lines.splice(0, lines.length - maxlines);
+        $("#output").val(lines.join("\n"));
+      }
+
+      // Scroll to bottom of output
+      $("#output").scrollTop($("#output")[0].scrollHeight);
+
+      // Update nextID
+      nextID = data.nextID;
+
+      // Set filename
+      $("#filename").text(data.file);
+
+      // Restart timer
+      setTimeout(getData, interval);
+    })
+    .fail(function (data) {
+      apiFailure(data);
+    });
 }
 
 $(function () {
-  // Get offset at first loading of page
-  $.getJSON("scripts/pi-hole/php/tailLog.php", function (data) {
-    offset = data.offset;
-  });
-  pre = $("#output");
-  // Trigger function that looks for new data
-  reloadData();
-});
+  getData();
 
-$("#chk1").on("click", function () {
-  $("#chk2").prop("checked", this.checked);
-  scrolling = this.checked;
-});
-$("#chk2").on("click", function () {
-  $("#chk1").prop("checked", this.checked);
-  scrolling = this.checked;
+  // Clicking on the element with class "fa-spinner" will toggle the play/pause state
+  $("#live-feed").on("click", function () {
+    if ($("#feed-icon").hasClass("fa-play")) {
+      // Toggle button color
+      $("#feed-icon").addClass("fa-pause");
+      $("#feed-icon").removeClass("fa-fade");
+      $("#feed-icon").removeClass("fa-play");
+      $(this).addClass("btn-danger");
+      $(this).removeClass("btn-success");
+      $("#title").text("Paused");
+    } else {
+      // Toggle button color
+      $("#feed-icon").addClass("fa-play");
+      $("#feed-icon").addClass("fa-fade");
+      $("#feed-icon").removeClass("fa-pause");
+      $(this).addClass("btn-success");
+      $(this).removeClass("btn-danger");
+      $("#title").text("Live");
+    }
+  });
 });