[WebUI] Avoid history table reinitialization

diff --git a/.eslintrc.json b/.eslintrc.json
index 28c31ce809faf3a8a4ba2defa987ef7815e2ed81..d830552025b76ee7096577c7fba26653756aeae3 100644 (file)
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -19,7 +19,7 @@
         "id-length": ["error", { "min": 1 }],
         // "max-len": ["error", { "code": 120 }],
         "max-params": ["warn", 9],
-        "max-statements": ["warn", 25],
+        "max-statements": ["warn", 27],
         "max-statements-per-line": ["error", { "max": 2 }],
         "multiline-comment-style": "off",
         "multiline-ternary": ["error", "always-multiline"],

diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 6fe11a5f584faf24ad3038c16d85da51dcb95c11..af64c5c63279702a5b7cc15d45109aee315321e6 100644 (file)
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -27,8 +27,10 @@
 define(["jquery", "footable", "humanize"],
     function ($, _, Humanize) {
         "use strict";
+        var rows_per_page = 25;
+
         var ui = {};
-        var ft = {};
+        var prevVersion;
         var htmlEscapes = {
             "&": "&",
             "<": "&lt;",
@@ -499,7 +501,18 @@ define(["jquery", "footable", "humanize"],
             return func();
         }
 
-        ui.getHistory = function (rspamd, tables, neighbours, checked_server) {
+        function drawTooltips() {
+            // Update symbol description tooltips
+            $.each(symbolDescriptions, function (key, description) {
+                $("abbr[data-sym-key=" + key + "]").tooltip({
+                    placement: "bottom",
+                    html: true,
+                    title: description
+                });
+            });
+        }
+
+        function initHistoryTable(rspamd, tables, data, items) {
             FooTable.actionFilter = FooTable.Filtering.extend({
                 construct : function (instance) {
                     this._super(instance);
@@ -558,16 +571,53 @@ define(["jquery", "footable", "humanize"],
                 }
             });
 
-            var drawTooltips = function () {
-            // Update symbol description tooltips
-                $.each(symbolDescriptions, function (key, description) {
-                    $("abbr[data-sym-key=" + key + "]").tooltip({
-                        placement: "bottom",
-                        html: true,
-                        title: description
-                    });
-                });
-            };
+            tables.history = FooTable.init("#historyTable", {
+                columns: get_history_columns(data),
+                rows: items,
+                paging: {
+                    enabled: true,
+                    limit: 5,
+                    size: rows_per_page
+                },
+                filtering: {
+                    enabled: true,
+                    position: "left",
+                    connectors: false
+                },
+                sorting: {
+                    enabled: true
+                },
+                components: {
+                    filtering: FooTable.actionFilter
+                },
+                on: {
+                    "ready.ft.table": drawTooltips,
+                    "after.ft.sorting": drawTooltips,
+                    "after.ft.paging": drawTooltips,
+                    "after.ft.filtering": drawTooltips
+                }
+            });
+        }
+
+        function destroyTable(tables, table) {
+            if (tables[table]) {
+                tables[table].destroy();
+                delete tables[table];
+            }
+        }
+
+        ui.getHistory = function (rspamd, tables) {
+            function waitForRowsDisplayed(callback, iteration) {
+                var i = (typeof iteration === "undefined") ? 10 : iteration;
+                var num_rows = $("#historyTable > tbody > tr").length;
+                if (num_rows === rows_per_page) {
+                    callback();
+                } else if (--i) {
+                    setTimeout(function () {
+                        waitForRowsDisplayed(callback, i);
+                    }, 500);
+                }
+            }
 
             rspamd.query("history", {
                 success: function (req_data) {
@@ -587,58 +637,52 @@ define(["jquery", "footable", "humanize"],
                         .map(function (d) { return d.data; });
                     if (neighbours_data.length && !differentVersions(neighbours_data)) {
                         var data = {};
-                        if (neighbours_data[0].version) {
+                        var version = neighbours_data[0].version;
+                        if (version) {
                             data.rows = [].concat.apply([], neighbours_data
                                 .map(function (e) {
                                     return e.rows;
                                 }));
-                            data.version = neighbours_data[0].version;
+                            data.version = version;
                         } else {
-                        // Legacy version
+                            // Legacy version
                             data = [].concat.apply([], neighbours_data);
                         }
                         var items = process_history_data(data);
-                        ft.history = FooTable.init("#historyTable", {
-                            columns: get_history_columns(data),
-                            rows: items,
-                            paging: {
-                                enabled: true,
-                                limit: 5,
-                                size: 25
-                            },
-                            filtering: {
-                                enabled: true,
-                                position: "left",
-                                connectors: false
-                            },
-                            sorting: {
-                                enabled: true
-                            },
-                            components: {
-                                filtering: FooTable.actionFilter
-                            },
-                            on: {
-                                "ready.ft.table": drawTooltips,
-                                "after.ft.sorting": drawTooltips,
-                                "after.ft.paging": drawTooltips,
-                                "after.ft.filtering": drawTooltips
+
+                        if (Object.prototype.hasOwnProperty.call(tables, "history") &&
+                            version === prevVersion) {
+                            tables.history.rows.load(items);
+                            if (version) { // Non-legacy
+                                // Is there a way to get an event when all rows are loaded?
+                                waitForRowsDisplayed(function () {
+                                    drawTooltips();
+                                });
                             }
-                        });
-                    } else if (ft.history) {
-                        ft.history.destroy();
-                        delete ft.history;
+                        } else {
+                            destroyTable(tables, "history");
+                            // Is there a way to get an event when the table is destroyed?
+                            setTimeout(function () {
+                                initHistoryTable(rspamd, tables, data, items);
+                            }, 200);
+                        }
+                        prevVersion = version;
+                    } else {
+                        destroyTable(tables, "history");
                     }
                 },
                 errorMessage: "Cannot receive history",
             });
+        };
 
+        ui.setup = function (rspamd, tables) {
             $("#updateHistory").off("click");
             $("#updateHistory").on("click", function (e) {
                 e.preventDefault();
-                ui.getHistory(rspamd, tables, neighbours, checked_server);
+                ui.getHistory(rspamd, tables);
             });
             $("#selSymOrder").unbind().change(function () {
-                ui.getHistory(rspamd, tables, neighbours, checked_server);
+                ui.getHistory(rspamd, tables);
             });
 
             // @reset history log
@@ -648,33 +692,27 @@ define(["jquery", "footable", "humanize"],
                 if (!confirm("Are you sure you want to reset history log?")) { // eslint-disable-line no-alert
                     return;
                 }
-                if (ft.history) {
-                    ft.history.destroy();
-                    delete ft.history;
-                }
-                if (ft.errors) {
-                    ft.errors.destroy();
-                    delete ft.errors;
-                }
+                destroyTable(tables, "history");
+                destroyTable(tables, "errors");
 
                 rspamd.query("historyreset", {
                     success: function () {
-                        ui.getHistory(rspamd, tables, neighbours, checked_server);
-                        ui.getErrors(rspamd, tables, neighbours, checked_server);
+                        ui.getHistory(rspamd, tables);
+                        ui.getErrors(rspamd, tables);
                     },
                     errorMessage: "Cannot reset history log"
                 });
             });
         };
 
-        function drawErrorsTable(data) {
+        function drawErrorsTable(tables, data) {
             var items = [];
             $.each(data, function (i, item) {
                 items.push(
                     item.ts = unix_time_format(item.ts)
                 );
             });
-            ft.errors = FooTable.init("#errorsLog", {
+            tables.errors = FooTable.init("#errorsLog", {
                 columns: [
                     {sorted: true, direction: "DESC", name:"ts", title:"Time", style:{"font-size":"11px", "width":300, "maxWidth":300}},
                     {name:"type", title:"Worker type", breakpoints:"xs sm", style:{"font-size":"11px", "width":150, "maxWidth":150}},
@@ -687,7 +725,7 @@ define(["jquery", "footable", "humanize"],
                 paging: {
                     enabled: true,
                     limit: 5,
-                    size: 25
+                    size: rows_per_page
                 },
                 filtering: {
                     enabled: true,
@@ -700,7 +738,7 @@ define(["jquery", "footable", "humanize"],
             });
         }
 
-        ui.getErrors = function (rspamd, tables, neighbours, checked_server) {
+        ui.getErrors = function (rspamd, tables) {
             if (rspamd.read_only) return;
 
             rspamd.query("errors", {
@@ -712,14 +750,14 @@ define(["jquery", "footable", "humanize"],
                         .map(function (d) {
                             return d.data;
                         });
-                    drawErrorsTable([].concat.apply([], neighbours_data));
+                    drawErrorsTable(tables, [].concat.apply([], neighbours_data));
                 }
             });
 
             $("#updateErrors").off("click");
             $("#updateErrors").on("click", function (e) {
                 e.preventDefault();
-                ui.getErrors(rspamd, tables, neighbours, checked_server);
+                ui.getErrors(rspamd, tables);
             });
         };
 

diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 3003131590ed1d9dec8800acce95278d3bdf687c..644fbbed66d6e60092d7f70597391761bfec5ee1 100644 (file)
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -123,8 +123,8 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
             tab_symbols.getSymbols(ui, checked_server);
             break;
         case "#history_nav":
-            tab_history.getHistory(ui, tables, neighbours, checked_server);
-            tab_history.getErrors(ui, tables, neighbours, checked_server);
+            tab_history.getHistory(ui, tables);
+            tab_history.getErrors(ui, tables);
             break;
         case "#disconnect":
             disconnect();
@@ -165,6 +165,7 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
         } else {
             $("#learning_nav").show();
             $("#resetHistory").removeAttr("disabled", true);
+            $("#errors-history").show();
         }
 
         var buttons = $("#navBar .pull-right");
@@ -288,6 +289,7 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
             }
         });
         tab_config.setup(ui);
+        tab_history.setup(ui, tables);
         tab_symbols.setup(ui);
         tab_upload.setup(ui);
         selData = tab_graph.setup();