diff --git a/queries.php b/queries.php
index 89ed91d7..be147ec1 100644
--- a/queries.php
+++ b/queries.php
@@ -19,47 +19,49 @@ if(isset($setupVars["API_QUERY_LOG_SHOW"]))
{
if($setupVars["API_QUERY_LOG_SHOW"] === "all")
{
- $showing = "showing all queries";
+ $showing = "showing";
}
elseif($setupVars["API_QUERY_LOG_SHOW"] === "permittedonly")
{
- $showing = "showing permitted queries only";
+ $showing = "showing permitted";
}
elseif($setupVars["API_QUERY_LOG_SHOW"] === "blockedonly")
{
- $showing = "showing blocked queries only";
+ $showing = "showing blocked";
}
elseif($setupVars["API_QUERY_LOG_SHOW"] === "nothing")
{
- $showing = "showing no queries at all";
+ $showing = "showing no queries (due to setting)";
}
}
else
{
// If filter variable is not set, we
// automatically show all queries
- $showing = "showing all queries";
+ $showing = "showing queries";
}
+$showall = false;
if(isset($_GET["all"]))
{
- $showing .= " within the Pi-hole log";
+ $showing .= " all queries within the Pi-hole log";
}
else if(isset($_GET["client"]))
{
- $showing .= " for client ".htmlentities($_GET["client"]);
+ $showing .= " queries for client ".htmlentities($_GET["client"]);
}
else if(isset($_GET["domain"]))
{
- $showing .= " for domain ".htmlentities($_GET["domain"]);
+ $showing .= " queries for domain ".htmlentities($_GET["domain"]);
}
-else if(isset($_GET["from"]) && isset($_GET["until"]))
+else if(isset($_GET["from"]) || isset($_GET["until"]))
{
- $showing .= " within limited time interval";
+ $showing .= " queries within specified time interval";
}
else
{
- $showing .= " within recent 10 minutes,
show all";
+ $showing .= " up to 100 queries";
+ $showall = true;
}
if(isset($setupVars["API_PRIVACY_MODE"]))
@@ -74,6 +76,8 @@ if(isset($setupVars["API_PRIVACY_MODE"]))
if(strlen($showing) > 0)
{
$showing = "(".$showing.")";
+ if($showall)
+ $showing .= ",
show all";
}
?>
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index c918dc2e..6a158d1a 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -255,6 +255,23 @@ function updateQueryTypesPie() {
queryTypePieChart.update();
// Don't use rotation animation for further updates
queryTypePieChart.options.animation.duration=0;
+ // Generate legend in separate div
+ $("#query-types-legend").html(queryTypePieChart.generateLegend());
+ $("#query-types-legend > ul > li").on("click",function(e){
+ $(this).toggleClass("strike");
+ var index = $(this).index();
+ var ci = e.view.queryTypePieChart;
+ var meta = ci.data.datasets[0]._meta;
+ for(let i in meta)
+ {
+ if ({}.hasOwnProperty.call(meta, i))
+ {
+ var curr = meta[i].data[index];
+ curr.hidden = !curr.hidden;
+ }
+ }
+ ci.update();
+ });
}).done(function() {
// Reload graph after minute
setTimeout(updateQueryTypesPie, 60000);
@@ -469,6 +486,23 @@ function updateForwardDestinationsPie() {
forwardDestinationPieChart.update();
// Don't use rotation animation for further updates
forwardDestinationPieChart.options.animation.duration=0;
+ // Generate legend in separate div
+ $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
+ $("#forward-destinations-legend > ul > li").on("click",function(e){
+ $(this).toggleClass("strike");
+ var index = $(this).index();
+ var ci = e.view.forwardDestinationPieChart;
+ var meta = ci.data.datasets[0]._meta;
+ for(let i in meta)
+ {
+ if ({}.hasOwnProperty.call(meta, i))
+ {
+ var curr = meta[i].data[index];
+ curr.hidden = !curr.hidden;
+ }
+ }
+ ci.update();
+ });
}).done(function() {
// Reload graph after one minute
setTimeout(updateForwardDestinationsPie, 60000);
@@ -1041,8 +1075,7 @@ $(document).ready(function() {
},
options: {
legend: {
- display: true,
- position: "right"
+ display: false
},
tooltips: {
enabled: true,
@@ -1079,8 +1112,7 @@ $(document).ready(function() {
},
options: {
legend: {
- display: true,
- position: "right"
+ display: false
},
tooltips: {
enabled: true,
diff --git a/scripts/pi-hole/js/queries.js b/scripts/pi-hole/js/queries.js
index 722f8543..58ec73b9 100644
--- a/scripts/pi-hole/js/queries.js
+++ b/scripts/pi-hole/js/queries.js
@@ -82,7 +82,7 @@ function add(domain,list) {
}
});
});
-
+
// Reset Modal after it has faded out
alertModal.one("hidden.bs.modal", function() {
alProcessing.show();
@@ -136,11 +136,10 @@ $(document).ready(function() {
{
APIstring += "&domain="+GETDict["domain"];
}
+ // If we don't ask filtering and also not for all queries, just request the most recent 100 queries
else if(!("all" in GETDict))
{
- var timestamp = Math.floor(Date.now() / 1000);
- APIstring += "&from="+(timestamp - 600);
- APIstring += "&until="+(timestamp + 100);
+ APIstring += "=100";
}
tableApi = $("#all-queries").DataTable( {
diff --git a/scripts/pi-hole/php/savesettings.php b/scripts/pi-hole/php/savesettings.php
index a17bc5f7..af8a90ec 100644
--- a/scripts/pi-hole/php/savesettings.php
+++ b/scripts/pi-hole/php/savesettings.php
@@ -123,7 +123,8 @@ function isinserverlist($addr) {
"Norton" => ["v4_1" => "199.85.126.10", "v4_2" => "199.85.127.10"],
"Comodo" => ["v4_1" => "8.26.56.26", "v4_2" => "8.20.247.20"],
"DNS.WATCH" => ["v4_1" => "84.200.69.80", "v4_2" => "84.200.70.40", "v6_1" => "2001:1608:10:25:0:0:1c04:b12f", "v6_2" => "2001:1608:10:25:0:0:9249:d69b"],
- "Quad9" => ["v4_1" => "9.9.9.9", "v4_2" => "149.112.112.112", "v6_1" => "2620:fe::fe"]
+ "Quad9" => ["v4_1" => "9.9.9.9", "v4_2" => "149.112.112.112", "v6_1" => "2620:fe::fe"],
+ "Cloudflare" => ["v4_1" => "1.1.1.1", "v4_2" => "1.0.0.1", "v6_1" => "2606:4700:4700::1111", "v6_2" => "2606:4700:4700::1001"]
];
$adlist = [];
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 14fdb8aa..d595ba41 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -121,6 +121,7 @@ a.lookatme {
-webkit-user-select: none;
-ms-user-select: none;
}
+
#chartjs-tooltip {
opacity: 1;
position: absolute;
@@ -133,9 +134,38 @@ a.lookatme {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
+
.chartjs-tooltip-key {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
}
+
+.chart-legend {
+ height:250px;
+ overflow:auto;
+}
+
+.chart-legend ul {
+ list-style-type: none;
+}
+
+.chart-legend li {
+ cursor:pointer;
+}
+
+.chart-legend li span {
+ display: inline-block;
+ width: 20px;
+ height: 12px;
+ margin-right: 5px;
+}
+
+.strike {
+ text-decoration: line-through !important;
+}
+
+.float-left{
+ float:left;
+}