Merge pull request #2444 from moisseev/eslint

[WebUI] Avoid history table reinitialization

4 files changed, 140 insertions, 112 deletions

diff --git a/.eslintrc.json b/.eslintrc.json
index 28c31ce80..c0f1eeb4b 100644
--- 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", 28],
         "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 6fe11a5f5..3863fece4 100644
--- 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,36 @@ 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) {
-            var items = [];
-            $.each(data, function (i, item) {
-                items.push(
-                    item.ts = unix_time_format(item.ts)
-                );
+        function updateErrorsTable(tables, data) {
+            var neighbours_data = data
+                .filter(function (d) {
+                    return d.status;
+                }) // filter out unavailable neighbours
+                .map(function (d) {
+                    return d.data;
+                });
+            var flattened_data = [].concat.apply([], neighbours_data);
+            $.each(flattened_data, function (i, item) {
+                item.ts = unix_time_format(item.ts);
             });
-            ft.errors = FooTable.init("#errorsLog", {
+            tables.errors.rows.load(flattened_data);
+        }
+
+        function initErrorsTable(tables, data) {
+            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}},
@@ -683,11 +730,10 @@ define(["jquery", "footable", "humanize"],
                     {name:"id", title:"Internal ID", style:{"font-size":"11px"}},
                     {name:"message", title:"Message", breakpoints:"xs sm", style:{"font-size":"11px"}},
                 ],
-                rows: data,
                 paging: {
                     enabled: true,
                     limit: 5,
-                    size: 25
+                    size: rows_per_page
                 },
                 filtering: {
                     enabled: true,
@@ -696,30 +742,32 @@ define(["jquery", "footable", "humanize"],
                 },
                 sorting: {
                     enabled: true
+                },
+                on: {
+                    "ready.ft.table": function () {
+                        updateErrorsTable(tables, data);
+                    }
                 }
             });
         }
 
-        ui.getErrors = function (rspamd, tables, neighbours, checked_server) {
+        ui.getErrors = function (rspamd, tables) {
             if (rspamd.read_only) return;
 
             rspamd.query("errors", {
-                success: function (req_data) {
-                    var neighbours_data = req_data
-                        .filter(function (d) {
-                            return d.status;
-                        }) // filter out unavailable neighbours
-                        .map(function (d) {
-                            return d.data;
-                        });
-                    drawErrorsTable([].concat.apply([], neighbours_data));
+                success: function (data) {
+                    if (Object.prototype.hasOwnProperty.call(tables, "errors")) {
+                        updateErrorsTable(tables, data);
+                    } else {
+                        initErrorsTable(tables, 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 300313159..4cfc99954 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -44,9 +44,6 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
         $("#statWidgets").empty();
         $("#listMaps").empty();
         $("#modalBody").empty();
-        $("#historyLog tbody").remove();
-        $("#errorsLog tbody").remove();
-        $("#symbolsTable tbody").remove();
     }
 
     function stopTimers() {
@@ -56,30 +53,12 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
     }
 
     function disconnect() {
-        if (graphs.chart) {
-            graphs.chart.destroy();
-            delete graphs.chart;
-        }
-        if (graphs.rrd_pie) {
-            graphs.rrd_pie.destroy();
-            delete graphs.rrd_pie;
-        }
-        if (graphs.graph) {
-            graphs.graph.destroy();
-            delete graphs.graph;
-        }
-        if (tables.history) {
-            tables.history.destroy();
-            delete tables.history;
-        }
-        if (tables.errors) {
-            tables.errors.destroy();
-            delete tables.errors;
-        }
-        if (tables.symbols) {
-            tables.symbols.destroy();
-            delete tables.symbols;
-        }
+        [graphs, tables].forEach(function (o) {
+            Object.keys(o).forEach(function (key) {
+                o[key].destroy();
+                delete o[key];
+            });
+        });
 
         stopTimers();
         cleanCredentials();
@@ -120,11 +99,11 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
             tab_config.getMaps(ui, checked_server);
             break;
         case "#symbols_nav":
-            tab_symbols.getSymbols(ui, checked_server);
+            tab_symbols.getSymbols(ui, tables, 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 +144,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,7 +268,8 @@ function ($, d3pie, visibility, tab_stat, tab_graph, tab_config,
             }
         });
         tab_config.setup(ui);
-        tab_symbols.setup(ui);
+        tab_history.setup(ui, tables);
+        tab_symbols.setup(ui, tables);
         tab_upload.setup(ui);
         selData = tab_graph.setup();
     };
diff --git a/interface/js/app/symbols.js b/interface/js/app/symbols.js
index 04b661d99..a7d55902e 100644
--- a/interface/js/app/symbols.js
+++ b/interface/js/app/symbols.js
@@ -27,7 +27,6 @@
 define(["jquery", "footable"],
     function ($) {
         "use strict";
-        var ft = {};
         var ui = {};
 
         function getSelector(id) {
@@ -144,7 +143,7 @@ define(["jquery", "footable"],
             return [items, distinct_groups];
         }
         // @get symbols into modal form
-        ui.getSymbols = function (rspamd, checked_server) {
+        ui.getSymbols = function (rspamd, tables, checked_server) {
             rspamd.query("symbols", {
                 success: function (json) {
                     var data = json[0].data;
@@ -197,7 +196,7 @@ define(["jquery", "footable"],
                             }
                         }
                     });
-                    ft.symbols = FooTable.init("#symbolsTable", {
+                    tables.symbols = FooTable.init("#symbolsTable", {
                         columns: [
                             {sorted: true, direction: "ASC", name:"group", title:"Group", style:{"font-size":"11px"}},
                             {name:"symbol", title:"Symbol", style:{"font-size":"11px"}},
@@ -244,14 +243,14 @@ define(["jquery", "footable"],
                 });
         };
 
-        ui.setup = function (rspamd) {
+        ui.setup = function (rspamd, tables) {
             $("#updateSymbols").on("click", function (e) {
                 e.preventDefault();
                 var checked_server = getSelector("selSrv");
                 rspamd.query("symbols", {
                     success: function (data) {
                         var items = process_symbols_data(data[0].data)[0];
-                        ft.symbols.rows.load(items);
+                        tables.symbols.rows.load(items);
                     },
                     server: (checked_server === "All SERVERS") ? "local" : checked_server
                 });