[WebUI] Add HTTP (Ajax) request timeout setting

Issue: #4009

2 files changed, 41 insertions, 4 deletions

diff --git a/interface/index.html b/interface/index.html
index 38d66a048..8124044af 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -112,6 +112,18 @@
 							<p class="mt-2 mb-0">Date: <span id="date-example"></span></p>
 						</div>
 					</div>
+
+					<div class="card mt-1">
+						<div class="card-body">
+							<h6 class="card-title font-weight-bolder">HTTP requests timeout, ms</h6>
+							<div class="input-group input-group-sm was-validated">
+								<input type="number" id="ajax-timeout" class="form-control" min="0" step="any" />
+								<div class="input-group-append">
+									<button id="ajax-timeout-restore" class="btn btn-secondary">Restore default</button>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</form>
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index a8a904fd3..b440022e4 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -51,6 +51,9 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
         }
     };
 
+    const defaultAjaxTimeout = 20000;
+
+    const ajaxTimeoutBox = ".popover #settings-popover #ajax-timeout";
     var graphs = {};
     var tables = {};
     var neighbours = []; // list of clusters
@@ -64,6 +67,17 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
         showSpinner: false,
     });
 
+    function ajaxSetup(ajax_timeout, setFieldValue, saveToLocalStorage) {
+        const timeout = (ajax_timeout && ajax_timeout >= 0) ? ajax_timeout : defaultAjaxTimeout;
+        if (saveToLocalStorage) localStorage.setItem("ajax_timeout", timeout);
+        if (setFieldValue) $(ajaxTimeoutBox).val(timeout);
+
+        $.ajaxSetup({
+            timeout: timeout,
+            jsonp: false
+        });
+    }
+
     function cleanCredentials() {
         sessionStorage.clear();
         $("#statWidgets").empty();
@@ -295,6 +309,8 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
                 if (!ui.read_only) tab_selectors.displayUI(ui);
             },
             complete: function () {
+                ajaxSetup(localStorage.getItem("ajax_timeout"));
+
                 if (ui.read_only) {
                     $(".ro-disable").attr("disabled", true);
                     $(".ro-hide").hide();
@@ -466,6 +482,8 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
 
                 $('.popover #settings-popover input:radio[name="locale"]').val([selected_locale]);
                 $(localeTextbox).val(custom_locale);
+
+                ajaxSetup(localStorage.getItem("ajax_timeout"), true);
             });
             $(document).on("change", '.popover #settings-popover input:radio[name="locale"]', function () {
                 selected_locale = this.value;
@@ -476,6 +494,12 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
                 custom_locale = $(localeTextbox).val();
                 validateLocale(true);
             });
+            $(document).on("input", ajaxTimeoutBox, function () {
+                ajaxSetup($(ajaxTimeoutBox).val(), false, true);
+            });
+            $(document).on("click", ".popover #settings-popover #ajax-timeout-restore", function () {
+                ajaxSetup(null, true, true);
+            });
 
             // Dismiss Bootstrap popover by clicking outside
             $("body").on("click", function (e) {
@@ -495,10 +519,6 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
             selData = this.value;
             tabClick("#throughput_nav");
         });
-        $.ajaxSetup({
-            timeout: 20000,
-            jsonp: false
-        });
 
         $(document).ajaxStart(function () {
             $("#refresh > svg").addClass("fa-spin");
@@ -549,6 +569,11 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
     };
 
     ui.connect = function () {
+        // Prevent locking out of the WebUI if timeout is too low.
+        let timeout = localStorage.getItem("ajax_timeout");
+        if (timeout < defaultAjaxTimeout) timeout = defaultAjaxTimeout;
+        ajaxSetup(timeout);
+
         // Query "/stat" to check if user is already logged in or client ip matches "secure_ip"
         $.ajax({
             type: "GET",