From 1914d25b45ac08a2eb25e1ac2e634e3f7d4914ea Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 31 Dec 2021 23:56:53 +0000
Subject: [PATCH] :zap: Refactored NetData and HealthChecks with mixin request

---
 src/components/Widgets/HealthChecks.vue  | 29 +++++-------------------
 src/components/Widgets/NdCpuHistory.vue  | 14 +++---------
 src/components/Widgets/NdLoadHistory.vue | 14 +++---------
 src/components/Widgets/NdRamHistory.vue  | 14 +++---------
 4 files changed, 15 insertions(+), 56 deletions(-)

diff --git a/src/components/Widgets/HealthChecks.vue b/src/components/Widgets/HealthChecks.vue
index 6c8b20b9..1243eb5c 100644
--- a/src/components/Widgets/HealthChecks.vue
+++ b/src/components/Widgets/HealthChecks.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
-import { widgetApiEndpoints, serviceEndpoints } from '@/utils/defaults';
+import { widgetApiEndpoints } from '@/utils/defaults';
 import { capitalize, timestampToDateTime } from '@/utils/MiscHelpers';
 
 export default {
@@ -48,10 +47,6 @@ export default {
       if (this.options.host) return `${this.options.host}/api/v1/checks`;
       return `${widgetApiEndpoints.healthChecks}`;
     },
-    proxyReqEndpoint() {
-      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
-      return `${baseUrl}${serviceEndpoints.corsProxy}`;
-    },
     apiKey() {
       if (!this.options.apiKey) {
         this.error('An API key is required, please see the docs for more info');
@@ -62,23 +57,11 @@ export default {
   methods: {
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
-      const requestConfig = {
-        method: 'GET',
-        url: this.proxyReqEndpoint,
-        headers: {
-          'access-control-request-headers': '*',
-          'Target-URL': this.endpoint,
-          CustomHeaders: JSON.stringify({ 'X-Api-Key': this.apiKey }),
-        },
-      };
-      axios.request(requestConfig)
-        .then((response) => {
-          this.processData(response.data);
-        }).catch((error) => {
-          this.error('Unable to fetch cron data', error);
-        }).finally(() => {
-          this.finishLoading();
-        });
+      this.overrideProxyChoice = true;
+      const authHeaders = { 'X-Api-Key': this.apiKey };
+      this.makeRequest(this.endpoint, authHeaders).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdCpuHistory.vue b/src/components/Widgets/NdCpuHistory.vue
index 66bc7f03..8ff31257 100644
--- a/src/components/Widgets/NdCpuHistory.vue
+++ b/src/components/Widgets/NdCpuHistory.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -41,16 +40,9 @@ export default {
   methods: {
     /* Make GET request to NetData */
     fetchData() {
-      axios.get(this.endpoint)
-        .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdLoadHistory.vue b/src/components/Widgets/NdLoadHistory.vue
index 243c1ac4..2d207e30 100644
--- a/src/components/Widgets/NdLoadHistory.vue
+++ b/src/components/Widgets/NdLoadHistory.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -41,16 +40,9 @@ export default {
   methods: {
     /* Make GET request to NetData */
     fetchData() {
-      axios.get(this.endpoint)
-        .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdRamHistory.vue b/src/components/Widgets/NdRamHistory.vue
index 70fbd61d..6ed14ebe 100644
--- a/src/components/Widgets/NdRamHistory.vue
+++ b/src/components/Widgets/NdRamHistory.vue
@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -37,16 +36,9 @@ export default {
   methods: {
     /* Make GET request to NetData */
     fetchData() {
-      axios.get(this.endpoint)
-        .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(inputData) {