[WebUI] Add progress bar for AJAX requests

6 files changed, 110 insertions, 3 deletions

diff --git a/interface/css/nprogress.css b/interface/css/nprogress.css
new file mode 100644
index 000000000..6752d7f4b
--- /dev/null
+++ b/interface/css/nprogress.css
@@ -0,0 +1,74 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index c52e133c1..0628a25bc 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -683,4 +683,8 @@ background: url("../img/asc.png") no-repeat center right;
 }
 table.dataTable thead .sorting_desc_disabled {
 background: url("../img/desc.png") no-repeat center right;
-}
\ No newline at end of file
+}
+
+#nprogress .bar {
+	height: 1px;
+}
diff --git a/interface/index.html b/interface/index.html
index a10af453f..0d6f95064 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -10,6 +10,7 @@
 	<link href="./css/bootstrap.min.css" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" href="./css/footable.bootstrap.min.css"/>
 	<link rel="stylesheet" type="text/css" href="./css/d3evolution.css">
+	<link rel="stylesheet" type="text/css" href="./css/nprogress.css"/>
 	<link href="./css/rspamd.css" rel="stylesheet">
 </head>
 
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 4e0e57841..8310ccf47 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -25,9 +25,10 @@
 
 /* global jQuery:false, Visibility:false */
 
