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

1 files changed, 22 insertions, 1 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 454777fa912..ebf3972b00d 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,6 +1,7 @@
 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', () => {