⚡ Refactors all Glances widgets to inherit from parent mixin

docs/widgets.md

@@ -1187,11 +1187,13 @@ All Glance's based widgets require a `hostname`
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`hostname`** | `string` |  Required | The URL to your Glances instance (without a trailing slash)
+**`username`** | `string` |  _Optional_ | If you have setup basic auth on Glances, specify username here (defaults to `glances`)
+**`password`** | `string` |  _Optional_ | If you have setup basic auth on Glances, specify password here. **Note**: since this password is in plaintext, it is important not to reuse it anywhere else
 
 
 ##### Info
 - **CORS**: 🟢 Enabled
-- **Auth**: 🟢 Not Required
+- **Auth**: 🟠 Optional
 - **Price**: 🟢 Free
 - **Host**: Self-Hosted (see [GitHub - Nicolargo/Glances](https://github.com/nicolargo/glances))
 - **Privacy**: ⚫ No Policy Available

src/components/Widgets/GlAlerts.vue

@@ -20,10 +20,11 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import { timestampToDateTime, getTimeAgo, getTimeDifference } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   data() {
     return {
       alerts: null,
@@ -31,19 +32,12 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/alert`;
+      return this.makeGlancesUrl('alert');
     },
   },
   filters: {},
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(alertData) {
       if (!alertData || alertData.length === 0) {
         this.noResults = true;

src/components/Widgets/GlCpuCores.vue

@@ -8,11 +8,12 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import { capitalize } from '@/utils/MiscHelpers';
 import PercentageChart from '@/components/Charts/PercentageChart';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   components: {
     PercentageChart,
   },
@@ -22,12 +23,8 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/quicklook`;
+      return this.makeGlancesUrl('quicklook');
     },
   },
   created() {
@@ -35,9 +32,6 @@ export default {
     this.overrideUpdateInterval = 2;
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     /* Converts returned data into format for the percentage charts */
     processData(cpuData) {
       const cpuSections = [];

src/components/Widgets/GlCpuGauge.vue

@@ -17,11 +17,12 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import GaugeChart from '@/components/Charts/Gauge';
 import { getValueFromCss, capitalize } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   components: {
     GaugeChart,
   },
@@ -35,18 +36,11 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/cpu`;
+      return this.makeGlancesUrl('cpu');
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(cpuData) {
       this.gaugeValue = cpuData.total;
       this.gaugeColor = this.getColor(cpuData.total);

src/components/Widgets/GlCpuHistory.vue

@@ -6,31 +6,25 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
   components: {},
   data() {
     return {};
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     limit() {
       return this.options.limit || 100;
     },
     endpoint() {
-      return `${this.hostname}/api/3/cpu/history/${this.limit}`;
+      return this.makeGlancesUrl(`cpu/history/${this.limit}`);
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(cpuData) {
       const { system, user } = cpuData;
       const labels = [];

src/components/Widgets/GlDiskIo.vue

@@ -20,10 +20,11 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import { convertBytes } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   data() {
     return {
       disks: null,
@@ -31,12 +32,8 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/diskio`;
+      return this.makeGlancesUrl('diskio');
     },
   },
   filters: {
@@ -51,9 +48,6 @@ export default {
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(diskData) {
       this.previous = this.disks;
       const disks = [];

src/components/Widgets/GlDiskSpace.vue

@@ -18,11 +18,12 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import PercentageChart from '@/components/Charts/PercentageChart';
 import { getValueFromCss, convertBytes } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   components: {
     PercentageChart,
   },
@@ -32,12 +33,8 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/fs`;
+      return this.makeGlancesUrl('fs');
     },
   },
   filters: {

src/components/Widgets/GlLoadHistory.vue

@@ -6,31 +6,25 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
   components: {},
   data() {
     return {};
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     limit() {
       return this.options.limit || 500;
     },
     endpoint() {
-      return `${this.hostname}/api/3/load/history/${this.limit}`;
+      return this.makeGlancesUrl(`load/history/${this.limit}`);
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(loadData) {
       const labels = [];
       const min1 = [];

src/components/Widgets/GlMemGauge.vue

@@ -17,11 +17,12 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import GaugeChart from '@/components/Charts/Gauge';
 import { getValueFromCss, capitalize, convertBytes } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   components: {
     GaugeChart,
   },
@@ -35,18 +36,11 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/mem`;
+      return this.makeGlancesUrl('mem');
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(memData) {
       this.gaugeValue = memData.percent;
       this.gaugeColor = this.getColor(memData.percent);

src/components/Widgets/GlMemHistory.vue

@@ -6,31 +6,25 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
   components: {},
   data() {
     return {};
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     limit() {
       return this.options.limit || 100;
     },
     endpoint() {
-      return `${this.hostname}/api/3/mem/history/${this.limit}`;
+      return this.makeGlancesUrl(`mem/history/${this.limit}`);
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(memData) {
       const readings = memData.percent;
       const labels = [];
@@ -67,7 +61,6 @@ export default {
         },
         tooltipOptions: {
           formatTooltipY: d => `${Math.round(d)}%`,
-          // formatTooltipX: d => timestampToTime(d),
         },
       });
     },

src/components/Widgets/GlNetworkInterfaces.vue

@@ -30,10 +30,11 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import { convertBytes } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin],
+  mixins: [WidgetMixin, GlancesMixin],
   data() {
     return {
       networks: null,
@@ -41,12 +42,8 @@ export default {
     };
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/network`;
+      return this.makeGlancesUrl('network');
     },
   },
   filters: {
@@ -64,9 +61,6 @@ export default {
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(networkData) {
       this.previous = this.disks;
       const networks = [];

src/components/Widgets/GlNetworkTraffic.vue

@@ -6,31 +6,25 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 import { convertBytes, getTimeAgo, timestampToTime } from '@/utils/MiscHelpers';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
   components: {},
   data() {
     return {};
   },
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     limit() {
       return this.options.limit || 100;
     },
     endpoint() {
-      return `${this.hostname}/api/3/network/history/${this.limit}`;
+      return this.makeGlancesUrl(`network/history/${this.limit}`);
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(trafficData) {
       const preliminary = {
         upload: [],

src/components/Widgets/GlSystemLoad.vue

@@ -8,23 +8,17 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
 export default {
-  mixins: [WidgetMixin, ChartingMixin],
+  mixins: [WidgetMixin, GlancesMixin, ChartingMixin],
   computed: {
-    hostname() {
-      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
-      return this.options.hostname;
-    },
     endpoint() {
-      return `${this.hostname}/api/3/load`;
+      return this.makeGlancesUrl('load');
     },
   },
   methods: {
-    fetchData() {
-      this.makeRequest(this.endpoint).then(this.processData);
-    },
     processData(loadData) {
       const chartData = {
         labels: ['1 Min', '5 Mins', '15 Mins'],

src/mixins/GlancesMixin.js

@@ -0,0 +1,36 @@
+/** Reusable mixin for all Glances widgets */
+const WidgetMixin = {
+  computed: {
+    /* Required, hostname (e.g. IP + port) for Glances instance */
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    /* Optionally specify the API version, defaults to V 3 */
+    apiVersion() {
+      return this.options.apiVersion || 3;
+    },
+    /* Optionally specify basic auth credentials for Glances instance */
+    credentials() {
+      if (this.options.username && this.options.password) {
+        const stringifiedUser = `${this.options.username}:${this.options.password}`;
+        const headers = { Authorization: `Basic ${window.btoa(stringifiedUser)}` };
+        return { headers };
+      }
+      return null;
+    },
+  },
+  methods: {
+    /* Make the request to Glances API, and calls handler function with results
+    * Requires endpoint attribute and processData method to be implemented by child */
+    fetchData() {
+      this.makeRequest(this.endpoint, this.credentials).then(this.processData);
+    },
+    /* Returns URL to Glances API endpoint */
+    makeGlancesUrl(apiPath) {
+      return `${this.hostname}/api/${this.apiVersion}/${apiPath}`;
+    },
+  },
+};
+
+export default WidgetMixin;