[WebUI] Add selectors reference

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;
+    }
+}

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">&#x2195;&ensp;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>&#x2195;&ensp;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>

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"

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);
             });
         };