From be5a9108f99c10b96674dc5fca6dc788d8cecfbc Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 2 Jun 2018 22:23:54 -0700
Subject: [PATCH] Dont refresh server statuses unless the page is active

Reduces the number of polling requests happening on the server by only sending those requests if the user is actively viewing the dashboard.

There was no point in updating the resource usage if no one is viewing it. After 30 seconds away from the window when a user comes back it will update instantenously, otherwise it'll just update after 5 seconds.
---
 package.json                                  |  2 +
 .../components/dashboard/Dashboard.vue        | 43 +++++++++++++++++--
 .../components/dashboard/ServerBox.vue        |  2 +-
 yarn.lock                                     | 14 ++++++
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index d200e145..b78502ee 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "jquery": "^3.3.1",
         "jwt-decode": "^2.2.0",
         "lodash": "^4.17.5",
+        "luxon": "^1.2.1",
         "postcss": "^6.0.21",
         "postcss-import": "^11.1.0",
         "postcss-preset-env": "^3.4.0",
@@ -35,6 +36,7 @@
         "vue": "^2.5.7",
         "vue-axios": "^2.1.1",
         "vue-devtools": "^3.1.9",
+        "vue-feather-icons": "^4.7.1",
         "vue-loader": "^14.2.2",
         "vue-mc": "^0.2.4",
         "vue-router": "^3.0.1",
diff --git a/resources/assets/scripts/components/dashboard/Dashboard.vue b/resources/assets/scripts/components/dashboard/Dashboard.vue
index 6359534c..8f1997fd 100644
--- a/resources/assets/scripts/components/dashboard/Dashboard.vue
+++ b/resources/assets/scripts/components/dashboard/Dashboard.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+    import { DateTime } from 'luxon';
     import { ServerCollection } from '../../models/server';
     import _ from 'lodash';
     import Flash from '../Flash';
@@ -35,6 +36,8 @@
         components: { ServerBox, Flash },
         data: function () {
             return {
+                backgroundedAt: DateTime.local(),
+                documentVisible: true,
                 loading: true,
                 search: '',
                 servers: new ServerCollection,
@@ -46,6 +49,11 @@
          */
         created: function () {
             this.loadServers();
+
+            document.addEventListener('visibilitychange', () => {
+                this.documentVisible = document.visibilityState === 'visible';
+                this._handleDocumentVisibilityChange(this.documentVisible);
+            });
         },
 
         /**
@@ -53,9 +61,7 @@
          * iterate through the visible servers and fetch their resource usage.
          */
         mounted: function () {
-            setInterval(() => {
-                this.servers.each(this.getResourceUse)
-            }, 10000);
+            this._iterateServerResourceUse();
         },
 
         methods: {
@@ -124,6 +130,37 @@
                         console.error(err);
                     });
             },
+
+            /**
+             * Iterates over all of the active servers and gets their resource usage.
+             *
+             * @private
+             */
+            _iterateServerResourceUse: function (initialTimeout = 5000) {
+                window.setTimeout(() => {
+                    if (this.documentVisible) {
+                        return window.setTimeout(this._iterateServerResourceUse(), 5000);
+                    }
+                }, initialTimeout);
+            },
+
+            /**
+             * Handle changes to document visibilty to keep server statuses updated properly.
+             *
+             * @param {Boolean} isVisible
+             * @private
+             */
+            _handleDocumentVisibilityChange: function (isVisible) {
+                if (!isVisible) {
+                    this.backgroundedAt = DateTime.local();
+                    return;
+                }
+
+                // If it has been more than 30 seconds since this window was put into the background
+                // lets go ahead and refresh all of the listed servers so that they have fresh stats.
+                const diff = DateTime.local().diff(this.backgroundedAt, 'seconds');
+                this._iterateServerResourceUse(diff.seconds > 30 ? 1 : 5000);
+            },
         }
     };
 </script>
diff --git a/resources/assets/scripts/components/dashboard/ServerBox.vue b/resources/assets/scripts/components/dashboard/ServerBox.vue
index b422f050..53de4d6e 100644
--- a/resources/assets/scripts/components/dashboard/ServerBox.vue
+++ b/resources/assets/scripts/components/dashboard/ServerBox.vue
@@ -24,7 +24,7 @@
                 </div>
                 <div class="inline-block border border-grey-lighter border-l-0 border-r-0 p-4 flex-1">
                     <span class="font-bold text-xl">{{ memory > 0 ? memory : '&mdash;' }}</span>
-                    <span class="font-light text-sm">Mb</span>
+                    <span class="font-light text-sm">MB</span>
                 </div>
             </div>
             <div class="flex items-center">
diff --git a/yarn.lock b/yarn.lock
index a3725256..e422ce0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -505,6 +505,10 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
+babel-helper-vue-jsx-merge-props@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
@@ -3424,6 +3428,10 @@ lru-cache@^4.0.1, lru-cache@^4.1.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+luxon@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.2.1.tgz#5c4948d141939c2b2820f0c3a99276932245efb1"
+
 macaddress@^0.2.8:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"
@@ -5985,6 +5993,12 @@ vue-devtools@^3.1.9:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/vue-devtools/-/vue-devtools-3.1.9.tgz#283b458c6853f569a987da0092e7c52e8243a436"
 
+vue-feather-icons@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/vue-feather-icons/-/vue-feather-icons-4.7.1.tgz#d8c55fbee7c9ad59689ebbaf07ad1e2f1e5c37da"
+  dependencies:
+    babel-helper-vue-jsx-merge-props "^2.0.2"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"