[checkmk-commits] Zooming/panning graphs pauses page updates now

Module: check_mk Branch: master Commit: addabd6ec991f92875d9b11464d68a2d3af67a36 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=addabd6ec991f9… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Wed Mar 2 16:41:45 2016 +0100 Zooming/panning graphs pauses page updates now --- web/htdocs/js/checkmk.js | 101 +++++++++++++++++++++++++++++++++++++++++--- web/htdocs/js/dashboard.js | 4 +- web/htdocs/pages.css | 49 ++++++++++++++++++++- 3 files changed, 145 insertions(+), 9 deletions(-) diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 496659c..ae2ac9f 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -936,8 +936,11 @@ function performAction(oLink, action, site, host, service, wait_svc) { //# | | //# '--------------------------------------------------------------------' -// Stores the reload timer object +// Stores the reload timer object (of views and also dashboards) var g_reload_timer = null; +// Stores the reload pause timer object once the regular reload has +// been paused e.g. by modifying a graphs timerange or vertical axis. +var g_reload_pause_timer = null; // This stores the refresh time of the page (But never 0) var g_reload_interval = 0; // seconds // This flag tells the handle_content_reload_error() function to add an @@ -994,8 +997,7 @@ function update_header_timer() // When called with two parmeters the 2nd one is used as new url. function set_reload(secs, url) { - if (g_reload_timer) - clearTimeout(g_reload_timer); + stop_reload_timer(); update_foot_refresh(secs); @@ -1005,6 +1007,7 @@ function set_reload(secs, url) } } + // Issues the timer for the next page reload. If some timer is already // running, this timer is terminated and replaced by the new one. function schedule_reload(url, milisecs) @@ -1015,14 +1018,14 @@ function schedule_reload(url, milisecs) if (typeof milisecs === 'undefined') milisecs = parseFloat(g_reload_interval) * 1000; // use default reload interval - if (g_reload_timer) - clearTimeout(g_reload_timer); + stop_reload_timer(); g_reload_timer = setTimeout(function() { do_reload(url); }, milisecs); } + function handle_content_reload(_unused, code) { g_reload_error = false; var o = document.getElementById('data_container'); @@ -1035,6 +1038,7 @@ function handle_content_reload(_unused, code) { schedule_reload(); } + function handle_content_reload_error(_unused, status_code, error_msg) { if(!g_reload_error) { @@ -1048,6 +1052,16 @@ function handle_content_reload_error(_unused, status_code, error_msg) schedule_reload(); } + +function stop_reload_timer() +{ + if (g_reload_timer) { + clearTimeout(g_reload_timer); + g_reload_timer = null; + } +} + + function do_reload(url) { // Nicht mehr die ganze Seite neu laden, wenn es ein DIV "data_container" gibt. @@ -1098,11 +1112,86 @@ function do_reload(url) call_ajax(makeuri(params), { response_handler : handle_content_reload, error_handler : handle_content_reload_error, - method : 'POST' + method : 'GET' }); } } + +// Sets the reload timer in pause mode for X seconds. This is shown to +// the user with a pause overlay icon. The icon also shows the time when +// the pause ends. Once the user clicks on the pause icon or the time +// is reached, the whole page is reloaded. +function pause_reload(seconds) +{ + stop_reload_timer(); + draw_reload_pause_overlay(seconds); + set_reload_pause_timer(seconds); +} + + +function set_reload_pause_timer(seconds) +{ + if (g_reload_pause_timer) + clearTimeout(g_reload_pause_timer); + + g_reload_pause_timer = setTimeout(function () { + update_reload_pause_timer(seconds); + }, 1000); +} + + +function update_reload_pause_timer(seconds_left) +{ + seconds_left -= 1; + + if (seconds_left <= 0) { + window.location.reload(false); + } + else { + // update the pause counter + var counter = document.getElementById("reload_pause_counter"); + if (counter) { + counter.innerHTML = seconds_left; + } + + g_reload_pause_timer = setTimeout(function() { + update_reload_pause_timer(seconds_left); + }, 1000); + } +} + +function draw_reload_pause_overlay(seconds) +{ + var container = document.getElementById("reload_pause"); + if (container) { + // only render once. Just update the counter. + var counter = document.getElementById("reload_pause_counter"); + counter.innerHTML = seconds; + return; + } + + var container = document.createElement("a"); + container.setAttribute("id", "reload_pause"); + container.href = "javascript:window.location.reload(false)"; + // FIXME: Localize + container.title = "Page update paused. Click for reload."; + + var p1 = document.createElement("div"); + p1.className = "pause_bar p1"; + container.appendChild(p1); + + var p2 = document.createElement("div"); + p2.className = "pause_bar p2"; + container.appendChild(p2); + + var counter = document.createElement("div"); + counter.setAttribute("id", "reload_pause_counter"); + container.appendChild(counter); + + document.body.appendChild(container); +} + //#. //# .-Foldable Container-------------------------------------------------. //# | _____ _ _ _ _ ____ _ | diff --git a/web/htdocs/js/dashboard.js b/web/htdocs/js/dashboard.js index 90557af..33f85a9 100644 --- a/web/htdocs/js/dashboard.js +++ b/web/htdocs/js/dashboard.js @@ -343,7 +343,9 @@ function dashboard_scheduler(initial) { if (timestamp % 60 == 0) update_header_timer(); - setTimeout(function() { dashboard_scheduler(0); }, 1000); + g_reload_timer = setTimeout(function() { + dashboard_scheduler(0); + }, 1000); } function dashboard_update_contents(id, response_text) { diff --git a/web/htdocs/pages.css b/web/htdocs/pages.css index f4b9fba..e56dd60 100644 --- a/web/htdocs/pages.css +++ b/web/htdocs/pages.css @@ -194,6 +194,51 @@ div#foot_refresh, div#foot_refresh_time { display: inline-block; } +#reload_pause { + display: block; + position: fixed; + right: 20px; + top: 20px; + width: 90px; + height: 90px; + background-color: #111; + opacity: 0.8; + filter: alpha(opacity=80); /* For IE8 and earlier */ + border-radius: 5px; + padding: 10px; + text-decoration: none; +} + +.pause_bar { + display: inline-block; + width: 20px; + height: 60px; + margin-top: 5px; + margin-bottom: 5px; + background-color: #fff; + opacity: 0.9; + filter: alpha(opacity=90); /* For IE8 and earlier */ + border-radius: 5px; +} + +.pause_bar.p1 { + margin-left: 20px; + margin-right: 5px; +} + +.pause_bar.p2 { + margin-left: 5px; + margin-right: 10px; +} + +#reload_pause_counter { + font-weight: bold; + color: #fff; + width: 100%; + text-align: center; + font-size: 120%; +} + /*-------------------------------------------------------------------------. | ____ _ _ _ _ _ | @@ -506,7 +551,7 @@ tr.groupheader a:hover { /* state in group header must have fixed width */ .groupheader td.state { border: 1px solid #000000; - border-radius: 5px 5px 5px 5px; + border-radius: 5px; box-shadow: 1px 1px 2px #444444; padding: 2px 5px; width: 50px; @@ -974,7 +1019,7 @@ a#helpbutton.passive { div.help { background-image: url("images/helpbackground.jpg"); background-color: #FFFFCC; - border-radius: 5px 5px 5px 5px; + border-radius: 5px; box-shadow: 0 0 10px #fff; margin: 6px 3px 10px 3px; padding: 5px;