[WebUI] Add auto-refresh interval settings

3 files changed, 95 insertions, 17 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 855b66a24..a23c5d135 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -39,6 +39,10 @@ textarea {
 .navbar-brand > img {
     height: 50px;
 }
+.btn-group > .btn.btn-default.radius-right {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+}
 .chart-content {
     text-align: center;
 }
diff --git a/interface/index.html b/interface/index.html
index 63dda0d04..d68868093 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -40,10 +40,31 @@
 			<li role="presentation"><a id="scan_nav" aria-controls="scan" role="tab" href="#scan" data-toggle="tab">Scan<span class="learn" style="display: none;">/Learn</span></a></li>
 			<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
 		</ul>
-    <ul class="nav navbar-nav nav-pills pull-right" style="display: none;">
-      <li><a href="#" role="button" data-toggle="button" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
-      <li><a href="#" role="button" data-toggle="button" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
-    </ul>
+    	<form class="navbar-form navbar-right" style="display: none;">
+			<div class="btn-group">
+				<a href="#" class="btn btn-default" role="button" data-toggle="button" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a>
+				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="autoRefresh">
+					<span id="countdown">--:--</span> <span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu">
+					<li class="preset"><a href="#" data-value=null>Disable</a></li>
+					<li class="preset divider" role="separator"></li>
+					<li class="preset active"><a href="#" data-value="10000">10 seconds</a></li>
+					<li class="preset"><a href="#" data-value="30000">30 seconds</a></li>
+					<li class="preset divider" role="separator"></li>
+					<li class="preset"><a href="#" data-value="60000">1 minute</a></li>
+					<li class="preset"><a href="#" data-value="600000">10 minutes</a></li>
+					<li class="preset"><a href="#" data-value="1800000">30 minutes</a></li>
+					<li class="preset divider" role="separator"></li>
+					<li class="preset"><a href="#" data-value="3600000">1 hour</a></li>
+
+					<li class="dynamic"><a href="#" data-value=null>Disable</a></li>
+					<li class="dynamic divider" role="separator"></li>
+					<li class="dynamic active"><a href="#" id="dynamic-item" data-value="3600000">1 hour</a></li>
+				</ul>
+			</div>
+			<a href="#" class="btn btn-default" role="button" data-toggle="button" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a>
+		</form>
 	</div>
 </nav>
 
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index c58b3803c..972d3c247 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -94,23 +94,68 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
             tab_id = "#" + $(".navbar-nav .active > a").attr("id");
         }
 
+        $("#autoRefresh").hide();
+        $(".btn-group .btn:visible").last().addClass("radius-right");
+
+        function setAutoRefresh(refreshInterval, timer, callback) {
+            function countdown(interval) {
+                Visibility.stop(timer_id.countdown);
+                if (!interval) {
+                    $("#countdown").text("--:--");
+                    return;
+                }
+
+                var timeLeft = interval;
+                $("#countdown").text("00:00");
+                timer_id.countdown = Visibility.every(1000, 1000, function () {
+                    timeLeft -= 1000;
+                    $("#countdown").text(new Date(timeLeft).toISOString().substr(14, 5));
+                    if (timeLeft <= 0) Visibility.stop(timer_id.countdown);
+                });
+            }
+
+            $(".btn-group .btn:visible").last().removeClass("radius-right");
+            $("#autoRefresh").show();
+
+            countdown(refreshInterval);
+            if (!refreshInterval) return;
+            timer_id[timer] = Visibility.every(refreshInterval, function () {
+                countdown(refreshInterval);
+                callback();
+            });
+        }
+
         switch (tab_id) {
             case "#status_nav":
-                tab_stat.statWidgets(ui, graphs, checked_server);
-                timer_id.status = Visibility.every(10000, function () {
-                    tab_stat.statWidgets(ui, graphs, checked_server);
-                });
+                (function () {
+                    var refreshInterval = $(".dropdown-menu li.active.preset a").data("value");
+                    setAutoRefresh(refreshInterval, "status",
+                        function () { return tab_stat.statWidgets(ui, graphs, checked_server); });
+                    if (refreshInterval) tab_stat.statWidgets(ui, graphs, checked_server);
+
+                    $(".preset").show();
+                    $(".dynamic").hide();
+                }());
                 break;
             case "#throughput_nav":
-                tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData);
+                (function () {
+                    var step = {
+                        day: 60000,
+                        week: 300000
+                    };
+                    var refreshInterval = step[selData] || 3600000;
+                    $("#dynamic-item").text((refreshInterval / 60000) + " min");
+
+                    if (!$(".dropdown-menu li.active.dynamic a").data("value")) {
+                        refreshInterval = null;
+                    }
+                    setAutoRefresh(refreshInterval, "throughput",
+                        function () { return tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData); });
+                    if (refreshInterval) tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData);
 
-                var autoRefresh = {
-                    day: 60000,
-                    week: 300000
-                };
-                timer_id.throughput = Visibility.every(autoRefresh[selData] || 3600000, function () {
-                    tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData);
-                });
+                    $(".preset").hide();
+                    $(".dynamic").show();
+                }());
                 break;
             case "#configuration_nav":
                 tab_config.getActions(ui, checked_server);
@@ -233,7 +278,7 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
             $("#errors-history").show();
         }
 
-        var buttons = $("#navBar .pull-right");
+        var buttons = $("#navBar form.navbar-right");
         $("#mainUI").show();
         $(buttons).show();
         $(".nav-tabs-sticky").stickyTabs({initialTab:"#status_nav"});
@@ -358,6 +403,14 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
             var tab_id = "#" + $(e.target).attr("id");
             tabClick(tab_id);
         });
+        $(".dropdown-menu li a").click(function (e) {
+            e.preventDefault();
+            var classList = $(this).parent().attr("class");
+            var menuClass = (/\b(?:dynamic|preset)\b/).exec(classList)[0];
+            $(".dropdown-menu li.active." + menuClass).removeClass("active");
+            $(this).parent("li").addClass("active");
+            tabClick("#refresh");
+        });
 
         $("#selSrv").change(function () {
             checked_server = this.value;