-define(["jquery", "d3pie", "visibility", "app/stats", "app/graph", "app/config",
+define(["jquery", "d3pie", "visibility", "nprogress", "app/stats", "app/graph", "app/config",
     "app/symbols", "app/history", "app/upload"],
-function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
+// eslint-disable-next-line max-params
+function ($, d3pie, visibility, NProgress, tab_stat, tab_graph, tab_config,
     tab_symbols, tab_history, tab_upload) {
     "use strict";
     // begin
@@ -39,6 +40,11 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
     var timer_id = [];
     var selData; // Graph's dataset selector state
 
+    NProgress.configure({
+        minimum: 0.01,
+        showSpinner: false,
+    });
+
     function cleanCredentials() {
         sessionStorage.clear();
         $("#statWidgets").empty();
@@ -177,6 +183,22 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
             data: o.data,
             headers: $.extend({Password: getPassword()}, o.headers),
             url: neighbours_status[ind].url + req_url,
+            xhr: function () {
+                var xhr = $.ajaxSettings.xhr();
+                // Download progress
+                if (req_url !== "neighbours") {
+                    xhr.addEventListener("progress", function (e) {
+                        if (e.lengthComputable) {
+                            neighbours_status[ind].percentComplete = e.loaded / e.total;
+                            var percentComplete = neighbours_status.reduce(function (prev, curr) {
+                                return curr.percentComplete ? curr.percentComplete + prev : prev;
+                            }, 0);
+                            NProgress.set(percentComplete / neighbours_status.length);
+                        }
+                    }, false);
+                }
+                return xhr;
+            },
             success: function (json) {
                 neighbours_status[ind].checked = true;
                 neighbours_status[ind].status = true;
@@ -213,6 +235,7 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
                     } else {
                         alertMessage("alert-error", "Request failed");
                     }
+                    NProgress.done();
                 }
             },
             statusCode: o.statusCode
diff --git a/interface/js/lib/nprogress.min.js b/interface/js/lib/nprogress.min.js
new file mode 100644
index 000000000..417321528
--- /dev/null
+++ b/interface/js/lib/nprogress.min.js
@@ -0,0 +1,4 @@
+/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
+ * @version 0.2.0
+ * @license MIT */
+!function(e,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n():e.NProgress=n()}(this,function(){var n,t,o={version:"0.2.0"},a=o.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function u(e,n,t){return e<n?n:t<e?t:e}function c(e){return 100*(-1+e)}o.configure=function(e){var n,t;for(n in e)void 0!==(t=e[n])&&e.hasOwnProperty(n)&&(a[n]=t);return this},o.status=null,o.set=function(n){var e=o.isStarted();n=u(n,a.minimum,1),o.status=1===n?null:n;var t=o.render(!e),r=t.querySelector(a.barSelector),i=a.speed,s=a.easing;return t.offsetWidth,l(function(e){""===a.positionUsing&&(a.positionUsing=o.getPositioningCSS()),f(r,function(e,n,t){var r;r="translate3d"===a.positionUsing?{transform:"translate3d("+c(e)+"%,0,0)"}:"translate"===a.positionUsing?{transform:"translate("+c(e)+"%,0)"}:{"margin-left":c(e)+"%"};return r.transition="all "+n+"ms "+t,r}(n,i,s)),1===n?(f(t,{transition:"none",opacity:1}),t.offsetWidth,setTimeout(function(){f(t,{transition:"all "+i+"ms linear",opacity:0}),setTimeout(function(){o.remove(),e()},i)},i)):setTimeout(e,i)}),this},o.isStarted=function(){return"number"==typeof o.status},o.start=function(){o.status||o.set(0);var e=function(){setTimeout(function(){o.status&&(o.trickle(),e())},a.trickleSpeed)};return a.trickle&&e(),this},o.done=function(e){return e||o.status?o.inc(.3+.5*Math.random()).set(1):this},o.inc=function(e){var n=o.status;return n?("number"!=typeof e&&(e=(1-n)*u(Math.random()*n,.1,.95)),n=u(n+e,0,.994),o.set(n)):o.start()},o.trickle=function(){return o.inc(Math.random()*a.trickleRate)},t=n=0,o.promise=function(e){return e&&"resolved"!==e.state()&&(0===t&&o.start(),n++,t++,e.always(function(){0==--t?(n=0,o.done()):o.set((n-t)/n)})),this},o.render=function(e){if(o.isRendered())return document.getElementById("nprogress");d(document.documentElement,"nprogress-busy");var n=document.createElement("div");n.id="nprogress",n.innerHTML=a.template;var t,r=n.querySelector(a.barSelector),i=e?"-100":c(o.status||0),s=document.querySelector(a.parent);return f(r,{transition:"all 0 linear",transform:"translate3d("+i+"%,0,0)"}),a.showSpinner||(t=n.querySelector(a.spinnerSelector))&&m(t),s!=document.body&&d(s,"nprogress-custom-parent"),s.appendChild(n),n},o.remove=function(){r(document.documentElement,"nprogress-busy"),r(document.querySelector(a.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&m(e)},o.isRendered=function(){return!!document.getElementById("nprogress")},o.getPositioningCSS=function(){var e=document.body.style,n="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return n+"Perspective"in e?"translate3d":n+"Transform"in e?"translate":"margin"};var l=function(){var n=[];function t(){var e=n.shift();e&&e(t)}return function(e){n.push(e),1==n.length&&t()}}(),f=function(){var s=["Webkit","O","Moz","ms"],n={};function r(e){return e=e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(e,n){return n.toUpperCase()}),n[e]||(n[e]=function(e){var n=document.body.style;if(e in n)return e;for(var t,r=s.length,i=e.charAt(0).toUpperCase()+e.slice(1);r--;)if((t=s[r]+i)in n)return t;return e}(e))}function o(e,n,t){n=r(n),e.style[n]=t}return function(e,n){var t,r,i=arguments;if(2==i.length)for(t in n)void 0!==(r=n[t])&&n.hasOwnProperty(t)&&o(e,t,r);else o(e,i[1],i[2])}}();function i(e,n){return 0<=("string"==typeof e?e:s(e)).indexOf(" "+n+" ")}function d(e,n){var t=s(e),r=t+n;i(t,n)||(e.className=r.substring(1))}function r(e,n){var t,r=s(e);i(e,n)&&(t=r.replace(" "+n+" "," "),e.className=t.substring(1,t.length-1))}function s(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function m(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return o});
diff --git a/interface/js/main.js b/interface/js/main.js
index bdc89dd5f..3567501ff 100644
--- a/interface/js/main.js
+++ b/interface/js/main.js
@@ -12,6 +12,7 @@ requirejs.config({
         d3evolution: "d3evolution.min",
         d3pie: "d3pie.min",
         footable: "footable.min",
+        nprogress: "nprogress.min",
     },
     shim: {
         d3: {exports: "d3"},