Add feature flag

Also added relevant tests that make use of a stubbed feature flag,
prettified files

4 files changed, 29 insertions, 14 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 1a4bf70ab97..dd8e899d3d3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -99,6 +99,11 @@ export default {
       selectedTimeWindow: '',
     };
   },
+  computed: {
+    getTimeWindowFlagStatus() {
+      return gon.features.metricsTimeWindow;
+    },
+  },
   created() {
     this.service = new MonitoringService({
       metricsEndpoint: this.metricsEndpoint,
@@ -201,7 +206,10 @@ export default {
 
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
-    <div v-if="environmentsEndpoint" class="environments d-flex align-items-center">
+    <div
+      v-if="environmentsEndpoint"
+      class="dropdowns d-flex align-items-center justify-content-between"
+    >
       <div class="d-flex align-items-center">
         <strong>{{ s__('Metrics|Environment') }}</strong>
         <gl-dropdown
@@ -219,11 +227,10 @@ export default {
           >
         </gl-dropdown>
       </div>
-      <div class="d-flex align-items-center">
+      <div v-if="getTimeWindowFlagStatus" class="d-flex align-items-center float-right">
         <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
         <gl-dropdown
-          id="time-window-dropdown"
-          class="prepend-left-10"
+          class="prepend-left-10 js-time-window-dropdown"
           toggle-class="dropdown-menu-toggle"
           :text="selectedTimeWindow"
         >
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 9b103b8502b..0fbbcfd1494 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -33,11 +33,13 @@ export default class MonitoringService {
   }
 
   getGraphsData(params = {}) {
-    return backOffRequest(() => axios.get(this.metricsEndpoint, {
-      params: {
-        ...params
-      }
-    }))
+    return backOffRequest(() =>
+      axios.get(this.metricsEndpoint, {
+        params: {
+          ...params,
+        },
+      }),
+    )
       .then(resp => resp.data)
       .then(response => {
         if (!response || !response.data || !response.success) {
diff --git a/app/assets/javascripts/monitoring/utils.js b/app/assets/javascripts/monitoring/utils.js
index 581040e6141..1dd26f62437 100644
--- a/app/assets/javascripts/monitoring/utils.js
+++ b/app/assets/javascripts/monitoring/utils.js
@@ -1,8 +1,8 @@
-import { timeWindows } from './constants'
+import { timeWindows } from './constants';
 
-export const getTimeDifferenceMinutes = (timeWindow) => {
+export const getTimeDifferenceMinutes = timeWindow => {
   let timeDifferenceMinutes;
-  switch(timeWindow) {
+  switch (timeWindow) {
     case timeWindows.thirtyMinutes:
       timeDifferenceMinutes = 30;
       break;
diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index ebf3972b00d..b152ac82ca4 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -39,11 +39,17 @@ describe('Dashboard', () => {
       ee: false,
     };
 
+    gon.features = {
+      metricsTimeWindow: true,
+    };
+
     mock = new MockAdapter(axios);
     DashboardComponent = Vue.extend(Dashboard);
   });
 
   afterEach(() => {
+    gon.features = {};
+
     mock.restore();
   });
 
@@ -186,9 +192,9 @@ describe('Dashboard', () => {
       const numberOfTimeWindows = Object.keys(timeWindows).length;
 
       setTimeout(() => {
-        const timeWindowDropdown = component.$el.querySelector('#time-window-dropdown');
+        const timeWindowDropdown = component.$el.querySelector('.js-time-window-dropdown');
         const timeWindowDropdownEls = component.$el.querySelectorAll(
-          '#time-window-dropdown .dropdown-item',
+          '.js-time-window-dropdown .dropdown-item',
         );
 
         expect(timeWindowDropdown).not.toBeNull();