From 187785857ff3dd0c9ed42be3f627c081ca10f289 Mon Sep 17 00:00:00 2001 From: moisseev Date: Fri, 19 Jun 2020 12:13:50 +0300 Subject: [PATCH 1/2] [Minor] Refactor grid of selectors tab --- interface/css/rspamd.css | 4 +++ interface/index.html | 60 +++++++++++++++++++--------------------- 2 files changed, 33 insertions(+), 31 deletions(-) diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css index 515270573b..c7335e5586 100644 --- a/interface/css/rspamd.css +++ b/interface/css/rspamd.css @@ -492,3 +492,7 @@ input.radio { .w-1 { width: 1% !important; } + +#content label { + font-weight: normal; +} diff --git a/interface/index.html b/interface/index.html index a84336a66f..b8df750e24 100644 --- a/interface/index.html +++ b/interface/index.html @@ -328,38 +328,36 @@
Scan results history
Test Rspamd selectors
-
Message source:
-
-
-
- -
-
- -
-
-
+
+
+
+
+
+ + +
+
+ +
+
-
Selector(s):
-
- -
- - -
-
- - -
- -
-
Result:
-
-
-
- -
-
+
+
+ + + +
+
+ + +
+
+
+ + +
+ +
From 68956878f6e0b35b5d7994cb5d7db713cec9f660 Mon Sep 17 00:00:00 2001 From: moisseev Date: Sat, 20 Jun 2020 19:59:34 +0300 Subject: [PATCH 2/2] [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 c7335e5586..e8ed19381c 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; +} +@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; +} +@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); +} +@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%); + } +} +@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 b8df750e24..d2931ffba6 100644 --- a/interface/index.html +++ b/interface/index.html @@ -329,7 +329,25 @@
Test Rspamd selectors
-
+ + +
+ +
+ + +
@@ -357,6 +375,23 @@
Test Rspamd selectors
+
+ + +
+
+ +
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js index ffd3173d90..e4d9176a20 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 69fcd3ed49..600259e189 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 = $(""); + var tr = $("") + .append(td.clone().html("" + key + "")) + .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); }); };