[WebUI] Rework symbols scores

2 files changed, 70 insertions, 39 deletions

diff --git a/interface/index.html b/interface/index.html
index efdf783c8..17f14738f 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -29,6 +29,7 @@
 			<li role="presentation"><a id="throughput_nav" aria-controls="throughput" role="tab" href="#throughput" data-toggle="tab">Throughput</a></li>
 
 			<li role="presentation"><a id="configuration_nav" aria-controls="configuration" role="tab" href="#configuration" data-toggle="tab">Configuration</a></li>
+			<li role="presentation"><a id="symbols_nav" aria-controls="symbols" role="tab" href="#symbols" data-toggle="tab">Symbols</a></li>
 			<li role="presentation"><a id="learning_nav" aria-controls="learning" role="tab" href="#learning" data-toggle="tab">Learning</a></li>
 			<li role="presentation"><a id="scan_nav"aria-controls="scan" role="tab"  href="#scan" data-toggle="tab">Scan</a></li>
 			<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
@@ -125,22 +126,37 @@
 				</div>
 				<div class="widget-box">
 					<div class="widget-title">
-						<span class="icon"><i class="glyphicon glyphicon-filter"></i></span><h5>Rules</h5>
+						<span class="icon"><i class="glyphicon glyphicon-list"></i></span><h5>Lists</h5>
 					</div>
-					<div class="widget-content">
-						<button role="button" class="btn btn-primary"
-								data-toggle="modal"
-								data-source="#symbolsForm"
-								data-target="#modalDialog"
-								data-title="Symbols">Edit Rules</button>
+					<div class="widget-content nopadding">
+						<table class="table table-condensed table-hover" id="listMaps">
+						</table>
 					</div>
 				</div>
+			</div>
+
+			<div class="tab-pane" id="symbols">
 				<div class="widget-box">
 					<div class="widget-title">
-						<span class="icon"><i class="glyphicon glyphicon-list"></i></span><h5>Lists</h5>
+						<div class="buttons pull-right">
+							<button class="btn btn-info btn-sm" id="refreshSymbols">
+								<i class="glyphicon glyphicon-refresh"></i> Update
+							</button>
+						</div>
+						<span class="icon"><i class="glyphicon glyphicon-filters"></i></span>
+						<h5>Symbols and rules</h5>
 					</div>
 					<div class="widget-content nopadding">
-						<table class="table table-condensed table-hover" id="listMaps">
+						<table class="table table-log table-hover" id="symbolsTable">
+							<thead>
+								<th class="col1" title="Symbol">Symbol name</th>
+								<th class="col2" title="Group">Group</th>
+								<th class="col2" title="Description">Description</th>
+								<th class="col3" title="Score">Score</th>
+								<th class="col4" title="Hits">Hits</th>
+								<th class="col5" title="Avg. time">Avg. time</th>
+								<th class="col6" title=""></th>
+							</thead>
 						</table>
 					</div>
 				</div>
@@ -257,7 +273,6 @@
 
 			</div>
 
-
 		</div>
 	</div>
 
diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index 7bb7cdf98..7cd267da1 100644
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -29,6 +29,7 @@
         var pie;
         var history;
         var graph;
+        var symbols;
 
         var selected = []; // Keep graph selectors state
 
@@ -58,6 +59,10 @@
             if (history) {
                 history.destroy();
             }
+            if (symbols) {
+                symbols.destroy();
+                symbols = null;
+            }
             cleanCredentials();
             connectRSPAMD();
             // window.location.reload();
@@ -168,8 +173,9 @@
             }
             $('#statWidgets').empty();
             $('#listMaps').empty();
-            $('#historyLog tbody').remove();
             $('#modalBody').empty();
