Add support for time windows for the performance dashbooards

The performance dashboards will now display the data
from a set amount of time windows that are defined
on a constants file

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -9,6 +9,7 @@ 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 } from '../constants';
 
 const sidebarAnimationDuration = 150;
 let sidebarMutationObserver;
@@ -94,6 +95,7 @@ export default {
       state: 'gettingStarted',
       showEmptyState: true,
       elWidth: 0,
+      selectedTimeWindow: '',
     };
   },
   created() {
@@ -102,6 +104,9 @@ export default {
       deploymentEndpoint: this.deploymentEndpoint,
       environmentsEndpoint: this.environmentsEndpoint,
     });
+
+    this.timeWindows = timeWindows;
+    this.selectedTimeWindow = this.timeWindows.eightHours;
   },
   beforeDestroy() {
     if (sidebarMutationObserver) {
@@ -160,11 +165,17 @@ export default {
           this.state = 'unableToConnect';
         });
     },
+    getGraphsDataWithTime(timeFrame) {
+      this.selectedTimeWindow = this.timeWindows[timeFrame];
+    },
     onSidebarMutation() {
       setTimeout(() => {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
+    activeTimeWindow(key) {
+      return this.timeWindows[key] === this.selectedTimeWindow;
+    },
   },
 };
 </script>
@@ -172,21 +183,40 @@ export default {
 <template>
   <div v-if="!showEmptyState" class="prometheus-graphs prepend-top-default">
     <div v-if="environmentsEndpoint" class="environments d-flex align-items-center">
-      <strong>{{ s__('Metrics|Environment') }}</strong>
-      <gl-dropdown
-        class="prepend-left-10 js-environments-dropdown"
-        toggle-class="dropdown-menu-toggle"
-        :text="currentEnvironmentName"
-        :disabled="store.environmentsData.length === 0"
-      >
-        <gl-dropdown-item
-          v-for="environment in store.environmentsData"
-          :key="environment.id"
-          :active="environment.name === currentEnvironmentName"
-          active-class="is-active"
-          >{{ environment.name }}</gl-dropdown-item
+      <div class="d-flex align-items-center">
+        <strong>{{ s__('Metrics|Environment') }}</strong>
+        <gl-dropdown
+          class="prepend-left-10 js-environments-dropdown"
+          toggle-class="dropdown-menu-toggle"
+          :text="currentEnvironmentName"
+          :disabled="store.environmentsData.length === 0"
+        >
+          <gl-dropdown-item
+            v-for="environment in store.environmentsData"
+            :key="environment.id"
+            :active="environment.name === currentEnvironmentName"
+            active-class="is-active"
+            >{{ environment.name }}</gl-dropdown-item
+          >
+        </gl-dropdown>
+      </div>
+      <div class="d-flex align-items-center">
+        <span class="font-weight-bold">{{ s__('Metrics|Show Last') }}</span>
+        <gl-dropdown
+          id="time-window-dropdown"
+          class="prepend-left-10"
+          toggle-class="dropdown-menu-toggle"
+          :text="selectedTimeWindow"
         >
-      </gl-dropdown>
+          <gl-dropdown-item
+            v-for="(value, key) in timeWindows"
+            :key="key"
+            :active="activeTimeWindow(key)"
+            @click="getGraphsDataWithTime(key)"
+            >{{ value }}</gl-dropdown-item
+          >
+        </gl-dropdown>
+      </div>
     </div>
     <graph-group
       v-for="(groupData, index) in store.groups"

app/assets/javascripts/monitoring/constants.js

@@ -7,3 +7,12 @@ export const graphTypes = {
 export const lineTypes = {
   default: 'solid',
 };
+
+export const timeWindows = {
+  thirtyMinutes: '30 minutes',
+  threeHours: '3 hours',
+  eightHours: '8 hours',
+  oneDay: '1 day',
+  threeDays: '3 days',
+  oneWeek: '1 week',
+};

app/assets/stylesheets/pages/environments.scss

@@ -204,7 +204,7 @@
 }
 
 .prometheus-graphs {
-  .environments {
+  .dropdowns {
     .dropdown-menu-toggle {
       svg {
         position: absolute;

spec/javascripts/monitoring/dashboard_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
+import { timeWindows } from '~/monitoring/constants';
 import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
 
@@ -131,7 +132,7 @@ describe('Dashboard', () => {
 
       setTimeout(() => {
         const dropdownMenuEnvironments = component.$el.querySelectorAll(
-          '.js-environments-dropdown .dropdown-item',
+          '.js-environments-dropdown ul',
         );
 
         expect(dropdownMenuEnvironments.length).toEqual(0);
@@ -176,6 +177,26 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('renders the time window dropdown with a set of options ', done => {
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showPanels: false },
+      });
+      const numberOfTimeWindows = Object.keys(timeWindows).length;
+
+      setTimeout(() => {
+        const timeWindowDropdown = component.$el.querySelector('#time-window-dropdown');
+        const timeWindowDropdownEls = component.$el.querySelectorAll(
+          '#time-window-dropdown .dropdown-item',
+        );
+
+        expect(timeWindowDropdown).not.toBeNull();
+        expect(timeWindowDropdownEls.length).toEqual(numberOfTimeWindows);
+
+        done();
+      });
+    });
   });
 
   describe('when the window resizes', () => {