Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WebUI] Add selectors reference #3409

Merged
merged 2 commits into from
Jun 20, 2020
Merged

[WebUI] Add selectors reference #3409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1877858
[Minor] Refactor grid of selectors tab
moisseev Jun 19, 2020
6895687
[WebUI] Add selectors reference
moisseev Jun 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
97 changes: 97 additions & 0 deletions interface/css/rspamd.css
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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