From 3a8ba39abdf6d68a0e2ec9d5c17611e64d4dc022 Mon Sep 17 00:00:00 2001
From: Jennifer Mourek <jennifer.mourek@icinga.com>
Date: Thu, 26 Oct 2017 13:53:25 +0200
Subject: [PATCH] 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
---
 public/js/icinga/events.js | 15 +++++++++++++++
 public/js/icinga/loader.js | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
index 340d652b1..812a6816e 100644
--- a/public/js/icinga/events.js
+++ b/public/js/icinga/events.js
@@ -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() {
diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js
index 4b19ef15d..75289de6d 100644
--- a/public/js/icinga/loader.js
+++ b/public/js/icinga/loader.js
@@ -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;
             }