[WebUI] Add selectors referencetags/2.6
@@ -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; | |||
} | |||
} |
@@ -328,38 +328,71 @@ | |||
<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">↕ 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>↕ 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> |
@@ -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" |
@@ -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); | |||
}); | |||
}; | |||