Disable auto-refresh when page is not visible

credits to @towolf

Icinga offers the user to enable or disable 'auto-refresh' with a
static preference.

But 'auto-refresh' is the default and our users often have dozens of
Icinga tabs open in their browser, which they are not looking at.

The background tabs lead to significant load on the database to to
repeated queries to keep the invisible UI fresh.

This change adds a visibility listener, which disables auto-refresh when the
page is not visible.

refs #2761
This commit is contained in:
Jennifer Mourek 2017-10-26 13:53:25 +02:00
parent 73e24302c0
commit 3a8ba39abd
2 changed files with 24 additions and 1 deletions

View File

@ -105,6 +105,8 @@
// Note: It is important that this is the first handler for this event!
$(document).on('rendered', { self: this }, this.applyHandlers);
$(document).on('visibilitychange', { self: this }, this.onVisibilityChange);
$.each(this.icinga.behaviors, function (name, behavior) {
behavior.bind($(document));
});
@ -172,6 +174,18 @@
icinga.destroy();
},
onVisibilityChange: function (event) {
var icinga = event.data.self.icinga;
if (document.visibilityState === undefined || document.visibilityState === 'visible') {
icinga.loader.autorefreshSuspended = false;
icinga.logger.debug('Page visible, enabling auto-refresh');
} else {
icinga.loader.autorefreshSuspended = true;
icinga.logger.debug('Page invisible, disabling auto-refresh');
}
},
/**
* A scroll event happened in one of our containers
*/
@ -610,6 +624,7 @@
$(document).off('change', 'form input.autosubmit', this.submitForm);
$(document).off('focus', 'form select[data-related-radiobtn]', this.autoCheckRadioButton);
$(document).off('focus', 'form input[data-related-radiobtn]', this.autoCheckRadioButton);
$(document).off('visibilitychange', this.onVisibilityChange);
},
destroy: function() {

View File

@ -30,7 +30,15 @@
this.iconCache = {};
/**
* Whether auto-refresh is enabled
*/
this.autorefreshEnabled = true;
/**
* Whether auto-refresh is suspended due to visibility of page
*/
this.autorefreshSuspended = false;
};
Icinga.Loader.prototype = {
@ -209,7 +217,7 @@
autorefresh: function () {
var _this = this;
if (_this.autorefreshEnabled !== true) {
if (! _this.autorefreshEnabled || _this.autorefreshSuspended) {
return;
}