Make time window parameters available in the query string

This commit adds the frontend functionality to add the parameters
via the `pushState` api, preventing the need for a page reload.

1 files changed, 36 insertions, 1 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index 16dc0084a10..5c28840d3a4 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,7 +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 { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
 import axios from '~/lib/utils/axios_utils';
 import { metricsGroupsAPIResponse, mockApiEndpoint, environmentData } from './mock_data';
 
@@ -248,6 +248,41 @@ describe('Dashboard', () => {
         done();
       });
     });
+
+    it('shows a specific time window selected from the url params', done => {
+      spyOnDependency(Dashboard, 'getParameterValues').and.returnValue(['thirtyMinutes']);
+
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
+      });
+
+      setTimeout(() => {
+        const selectedTimeWindow = component.$el.querySelector(
+          '.js-time-window-dropdown [active="true"]',
+        );
+
+        expect(selectedTimeWindow.textContent.trim()).toEqual('30 minutes');
+        done();
+      });
+    });
+
+    it('defaults to the eight hours time window for non valid url parameters', done => {
+      spyOnDependency(Dashboard, 'getParameterValues').and.returnValue([
+        '<script>alert("XSS")</script>',
+      ]);
+
+      const component = new DashboardComponent({
+        el: document.querySelector('.prometheus-graphs'),
+        propsData: { ...propsData, hasMetrics: true, showTimeWindowDropdown: true },
+      });
+
+      Vue.nextTick(() => {
+        expect(component.selectedTimeWindowKey).toEqual(timeWindowsKeyNames.eightHours);
+
+        done();
+      });
+    });
   });
 
   describe('when the window resizes', () => {