commit fdd568d: [WebUI] Add auto-refresh interval settings
moisseev
moiseev at mezonplus.ru
Fri Mar 6 11:00:07 UTC 2020
Author: moisseev
Date: 2020-03-06 11:07:27 +0300
URL: https://github.com/rspamd/rspamd/commit/fdd568d7c7cb2c68710a913f2ce2020f6337a066 (refs/pull/3289/head)
[WebUI] Add auto-refresh interval settings
---
interface/css/rspamd.css | 4 +++
interface/index.html | 29 ++++++++++++++---
interface/js/app/rspamd.js | 79 ++++++++++++++++++++++++++++++++++++++--------
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;
More information about the Commits
mailing list