Pi-hole web v5.17 (#2430)

.github/workflows/phpstan.yml

@@ -21,7 +21,7 @@ jobs:
       run: composer validate
     - name: Cache Composer packages
       id: composer-cache
-      uses: actions/cache@v3.0.10
+      uses: actions/cache@v3.0.11
       with:
         path: vendor
         key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
         uses: actions/checkout@v3.1.0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v3.5.0
+        uses: actions/setup-node@v3.5.1
         with:
           node-version: "16.x"
           cache: npm

api_db.php

@@ -192,7 +192,7 @@
         $limit = ' AND timestamp <= :until';
     }
     // Select top permitted domains only
-    $stmt = $db->prepare('SELECT domain,count(domain) FROM queries WHERE status IN (2,3,12,13,14)'.$limit.' GROUP by domain order by count(domain) desc limit 20');
+    $stmt = $db->prepare('SELECT domain,count(domain) FROM queries WHERE status IN (2,3,12,13,14,17)'.$limit.' GROUP by domain order by count(domain) desc limit 20');
     $stmt->bindValue(':from', intval($_GET['from']), SQLITE3_INTEGER);
     $stmt->bindValue(':until', intval($_GET['until']), SQLITE3_INTEGER);
     $results = $stmt->execute();

cname_records.php

@@ -32,7 +32,7 @@
                 <div class="row">
                     <div class="form-group col-md-6">
                         <label for="domain">Domain:</label>
-                        <input id="domain" type="url" class="form-control" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                        <input id="domain" type="url" class="form-control" placeholder="Domain or comma-separated list of domains" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
                     <div class="form-group col-md-6">
                         <label for="target">Target Domain:</label>

db_queries.php

@@ -49,6 +49,7 @@
                         <div class="col-md-3">
                             <div><input type="checkbox" id="type_forwarded" checked><label for="type_forwarded">Permitted: forwarded</label><br></div>
                             <div><input type="checkbox" id="type_cached" checked><label for="type_cached">Permitted: cached</label></div>
+                            <div><input type="checkbox" id="type_cached_stale" checked><label for="type_cached_stale">Permitted: stale cache</label></div>
                             <div><input type="checkbox" id="type_retried" checked><label for="type_retried">Permitted: retried</label></div>
                         </div>
                         <div class="col-md-3">

dns_records.php

@@ -32,7 +32,7 @@
                 <div class="row">
                     <div class="form-group col-md-6">
                         <label for="domain">Domain:</label>
-                        <input id="domain" type="url" class="form-control" placeholder="Add a domain (example.com or sub.example.com)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                        <input id="domain" type="url" class="form-control" placeholder="Domain or comma-separated list of domains" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
                     <div class="form-group col-md-6">
                         <label for="ip">IP Address:</label>

login.php

@@ -42,7 +42,7 @@
                 <form action="" id="loginform" method="post">
                     <div class="form-group login-options has-feedback<?php if ($wrongpassword) { ?> has-error<?php } ?>">
                         <div class="pwd-field">
-                            <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" autocomplete="current-password" autofocus>
+                            <input type="password" id="loginpw" name="pw" class="form-control" placeholder="Password" spellcheck="false" autocomplete="current-password" autofocus>
                             <span class="fa fa-key form-control-feedback"></span>
                         </div>
                         <div>

package.json

@@ -24,9 +24,9 @@
     "testpr": "npm run prettier:fix && git diff --ws-error-highlight=all --color=always --exit-code && npm run xo"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.13",
     "eslint-plugin-compat": "^4.0.2",
-    "postcss": "^8.4.17",
+    "postcss": "^8.4.19",
     "postcss-cli": "^10.0.0",
     "prettier": "2.7.1",
     "xo": "^0.52.4"

scripts/pi-hole/js/db_graph.js

