commit 57dac6a: [WebUI] Load modules dynamically
moisseev
moiseev at mezonplus.ru
Thu Nov 16 16:00:04 UTC 2023
Author: moisseev
Date: 2023-11-16 17:07:27 +0300
URL: https://github.com/rspamd/rspamd/commit/57dac6a925c55f79687fe82c8b5ac7a6e244b8f5
[WebUI] Load modules dynamically
---
interface/js/app/config.js | 32 +++++++++--------
interface/js/app/graph.js | 20 +++++------
interface/js/app/history.js | 48 ++++++++++++-------------
interface/js/app/rspamd.js | 83 +++++++++++++++++++++----------------------
interface/js/app/selectors.js | 38 ++++++++++----------
interface/js/app/stats.js | 12 +++----
interface/js/app/symbols.js | 24 ++++++-------
interface/js/app/upload.js | 46 +++++++++++++-----------
interface/js/main.js | 16 ++++-----
9 files changed, 161 insertions(+), 158 deletions(-)
diff --git a/interface/js/app/config.js b/interface/js/app/config.js
index 71a59a34b..df912eeea 100644
--- a/interface/js/app/config.js
+++ b/interface/js/app/config.js
@@ -22,12 +22,14 @@
THE SOFTWARE.
*/
-define(["jquery", "codejar", "linenumbers", "prism"],
- function ($, CodeJar, withLineNumbers, Prism) {
+/* global require */
+
+define(["jquery", "app/rspamd"],
+ function ($, rspamd) {
"use strict";
var ui = {};
- ui.getActions = function getActions(rspamd, checked_server) {
+ ui.getActions = function getActions(checked_server) {
rspamd.query("actions", {
success: function (data) {
$("#actionsFormField").empty();
@@ -63,7 +65,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
});
};
- ui.saveActions = function (rspamd, server) {
+ ui.saveActions = function (server) {
function descending(arr) {
var desc = true;
var filtered = arr.filter(function (el) {
@@ -113,7 +115,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
}
};
- ui.getMaps = function (rspamd, checked_server) {
+ ui.getMaps = function (checked_server) {
var $listmaps = $("#listMaps");
$listmaps.closest(".card").hide();
rspamd.query("maps", {
@@ -142,7 +144,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
});
};
- ui.setup = function (rspamd) {
+ (() => {
var jar = {};
const editor = {
advanced: {
@@ -175,11 +177,13 @@ define(["jquery", "codejar", "linenumbers", "prism"],
"</" + editor[mode].elt + ">").appendTo("#modalBody");
if (editor[mode].codejar) {
- jar = new CodeJar(
- document.querySelector("#editor"),
- withLineNumbers((el) => Prism.highlightElement(el))
- );
- jar.updateCode(data[0].data);
+ require(["codejar", "linenumbers", "prism"], function (CodeJar, withLineNumbers, Prism) {
+ jar = new CodeJar(
+ document.querySelector("#editor"),
+ withLineNumbers((el) => Prism.highlightElement(el))
+ );
+ jar.updateCode(data[0].data);
+ });
} else {
document.querySelector("#editor").innerHTML = rspamd.escapeHTML(data[0].data);
}
@@ -212,10 +216,10 @@ define(["jquery", "codejar", "linenumbers", "prism"],
});
$("#saveActionsBtn").on("click", function () {
- ui.saveActions(rspamd);
+ ui.saveActions();
});
$("#saveActionsClusterBtn").on("click", function () {
- ui.saveActions(rspamd, "All SERVERS");
+ ui.saveActions("All SERVERS");
});
function saveMap(server) {
@@ -242,7 +246,7 @@ define(["jquery", "codejar", "linenumbers", "prism"],
$("#modalSaveAll").on("click", function () {
saveMap("All SERVERS");
});
- };
+ })();
return ui;
});
diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index 16fb338a2..e55214c95 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -23,10 +23,10 @@
THE SOFTWARE.
*/
-/* global d3, FooTable */
+/* global FooTable */
-define(["jquery", "d3evolution", "d3pie", "footable"],
- function ($, D3Evolution, D3Pie) {
+define(["jquery", "app/rspamd", "d3evolution", "d3pie", "d3", "footable"],
+ function ($, rspamd, D3Evolution, D3Pie, d3) {
"use strict";
var rrd_pie_config = {
@@ -59,7 +59,7 @@ define(["jquery", "d3evolution", "d3pie", "footable"],
var ui = {};
var prevUnit = "msg/s";
- ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
+ ui.draw = function (graphs, neighbours, checked_server, type) {
var graph_options = {
title: "Rspamd throughput",
width: 1060,
@@ -126,7 +126,7 @@ define(["jquery", "d3evolution", "d3pie", "footable"],
}
function initSummaryTable(rows, unit) {
- tables.rrd_summary = FooTable.init("#rrd-table", {
+ rspamd.tables.rrd_summary = FooTable.init("#rrd-table", {
sorting: {
enabled: true
},
@@ -152,8 +152,8 @@ define(["jquery", "d3evolution", "d3pie", "footable"],
}
function drawRrdTable(rows, unit) {
- if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
- $.each(tables.rrd_summary.rows.all, function (i, row) {
+ if (Object.prototype.hasOwnProperty.call(rspamd.tables, "rrd_summary")) {
+ $.each(rspamd.tables.rrd_summary.rows.all, function (i, row) {
row.val(rows[i], false, true);
});
} else {
@@ -243,7 +243,7 @@ define(["jquery", "d3evolution", "d3pie", "footable"],
});
};
- ui.setup = function (rspamd) {
+ (() => {
// Handling mouse events on overlapping elements
$("#rrd-pie").mouseover(function () {
$("#rrd-pie,#rrd-pie-tooltip").css("z-index", "200");
@@ -253,9 +253,7 @@ define(["jquery", "d3evolution", "d3pie", "footable"],
$("#rrd-pie,#rrd-pie-tooltip").css("z-index", "0");
$("#rrd-table_toggle").css("z-index", "0");
});
-
- return rspamd.getSelector("selData");
- };
+ })();
return ui;
});
diff --git a/interface/js/app/history.js b/interface/js/app/history.js
index 3770f9457..add8e86bd 100644
--- a/interface/js/app/history.js
+++ b/interface/js/app/history.js
@@ -22,15 +22,15 @@
THE SOFTWARE.
*/
-/* global d3, FooTable */
+/* global FooTable */
-define(["jquery", "footable"],
- function ($) {
+define(["jquery", "app/rspamd", "d3", "footable"],
+ function ($, rspamd, d3) {
"use strict";
var ui = {};
var prevVersion = null;
- function process_history_legacy(rspamd, data) {
+ function process_history_legacy(data) {
var items = [];
var compare = function (e1, e2) {
@@ -41,7 +41,7 @@ define(["jquery", "footable"],
$.each(data, function (i, item) {
item.time = rspamd.unix_time_format(item.unix_time);
- rspamd.preprocess_item(rspamd, item);
+ rspamd.preprocess_item(item);
item.symbols = Object.keys(item.symbols)
.map(function (key) {
return item.symbols[key];
@@ -292,7 +292,7 @@ define(["jquery", "footable"],
legacy: columns_legacy
};
- function process_history_data(rspamd, data) {
+ function process_history_data(data) {
var process_functions = {
2: rspamd.process_history_v2,
legacy: process_history_legacy
@@ -306,7 +306,7 @@ define(["jquery", "footable"],
}
}
- return pf(rspamd, data, "history");
+ return pf(data, "history");
}
function get_history_columns(data) {
@@ -322,7 +322,7 @@ define(["jquery", "footable"],
return func();
}
- ui.getHistory = function (rspamd, tables) {
+ ui.getHistory = function () {
rspamd.query("history", {
success: function (req_data) {
function differentVersions(neighbours_data) {
@@ -355,18 +355,18 @@ define(["jquery", "footable"],
data = [].concat.apply([], neighbours_data);
$("#legacy-history-badge").show();
}
- var o = process_history_data(rspamd, data);
+ var o = process_history_data(data);
var items = o.items;
rspamd.symbols.history = o.symbols;
- if (Object.prototype.hasOwnProperty.call(tables, "history") &&
+ if (Object.prototype.hasOwnProperty.call(rspamd.tables, "history") &&
version === prevVersion) {
- tables.history.rows.load(items);
+ rspamd.tables.history.rows.load(items);
} else {
rspamd.destroyTable("history");
// Is there a way to get an event when the table is destroyed?
setTimeout(function () {
- rspamd.initHistoryTable(rspamd, data, items, "history", get_history_columns(data), false);
+ rspamd.initHistoryTable(data, items, "history", get_history_columns(data), false);
}, 200);
}
prevVersion = version;
@@ -379,14 +379,14 @@ define(["jquery", "footable"],
});
};
- ui.setup = function (rspamd, tables) {
+ (() => {
rspamd.set_page_size("history", $("#history_page_size").val());
rspamd.bindHistoryTableEventHandlers("history", 8);
$("#updateHistory").off("click");
$("#updateHistory").on("click", function (e) {
e.preventDefault();
- ui.getHistory(rspamd, tables);
+ ui.getHistory();
});
// @reset history log
@@ -401,16 +401,16 @@ define(["jquery", "footable"],
rspamd.query("historyreset", {
success: function () {
- ui.getHistory(rspamd, tables);
- ui.getErrors(rspamd, tables);
+ ui.getHistory();
+ ui.getErrors();
},
errorMessage: "Cannot reset history log"
});
});
- };
+ })();
- function initErrorsTable(rspamd, tables, rows) {
- tables.errors = FooTable.init("#errorsLog", {
+ function initErrorsTable(rows) {
+ rspamd.tables.errors = FooTable.init("#errorsLog", {
columns: [
{
sorted: true,
@@ -443,7 +443,7 @@ define(["jquery", "footable"],
});
}
- ui.getErrors = function (rspamd, tables) {
+ ui.getErrors = function () {
if (rspamd.read_only) return;
rspamd.query("errors", {
@@ -464,10 +464,10 @@ define(["jquery", "footable"],
}
};
});
- if (Object.prototype.hasOwnProperty.call(tables, "errors")) {
- tables.errors.rows.load(rows);
+ if (Object.prototype.hasOwnProperty.call(rspamd.tables, "errors")) {
+ rspamd.tables.errors.rows.load(rows);
} else {
- initErrorsTable(rspamd, tables, rows);
+ initErrorsTable(rows);
}
}
});
@@ -475,7 +475,7 @@ define(["jquery", "footable"],
$("#updateErrors").off("click");
$("#updateErrors").on("click", function (e) {
e.preventDefault();
- ui.getErrors(rspamd, tables);
+ ui.getErrors();
});
};
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js
index 634dfcd1d..2f1f66394 100644
--- a/interface/js/app/rspamd.js
+++ b/interface/js/app/rspamd.js
@@ -23,13 +23,11 @@
THE SOFTWARE.
*/
-/* global jQuery, FooTable, Visibility */
+/* global jQuery, FooTable, require, Visibility */
-define(["jquery", "visibility", "nprogress", "stickytabs", "app/stats", "app/graph", "app/config",
- "app/symbols", "app/history", "app/upload", "app/selectors"],
-// eslint-disable-next-line max-params
-function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
- tab_symbols, tab_history, tab_upload, tab_selectors) {
+define(["jquery", "nprogress", "stickytabs", "visibility",
+ "bootstrap", "fontawesome"],
+function ($, NProgress) {
"use strict";
var ui = {
chartLegend: [
@@ -62,7 +60,6 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
let pageSizeTimerId = null;
let pageSizeInvocationCounter = 0;
var locale = (localStorage.getItem("selected_locale") === "custom") ? localStorage.getItem("custom_locale") : null;
- var selData = null; // Graph's dataset selector state
NProgress.configure({
minimum: 0.01,
@@ -111,6 +108,12 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
ui.connect();
}
+ // Get selectors' current state
+ function getSelector(id) {
+ var e = document.getElementById(id);
+ return e.options[e.selectedIndex].value;
+ }
+
function tabClick(id) {
var tab_id = id;
if ($(id).attr("disabled")) return;
@@ -164,19 +167,20 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
switch (tab_id) {
case "#status_nav":
- (function () {
+ require(["app/stats"], (module) => {
var refreshInterval = $(".dropdown-menu a.active.preset").data("value");
setAutoRefresh(refreshInterval, "status",
- function () { return tab_stat.statWidgets(ui, graphs, checked_server); });
- if (id !== "#autoRefresh") tab_stat.statWidgets(ui, graphs, checked_server);
+ function () { return module.statWidgets(graphs, checked_server); });
+ if (id !== "#autoRefresh") module.statWidgets(graphs, checked_server);
$(".preset").show();
$(".history").hide();
$(".dynamic").hide();
- }());
+ });
break;
case "#throughput_nav":
- (function () {
+ require(["app/graph"], (module) => {
+ const selData = getSelector("selData"); // Graph's dataset selector state
var step = {
day: 60000,
week: 300000
@@ -188,26 +192,34 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
refreshInterval = null;
}
setAutoRefresh(refreshInterval, "throughput",
- function () { return tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData); });
- if (id !== "#autoRefresh") tab_graph.draw(ui, graphs, tables, neighbours, checked_server, selData);
+ function () { return module.draw(graphs, neighbours, checked_server, selData); });
+ if (id !== "#autoRefresh") module.draw(graphs, neighbours, checked_server, selData);
$(".preset").hide();
$(".history").hide();
$(".dynamic").show();
- }());
+ });
break;
case "#configuration_nav":
- tab_config.getActions(ui, checked_server);
- tab_config.getMaps(ui, checked_server);
+ require(["app/config"], (module) => {
+ module.getActions(checked_server);
+ module.getMaps(checked_server);
+ });
break;
case "#symbols_nav":
- tab_symbols.getSymbols(ui, tables, checked_server);
+ require(["app/symbols"], (module) => module.getSymbols(checked_server));
+ break;
+ case "#scan_nav":
+ require(["app/upload"]);
+ break;
+ case "#selectors_nav":
+ require(["app/selectors"], (module) => module.displayUI());
break;
case "#history_nav":
- (function () {
+ require(["app/history"], (module) => {
function getHistoryAndErrors() {
- tab_history.getHistory(ui, tables);
- tab_history.getErrors(ui, tables);
+ module.getHistory();
+ module.getErrors();
}
var refreshInterval = $(".dropdown-menu a.active.history").data("value");
setAutoRefresh(refreshInterval, "history",
@@ -217,7 +229,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
$(".preset").hide();
$(".history").show();
$(".dynamic").hide();
- }());
+ });
break;
case "#disconnect":
disconnect();
@@ -237,12 +249,6 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
return sessionStorage.getItem("Password");
}
- // Get selectors' current state
- function getSelector(id) {
- var e = document.getElementById(id);
- return e.options[e.selectedIndex].value;
- }
-
function get_compare_function(table) {
var compare_functions = {
magnitude: function (e1, e2) {
@@ -319,7 +325,6 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
$('#selSrv [value="' + e.name + '"]').prop("disabled", true);
}
});
- if (!ui.read_only) tab_selectors.displayUI(ui);
},
complete: function () {
ajaxSetup(localStorage.getItem("ajax_timeout"));
@@ -434,7 +439,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
// Public functions
ui.alertMessage = alertMessage;
- ui.setup = function () {
+ (() => {
(function initSettings() {
var selected_locale = null;
var custom_locale = null;
@@ -529,7 +534,6 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
}());
$("#selData").change(function () {
- selData = this.value;
tabClick("#throughput_nav");
});
@@ -576,15 +580,9 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
tabClick("#status_nav");
}
});
- tab_config.setup(ui);
- tab_history.setup(ui, tables);
- tab_selectors.setup(ui);
- tab_symbols.setup(ui, tables);
- tab_upload.setup(ui, tables);
- selData = tab_graph.setup(ui);
$("#loading").addClass("d-none");
- };
+ })();
ui.connect = function () {
// Prevent locking out of the WebUI if timeout is too low.
@@ -749,6 +747,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
// Scan and History shared functions
+ ui.tables = tables;
ui.unix_time_format = unix_time_format;
ui.set_page_size = set_page_size;
@@ -782,7 +781,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
};
- ui.initHistoryTable = function (rspamd, data, items, table, columns, expandFirst) {
+ ui.initHistoryTable = function (data, items, table, columns, expandFirst) {
/* eslint-disable no-underscore-dangle */
FooTable.Cell.extend("collapse", function () {
// call the original method
@@ -911,7 +910,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
});
};
- ui.preprocess_item = function (rspamd, item) {
+ ui.preprocess_item = function (item) {
function escape_HTML_array(arr) {
arr.forEach(function (d, i) { arr[i] = ui.escapeHTML(d); });
}
@@ -968,7 +967,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
};
};
- ui.process_history_v2 = function (rspamd, data, table) {
+ ui.process_history_v2 = function (data, table) {
// Display no more than rcpt_lim recipients
var rcpt_lim = 3;
var items = [];
@@ -1014,7 +1013,7 @@ function ($, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_config,
return null;
}
- rspamd.preprocess_item(rspamd, item);
+ ui.preprocess_item(item);
Object.values(item.symbols).forEach(function (sym) {
sym.str = '<span class="symbol-default ' + get_symbol_class(sym.name, sym.score) + '"><strong>';
diff --git a/interface/js/app/selectors.js b/interface/js/app/selectors.js
index 8c7e5de76..b47488ad0 100644
--- a/interface/js/app/selectors.js
+++ b/interface/js/app/selectors.js
@@ -1,5 +1,5 @@
-define(["jquery"],
- function ($) {
+define(["jquery", "app/rspamd"],
+ function ($, rspamd) {
"use strict";
var ui = {};
@@ -10,12 +10,12 @@ define(["jquery"],
));
}
- function get_server(rspamd) {
+ function get_server() {
var checked_server = rspamd.getSelector("selSrv");
return (checked_server === "All SERVERS") ? "local" : checked_server;
}
- function checkMsg(rspamd, data) {
+ function checkMsg(data) {
var selector = $("#selectorsSelArea").val();
rspamd.query("plugins/selectors/check_message?selector=" + encodeURIComponent(selector), {
data: data,
@@ -30,17 +30,17 @@ define(["jquery"],
rspamd.alertMessage("alert-error", "Unexpected error processing message");
}
},
- server: get_server(rspamd)
+ server: get_server()
});
}
- function checkSelectors(rspamd) {
+ function checkSelectors() {
function toggle_form_group_class(remove, add) {
$("#selectorsSelArea").removeClass("is-" + remove).addClass("is-" + add);
enable_disable_check_btn();
}
var selector = $("#selectorsSelArea").val();
- if (selector.length) {
+ if (selector.length && !rspamd.read_only ) {
rspamd.query("plugins/selectors/check_selector?selector=" + encodeURIComponent(selector), {
method: "GET",
success: function (json) {
@@ -50,7 +50,7 @@ define(["jquery"],
toggle_form_group_class("valid", "invalid");
}
},
- server: get_server(rspamd)
+ server: get_server()
});
} else {
$("#selectorsSelArea").removeClass("is-valid is-invalid");
@@ -58,7 +58,7 @@ define(["jquery"],
}
}
- function buildLists(rspamd) {
+ function buildLists() {
function build_table_from_json(json, table_id) {
Object.keys(json).forEach(function (key) {
var td = $("<td/>");
@@ -76,7 +76,7 @@ define(["jquery"],
var json = neighbours_status[0].data;
build_table_from_json(json, "#selectorsTable-" + list);
},
- server: get_server(rspamd)
+ server: get_server()
});
}
@@ -84,12 +84,14 @@ define(["jquery"],
getList("transforms");
}
- ui.displayUI = function (rspamd) {
- buildLists(rspamd);
- checkSelectors(rspamd);
+ ui.displayUI = function () {
+ if (!rspamd.read_only &&
+ !$("#selectorsTable-extractors>tbody>tr").length &&
+ !$("#selectorsTable-transforms>tbody>tr").length) buildLists();
+ if (!$("#selectorsSelArea").is(".is-valid, .is-invalid")) checkSelectors();
};
- ui.setup = function (rspamd) {
+ (() => {
function toggleSidebar(side) {
$("#sidebar-" + side).toggleClass("collapsed");
var contentClass = "col-lg-6";
@@ -123,12 +125,12 @@ define(["jquery"],
});
$("#selectorsClean").on("click", function () {
$("#selectorsSelArea").val("");
- checkSelectors(rspamd);
+ checkSelectors();
return false;
});
$("#selectorsChkMsgBtn").on("click", function () {
$("#selectorsResArea").val("");
- checkMsg(rspamd, $("#selectorsMsgArea").val());
+ checkMsg($("#selectorsMsgArea").val());
return false;
});
@@ -136,9 +138,9 @@ define(["jquery"],
enable_disable_check_btn();
});
$("#selectorsSelArea").on("input", function () {
- checkSelectors(rspamd);
+ checkSelectors();
});
- };
+ })();
return ui;
});
diff --git a/interface/js/app/stats.js b/interface/js/app/stats.js
index d023f955e..f2460c816 100644
--- a/interface/js/app/stats.js
+++ b/interface/js/app/stats.js
@@ -22,10 +22,8 @@
THE SOFTWARE.
*/
-/* global d3 */
-
-define(["jquery", "d3pie"],
- function ($, D3Pie) {
+define(["jquery", "app/rspamd", "d3pie", "d3"],
+ function ($, rspamd, D3Pie, d3) {
"use strict";
// @ ms to date
function msToTime(seconds) {
@@ -222,7 +220,7 @@ define(["jquery", "d3pie"],
}
}
- function getChart(rspamd, graphs, checked_server) {
+ function getChart(graphs, checked_server) {
if (!graphs.chart) {
graphs.chart = new D3Pie("chart", {
labels: {
@@ -264,7 +262,7 @@ define(["jquery", "d3pie"],
// Public API
*** OUTPUT TRUNCATED, 257 LINES SKIPPED ***
More information about the Commits
mailing list