+            $('#historyLog tbody').remove();
+            $('#symbolsTable tbody').remove();
             password = '';
         }
         function isLogged() {
@@ -261,7 +267,7 @@
             }
             if (mode === 'update') {
                 $('#modalBody').empty();
-                getSymbols();
+                getMaps();
             }
             $.each(data, function (i, item) {
                 $.ajax({
@@ -609,7 +615,7 @@
 
                         items.push(
                             '<tr><td data-order="' + item.unix_time + '">' + item.time + '</td>' +
-                            '<td data-order="' + item.id + '"><div class="cell-overflow" tabindex="1" title="' + item.id + '">' + item.id + '</td>' +
+                            '<td data-order="' + item.id + '"><div class="cell-overflow" tabindex="1" title="' + item.id + '">' + item.id + '</div></td>' +
                             '<td data-order="' + item.ip + '"><div class="cell-overflow" tabindex="1" title="' + item.ip + '">' + item.ip + '</div></td>' +
                             '<td data-order="' + item.action + '"><span class="label ' + action + '">' + item.action + '</span></td>' +
                             '<td data-order="' + item.score + '"><span class="label ' + score + '">' + item.score.toFixed(2) + ' / ' + item.required_score.toFixed(2) + '</span></td>' +
@@ -639,6 +645,19 @@
         }
         // @get symbols into modal form
         function getSymbols() {
+            var symbols_length = 50;
+
+            if (symbols) {
+                var sl = document.getElementsByName('symbols_length')[0];
+                if (sl !== undefined) {
+                  symbols_length = parseInt(sl.value);
+                } else {
+                  symbols_length = 50;
+                }
+                symbols.destroy();
+                symbols = null;
+                $('#symbolsTable').children('tbody').remove();
+            }
             var items = [];
             $.ajax({
                 dataType: 'json',
@@ -649,17 +668,7 @@
                     xhr.setRequestHeader('Password', getPassword());
                 },
                 success: function (data) {
-                    $('#modalBody').empty();
-                    data.sort(function(a, b) {
-                        return a.group.localeCompare(b.group);
-                    });
                     $.each(data, function (i, group) {
-                        items.push('	<div class="row row-bordered" data-slider="hover">' +
-                            '<h4>' + group.group + '</h4>' +
-                            '</div>');
-                        group.rules.sort(function(a, b) {
-                            return a.symbol.localeCompare(b.symbol);
-                        });
                         $.each(group.rules, function (i, item) {
                             var max = 20;
                             var min = -20;
@@ -669,27 +678,32 @@
                             if (item.weight < min) {
                                 min = item.weight * 2;
                             }
-                            items.push('	<div class="row row-bordered" data-slider="hover">' +
-                                '<label class="col-md-7" for="' + item.symbol + '" title="' + item.description + '">' +
-                                '<code>' + item.symbol + '</code><p class="symbol-description">' + item.description + '</p>' +
-                                '</label>' +
-                                '<div class="col-md-3 spin-cell">' +
-                                '<input class="numeric" data-role="numerictextbox" autocomplete="off" "type="number" class="input-mini" min="' +
+                            item.time = 0;
+                            item.frequency = 0;
+                            items.push('<tr>' +
+                                '<td data-order="' + item.symbol + '">' + item.symbol + '</td>' +
+                                '<td data-order="' + group.group + '"><div class="cell-overflow" tabindex="1" title="' + group.group + '">' + group.group + '</div></td>' +
+                                '<td data-order="' + item.description + '"><div class="cell-overflow" tabindex="1" title="' + item.description + '">' + item.description + '</div></td>' +
+                                '<td data-order="' + item.weight + '"><input class="numeric" data-role="numerictextbox" autocomplete="off" "type="number" class="input" min="' +
                                 min + '" max="' +
                                 max + '" step="' + decimalStep(item.weight) +
                                 '" tabindex="1" value="' + Number(item.weight).toFixed(2) +
                                 '" id="' + item.symbol + '">' +
-                                '</div>' +
-                                '</div>');
+                                '</td>' +
+                                '<td data-order="' + item.frequency + '">' + item.frequency + '</td>' +
+                                '<td data-order="' + item.time + '">' + Number(item.time).toFixed(2) + 'ms</td>' +
+                                '<td></td>' +
+                                '</tr>');
                         });
                     });
-                    $('<form/>', {
-                        id: 'symbolsForm',
-                        method: 'post',
-                        action: '/savesymbols',
-                        'data-type': 'symbols',
-                        style: 'display:none',
-                        html: items.join('') }).appendTo('#modalBody');
+                    $('<tbody/>', { html: items.join('') }).insertAfter('#symbolsTable thead');
+                    symbols = $('#symbolsTable').DataTable({
+                        "aLengthMenu": [[100, 200, -1], [100, 200, "All"]],
+                        "bStateSave": true,
+                        "orderMulti": true,
+                        "order": [[ 1, "asc" ], [0, "asc"], [3, "desc"]],
+                        "pageLength": symbols_length
+                    });
                 },
                 error: function (data) {
                     alertMessage('alert-modal alert-error', data.statusText);
@@ -1143,7 +1157,6 @@
         $('#configuration_nav').bind('click', function (e) {
             getActions();
             getMaps();
-            getSymbols();
         });
 
         $(document).ajaxStart(function () {
@@ -1161,5 +1174,8 @@
         $('#history_nav').bind('click', function() {
             getHistory();
         });
+        $('#symbols_nav').bind('click', function() {
+            getSymbols();
+        });
     });
 })();