commit 6895687: [WebUI] Add selectors reference
moisseev
moiseev at mezonplus.ru
Sat Jun 20 19:35:09 UTC 2020
Author: moisseev
Date: 2020-06-20 19:59:34 +0300
URL: https://github.com/rspamd/rspamd/commit/68956878f6e0b35b5d7994cb5d7db713cec9f660 (refs/pull/3409/head)
[WebUI] Add selectors reference
---
interface/css/rspamd.css | 93 +++++++++++++++++++++++++++++++++++++++++++
interface/index.html | 37 ++++++++++++++++-
interface/js/app/rspamd.js | 2 +-
interface/js/app/selectors.js | 63 +++++++++++++++++++++++++++--
4 files changed, 190 insertions(+), 5 deletions(-)
diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index c7335e558..e8ed19381 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -493,6 +493,99 @@ input.radio {
width: 1% !important;
}
+#row-main {
+ margin-top: -12px;
+ margin-bottom: -12px;
+ display: flex;
+ flex-wrap: wrap;
+ /* necessary to hide collapsed sidebar */
+ overflow-x: hidden;
+}
+ at media (min-width: 992px) {
+ #content > div {
+ display: flex;
+ }
+}
+#content {
+ transition: width 0.3s ease;
+}
#content label {
font-weight: normal;
}
+
+.sidebar {
+ padding: 8px;
+ background-color: #ffe;
+ transition: margin 0.3s ease;
+}
+.sidebar > div.table-responsive {
+ max-height: 610px;
+ background-color: white;
+}
+.collapsed {
+ /* hide it for small displays */
+ display: none;
+}
+ at media (min-width: 992px) {
+ .collapsed {
+ display: block;
+ }
+ #sidebar-left.collapsed {
+ /* same width as sidebar */
+ margin-left: -25%;
+ }
+ #sidebar-right.collapsed {
+ /* same width as sidebar */
+ margin-right: -25%;
+ }
+}
+
+.sidebar-nav {
+ width: 20px;
+ border-bottom: none;
+}
+#sidebar-tab-left > a,
+#sidebar-tab-right > a {
+ background-color: #ffe;
+ padding-top: 0;
+ padding-bottom: 0;
+ margin-left: 12px;
+ margin-right: 12px;
+}
+#sidebar-tab-left {
+ transform: rotate(180deg);
+}
+#sidebar-tab-text-left {
+ transform: rotate(180deg);
+}
+ at media (min-width: 992px) {
+ .sidebar-nav {
+ margin-left: -2px;
+ margin-right: -2px;
+ }
+ #content {
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+ }
+ #sidebar-tab-left {
+ transform: translateX(-50%) rotate(90deg) translate(50%, -50%);
+ }
+ #sidebar-tab-right {
+ float: right;
+ transform: translateX(50%) rotate(-90deg) translate(-50%, -50%);
+ }
+}
+ at media (max-width: 991.98px) {
+ .sidebar-nav {
+ margin-top: -2px;
+ margin-bottom: -2px;
+ }
+ #content {
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ }
+ #sidebar-tab-right {
+ bottom: 0;
+ right: 0;
+ }
+}
diff --git a/interface/index.html b/interface/index.html
index b8df750e2..d2931ffba 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -329,7 +329,25 @@
</div>
<div class="widget-content">
<div class="row" id="row-main">
- <div class="col-xs-12" id="content">
+ <div class="col-md-3 sidebar" id="sidebar-left">
+ <div class="nopadding table-responsive">
+ <table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-extractors">
+ <thead><tr><th>Name</th><th>Description</th></tr></thead>
+ <tbody/>
+ </table>
+ </div>
+ </div>
+
+ <div class="col-md-6 col-xs-12" id="content">
+
+ <div class="row">
+ <ul class="nav nav-tabs sidebar-nav">
+ <li class="active text-nowrap" id="sidebar-tab-left">
+ <a><div id="sidebar-tab-text-left">↕ List of extractors</div></a>
+ </li>
+ </ul>
+
+ <div class="col-xs-12">
<form class="col-xs-12">
<div class="form-group row">
<div class="form-group">
@@ -357,6 +375,23 @@
<textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea>
</div>
</form>
+ </div>
+
+ <ul class="nav nav-tabs sidebar-nav">
+ <li class="active text-nowrap" id="sidebar-tab-right">
+ <a>↕ List of transforms</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="col-md-3 sidebar" id="sidebar-right">
+ <div class="nopadding table-responsive">
+ <table class="table table-condensed small table-striped table-hover table-bordered" id="selectorsTable-transforms">
+ <thead><tr><th>Name</th><th>Description</th></tr></thead>
+ <tbody/>
+ </table>
+ </div>
</div>
</div>
</div>
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index ffd3173d9..e4d9176a2 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -266,7 +266,7 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_
$('#selSrv [value="' + e.name + '"]').prop("disabled", true);
}
});
- tab_selectors.checkSelectors(ui);
+ tab_selectors.displayUI(ui);
},
errorMessage: "Cannot get server status",
server: "All SERVERS"
diff --git a/interface/js/app/selectors.js b/interface/js/app/selectors.js
index 69fcd3ed4..600259e18 100644
--- a/interface/js/app/selectors.js
+++ b/interface/js/app/selectors.js
@@ -34,7 +34,7 @@ define(["jquery"],
});
}
- ui.checkSelectors = function (rspamd) {
+ function checkSelectors(rspamd) {
function toggle_form_group_class(remove, add) {
var icon = {
error: "remove",
@@ -63,9 +63,66 @@ define(["jquery"],
$("#selector-feedback-icon").hide();
enable_disable_check_btn();
}
+ }
+
+ function buildLists(rspamd) {
+ function build_table_from_json(json, table_id) {
+ Object.keys(json).forEach(function (key) {
+ var td = $("<td/>");
+ var tr = $("<tr/>")
+ .append(td.clone().html("<code>" + key + "</code>"))
+ .append(td.clone().html(json[key].description));
+ $(table_id + " tbody").append(tr);
+ });
+ }
+
+ function getList(list) {
+ rspamd.query("plugins/selectors/list_" + list, {
+ method: "GET",
+ success: function (neighbours_status) {
+ var json = neighbours_status[0].data;
+ build_table_from_json(json, "#selectorsTable-" + list);
+ },
+ server: get_server(rspamd)
+ });
+ }
+
+ getList("extractors");
+ getList("transforms");
+ }
+
+ ui.displayUI = function (rspamd) {
+ buildLists(rspamd);
+ checkSelectors(rspamd);
};
ui.setup = function (rspamd) {
+ function toggleSidebar(side) {
+ $("#sidebar-" + side).toggleClass("collapsed");
+ var contentClass = "col-md-6";
+ var openSidebarsCount = $("#sidebar-left").hasClass("collapsed") +
+ $("#sidebar-right").hasClass("collapsed");
+ switch (openSidebarsCount) {
+ case 1:
+ contentClass = "col-md-9";
+ break;
+ case 2:
+ contentClass = "col-md-12";
+ break;
+ default:
+ }
+ $("#content").removeClass("col-md-12 col-md-9 col-md-6")
+ .addClass(contentClass);
+ }
+ $("#sidebar-tab-left>a").click(function () {
+ toggleSidebar("left");
+ return false;
+ });
+ $("#sidebar-tab-right>a").click(function () {
+ toggleSidebar("right");
+ return false;
+ });
+
$("#selectorsMsgClean").on("click", function () {
$("#selectorsChkMsgBtn").attr("disabled", true);
$("#selectorsMsgArea").val("");
@@ -73,7 +130,7 @@ define(["jquery"],
});
$("#selectorsClean").on("click", function () {
$("#selectorsSelArea").val("");
- ui.checkSelectors(rspamd);
+ checkSelectors(rspamd);
return false;
});
$("#selectorsChkMsgBtn").on("click", function () {
@@ -86,7 +143,7 @@ define(["jquery"],
enable_disable_check_btn();
});
$("#selectorsSelArea").on("input", function () {
- ui.checkSelectors(rspamd);
+ checkSelectors(rspamd);
});
};
More information about the Commits
mailing list