From ab06ec3af8a3c66180da072a668cccb7e29a2044 Mon Sep 17 00:00:00 2001
From: Tobias Wolf <towolf@gmail.com>
Date: Fri, 17 Mar 2017 01:58:17 +0100
Subject: [PATCH] Disable auto-refresh when page is not visible

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 PR adds a visibility listener, which disables auto-refresh when the
page is not visible.

Fixes #2761
---
 public/js/icinga/events.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/public/js/icinga/events.js b/public/js/icinga/events.js
index 340d652b1..be71b06c1 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.logger.info('Page visible, enabling auto-refresh');
+                icinga.loader.enableAutorefresh()
+            } else {
+                icinga.logger.info('Page invisible, disabling auto-refresh');
+                icinga.loader.disableAutorefresh()
+            }
+        },
+
         /**
          * 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() {