From 2ee01f603c23fe30a4b449e2be4852eec56d21a6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 3 Jan 2022 12:31:39 +0000
Subject: [PATCH] :art: Refactors StatPing widget

---
 src/components/Widgets/StatPing.vue | 37 ++++-------------------------
 src/utils/MiscHelpers.js            | 15 ++++++++++++
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/Widgets/StatPing.vue b/src/components/Widgets/StatPing.vue
index 6d4b1a4a..1e405e5b 100644
--- a/src/components/Widgets/StatPing.vue
+++ b/src/components/Widgets/StatPing.vue
@@ -46,9 +46,8 @@
 </template>
 
 <script>
-import axios from 'axios';
 import { serviceEndpoints } from '@/utils/defaults';
-import { showNumAsThousand } from '@/utils/MiscHelpers';
+import { showNumAsThousand, getTimeAgo } from '@/utils/MiscHelpers';
 import WidgetMixin from '@/mixins/WidgetMixin';
 
 export default {
@@ -77,21 +76,8 @@ export default {
   },
   methods: {
     fetchData() {
-      const requestConfig = {
-        method: 'GET',
-        url: this.proxyReqEndpoint,
-        headers: {
-          'Target-URL': this.endpoint,
-        },
-      };
-      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;
+      this.makeRequest(this.endpoint).then(this.processData);
     },
     makeChartUrl(uptime, title) {
       const host = 'https://quickchart.io';
@@ -110,19 +96,6 @@ export default {
         content, html: true, trigger: 'hover focus', delay: 250, classes: 'ping-times-tt',
       };
     },
-    getTimeAgo(dateTime) {
-      const now = new Date().getTime();
-      const then = new Date(dateTime).getTime();
-      if (then < 0) return 'Never';
-      const diff = (now - then) / 1000;
-      const divide = (time, round) => Math.round(time / round);
-      if (diff < 60) return `${divide(diff, 1)} seconds ago`;
-      if (diff < 3600) return `${divide(diff, 60)} minutes ago`;
-      if (diff < 86400) return `${divide(diff, 3600)} hours ago`;
-      if (diff < 604800) return `${divide(diff, 86400)} days ago`;
-      if (diff >= 604800) return `${divide(diff, 604800)} weeks ago`;
-      return 'unknown';
-    },
     processData(data) {
       let services = [];
       data.forEach((service) => {
@@ -134,8 +107,8 @@ export default {
           responseTime: Math.round(service.avg_response / 1000),
           totalSuccess: showNumAsThousand(service.stats.hits),
           totalFailure: showNumAsThousand(service.stats.failures),
-          lastSuccess: this.getTimeAgo(service.last_success),
-          lastFailure: this.getTimeAgo(service.last_error),
+          lastSuccess: getTimeAgo(service.last_success),
+          lastFailure: getTimeAgo(service.last_error),
         });
       });
       if (this.limit) services = services.slice(0, this.limit);
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index c560d089..4edda362 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -107,6 +107,21 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
   return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
 };
 
+/* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
+export const getTimeAgo = (dateTime) => {
+  const now = new Date().getTime();
+  const then = new Date(dateTime).getTime();
+  if (then < 0) return 'Never';
+  const diff = (now - then) / 1000;
+  const divide = (time, round) => Math.round(time / round);
+  if (diff < 60) return `${divide(diff, 1)} seconds ago`;
+  if (diff < 3600) return `${divide(diff, 60)} minutes ago`;
+  if (diff < 86400) return `${divide(diff, 3600)} hours ago`;
+  if (diff < 604800) return `${divide(diff, 86400)} days ago`;
+  if (diff >= 604800) return `${divide(diff, 604800)} weeks ago`;
+  return 'unknown';
+};
+
 /* Given a currency code, return the corresponding unicode symbol */
 export const findCurrencySymbol = (currencyCode) => {
   const code = currencyCode.toUpperCase().trim();