Significantly less atrocious resource checking for servers...

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -28,9 +28,7 @@
 </template>
 
 <script>
-    import Server from '../../models/server';
     import debounce from 'lodash/debounce';
-    import differenceInSeconds from 'date-fns/difference_in_seconds';
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
     import Navigation from '../core/Navigation';
@@ -56,11 +54,6 @@
             if (this.servers.length === 0) {
                 this.loadServers();
             }
-
-            document.addEventListener('visibilitychange', () => {
-                this.documentVisible = document.visibilityState === 'visible';
-                this._handleDocumentVisibilityChange(this.documentVisible);
-            });
         },
 
         /**
@@ -69,10 +62,6 @@
          */
         mounted: function () {
             this.$refs.search.focus();
-            
-            window.setTimeout(() => {
-                this._iterateServerResourceUse();
-            }, 5000);
         },
 
         computed: {
@@ -123,66 +112,6 @@
             onChange: debounce(function () {
                 this.loadServers();
             }, 500),
-
-            /**
-             * Get resource usage for an individual server for rendering purposes.
-             *
-             * @param {Server} server
-             */
-            getResourceUse: function (server) {
-                window.axios.get(this.route('api.client.servers.resources', { server: server.identifier }))
-                    .then(response => {
-                        if (!(response.data instanceof Object)) {
-                            throw new Error('Received an invalid response object back from status endpoint.');
-                        }
-
-                        window.events.$emit(`server:${server.uuid}::resources`, response.data.attributes);
-                    });
-            },
-
-            /**
-             * Iterates over all of the active servers and gets their resource usage.
-             *
-             * @private
-             */
-            _iterateServerResourceUse: function (loop = true) {
-                // Try again in 10 seconds, window is not in the foreground.
-                if (!this.documentVisible && loop) {
-                    window.setTimeout(() => {
-                        this._iterateServerResourceUse();
-                    }, 10000);
-                }
-
-                this.servers.forEach(server => {
-                    this.getResourceUse(server);
-                });
-
-                if (loop) {
-                    window.setTimeout(() => {
-                        this._iterateServerResourceUse();
-                    }, 10000);
-                }
-            },
-
-            /**
-             * Handle changes to document visibilty to keep server statuses updated properly.
-             *
-             * @param {Boolean} isVisible
-             * @private
-             */
-            _handleDocumentVisibilityChange: function (isVisible) {
-                if (!isVisible) {
-                    this.backgroundedAt = new Date();
-                    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 = differenceInSeconds(new Date(), this.backgroundedAt);
-                if (diff > 30) {
-                    this._iterateServerResourceUse(false);
-                }
-            },
         }
     };
 </script>

resources/assets/scripts/components/dashboard/ServerBox.vue

@@ -39,6 +39,7 @@
 
 <script>
     import get from 'lodash/get';
+    import differenceInSeconds from 'date-fns/difference_in_seconds';
 
     export default {
         name: 'server-box',
@@ -46,8 +47,12 @@
             server: { type: Object, required: true },
         },
 
+        dataGetTimeout: null,
+
         data: function () {
             return {
+                backgroundedAt: new Date(),
+                documentVisible: true,
                 resources: undefined,
                 cpu: 0,
                 memory: 0,
@@ -55,20 +60,86 @@
             };
         },
 
-        created: function () {
+        watch: {
-            window.events.$on(`server:${this.server.uuid}::resources`, data => {
+            /**
-                this.resources = data;
+             * Watch the documentVisible item and perform actions when it is changed. If it becomes
-                this.status = this.getServerStatus();
+             * true, we want to check how long ago the last poll was, if it was more than 30 seconds
+             * we want to immediately trigger the resourceUse api call, otherwise we just want to restart
+             * the time.
+             *
+             * If it is now false, we want to clear the timer that checks resource use, since we know
+             * we won't be doing anything with them anyways. Might as well avoid extraneous resource
+             * usage by the browser.
+             */
+            documentVisible: function (value) {
+                if (!value) {
+                    window.clearTimeout(this.$options.dataGetTimeout);
+                    return;
+                }
 
-                this.memory = Number(get(data, 'memory.current', 0)).toFixed(0);
+                if (differenceInSeconds(new Date(), this.backgroundedAt) >= 30) {
-                this.cpu = this._calculateCpu(
+                    this.getResourceUse();
-                    Number(get(data, 'cpu.current', 0)),
+                }
-                    Number(this.server.limits.cpu)
+
-                );
+                this.$options.dataGetTimeout = window.setInterval(() => {
-            });
+                    this.getResourceUse();
+                }, 10000);
+            },
+        },
+
+        /**
+         * Grab the initial resource usage for this specific server instance and add a listener
+         * to monitor when this window is no longer visible. We don't want to needlessly poll the
+         * API when we aren't looking at the page.
+         */
+        created: function () {
+            this.getResourceUse();
+            document.addEventListener('visibilitychange', this._visibilityChange.bind(this));
+        },
+
+        /**
+         * Poll the API for changes every 10 seconds when the component is mounted.
+         */
+        mounted: function () {
+            this.$options.dataGetTimeout = window.setInterval(() => {
+                this.getResourceUse();
+            }, 10000);
+        },
+
+        /**
+         * Clear the timer and event listeners when we destroy the component.
+         */
+        beforeDestroy: function () {
+            window.clearInterval(this.$options.dataGetTimeout);
+            document.removeEventListener('visibilitychange', this._visibilityChange.bind(this), false);
         },
 
         methods: {
+            /**
+             * Query the resource API to determine what this server's state and resource usage is.
+             */
+            getResourceUse: function () {
+                window.axios.get(this.route('api.client.servers.resources', { server: this.server.identifier }))
+                    .then(response => {
+                        if (!(response.data instanceof Object)) {
+                            throw new Error('Received an invalid response object back from status endpoint.');
+                        }
+
+
+                        this.resources = response.data.attributes;
+                        this.status = this.getServerStatus();
+
+                        this.memory = Number(get(this.resources, 'memory.current', 0)).toFixed(0);
+                        this.cpu = this._calculateCpu(
+                            Number(get(this.resources, 'cpu.current', 0)),
+                            Number(this.server.limits.cpu)
+                        );
+                    })
+                    .catch(err => {
+                        console.error({ err });
+                    });
+            },
+
             /**
              * Set the CSS to use for displaying the server's current status.
              */
@@ -107,7 +178,20 @@
                 }
 
                 return parseFloat((current / max * 100).toFixed(1));
-            }
+            },
+
+            /**
+             * Handle document visibility changes.
+             *
+             * @private
+             */
+            _visibilityChange: function () {
+                this.documentVisible = document.visibilityState === 'visible';
+
+                if (!this.documentVisible) {
+                    this.backgroundedAt = new Date();
+                }
+            },
         }
     };
 </script>