From 5a0fb76c7c613fa9d41ef1a7b17110a25b54b245 Mon Sep 17 00:00:00 2001 From: Alexander Moisseev Date: Thu, 23 Aug 2018 20:09:45 +0300 Subject: [PATCH] [WebUI] Avoid history table reinitialization --- .eslintrc.json | 2 +- interface/js/app/history.js | 160 ++++++++++++++++++++++-------------- interface/js/app/rspamd.js | 6 +- 3 files changed, 104 insertions(+), 64 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 28c31ce80..d83055202 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", 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 6fe11a5f5..af64c5c63 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 = { "&": "&", "<": "<", @@ -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 300313159..644fbbed6 100644 --- 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(); -- 2.39.5