🎨 Moves widget update logic into mixin

src/components/Widgets/WidgetBase.vue

@@ -346,7 +346,6 @@ export default {
     loading: false,
     error: false,
     errorMsg: null,
-    updater: null, // Stores interval
   }),
   computed: {
     /* Returns the widget type, shows error if not specified */
@@ -361,27 +360,13 @@ export default {
     widgetOptions() {
       const options = this.widget.options || {};
       const useProxy = !!this.widget.useProxy;
-      const updateInterval = this.widget.updateInterval || 0;
+      const updateInterval = this.widget.updateInterval || null;
       return { useProxy, updateInterval, ...options };
     },
     /* A unique string to reference the widget by */
     widgetRef() {
       return `widget-${this.widgetType}-${this.index}`;
     },
-    /* Returns either `false` or a number in ms to continuously update widget data */
-    updateInterval() {
-      const usersInterval = this.widget.updateInterval;
-      if (!usersInterval) return 0;
-      // If set to `true`, then default to 30 seconds
-      if (typeof usersInterval === 'boolean') return 30 * 1000;
-      // If set to a number, and within valid range, return user choice
-      if (typeof usersInterval === 'number'
-        && usersInterval >= 10
-        && usersInterval < 7200) {
-        return usersInterval * 1000;
-      }
-      return 0;
-    },
   },
   methods: {
     /* Calls update data method on widget */
@@ -402,17 +387,6 @@ export default {
       this.loading = loading;
     },
   },
-  mounted() {
-    // If continuous updates enabled, create interval
-    if (this.updateInterval) {
-      this.updater = setInterval(() => {
-        this.update();
-      }, this.updateInterval);
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.updater);
-  },
 };
 </script>
 

src/mixins/WidgetMixin.js

@@ -17,11 +17,22 @@ const WidgetMixin = {
   data: () => ({
     progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     overrideProxyChoice: false,
+    overrideUpdateInterval: null,
     disableLoader: false, // Prevent ever showing the loader
+    updater: null, // Stores interval
   }),
   /* When component mounted, fetch initial data */
   mounted() {
     this.fetchData();
+    if (this.updateInterval) {
+      this.continuousUpdates();
+      this.disableLoader = true;
+    }
+  },
+  beforeDestroy() {
+    if (this.updater) {
+      clearInterval(this.updater);
+    }
   },
   computed: {
     proxyReqEndpoint() {
@@ -31,6 +42,23 @@ const WidgetMixin = {
     useProxy() {
       return this.options.useProxy || this.overrideProxyChoice;
     },
+    /* Returns either a number in ms to continuously update widget data. Or 0 for no updates */
+    updateInterval() {
+      const usersInterval = this.options.updateInterval;
+      if (usersInterval === null && this.overrideUpdateInterval) {
+        return this.overrideUpdateInterval * 1000;
+      }
+      if (!usersInterval) return 0;
+      // If set to `true`, then default to 30 seconds
+      if (typeof usersInterval === 'boolean') return 30 * 1000;
+      // If set to a number, and within valid range, return user choice
+      if (typeof usersInterval === 'number'
+        && usersInterval >= 2
+        && usersInterval <= 7200) {
+        return usersInterval * 1000;
+      }
+      return 0;
+    },
   },
   methods: {
     /* Re-fetches external data, called by parent. Usually overridden by widget */
@@ -38,6 +66,10 @@ const WidgetMixin = {
       this.startLoading();
       this.fetchData();
     },
+    /* If continuous updates enabled, create interval */
+    continuousUpdates() {
+      this.updater = setInterval(() => { this.update(); }, this.updateInterval);
+    },
     /* Called when an error occurs. Logs to handler, and passes to parent component */
     error(msg, stackTrace) {
       ErrorHandler(msg, stackTrace);