From dfea4e317c72fde8c1978f6552326b2d177666fb Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 19 Jan 2022 11:43:04 +0000
Subject: [PATCH] :zap: Refactors all Glances widgets to inherit from parent
 mixin

---
 docs/widgets.md                               |  4 ++-
 src/components/Widgets/GlAlerts.vue           | 12 ++-----
 src/components/Widgets/GlCpuCores.vue         | 12 ++-----
 src/components/Widgets/GlCpuGauge.vue         | 12 ++-----
 src/components/Widgets/GlCpuHistory.vue       | 12 ++-----
 src/components/Widgets/GlDiskIo.vue           | 12 ++-----
 src/components/Widgets/GlDiskSpace.vue        |  9 ++---
 src/components/Widgets/GlLoadHistory.vue      | 12 ++-----
 src/components/Widgets/GlMemGauge.vue         | 12 ++-----
 src/components/Widgets/GlMemHistory.vue       | 13 ++-----
 .../Widgets/GlNetworkInterfaces.vue           | 12 ++-----
 src/components/Widgets/GlNetworkTraffic.vue   | 12 ++-----
 src/components/Widgets/GlSystemLoad.vue       | 12 ++-----
 src/mixins/GlancesMixin.js                    | 36 +++++++++++++++++++
 14 files changed, 75 insertions(+), 107 deletions(-)
 create mode 100644 src/mixins/GlancesMixin.js

diff --git a/docs/widgets.md b/docs/widgets.md
index eb2f4364..0e74552a 100644
--- a/docs/widgets.md
+++ b/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
diff --git a/src/components/Widgets/GlAlerts.vue b/src/components/Widgets/GlAlerts.vue
index 358814ed..ab16b14a 100644
--- a/src/components/Widgets/GlAlerts.vue
+++ b/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;
diff --git a/src/components/Widgets/GlCpuCores.vue b/src/components/Widgets/GlCpuCores.vue
index 52775f67..a8daa00a 100644
--- a/src/components/Widgets/GlCpuCores.vue
+++ b/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 = [];
diff --git a/src/components/Widgets/GlCpuGauge.vue b/src/components/Widgets/GlCpuGauge.vue
index 2b466686..0d89464d 100644
--- a/src/components/Widgets/GlCpuGauge.vue
+++ b/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);
diff --git a/src/components/Widgets/GlCpuHistory.vue b/src/components/Widgets/GlCpuHistory.vue
index 23293ac9..632542dd 100644
--- a/src/components/Widgets/GlCpuHistory.vue
+++ b/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 = [];
diff --git a/src/components/Widgets/GlDiskIo.vue b/src/components/Widgets/GlDiskIo.vue
index b7417241..614b8056 100644
--- a/src/components/Widgets/GlDiskIo.vue
+++ b/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 = [];
diff --git a/src/components/Widgets/GlDiskSpace.vue b/src/components/Widgets/GlDiskSpace.vue
index 3400e770..c724f840 100644
--- a/src/components/Widgets/GlDiskSpace.vue
+++ b/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: {
diff --git a/src/components/Widgets/GlLoadHistory.vue b/src/components/Widgets/GlLoadHistory.vue
index 4584bc98..f0f04722 100644
--- a/src/components/Widgets/GlLoadHistory.vue
+++ b/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 = [];
diff --git a/src/components/Widgets/GlMemGauge.vue b/src/components/Widgets/GlMemGauge.vue
index c43e400d..d23661f6 100644
--- a/src/components/Widgets/GlMemGauge.vue
+++ b/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);
diff --git a/src/components/Widgets/GlMemHistory.vue b/src/components/Widgets/GlMemHistory.vue
index a874b22f..4f814ad3 100644
--- a/src/components/Widgets/GlMemHistory.vue
+++ b/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),
         },
       });
     },
diff --git a/src/components/Widgets/GlNetworkInterfaces.vue b/src/components/Widgets/GlNetworkInterfaces.vue
index f19884e4..69ecef24 100644
--- a/src/components/Widgets/GlNetworkInterfaces.vue
+++ b/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 = [];
diff --git a/src/components/Widgets/GlNetworkTraffic.vue b/src/components/Widgets/GlNetworkTraffic.vue
index b70340be..7d9350e6 100644
--- a/src/components/Widgets/GlNetworkTraffic.vue
+++ b/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: [],
diff --git a/src/components/Widgets/GlSystemLoad.vue b/src/components/Widgets/GlSystemLoad.vue
index 1b937bc9..e11795f4 100644
--- a/src/components/Widgets/GlSystemLoad.vue
+++ b/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'],
diff --git a/src/mixins/GlancesMixin.js b/src/mixins/GlancesMixin.js
new file mode 100644
index 00000000..40e7cc1c
--- /dev/null
+++ b/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;