Use the selected time window for metrics dashboard

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

@@ -172,7 +172,7 @@ export default {
     if (!this.hasMetrics) {
       this.setGettingStartedEmptyState();
     } else {
-      this.fetchData(getTimeDiff(this.timeWindows.eightHours));
+      this.fetchData(getTimeDiff(this.selectedTimeWindow));
 
       sidebarMutationObserver = new MutationObserver(this.onSidebarMutation);
       sidebarMutationObserver.observe(document.querySelector('.layout-page'), {

changelogs/unreleased/fix-time-window-default.yml

+---
+title: Use the selected time window for metrics dashboard
+merge_request: 29152
+author:
+type: fixed

spec/javascripts/monitoring/dashboard_spec.js

@@ -38,6 +38,7 @@ describe('Dashboard', () => {
   let DashboardComponent;
   let mock;
   let store;
+  let component;
 
   beforeEach(() => {
     setFixtures(`
@@ -59,12 +60,13 @@ describe('Dashboard', () => {
   });
 
   afterEach(() => {
+    component.$destroy();
     mock.restore();
   });
 
   describe('no metrics are available yet', () => {
     it('shows a getting started empty state when no metrics are present', () => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, showTimeWindowDropdown: false },
         store,
@@ -81,7 +83,7 @@ describe('Dashboard', () => {
     });
 
     it('shows up a loading state', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: false },
         store,
@@ -94,7 +96,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the legend when showLegend is false', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -114,7 +116,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the group panels when showPanels is false', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -134,7 +136,7 @@ describe('Dashboard', () => {
     });
 
     it('renders the environments dropdown with a number of environments', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -165,7 +167,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the environments dropdown list when there is no environments', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -195,7 +197,7 @@ describe('Dashboard', () => {
     });
 
     it('renders the environments dropdown with a single active element', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -228,7 +230,7 @@ describe('Dashboard', () => {
     });
 
     it('hides the dropdown', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -249,7 +251,7 @@ describe('Dashboard', () => {
     });
 
     it('does not show the time window dropdown when the feature flag is not set', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -270,7 +272,7 @@ describe('Dashboard', () => {
     });
 
     it('renders the time window dropdown with a set of options', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -295,10 +297,46 @@ describe('Dashboard', () => {
       });
     });
 
+    it('fetches the metrics data with proper time window', done => {
+      component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: {
+          ...propsData,
+          hasMetrics: true,
+          showPanels: false,
+          showTimeWindowDropdown: true,
+        },
+        store,
+      });
+
+      spyOn(component.$store, 'dispatch').and.stub();
+      const getTimeDiffSpy = spyOnDependency(Dashboard, 'getTimeDiff');
+
+      component.$store.commit(
+        `monitoringDashboard/${types.SET_ENVIRONMENTS_ENDPOINT}`,
+        '/environments',
+      );
+      component.$store.commit(
+        `monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`,
+        environmentData,
+      );
+
+      component.$mount();
+
+      Vue.nextTick()
+        .then(() => {
+          expect(component.$store.dispatch).toHaveBeenCalled();
+          expect(getTimeDiffSpy).toHaveBeenCalledWith(component.selectedTimeWindow);
+
+          done();
+        })
+        .catch(done.fail);
+    });
+
     it('shows a specific time window selected from the url params', done => {
       spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
 
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
         store,
@@ -319,7 +357,7 @@ describe('Dashboard', () => {
         '<script>alert("XSS")</script>',
       ]);
 
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
         store,
@@ -344,7 +382,7 @@ describe('Dashboard', () => {
     });
 
     it('sets elWidth to page width when the sidebar is resized', done => {
-      const component = new DashboardComponent({
+      component = new DashboardComponent({
         el: document.querySelector('.prometheus-graphs'),
         propsData: {
           ...propsData,
@@ -374,16 +412,10 @@ describe('Dashboard', () => {
   });
 
   describe('external dashboard link', () => {
-    let component;
-
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
     });
 
-    afterEach(() => {
-      component.$destroy();
-    });
-
     describe('with feature flag enabled', () => {
       beforeEach(() => {
         component = new DashboardComponent({