30 Jun
2017
30 Jun
'17
1:11 p.m.
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 <lm(a)mathias-kettner.de>
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):