Add timeout warning to database pages

Signed-off-by: Mcat12 <newtoncat12@yahoo.com>

db_graph.php

@@ -22,7 +22,6 @@ $token = $_SESSION['token'];
     <h1>Compute graphical statistics from the Pi-hole query database</h1>
 </div>
 
-
 <div class="row">
     <div class="col-md-12">
 <!-- Date Input -->
@@ -39,6 +38,11 @@ $token = $_SESSION['token'];
       </div>
     </div>
 </div>
+
+<div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
+    Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
+</div>
+
 <div class="row">
     <div class="col-md-12">
     <div class="box" id="queries-over-time">

db_lists.php

@@ -39,6 +39,11 @@ $token = $_SESSION['token'];
       </div>
     </div>
 </div>
+
+<div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
+    Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
+</div>
+
 <?php
 if($boxedlayout)
 {

db_queries.php

@@ -39,6 +39,11 @@ $token = $_SESSION['token'];
       </div>
     </div>
 </div>
+
+<div id="timeoutWarning" class="alert alert-warning alert-dismissible fade in" role="alert" hidden="true">
+    Depending on how large of a range you specified, the request may time out while Pi-hole tries to retrieve all the data.<br/><span id="err"></span>
+</div>
+
 <!-- Small boxes (Stat box) -->
 <div class="row">
     <div class="col-lg-3 col-xs-12">

scripts/pi-hole/js/db_graph.js

@@ -14,6 +14,8 @@ var from = moment(start__).utc().valueOf()/1000;
 var end__ = moment();
 var until = moment(end__).utc().valueOf()/1000;
 
+var timeoutWarning = $("#timeoutWarning");
+
 $(function () {
     $("#querytime").daterangepicker(
     {
@@ -80,6 +82,7 @@ function compareNumbers(a, b) {
 
 function updateQueriesOverTime() {
     $("#queries-over-time .overlay").show();
+    timeoutWarning.show();
     $.getJSON("api_db.php?getGraphData&from="+from+"&until="+until, function(data) {
 
         // convert received objects to arrays
@@ -135,6 +138,7 @@ function updateQueriesOverTime() {
 
         timeLineChart.options.scales.xAxes[0].display=true;
         $("#queries-over-time .overlay").hide();
+        timeoutWarning.hide();
         timeLineChart.update();
     });
 }

scripts/pi-hole/js/db_lists.js

@@ -14,6 +14,9 @@ var from = moment(start__).utc().valueOf()/1000;
 var end__ = moment();
 var until = moment(end__).utc().valueOf()/1000;
 
+var timeoutWarning = $("#timeoutWarning");
+var listsStillLoading = 0;
+
 $(function () {
     $("#querytime").daterangepicker(
     {
@@ -97,6 +100,10 @@ function updateTopClientsChart() {
         }
 
         $("#client-frequency .overlay").hide();
+
+        listsStillLoading--;
+        if(listsStillLoading == 0)
+            timeoutWarning.hide();
     });
 }
 
@@ -135,6 +142,10 @@ function updateTopDomainsChart() {
         }
 
         $("#domain-frequency .overlay").hide();
+
+        listsStillLoading--;
+        if(listsStillLoading == 0)
+            timeoutWarning.hide();
     });
 }
 
@@ -171,10 +182,16 @@ function updateTopAdsChart() {
         }
 
         $("#ad-frequency .overlay").hide();
+
+        listsStillLoading--;
+        if(listsStillLoading == 0)
+            timeoutWarning.hide();
     });
 }
 
 $("#querytime").on("apply.daterangepicker", function(ev, picker) {
+    timeoutWarning.show();
+    listsStillLoading = 3;
     updateTopClientsChart();
     updateTopDomainsChart();
     updateTopAdsChart();

scripts/pi-hole/js/db_queries.js

@@ -16,6 +16,8 @@ var until = moment(end__).utc().valueOf()/1000;
 var instantquery = false;
 var daterange;
 
+var timeoutWarning = $("#timeoutWarning");
+
 // Do we want to filter queries?
 var GETDict = {};
 location.search.substr(1).split("&").forEach(function(item) {GETDict[item.split("=")[0]] = item.split("=")[1];});
@@ -141,6 +143,7 @@ function handleAjaxError( xhr, textStatus, error ) {
 
 var reloadCallback = function()
 {
+    timeoutWarning.hide();
     statistics = [0,0,0,0];
     var data = tableApi.rows().data();
     for (var i = 0; i < data.length; i++) {
@@ -171,6 +174,7 @@ var reloadCallback = function()
 };
 
 function refreshTableData() {
+    timeoutWarning.show();
     var APIstring = "api_db.php?getAllQueries&from="+from+"&until="+until;
     statistics = [0,0,0];
     tableApi.ajax.url(APIstring).load(reloadCallback);