Skip to content

Commit

Permalink
Merge pull request #3409 from moisseev/webui
Browse files Browse the repository at this point in the history 
[WebUI] Add selectors reference
  • Loading branch information
@vstakhov
vstakhov committed Jun 20, 2020
2 parents 29ad693 + 6895687 commit f9e8c23
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 31 deletions.
97 changes: 97 additions & 0 deletions interface/css/rspamd.css
View file
Expand Up @@ -492,3 +492,100 @@ input.radio {
.w-1 {
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;
}
}
87 changes: 60 additions & 27 deletions interface/index.html
View file
Expand Up @@ -328,38 +328,71 @@ <h5>Scan results history</h5>
<h5>Test Rspamd selectors</h5>
</div>
<div class="widget-content">
<h5>Message source:</h5>
<div class="row">
<form class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="selectorsMsgArea" rows="9" placeholder="Paste raw message source"></textarea>
</div>
<div class="form-group">
<button class="btn btn-default pull-right" id="selectorsMsgClean"><i class="glyphicon glyphicon-trash"></i> Clean form</button>
<div class="row" id="row-main">
<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>
</form>
</div>
</div>

<h5>Selector(s):</h5>
<div class="row">
<form class="col-md-12">
<div class="form-group has-feedback">
<textarea class="form-control" id="selectorsSelArea" rows="1" placeholder="extractor.transform(arg);extractor.transform(arg);..."></textarea>
<span id="selector-feedback-icon" class="glyphicon form-control-feedback"></span>
<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">
<label for="selectorsMsgArea">Message source:</label>
<textarea class="form-control" id="selectorsMsgArea" rows="9" placeholder="Paste raw message source"></textarea>
</div>
<div class="form-group">
<button class="btn btn-default pull-right" id="selectorsMsgClean"><i class="glyphicon glyphicon-trash"></i> Clean form</button>
</div>
</div>

<div class="form-group row">
<div class="form-group has-feedback">
<label for="selectorsSelArea">Selector(s):</label>
<textarea class="form-control" id="selectorsSelArea" rows="1" placeholder="extractor.transform(arg);extractor.transform(arg);..."></textarea>
<span id="selector-feedback-icon" class="glyphicon form-control-feedback"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-primary" id="selectorsChkMsgBtn"><i class="glyphicon glyphicon-search"></i> Check message</button>
<button class="btn btn-default pull-right" id="selectorsClean"><i class="glyphicon glyphicon-trash"></i> Clean form</button>
</div>
</div>
<div class="form-group row">
<label for="selectorsResArea">Result:</label>
<textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea>
</div>
</form>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-primary" id="selectorsChkMsgBtn"><i class="glyphicon glyphicon-search"></i> Check message</button>
<button class="btn btn-default pull-right" id="selectorsClean"><i class="glyphicon glyphicon-trash"></i> Clean form</button>

<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>
</form>
</div>
<h5>Result:</h5>
<div class="row">
<form class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="selectorsResArea" rows="5" readonly></textarea>
</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>
</form>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion interface/js/app/rspamd.js
View file
Expand Up @@ -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"
Expand Down
63 changes: 60 additions & 3 deletions interface/js/app/selectors.js
View file
Expand Up @@ -34,7 +34,7 @@ define(["jquery"],
});
}

ui.checkSelectors = function (rspamd) {
function checkSelectors(rspamd) {
function toggle_form_group_class(remove, add) {
var icon = {
error: "remove",
Expand Down Expand Up @@ -63,17 +63,74 @@ 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("");
return false;
});
$("#selectorsClean").on("click", function () {
$("#selectorsSelArea").val("");
ui.checkSelectors(rspamd);
checkSelectors(rspamd);
return false;
});
$("#selectorsChkMsgBtn").on("click", function () {
Expand All @@ -86,7 +143,7 @@ define(["jquery"],
enable_disable_check_btn();
});
$("#selectorsSelArea").on("input", function () {
ui.checkSelectors(rspamd);
checkSelectors(rspamd);
});
};

Expand Down

0 comments on commit f9e8c23

Please sign in to comment.