Created `getTimeDiff` utility function

Updated i18n strings and changed the
monitoring service graph data params

6 files changed, 72 insertions, 41 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 {};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 78d3234b562..6402f2413da 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -238,6 +238,9 @@ msgid_plural "%d closed merge requests"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "1 day"
+msgstr ""
+
 msgid "1 merged merge request"
 msgid_plural "%d merged merge requests"
 msgstr[0] ""
@@ -258,6 +261,9 @@ msgid_plural "%d pipelines"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "1 week"
+msgstr ""
+
 msgid "1st contribution!"
 msgstr ""
 
@@ -267,6 +273,15 @@ msgstr ""
 msgid "2FA enabled"
 msgstr ""
 
+msgid "3 days"
+msgstr ""
+
+msgid "3 hours"
+msgstr ""
+
+msgid "30 minutes"
+msgstr ""
+
 msgid "403|Please contact your GitLab administrator to get permission."
 msgstr ""
 
@@ -282,6 +297,9 @@ msgstr ""
 msgid "404|Please contact your GitLab administrator if you think this is a mistake."
 msgstr ""
 
+msgid "8 hours"
+msgstr ""
+
 msgid "<code>\"johnsmith@example.com\": \"@johnsmith\"</code> will add \"By <a href=\"#\">@johnsmith</a>\" to all issues and comments originally created by johnsmith@example.com, and will set <a href=\"#\">@johnsmith</a> as the assignee on all issues originally assigned to johnsmith@example.com."
 msgstr ""
 
@@ -5100,7 +5118,10 @@ msgstr ""
 msgid "Metrics|No deployed environments"
 msgstr ""
 
-msgid "Metrics|Show Last"
+msgid "Metrics|Not enough data to display"
+msgstr ""
+
+msgid "Metrics|Show last"
 msgstr ""
 
 msgid "Metrics|There was an error fetching the environments data, please try again"
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index a2d1acbe618..6d85e2c6ea2 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -184,7 +184,23 @@ describe('Dashboard', () => {
       });
     });
 
-    it('renders the time window dropdown with a set of options ', done => {
+    it('renders the time window dropdown with a set of options', done => {
+      gon.features.metricsTimeWindow = false;
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+
+      setTimeout(() => {
+        const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown');
+
+        expect(timeWindowDropdown).toBeNull();
+
+        done();
+      });
+    });
+
+    it('does not show the time window dropdown when the feature flag is not set', done => {
       const component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showPanels: false },