[checkmk-commits] 4753 Inactive browser windows/tabs are not updated until focused again

Module: check_mk Branch: master Commit: 0309afc0c256986a1a0425fc2032b676cddca8d7 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=0309afc0c25698… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Wed May 31 08:14:19 2017 +0200 4753 Inactive browser windows/tabs are not updated until focused again This change should be a performance improvement to reduce the load of the sites webserver. While a Check_MK GUI page is opened in the browser several parts are updating themselfs in the background, for example sidebar snapins, dashlets and views. A lot of users open several instances of the GUI in different browser tabs (or windows) and leave them inactive in the background. They open different tabs and keep the others in background or even leave their computer running and just lock their user session. In such situation the browser keeps updating the page elements even when no one looks at the information. We have now implemented a mechanism to detect whether or not a page is visible or hidden to the user. In later case the updates are stopped until the user opens the page again, then the updates are immediately done. This change should be seamless for the user in most cases because the updates are immediately done when the user focuses the page again, but it might happen that you see a "grayed out" page for a short time. This grayed out page visualizes that the information is outdated. If you should see this for several seconds there is something wrong. But you can always tell your browser to reload the page which should resolve this. Change-Id: I6a6f2483aa9fb440f52cbf12c2c5f04ae732c4bf --- .werks/4753 | 33 +++++++++++++++++ web/htdocs/check_mk.css | 11 ++++++ web/htdocs/htmllib.py | 1 + web/htdocs/js/checkmk.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++ web/htdocs/js/dashboard.js | 7 ++++ web/htdocs/js/sidebar.js | 7 ++++ 6 files changed, 150 insertions(+) diff --git a/.werks/4753 b/.werks/4753 new file mode 100644 index 0000000..141dc47 --- /dev/null +++ b/.werks/4753 @@ -0,0 +1,33 @@ +Title: Inactive browser windows/tabs are not updated until focused again +Level: 2 +Component: multisite +Compatible: compat +Edition: cre +Version: 1.5.0i1 +Date: 1496242418 +Class: feature + +This change should be a performance improvement to reduce the load of the +sites webserver. + +While a Check_MK GUI page is opened in the browser several parts are updating +themselfs in the background, for example sidebar snapins, dashlets and views. + +A lot of users open several instances of the GUI in different browser tabs +(or windows) and leave them inactive in the background. They open different +tabs and keep the others in background or even leave their computer running +and just lock their user session. + +In such situation the browser keeps updating the page elements even when no +one looks at the information. + +We have now implemented a mechanism to detect whether or not a page is +visible or hidden to the user. In later case the updates are stopped until +the user opens the page again, then the updates are immediately done. + +This change should be seamless for the user in most cases because the updates +are immediately done when the user focuses the page again, but it might happen +that you see a "grayed out" page for a short time. This grayed out page +visualizes that the information is outdated. If you should see this for several +seconds there is something wrong. But you can always tell your browser to +reload the page which should resolve this. diff --git a/web/htdocs/check_mk.css b/web/htdocs/check_mk.css index bfa3ed4..fced2d8 100644 --- a/web/htdocs/check_mk.css +++ b/web/htdocs/check_mk.css @@ -67,6 +67,17 @@ body a, body a:link, body a:visited { color: white; } +body.hidden:after { + content: ""; + background-color: rgba(0, 0, 0, .5); + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + /* Default font size for the complete Multisite GUI */ button, input, td, th, select, textarea { font-size: 9pt; diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index d9c8e79..f5f3cb1 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -2001,6 +2001,7 @@ class html(HTMLGenerator, RequestHandler): json.dumps(self.keybindings)) if self.final_javascript_code: self.javascript(self.final_javascript_code) + self.javascript("initialize_visibility_detection();") self.close_body() self.close_html() diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 1790116..afcbab8 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -1149,6 +1149,13 @@ function stop_reload_timer() function do_reload(url) { + // Reschedule the reload in case the browser window / tab is not visible + // for the user. Retry after short time. + if (!is_window_active()) { + setTimeout(function(){ do_reload(url); }, 250); + return; + } + // Nicht mehr die ganze Seite neu laden, wenn es ein DIV "data_container" gibt. // In dem Fall wird die aktuelle URL aus "window.location.href" geholt, für den Refresh // modifiziert, der Inhalt neu geholt und in das DIV geschrieben. @@ -3705,3 +3712,87 @@ function hide_job_detail_msg() if (msg) msg.parentNode.removeChild(msg); } + +//#. +//# .--Visibility----------------------------------------------------------. +//# | __ ___ _ _ _ _ _ _ | +//# | \ \ / (_)___(_) |__ (_) (_) |_ _ _ | +//# | \ \ / /| / __| | '_ \| | | | __| | | | | +//# | \ V / | \__ \ | |_) | | | | |_| |_| | | +//# | \_/ |_|___/_|_.__/|_|_|_|\__|\__, | | +//# | |___/ | +//# +----------------------------------------------------------------------+ +//# | Code for detecting the visibility of the current browser window/tab | +//# '----------------------------------------------------------------------' + +var g_visibility_detection_enabled = true; + +// Whether or not the current browser window/tab is visible to the user +function is_window_active() +{ + return !has_class(document.body, "hidden"); +} + +function initialize_visibility_detection() +{ + var hidden_attr_name = "hidden"; + + // Standards: + if (hidden_attr_name in document) + document.addEventListener("visibilitychange", on_visibility_change); + else if ((hidden_attr_name = "mozHidden") in document) + document.addEventListener("mozvisibilitychange", on_visibility_change); + else if ((hidden_attr_name = "webkitHidden") in document) + document.addEventListener("webkitvisibilitychange", on_visibility_change); + else if ((hidden_attr_name = "msHidden") in document) + document.addEventListener("msvisibilitychange", on_visibility_change); + + // This feature will not support IE 9 and lower or other incompatible + // browsers. By enabling the code below we could add the support, but + // we need to be sure that these assignments don't conflict with other + // already registered event handlers. + //else if ("onfocusin" in document) { + // // IE 9 and lower: + // document.onfocusin = document.onfocusout = onchange; + //} + //else { + // // All others: + // window.onpageshow = window.onpagehide + // = window.onfocus = window.onblur = onchange; + //} + + window.addEventListener("beforeunload", disable_visibility_detection); + + function disable_visibility_detection(evt) { + g_visibility_detection_enabled = false; + } + + function on_visibility_change(evt) { + var v = "visible", h = "hidden", + evtMap = { + focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h + }; + + if (!g_visibility_detection_enabled) + return; + + remove_class(document.body, "visible"); + remove_class(document.body, "hidden"); + + evt = evt || window.event; + + var new_class; + if (evt.type in evtMap) { + new_class = evtMap[evt.type]; + } else { + new_class = this[hidden_attr_name] ? "hidden" : "visible"; + } + + //console.log([evt.type, new_class, document.hidden, location.href]); + add_class(document.body, new_class); + } + + // set the initial state (but only if browser supports the Page Visibility API) + if (document[hidden_attr_name] !== undefined) + on_visibility_change({type: document[hidden_attr_name] ? "blur" : "focus"}); +} diff --git a/web/htdocs/js/dashboard.js b/web/htdocs/js/dashboard.js index 4b7cb11..658442b 100644 --- a/web/htdocs/js/dashboard.js +++ b/web/htdocs/js/dashboard.js @@ -312,6 +312,13 @@ function calculate_dashboard() { } function dashboard_scheduler(initial) { + // Stop reload of the dashlets in case the browser window / tab is not visible + // for the user. Retry after short time. + if (!is_window_active()) { + setTimeout(function(){ dashboard_scheduler(initial); }, 250); + return; + } + var timestamp = Date.parse(new Date()) / 1000; var newcontent = ""; for(var i = 0; i < refresh_dashlets.length; i++) { diff --git a/web/htdocs/js/sidebar.js b/web/htdocs/js/sidebar.js index eaab460..5882a8c 100644 --- a/web/htdocs/js/sidebar.js +++ b/web/htdocs/js/sidebar.js @@ -694,6 +694,13 @@ function sidebar_scheduler() { else g_seconds_to_update -= 1; + // Stop reload of the snapins in case the browser window / tab is not visible + // for the user. Retry after short time. + if (!is_window_active()) { + setTimeout(function(){ sidebar_scheduler(); }, 250); + return; + } + var newcontent = ""; var to_be_updated = [];