@@ -236,12 +236,15 @@ $(function () {
     },
     options: {
       responsive: true,
+      interaction: {
+        mode: "nearest",
+        axis: "x",
+      },
       plugins: {
         tooltip: {
           enabled: true,
           yAlign: "bottom",
           intersect: false,
-          mode: "x",
           itemSort: function (a, b) {
             return b.datasetIndex - a.datasetIndex;
           },
@@ -390,7 +393,7 @@ $("#querytime").on("apply.daterangepicker", function (ev, picker) {
   updateQueriesOverTime();
 });
 
-$("#queryOverTimeChart").click(function (evt) {
+$("#queryOverTimeChart").on("click", function (evt) {
   var activePoints = timeLineChart.getElementsAtEventForMode(
     evt,
     "nearest",

scripts/pi-hole/js/db_queries.js

@@ -167,6 +167,10 @@ function excludeStatusTypes() {
     statusType.push(16);
   }
 
+  if ($("#type_cached_stale").prop("checked") === false) {
+    statusType.push(17);
+  }
+
   return statusType.join(",");
 }
 
@@ -176,7 +180,7 @@ var reloadCallback = function () {
   var data = tableApi.rows().data();
   for (var i = 0; i < data.length; i++) {
     statistics[0]++; // TOTAL query
-    if (data[i][4] === 1 || (data[i][4] > 4 && ![10, 12, 13, 14].includes(data[i][4]))) {
+    if (data[i][4] === 1 || (data[i][4] > 4 && ![10, 12, 13, 14, 17].includes(data[i][4]))) {
       statistics[2]++; // EXACT blocked
     } else if (data[i][4] === 3) {
       statistics[1]++; // CACHE query
@@ -349,6 +353,13 @@ $(function () {
             "<span class='text-orange'>Blocked <br class='hidden-lg'>(special domain)</span>";
           blocked = true;
           break;
+        case 17:
+          fieldtext =
+            "<span class='text-orange'>OK</span> <br class='hidden-lg'>(stale cache)" +
+            dnssecStatus;
+          buttontext =
+            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+          break;
         default:
           fieldtext = "Unknown (" + parseInt(data[4], 10) + ")";
       }
@@ -464,12 +475,12 @@ $("#querytime").on("apply.daterangepicker", function (ev, picker) {
   refreshTableData();
 });
 
-$("input[id^=type]").change(function () {
+$("input[id^=type]").on("change", function () {
   if (datepickerManuallySelected) {
     reloadBox.show();
   }
 });
 
-$(".bt-reload").click(function () {
+$(".bt-reload").on("click", function () {
   refreshTableData();
 });

scripts/pi-hole/js/footer.js

@@ -150,7 +150,7 @@ function initCheckboxRadioStyle() {
   var iCheckStyle = $("#iCheckStyle");
   if (iCheckStyle !== null) {
     iCheckStyle.val(chkboxStyle);
-    iCheckStyle.change(function () {
+    iCheckStyle.on("change", function () {
       var themename = $(this).val();
       localStorage.setItem("theme_icheck", themename);
       applyCheckboxRadioStyle(themename);
@@ -197,7 +197,7 @@ function initCPUtemp() {
   var tempunitSelector = $("#tempunit-selector");
   if (tempunitSelector !== null) {
     tempunitSelector.val(tempunit);
-    tempunitSelector.change(function () {
+    tempunitSelector.on("change", function () {
       tempunit = $(this).val();
       setCPUtemp(tempunit);
     });
@@ -256,7 +256,7 @@ $("#pihole-disable-custom").on("click", function (e) {
 });
 
 // Handle Ctrl + Enter button on Login page
-$(document).keypress(function (e) {
+$(document).on("keypress", function (e) {
   if ((e.keyCode === 10 || e.keyCode === 13) && e.ctrlKey && $("#loginpw").is(":focus")) {
     $("#loginform").attr("action", "settings.php");
     $("#loginform").submit();

scripts/pi-hole/js/groups-domains.js

@@ -69,7 +69,7 @@ function showSuggestDomains(value) {
     // Purposefully omit 'btn' class to save space on padding
     return $('<button type="button" class="btn-link btn-block text-right">')
       .append($("<i>").text(hostname))
-      .click(function () {
+      .on("click", function () {
         hideSuggestDomains();
         newDomainEl.val(hostname);
       });

scripts/pi-hole/js/index.js

@@ -724,17 +724,26 @@ function updateSummaryData(runOnce) {
 }
 
 function doughnutTooltip(tooltipLabel) {
-  var percentageTotalShown = tooltipLabel.chart._metasets[0].total.toFixed(2);
-  var label = " " + tooltipLabel.label;
+  var percentageTotalShown = tooltipLabel.chart._metasets[0].total.toFixed(1);
+  // tooltipLabel.chart._metasets[0].total returns the total percentage of the shown slices
+  // to compensate rounding errors we round to one decimal
 
-  if (percentageTotalShown >= 100) {
+  var label = " " + tooltipLabel.label;
+  // in case the item share is really small it could be rounded to 0.0
+  // we compensate for this
+  var itemPercentage =
+    tooltipLabel.parsed.toFixed(1) === 0 ? "< 0.1" : tooltipLabel.parsed.toFixed(1);
+
+  // even if no doughnut slice is hidden, sometimes percentageTotalShown is slightly less then 100
+  // we therefore use 99.9 to decide if slices are hidden (we only show with 0.1 precision)
+  if (percentageTotalShown > 99.9) {
     // All items shown
-    return label + ": " + tooltipLabel.parsed.toFixed(1) + "%";
+    return label + ": " + itemPercentage + "%";
   } else {
     return (
       label +
       ":<br>&bull; " +
-      tooltipLabel.parsed.toFixed(1) +
+      itemPercentage +
       "% of all queries<br>&bull; " +
       ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1) +
       "% of shown items"
@@ -855,14 +864,17 @@ $(function () {
     options: {
       responsive: true,
       maintainAspectRatio: false,
+      interaction: {
+        mode: "nearest",
+        axis: "x",
+      },
       plugins: {
         legend: {
           display: false,
         },
         tooltip: {
           enabled: true,
           intersect: false,
-          mode: "x",
           yAlign: "bottom",
           itemSort: function (a, b) {
             return b.datasetIndex - a.datasetIndex;
@@ -963,6 +975,10 @@ $(function () {
       options: {
         responsive: true,
         maintainAspectRatio: false,
+        interaction: {
+          mode: "nearest",
+          axis: "x",
+        },
         plugins: {
           legend: {
             display: false,
@@ -971,7 +987,6 @@ $(function () {
             // Disable the on-canvas tooltip
             enabled: false,
             intersect: false,
-            mode: "x",
             external: customTooltips,
             yAlign: "top",
             itemSort: function (a, b) {
@@ -1056,7 +1071,7 @@ $(function () {
     updateTopClientsChart();
   }
 
-  $("#queryOverTimeChart").click(function (evt) {
+  $("#queryOverTimeChart").on("click", function (evt) {
     var activePoints = timeLineChart.getElementsAtEventForMode(
       evt,
       "nearest",
@@ -1078,7 +1093,7 @@ $(function () {
     return false;
   });
 
-  $("#clientsChart").click(function (evt) {
+  $("#clientsChart").on("click", function (evt) {
     var activePoints = clientsChart.getElementsAtEventForMode(
       evt,
       "nearest",

scripts/pi-hole/js/network.js

@@ -178,7 +178,7 @@ $(function () {
         }
 
         $("td:eq(3)", row).html(names.join("<br>"));
-        $("td:eq(3)", row).hover(function () {
+        $("td:eq(3)", row).on("hover", function () {
           this.title = allnames.join("\n");
         });
       }
@@ -201,7 +201,7 @@ $(function () {
       }
 
       $("td:eq(0)", row).html(ips.join("<br>"));
-      $("td:eq(0)", row).hover(function () {
+      $("td:eq(0)", row).on("hover", function () {
         this.title = data.ip.join("\n");
       });