Make DNSSEC icon conditional in Queries Log (redo of https://github.com/pi-hole/web/pull/3399/) (#3535)

scripts/js/queries.js

@@ -28,6 +28,14 @@ const filters = [
   "reply",
   "dnssec",
 ];
+let doDNSSEC = false;
+
+// Check if pihole is validiting DNSSEC
+function getDnssecConfig() {
+  $.getJSON(document.body.dataset.apiurl + "/config/dns/dnssec", data => {
+    doDNSSEC = data.config.dns.dnssec;
+  });
+}
 
 function initDateRangePicker() {
   $("#querytime").daterangepicker(
@@ -480,6 +488,9 @@ function liveUpdate() {
 }
 
 $(() => {
+  // Do we want to show DNSSEC icons?
+  getDnssecConfig();
+
   // Do we want to filter queries?
   const GETDict = utils.parseQueryString();
 
@@ -568,7 +579,6 @@ $(() => {
     },
     rowCallback(row, data) {
       const querystatus = parseQueryStatus(data);
-      const dnssec = parseDNSSEC(data);
 
       if (querystatus.icon !== false) {
         $("td:eq(1)", row).html(
@@ -592,14 +602,17 @@ $(() => {
 
       // Prefix colored DNSSEC icon to domain text
       let dnssecIcon = "";
-      dnssecIcon =
+      if (doDNSSEC === true) {
-        '<i class="mr-2 fa fa-fw ' +
+        const dnssec = parseDNSSEC(data);
-        dnssec.icon +
+        dnssecIcon =
-        " " +
+          '<i class="mr-2 fa fa-fw ' +
-        dnssec.color +
+          dnssec.icon +
-        '" title="DNSSEC: ' +
+          " " +
-        dnssec.text +
+          dnssec.color +
-        '"></i>';
+          '" title="DNSSEC: ' +
+          dnssec.text +
+          '"></i>';
+      }
 
       // Escape HTML in domain
       domain = dnssecIcon + utils.escapeHtml(domain);

style/pi-hole.css

@@ -1603,3 +1603,13 @@ textarea.field-sizing-content {
   opacity: 0;
   transition: opacity 200ms ease-in-out;
 }
+
+/* Used in query log page */
+td.dnssec {
+  padding-inline-start: 2.25em !important;
+  text-indent: -1.25em;
+}
+td.dnssec i {
+  text-indent: 0;
+  margin-left: -0.5rem;
+}