Merge pull request #2153 from moisseev/symorder

[WebUI] Add symbols order selector to history

3 files changed, 33 insertions, 7 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 3af8baad7..c52e133c1 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -160,6 +160,13 @@ input.action-scores {
     padding-right: 20px;
 }
 
+#selSymOrder {
+    height: auto;
+}
+.widget-title-form label {
+    font-weight: normal;
+}
+
 .btn-upload-trigger {
 	position:relative;
 	z-index:1;
@@ -281,8 +288,7 @@ td.maps-cell {
 	margin:0 0 0 36px;
 	}
 .widget-title .buttons {
-	float:left;
-	margin:2px 2px 0 0;
+	padding:2px 2px 0 0;
 	}
 .widget-title .label {
 	padding:3px 5px 2px;
diff --git a/interface/index.html b/interface/index.html
index 85794a49d..8cb21794f 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -286,14 +286,21 @@
 
 				<div class="widget-box">
 					<div class="widget-title">
-						<div class="buttons pull-right">
+						<form role="form" class="form-inline pull-right buttons">
+							<div class="form-group widget-title-form">
+								<label for="selSymOrder">Symbols order:</label>
+								<select id="selSymOrder" class="form-control">
+									<option value="score" selected>Score</option>
+									<option value="name">Name</option>
+								</select>
+							</div>
 							<button class="btn btn-danger btn-sm" id="resetHistory">
 								<i class="glyphicon glyphicon-remove-circle"></i> Reset
 							</button>
 							<button class="btn btn-info btn-sm" id="updateHistory">
 								<i class="glyphicon glyphicon-refresh"></i> Update
 							</button>
-						</div>
+						</form>
 						<span class="icon"><i class="glyphicon glyphicon-eye-open"></i></span>
 						<h5>History</h5>
 					</div>
diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index af0a2a80e..dc44a2ddf 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -116,6 +116,18 @@ function($, _, Humanize) {
     function process_history_v2(data) {
         var items = [];
 
+        function getSelector(id) {
+            var e = document.getElementById(id);
+            return e.options[e.selectedIndex].value;
+        }
+        var compare = (getSelector("selSymOrder") === "score")
+            ? function (e1, e2) {
+                return Math.abs(e1.score) < Math.abs(e2.score);
+            }
+            : function (e1, e2) {
+                return e1.name.localeCompare(e2.name);
+            };
+
         $.each(data.rows,
           function (i, item) {
 
@@ -141,9 +153,7 @@ function($, _, Humanize) {
                 map(function(key) {
                     return item.symbols[key];
                 }).
-                sort(function(e1, e2) {
-                    return Math.abs(e1.score) < Math.abs(e2.score);
-                }).
+                sort(compare).
                 map(function(e) { return e.str; }).
                 join("<br>\n");
             item.time = {
@@ -605,6 +615,9 @@ function($, _, Humanize) {
             e.preventDefault();
             interface.getHistory(rspamd, tables, neighbours, checked_server);
         });
+        $("#selSymOrder").unbind().change(function() {
+            interface.getHistory(rspamd, tables, neighbours, checked_server);
+        });
 
         // @reset history log
         $('#resetHistory').off('click');