[WebUI] Add history rows per page control

3 files changed, 31 insertions, 8 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 7c6880f6c..b99c3e2b3 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -155,8 +155,13 @@ input.action-scores {
     height: auto;
 }
 .widget-title-form label {
+    font-size: 12px;
     font-weight: normal;
 }
+#history_page_size {
+    width:6em !important;
+    text-align: center;
+}
 
 /* Symbols coloring */
 .symbol-default {
diff --git a/interface/index.html b/interface/index.html
index 8d40da510..8b9b65c9d 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -287,22 +287,22 @@
 
 				<div class="widget-box">
 					<div class="widget-title">
-						<form role="form" class="form-inline pull-right buttons">
-							<div class="form-group widget-title-form">
+						<div class="form-inline widget-title-form input-group-sm pull-right buttons">
 								<label for="selSymOrder">Symbols order:</label>
 								<select id="selSymOrder" class="form-control">
 									<option value="magnitude" selected>Score magnitude</option>
 									<option value="score">Score value</option>
 									<option value="name">Name</option>
 								</select>
-							</div>
+							<label for="history_page_size">Rows per page:</label>
+							<input id="history_page_size" class="form-control" value="25" min="1" type="number">
 							<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>
-						</form>
+						</div>
 						<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 8717d2e8e..fda16e245 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -27,7 +27,22 @@
 define(["jquery", "footable", "humanize"],
     function ($, _, Humanize) {
         "use strict";
-        var rows_per_page = 25;
+        var page_size = {
+            errors: 25,
+            history: 25
+        };
+
+        function set_page_size(n, callback) {
+            if (n !== page_size.history && n > 0) {
+                page_size.history = n;
+                if (callback) {
+                    return callback(n);
+                }
+            }
+            return null;
+        }
+
+        set_page_size($("#history_page_size").val());
 
         var ui = {};
         var prevVersion = null;
@@ -611,7 +626,7 @@ define(["jquery", "footable", "humanize"],
                 paging: {
                     enabled: true,
                     limit: 5,
-                    size: rows_per_page
+                    size: page_size.history
                 },
                 filtering: {
                     enabled: true,
@@ -652,7 +667,7 @@ define(["jquery", "footable", "humanize"],
             function waitForRowsDisplayed(rows_total, callback, iteration) {
                 var i = (typeof iteration === "undefined") ? 10 : iteration;
                 var num_rows = $("#historyTable > tbody > tr").length;
-                if (num_rows === rows_per_page ||
+                if (num_rows === page_size.history ||
                     num_rows === rows_total) {
                     return callback();
                 } else if (--i) {
@@ -742,6 +757,9 @@ define(["jquery", "footable", "humanize"],
                 var order = this.value;
                 change_symbols_order(order);
             });
+            $("#history_page_size").change(function () {
+                set_page_size(this.value, function (n) { tables.history.pageSize(n); });
+            });
             $(document).on("click", ".btn-sym-order button", function () {
                 var order = this.value;
                 $("#selSymOrder").val(order);
@@ -782,7 +800,7 @@ define(["jquery", "footable", "humanize"],
                 paging: {
                     enabled: true,
                     limit: 5,
-                    size: rows_per_page
+                    size: page_size.errors
                 },
                 filtering: {
                     enabled: true,