Add tests and set the dropdown time

This adds tests that cover the events that get
emitted from the panel_type component, also
this set the correct time in the dropdown
once a zoom event happens

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

@@ -362,11 +362,12 @@ export default {
       refreshCurrentPage();
     },
 
-    onTimeRange({ start, end }) {
+    onTimeRangeZoom({ start, end }) {
       updateHistory({
         url: mergeUrlParams({ start, end }, window.location.href),
         title: document.title,
       });
+      this.selectedTimeRange = { start, end };
     },
   },
   addMetric: {
@@ -589,7 +590,7 @@ export default {
                 :alerts-endpoint="alertsEndpoint"
                 :prometheus-alerts-available="prometheusAlertsAvailable"
                 :index="`${index}-${graphIndex}`"
-                @timerange="onTimeRange"
+                @timerangezoom="onTimeRangeZoom"
               />
             </div>
           </div>

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

@@ -23,6 +23,10 @@ import MonitorEmptyChart from './charts/empty_chart.vue';
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import { timeRangeToUrl, downloadCSVOptions, generateLinkToChartOptions } from '../utils';
 
+const events = {
+  timeRangeZoom: 'timerangezoom',
+};
+
 export default {
   components: {
     MonitorSingleStatChart,
@@ -159,7 +163,7 @@ export default {
     },
     onDatazoom({ start, end }) {
       this.zoomedTimeRange = { start, end };
-      this.$emit('timerange', { start, end });
+      this.$emit(events.timeRangeZoom, { start, end });
     },
   },
 };

spec/frontend/monitoring/components/dashboard_url_time_spec.js

 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import createFlash from '~/flash';
-import { queryToObject, redirectTo, removeParams, mergeUrlParams } from '~/lib/utils/url_utility';
+import {
+  queryToObject,
+  redirectTo,
+  removeParams,
+  mergeUrlParams,
+  updateHistory,
+} from '~/lib/utils/url_utility';
 import axios from '~/lib/utils/axios_utils';
 import { mockProjectDir } from '../mock_data';
 
@@ -137,4 +143,23 @@ describe('dashboard invalid url parameters', () => {
       expect(redirectTo).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('changes the url when a panel moves the time slider', () => {
+    const timeRange = {
+      start: '2020-01-01T00:00:00.000Z',
+      end: '2020-01-01T01:00:00.000Z',
+    };
+
+    queryToObject.mockReturnValue(timeRange);
+
+    createMountedWrapper();
+
+    return wrapper.vm.$nextTick().then(() => {
+      wrapper.vm.onTimeRangeZoom(timeRange);
+
+      expect(updateHistory).toHaveBeenCalled();
+      expect(wrapper.vm.selectedTimeRange.start.toString()).toBe(timeRange.start);
+      expect(wrapper.vm.selectedTimeRange.end.toString()).toBe(timeRange.end);
+    });
+  });
 });

spec/frontend/monitoring/components/panel_type_spec.js

@@ -99,6 +99,8 @@ describe('Panel Type component', () => {
   });
 
   describe('when graph data is available', () => {
+    const findTimeChart = () => wrapper.find({ ref: 'timeChart' });
+
     beforeEach(() => {
       createWrapper({
         graphData: graphDataPrometheusQueryRange,
@@ -122,6 +124,21 @@ describe('Panel Type component', () => {
       expect(findCopyLink().exists()).toBe(false);
     });
 
+    it('should emit `timerange` event when a zooming in/out in a chart occcurs', () => {
+      const timeRange = {
+        start: '2020-01-01T00:00:00.000Z',
+        end: '2020-01-01T01:00:00.000Z',
+      };
+
+      jest.spyOn(wrapper.vm, '$emit');
+
+      findTimeChart().vm.$emit('datazoom', timeRange);
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.$emit).toHaveBeenCalledWith('timerangezoom', timeRange);
+      });
+    });
+
     describe('Time Series Chart panel type', () => {
       it('is rendered', () => {
         expect(wrapper.find(TimeSeriesChart).isVueInstance()).toBe(true);