Update devel from release v5.0

api_db.php

@@ -368,15 +368,30 @@ function resolveHostname($clientip, $printIP)
 	// Parse the DB result into graph data, filling in missing interval sections with zero
 	function parseDBData($results, $interval, $from, $until) {
 		$data = array();
+		$first_db_timestamp = -1;
 
 		if(!is_bool($results)) {
 			// Read in the data
 			while($row = $results->fetchArray()) {
 				// $data[timestamp] = value_in_this_interval
 				$data[$row[0]] = intval($row[1]);
+				if($first_db_timestamp === -1)
+					$first_db_timestamp = intval($row[0]);
 			}
 		}
 
+		// It is unpredictable what the first timestamp returned by the database
+		// will be. This depends on live data. Hence, we re-align the FROM
+		// timestamp to avoid unaligned holes appearing as additional
+		// (incorrect) data points
+		$aligned_from = $from + (($first_db_timestamp - $from) % $interval);
+
+		// Fill gaps in returned data
+		for($i = $aligned_from; $i < $until; $i += $interval) {
+			if(!array_key_exists($i, $data))
+				$data[$i] = 0;
+		}
+
 		return $data;
 	}
 

debug.php

@@ -1,4 +1,4 @@
-<?php /* 
+<?php /*
 *    Pi-hole: A black hole for Internet advertisements
 *    (c) 2017 Pi-hole, LLC (https://pi-hole.net)
 *    Network-wide ad blocking via your own hardware.
@@ -12,7 +12,7 @@
     <h1>Generate debug log</h1>
 </div>
 
-<p><input type="checkbox" id="upload" checked> Upload debug log and provide token once finished</p>
+<p><input type="checkbox" id="upload"> Upload debug log and provide token once finished</p>
 <p>Once you click this button a debug log will be generated and can automatically be uploaded if we detect a working internet connection.</p>
 <button class="btn btn-lg btn-primary btn-block" id="debugBtn">Generate debug log</button>
 <pre id="output" style="width: 100%; height: 100%;" hidden="true"></pre>

custom_dns.php → dns_records.php

@@ -11,8 +11,8 @@
 
 <!-- Title -->
 <div class="page-header">
-    <h1>Custom DNS configuration</h1>
-    <small>On this page, you can add domain/IP associations similar to records in <code>/etc/hosts</code>.</small>
+    <h1>Local DNS Records</h1>
+    <small>On this page, you can add domain/IP associations</small>
 </div>
 
 <!-- Domain Input -->
@@ -28,11 +28,11 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
+                    <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">
                     </div>
-                    <div class="col-md-6">
+                    <div class="form-group col-md-6">
                         <label for="ip">IP Address:</label>
                         <input id="ip" type="text" class="form-control" placeholder="Associated IP address" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
@@ -67,7 +67,7 @@
         <div class="box" id="recent-queries">
             <div class="box-header with-border">
                 <h3 class="box-title">
-                    List of custom DNS domains
+                    List of local DNS domains
                 </h3>
             </div>
             <!-- /.box-header -->

groups-adlists.php

@@ -26,12 +26,12 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Address:</label>
-                        <input id="new_address" type="url" class="form-control" placeholder="http://..., https://..., file://..." autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
+                    <div class="form-group col-md-6">
+                        <label for="new_address">Address:</label>
+                        <input id="new_address" type="text" class="form-control" placeholder="http://..., https://..., file://..." autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex2">Comment:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="Adlist description (optional)">
                     </div>
                 </div>

groups-clients.php

@@ -26,15 +26,15 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Known clients:</label>
+                    <div class="form-group col-md-6">
+                        <label for="select">Known clients:</label>
                         <select id="select" class="form-control" placeholder="">
                             <option disabled selected>Loading...</option>
                         </select><br>
                         <input id="ip-custom" type="text" class="form-control" disabled placeholder="Client IP address (IPv4 or IPv6, CIDR subnetting available, optional)" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex3">Comment:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="Client description (optional)">
                     </div>
                 </div>

groups.php

@@ -26,12 +26,12 @@
             <!-- /.box-header -->
             <div class="box-body">
                 <div class="row">
-                    <div class="col-md-6">
-                        <label for="ex1">Name:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_name">Name:</label>
                         <input id="new_name" type="text" class="form-control" placeholder="Group name">
                     </div>
-                    <div class="col-md-6">
-                        <label for="ex2">Description:</label>
+                    <div class="form-group col-md-6">
+                        <label for="new_desc">Description:</label>
                         <input id="new_desc" type="text" class="form-control" placeholder="Group description (optional)">
                     </div>
                 </div>

scripts/pi-hole/js/db_graph.js

@@ -140,23 +140,23 @@ function updateQueriesOverTime() {
       for (hour in dates) {
         if (Object.prototype.hasOwnProperty.call(dates, hour)) {
           var date,
-            dom = 0,
-            ads = 0;
+            total = 0,
+            blocked = 0;
           date = new Date(1000 * dates[hour]);
 
           var idx = data.domains_over_time[0].indexOf(dates[hour].toString());
           if (idx > -1) {
-            dom = data.domains_over_time[1][idx];
+            total = data.domains_over_time[1][idx];
           }
 
           idx = data.ads_over_time[0].indexOf(dates[hour].toString());
           if (idx > -1) {
-            ads = data.ads_over_time[1][idx];
+            blocked = data.ads_over_time[1][idx];
           }
 
           timeLineChart.data.labels.push(date);
-          timeLineChart.data.datasets[0].data.push(dom - ads);
-          timeLineChart.data.datasets[1].data.push(ads);
+          timeLineChart.data.datasets[0].data.push(blocked);
+          timeLineChart.data.datasets[1].data.push(total - blocked);
         }
       }
 
@@ -170,28 +170,30 @@ function updateQueriesOverTime() {
 
 $(document).ready(function () {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
+  var blockedColor = "#999";
+  var permittedColor = "#00a65a";
   timeLineChart = new Chart(ctx, {
     type: "bar",
     data: {
       labels: [],
       datasets: [
         {
-          label: "Permitted DNS Queries",
+          label: "Blocked DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0, 166, 90,.8)",
-          borderColor: "rgba(0, 166, 90,.8)",
-          pointBorderColor: "rgba(0, 166, 90,.8)",
+          backgroundColor: blockedColor,
+          borderColor: blockedColor,
+          pointBorderColor: blockedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
           pointHitRadius: 5
         },
         {
-          label: "Blocked DNS Queries",
+          label: "Permitted DNS Queries",
           fill: true,
-          backgroundColor: "rgba(0,192,239,1)",
-          borderColor: "rgba(0,192,239,1)",
-          pointBorderColor: "rgba(0,192,239,1)",
+          backgroundColor: permittedColor,
+          borderColor: permittedColor,
+          pointBorderColor: permittedColor,
           pointRadius: 1,
           pointHoverRadius: 5,
           data: [],
@@ -202,6 +204,9 @@ $(document).ready(function () {
     options: {
       tooltips: {
         enabled: true,
+        itemSort: function (a, b) {
+          return b.datasetIndex - a.datasetIndex;
+        },
         mode: "x-axis",
         callbacks: {
           title: function (tooltipItem) {
@@ -212,8 +217,8 @@ $(document).ready(function () {
               "-" +
               padNumber(time.getMonth() + 1) +
               "-" +
-              padNumber(time.getDate()) +
-              " " +
+              padNumber(time.getDate());
+            var from_time =
               padNumber(time.getHours()) +
               ":" +
               padNumber(time.getMinutes()) +
@@ -225,22 +230,50 @@ $(document).ready(function () {
               "-" +
               padNumber(time.getMonth() + 1) +
               "-" +
-              padNumber(time.getDate()) +
-              " " +
+              padNumber(time.getDate());
+            var until_time =
               padNumber(time.getHours()) +
               ":" +
               padNumber(time.getMinutes()) +
               ":" +
               padNumber(time.getSeconds());
-            return "Queries from " + from_date + " to " + until_date;
+
+            if (from_date === until_date) {
+              // Abbreviated form for intervals on the same day
+              // We split title in two lines on small screens
+              if ($(window).width() < 992) {
+                until_time += "\n";
+              }
+
+              return ("Queries from " + from_time + " to " + until_time + " on " + from_date).split(
+                "\n "
+              );
+            }
+
+            // Full tooltip for intervals spanning more than one day
+            // We split title in two lines on small screens
+            if ($(window).width() < 992) {
+              from_date += "\n";
+            }
+
+            return (
+              "Queries from " +
+              from_date +
+              " " +
+              from_time +
+              " to " +
+              until_date +
+              " " +
+              until_time
+            ).split("\n ");
           },
           label: function (tooltipItems, data) {
-            if (tooltipItems.datasetIndex === 1) {
+            if (tooltipItems.datasetIndex === 0) {
               var percentage = 0.0;
-              var total = parseInt(data.datasets[0].data[tooltipItems.index]);
-              var blocked = parseInt(data.datasets[1].data[tooltipItems.index]);
-              if (total > 0) {
-                percentage = (100.0 * blocked) / total;
+              var permitted = parseInt(data.datasets[1].data[tooltipItems.index]);
+              var blocked = parseInt(data.datasets[0].data[tooltipItems.index]);
+              if (permitted + blocked > 0) {
+                percentage = (100.0 * blocked) / (permitted + blocked);
               }
 
               return (

scripts/pi-hole/js/db_queries.js

@@ -322,6 +322,14 @@ $(document).ready(function () {
       $(row).css("color", color);
       $("td:eq(4)", row).html(fieldtext);
       $("td:eq(5)", row).html(buttontext);
+
+      // Substitute domain by "." if empty
+      var domain = data[2];
+      if (domain.length === 0) {
+        domain = ".";
+      }
+
+      $("td:eq(2)", row).text(domain);
     },
     dom:
       "<'row'<'col-sm-12'f>>" +