Created `getTimeDiff` utility function

Updated i18n strings and changed the
monitoring service graph data params

4 files changed, 33 insertions, 39 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index dd8e899d3d3..21105d886fb 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -9,8 +9,8 @@ import MonitorAreaChart from './charts/area.vue';
 import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import MonitoringStore from '../stores/monitoring_store';
-import { timeWindows, msPerMinute } from '../constants';
-import { getTimeDifferenceMinutes } from '../utils';
+import { timeWindows } from '../constants';
+import { getTimeDiff } from '../utils';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -100,7 +100,7 @@ export default {
     };
   },
   computed: {
-    getTimeWindowFlagStatus() {
+    showTimeWindowDropdown() {
       return gon.features.metricsTimeWindow;
     },
   },
@@ -113,7 +113,6 @@ export default {
 
     this.timeWindows = timeWindows;
     this.selectedTimeWindow = this.timeWindows.eightHours;
-    this.msPerMinute = msPerMinute;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -173,23 +172,18 @@ export default {
         });
     },
     getGraphsDataWithTime(timeFrame) {
-      this.selectedTimeWindow = this.timeWindows[timeFrame];
       this.state = 'loading';
       this.showEmptyState = true;
-      const end = Date.now();
-      const timeDifferenceMinutes = getTimeDifferenceMinutes(this.selectedTimeWindow);
-      const start = new Date(end - timeDifferenceMinutes * this.msPerMinute).getTime();
       this.service
-        .getGraphsData({
-          start,
-          end,
-        })
+        .getGraphsData(getTimeDiff(this.timeWindows[timeFrame]))
         .then(data => {
           this.store.storeMetrics(data);
+          this.selectedTimeWindow = this.timeWindows[timeFrame];
           this.showEmptyState = false;
         })
         .catch(() => {
-          this.state = 'unableToConnect';
+          this.showEmptyState = false;
+          Flash(s__('Metrics|Not enough data to display'));
         });
     },
     onSidebarMutation() {
@@ -227,8 +221,8 @@ export default {
           >
         </gl-dropdown>
       </div>
-      <div v-if="getTimeWindowFlagStatus" class="d-flex align-items-center float-right">
-        <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
+      <div v-if="showTimeWindowDropdown" class="d-flex align-items-center">
+        <strong>{{ s__('Metrics|Show last') }}</strong>
         <gl-dropdown
           class="prepend-left-10 js-time-window-dropdown"
           toggle-class="dropdown-menu-toggle"
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index c01c8ab2dd6..9e5d0d0fd28 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -1,3 +1,5 @@
+import { __ } from '~/locale';
+
 export const chartHeight = 300;
 
 export const graphTypes = {
@@ -9,12 +11,12 @@ export const lineTypes = {
 };
 
 export const timeWindows = {
-  thirtyMinutes: '30 minutes',
-  threeHours: '3 hours',
-  eightHours: '8 hours',
-  oneDay: '1 day',
-  threeDays: '3 days',
-  oneWeek: '1 week',
+  thirtyMinutes: __('30 minutes'),
+  threeHours: __('3 hours'),
+  eightHours: __('8 hours'),
+  oneDay: __('1 day'),
+  threeDays: __('3 days'),
+  oneWeek: __('1 week'),
 };
 
 export const msPerMinute = 60000;
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 0fbbcfd1494..64e27856bb9 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -36,7 +36,7 @@ export default class MonitoringService {
     return backOffRequest(() =>
       axios.get(this.metricsEndpoint, {
         params: {
-          ...params,
+          params,
         },
       }),
     )
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 1dd26f62437..c3e854c5367 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -1,32 +1,30 @@
-import { timeWindows } from './constants';
+import { timeWindows, msPerMinute } from './constants';
 
 export const getTimeDifferenceMinutes = timeWindow => {
-  let timeDifferenceMinutes;
   switch (timeWindow) {
     case timeWindows.thirtyMinutes:
-      timeDifferenceMinutes = 30;
-      break;
+      return 30;
     case timeWindows.threeHours:
-      timeDifferenceMinutes = 60 * 3;
-      break;
+      return 60 * 3;
     case timeWindows.eightHours:
-      timeDifferenceMinutes = 60 * 8;
-      break;
+      return 60 * 8;
     case timeWindows.oneDay:
-      timeDifferenceMinutes = 60 * 24 * 1;
-      break;
+      return 60 * 24 * 1;
     case timeWindows.threeDays:
-      timeDifferenceMinutes = 60 * 24 * 3;
-      break;
+      return 60 * 24 * 3;
     case timeWindows.oneWeek:
-      timeDifferenceMinutes = 60 * 24 * 7 * 1;
-      break;
+      return 60 * 24 * 7 * 1;
     default:
-      timeDifferenceMinutes = 60 * 8;
-      break;
+      return 60 * 8;
   }
+};
+
+export const getTimeDiff = selectedTimeWindow => {
+  const end = Date.now();
+  const timeDifferenceMinutes = getTimeDifferenceMinutes(selectedTimeWindow);
+  const start = new Date(end - timeDifferenceMinutes * msPerMinute).getTime();
 
-  return timeDifferenceMinutes;
+  return { start, end };
 };
 
 export default {};