From 3586096f831642c9afab0fc425da8d0a72abd5c2 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 28 Nov 2023 19:33:34 +0100
Subject: [PATCH 1/2] Add dnsmasq tail log formatting

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/taillog.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/scripts/pi-hole/js/taillog.js b/scripts/pi-hole/js/taillog.js
index 486cc321..867050c9 100644
--- a/scripts/pi-hole/js/taillog.js
+++ b/scripts/pi-hole/js/taillog.js
@@ -19,6 +19,25 @@ const fadeIn = true;
 // Mark new lines with a red line above them
 const markUpdates = true;
 
+// Format a line of the dnsmasq log
+function formatLine(line) {
+  // Remove dnsmasq + PID
+  let txt = line.replaceAll(/ dnsmasq\[\d*]/g, "");
+
+  if (line.includes("denied") || line.includes("gravity blocked")) {
+    // Red bold text for blocked domains
+    txt = `<b class="log-red">${txt}</b>`;
+  } else if (line.includes("query[A") || line.includes("query[DHCP")) {
+    // Bold text for initial query lines
+    txt = `<b>${txt}</b>`;
+  } else {
+    // Grey text for all other lines
+    txt = `<span class="text-muted">${txt}</span>`;
+  }
+
+  return txt;
+}
+
 // Function that asks the API for new data
 function getData() {
   // Only update when spinner is spinning
@@ -71,6 +90,9 @@ function getData() {
       }
 
       data.log.forEach(function (line) {
+        // Format line if this is the dnsmasq log
+        if (GETDict.file === "dnsmasq") line.message = formatLine(line.message);
+
         // Add new line to output
         $("#output").append(
           '<span><span style="border-left: 2px red" class="left-line">&nbsp;</span><span class="text-muted">' +

From 35bf9124a31fdc0212e23b44e98fc2211f123ddc Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 28 Nov 2023 20:41:51 +0100
Subject: [PATCH 2/2] Add review comment suggestion

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/taillog.js | 2 +-
 style/pi-hole.css             | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/pi-hole/js/taillog.js b/scripts/pi-hole/js/taillog.js
index 867050c9..20e01177 100644
--- a/scripts/pi-hole/js/taillog.js
+++ b/scripts/pi-hole/js/taillog.js
@@ -95,7 +95,7 @@ function getData() {
 
         // Add new line to output
         $("#output").append(
-          '<span><span style="border-left: 2px red" class="left-line">&nbsp;</span><span class="text-muted">' +
+          '<span class="log-entry"><span class="text-muted">' +
             moment(1000 * line.timestamp).format("YYYY-MM-DD HH:mm:ss.SSS") +
             "</span> " +
             line.message +
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 1dceed62..53a1d5af 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -1429,3 +1429,7 @@ table.dataTable tbody > tr > .selected {
   margin: 0.5em 0;
   align-items: start;
 }
+
+.log-entry {
+  padding-left: 0.5em;
+}