Module: check_mk Branch: master Commit: c1be1f71079047ce794fe0b6066426716cefe814 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=c1be1f71079047… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Fri Jun 30 15:03:38 2017 +0200 4929 FIX Improved responsiveness of the GUI while loading hover graphs Change-Id: I6f4699b7fcea1d6845e27c3eeac8e7d2ed8d9df8 --- .werks/4929 | 10 ++++++ web/htdocs/check_mk.css | 3 +- web/htdocs/js/checkmk.js | 81 +++++++++++++++++++++++++++++++++----------- web/plugins/icons/builtin.py | 19 +++++++---- 4 files changed, 87 insertions(+), 26 deletions(-) diff --git a/.werks/4929 b/.werks/4929 new file mode 100644 index 0000000..e1b3df4 --- /dev/null +++ b/.werks/4929 @@ -0,0 +1,10 @@ +Title: Improved responsiveness of the GUI while loading hover graphs +Level: 1 +Component: multisite +Compatible: compat +Edition: cre +Version: 1.5.0i1 +Date: 1498827788 +Class: fix + + diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css index d964b18..b58abfd 100644 --- a/web/htdocs/check_mk.css +++ b/web/htdocs/check_mk.css @@ -739,7 +739,8 @@ div#hover_menu { color: #000; } -div#hover_menu div.error { +div#hover_menu div.error, +div#hover_menu div.message { width:350px; margin: 0; } diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 0fc4d75..24eef6f 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -847,7 +847,8 @@ function create_pnp_graph(data, params) { urlvars = null; } -function render_pnp_graphs(container, site, host, service, pnpview, base_url, pnp_url, with_link, add_txt, from_ts, to_ts) { +function render_pnp_graphs(container, site, host, service, pnpview, base_url, pnp_url, with_link, add_txt, from_ts, to_ts) +{ from_ts = (typeof from_ts === 'undefined') ? null : from_ts; to_ts = (typeof to_ts === 'undefined') ? null : to_ts; @@ -867,37 +868,81 @@ function render_pnp_graphs(container, site, host, service, pnpview, base_url, pn get_url(url, pnp_response_handler, data, pnp_error_response_handler, false); } -function hover_graph(site, host_name, service) +function show_hover_graphs(event, site_id, host_name, service_description, pnp_popup_url, force_pnp_graphing) +{ + var event = event || window.event; + + show_hover_menu(event, "<div class=\"message\">Loading...</div>"); + + if (force_pnp_graphing) + show_pnp_hover_graphs(pnp_popup_url); + else + show_check_mk_hover_graphs(site_id, host_name, service_description); + + return prevent_default_events(event); +} + +function show_check_mk_hover_graphs(site_id, host_name, service) { - var c = get_url_sync('host_service_graph_popup.py?site='+encodeURIComponent(site) - +'&host_name='+encodeURIComponent(host_name) - +'&service='+encodeURIComponent(service)); + var url = 'host_service_graph_popup.py?site='+encodeURIComponent(site_id) + +'&host_name='+encodeURIComponent(host_name) + +'&service='+encodeURIComponent(service); - if (c.indexOf('pnp4nagios') !== -1) { - // fallback to pnp graph handling (received an URL by the get_url_sync()) - return fetch_pnp_hover_contents(c); + call_ajax(url, { + response_handler : handle_check_mk_hover_graphs_response, + error_handler : handle_hover_graphs_error, + method : 'GET' + }); +} + +function show_pnp_hover_graphs(url) +{ + call_ajax(url, { + response_handler : handle_pnp_hover_graphs_response, + error_handler : handle_hover_graphs_error, + method : 'GET' + }); +} + +function handle_check_mk_hover_graphs_response(_unused, code) +{ + if (code.indexOf('pnp4nagios') !== -1) { + // fallback to pnp graph handling (received an URL with the previous ajax call) + show_pnp_hover_graphs(code); + return; } - return c; + g_hover_menu.innerHTML = code; + executeJSbyObject(g_hover_menu); } -function fetch_pnp_hover_contents(url) + +function handle_pnp_hover_graphs_response(_unused, code) { - var c = get_url_sync(url); + // In case of PNP hover graph handling: // It is possible that, if using multisite based authentication, pnp sends a 302 redirect // to the login page which is transparently followed by XmlHttpRequest. There is no chance // to catch the redirect. So we try to check the response content. If it does not contain // the expected code, simply display an error message. - if (c.indexOf('/image?') === -1) { + if (code.indexOf('/image?') === -1) { // Error! unexpected response - c = '<div class="error"> ' - + 'ERROR: Received an unexpected response ' - + 'while trying to display the PNP-Graphs. Maybe there is a problem with the ' - + 'authentication.</div>'; + code = '<div class="error"> ' + + 'ERROR: Received an unexpected response ' + + 'while trying to display the PNP Graphs. Maybe there is a problem with the ' + + 'authentication.</div>'; } - return c; + + g_hover_menu.innerHTML = code; + executeJSbyObject(g_hover_menu); +} + + +function handle_hover_graphs_error(_unused, status_code, error_msg) +{ + g_hover_menu.innerHTML = '<div class=error>Update failed (' + status_code + ')</div>'; } + //#. //# .-Reschedule---------------------------------------------------------. //# | ____ _ _ _ | @@ -3160,8 +3205,6 @@ function show_hover_menu(event, code) // out of sight if (hoverTop +g_hover_menu.clientHeight > pageHeight() && hoverTop -g_hover_menu.clientHeight >= 0) g_hover_menu.style.top = hoverTop -g_hover_menu.clientHeight - hoverSpacer + 'px'; - - return false; } function hover_menu_in_screen(hoverMenu, hoverSpacer) diff --git a/web/plugins/icons/builtin.py b/web/plugins/icons/builtin.py index a4f11ba..5ec70cd 100644 --- a/web/plugins/icons/builtin.py +++ b/web/plugins/icons/builtin.py @@ -360,7 +360,7 @@ def pnp_icon(row, what): if not metrics.cmk_graphs_possible(row["site"]): # Directly ask PNP for all data, don't try to use the new graph fetching mechanism # to keep the number of single requests low - hover_content_func = 'fetch_pnp_hover_contents(\'%s\')' % pnp_popup_url(row, what) + force_pnp_graphing = True else: # Don't show the icon with Check_MK graphing. The hover makes no sense and there is no # mobile view for graphs, so the graphs on the bottom of the host/service view are enough @@ -368,11 +368,18 @@ def pnp_icon(row, what): if html.is_mobile(): return - hover_content_func = 'hover_graph(\'%s\', \'%s\', \'%s\')' % \ - (row['site'], row['host_name'], row.get('service_description', '_HOST_').replace("\\", "\\\\")) - - return '<a href="%s" onmouseover="show_hover_menu(event, %s)" ' \ - 'onmouseout="hide_hover_menu()">%s</a>' % (url, hover_content_func, html.render_icon('pnp', '')) + force_pnp_graphing = False + + return html.render_a(content=html.render_icon('pnp', ''), href=url, + onmouseout="hide_hover_menu()", + onmouseover="show_hover_graphs(event, %s, %s, %s, %s, %s);" % ( + json.dumps(row['site']), + json.dumps(row["host_name"]), + json.dumps(row.get('service_description', '_HOST_')), + json.dumps(pnp_popup_url(row, what)), + json.dumps(force_pnp_graphing) + ) + ) def paint_pnp_graph(what, row, tags, host_custom_vars):