[checkmk-commits] Made graphs.js a module and finalize JS modularization

Module: check_mk Branch: master Commit: dd943ec35158a7c28ef69ae87cc3c8c768974a29 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=dd943ec35158a7… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Fri Dec 21 14:18:18 2018 +0100 Made graphs.js a module and finalize JS modularization * All our JS code is now separated into ES6 modules * The code is now eslint clean * Fixed some minor bugs Next steps could be to refurbish the code itself one day. Change-Id: Ib77dcff09e9c5119e4fe46520aae8d1add06f29a --- cmk/gui/dashboard.py | 4 ++-- cmk/gui/plugins/dashboard/graph.py | 4 ++-- cmk/gui/plugins/sidebar/speedometer.py | 2 +- web/htdocs/js/index.js | 25 ++++++++----------------- web/htdocs/js/{ => modules}/colorpicker.js | 0 web/htdocs/js/modules/dashboard.js | 2 +- web/htdocs/js/modules/utils.js | 8 -------- web/htdocs/js/modules/valuespecs.js | 6 +++--- webpack.config.js | 3 +-- 9 files changed, 18 insertions(+), 36 deletions(-) diff --git a/cmk/gui/dashboard.py b/cmk/gui/dashboard.py index 00caf70..4cbd4c2 100644 --- a/cmk/gui/dashboard.py +++ b/cmk/gui/dashboard.py @@ -738,7 +738,7 @@ def dashboard_edit_controls(name, board): html.open_a( href="edit_dashboard.py?load_name=%s&back=%s" % (name, html.urlencode(html.makeuri( []))), - onmouseover="hide_submenus();") + onmouseover="cmk.dashboard.hide_submenus();") html.img(src="images/trans.png") html.write(_('Properties')) html.close_a() @@ -753,7 +753,7 @@ def dashboard_edit_controls(name, board): html.open_a( href="javascript:void(0)", onclick="cmk.dashboard.toggle_dashboard_edit(false)", - onmouseover="hide_submenus();") + onmouseover="cmk.dashboard.hide_submenus();") html.img(src="images/trans.png") html.write(_('Stop Editing')) html.close_a() diff --git a/cmk/gui/plugins/dashboard/graph.py b/cmk/gui/plugins/dashboard/graph.py index 42c4332..12f3234 100644 --- a/cmk/gui/plugins/dashboard/graph.py +++ b/cmk/gui/plugins/dashboard/graph.py @@ -164,7 +164,7 @@ function dashboard_render_graph(nr, graph_identification, graph_render_options, + "&height=" + c_h + "&id=" + nr; - call_ajax("graph_dashlet.py", { + cmk.ajax.call_ajax("graph_dashlet.py", { post_data : post_data, method : "POST", response_handler : handle_dashboard_render_graph_response, @@ -185,7 +185,7 @@ function handle_dashboard_render_graph_response(handler_data, response_body) var container = document.getElementById('dashlet_graph_' + nr); container.innerHTML = response_body; - executeJSbyObject(container); + cmk.utils.execute_javascript_by_object(container); } function dashboard_render_pnpgraph(nr, img_url) diff --git a/cmk/gui/plugins/sidebar/speedometer.py b/cmk/gui/plugins/sidebar/speedometer.py index c400e03..2b652dc 100644 --- a/cmk/gui/plugins/sidebar/speedometer.py +++ b/cmk/gui/plugins/sidebar/speedometer.py @@ -98,7 +98,7 @@ function speedometer_show_speed(last_perc, program_start, scheduled_rate) "&scheduled_rate=" + scheduled_rate + "&program_start=" + program_start; - call_ajax(url, { + cmk.ajax.call_ajax(url, { response_handler: function(handler_data, response_body) { try { var data = JSON.parse(response_body); diff --git a/web/htdocs/js/index.js b/web/htdocs/js/index.js index a495dd2..4d95182 100644 --- a/web/htdocs/js/index.js +++ b/web/htdocs/js/index.js @@ -51,10 +51,13 @@ import * as reload_pause from "reload_pause"; import * as graph_integration from "graph_integration"; import * as dashboard from "dashboard"; -// TODO: Find a better solution for this CEE specific include +// Optional import is currently not possible using the ES6 imports +var graphs; try { - require("script-loader!../../../enterprise/web/htdocs/js/graphs.js"); -} catch(e) {} // eslint-disable-line no-empty + graphs = require("graphs"); +} catch(e) { + graphs = null; +} $(() => { utils.update_header_timer(); @@ -91,19 +94,7 @@ export default { views: views, reload_pause: reload_pause, graph_integration: graph_integration, + graphs: graphs, dashboard: dashboard - }, - // TODO: Compatibility for not yet modularized JS code - executeJSbyObject: utils.execute_javascript_by_object, - executeJS: utils.execute_javascript_by_id, - getTarget: utils.get_target, - getButton: utils.get_button, - prevent_default_events: utils.prevent_default_events, - has_class: utils.has_class, - remove_class: utils.remove_class, - add_class: utils.add_class, - change_class: utils.change_class, - get_url: ajax.get_url, - post_url: ajax.post_url, - call_ajax: ajax.call_ajax + } }; diff --git a/web/htdocs/js/colorpicker.js b/web/htdocs/js/modules/colorpicker.js similarity index 100% rename from web/htdocs/js/colorpicker.js rename to web/htdocs/js/modules/colorpicker.js diff --git a/web/htdocs/js/modules/dashboard.js b/web/htdocs/js/modules/dashboard.js index d4b4ea1..7a88259 100644 --- a/web/htdocs/js/modules/dashboard.js +++ b/web/htdocs/js/modules/dashboard.js @@ -412,7 +412,7 @@ function toggle_dashboard_menu(show, event) { } } -function hide_submenus() { +export function hide_submenus() { // hide all submenus var subs = document.getElementsByClassName("sub"); for (var i = 0; i < subs.length; i++) diff --git a/web/htdocs/js/modules/utils.js b/web/htdocs/js/modules/utils.js index d9e60e5..875af3d 100644 --- a/web/htdocs/js/modules/utils.js +++ b/web/htdocs/js/modules/utils.js @@ -71,14 +71,6 @@ export function update_contents(id, code) } } -// There may be some javascript code in the html code rendered by -// sidebar.py. Execute it here. This is needed in some browsers. -// TODO: Clean this special case up -export function execute_javascript_by_id(id) -{ - execute_javascript_by_object(document.getElementById(id)); -} - export var current_script = null; export function execute_javascript_by_object(obj) diff --git a/web/htdocs/js/modules/valuespecs.js b/web/htdocs/js/modules/valuespecs.js index b948cb0..4f31d33 100644 --- a/web/htdocs/js/modules/valuespecs.js +++ b/web/htdocs/js/modules/valuespecs.js @@ -575,7 +575,7 @@ export function listofmultiple_del(varprefix, ident) { // Remove it from the list of active elements var active = document.getElementById(varprefix + "_active"); var l = active.value.split(";"); - for (i in l) { + for (i = 0; i < l.length; i++) { if (l[i] == ident) { l.splice(i, 1); break; @@ -590,7 +590,7 @@ function listofmultiple_toggle_fields(root, varprefix, enable) { var types = ["input", "select", "textarea"]; for (var t in types) { var fields = root.getElementsByTagName(types[t]); - for (var i in fields) { + for (var i = 0; i < fields.length; i++) { fields[i].disabled = !enable; } } @@ -604,7 +604,7 @@ export function listofmultiple_init(varprefix) { // Mark input fields of unused elements as disabled var container = document.getElementById(varprefix + "_table"); var unused = document.getElementsByClassName("unused", container); - for (var i in unused) { + for (var i = 0; i < unused.length; i++) { listofmultiple_toggle_fields(unused[i], varprefix, false); } } diff --git a/webpack.config.js b/webpack.config.js index 60929eb..c61c2c4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,8 +22,7 @@ module.exports = { modules: [ "node_modules", path.resolve(__dirname, "web/htdocs/js/modules"), - path.resolve(__dirname, "web/htdocs/js"), - path.resolve(__dirname, "enterprise/web/htdocs/js") + path.resolve(__dirname, "enterprise/web/htdocs/js/modules") ] }, module: {