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.

Author: DaneEveritt

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",

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,16 +49,19 @@
          */
         created: function () {
             this.loadServers();
+
+            document.addEventListener('visibilitychange', () => {
+                this.documentVisible = document.visibilityState === 'visible';
+                this._handleDocumentVisibilityChange(this.documentVisible);
+            });
         },
 
         /**
          * Once the page is mounted set a function to run every 5 seconds that will
          * 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>

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">

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"