Merge branch 'jivanvl-change-url-time-slider' into 'master'

Change the url when the timeslider changes

See merge request gitlab-org/gitlab!27726

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

@@ -19,7 +19,12 @@ import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
 import { s__ } from '~/locale';
 import createFlash from '~/flash';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { mergeUrlParams, redirectTo, refreshCurrentPage } from '~/lib/utils/url_utility';
+import {
+  mergeUrlParams,
+  redirectTo,
+  refreshCurrentPage,
+  updateHistory,
+} from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
 import Icon from '~/vue_shared/components/icon.vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
@@ -356,6 +361,14 @@ export default {
     refreshDashboard() {
       refreshCurrentPage();
     },
+
+    onTimeRangeZoom({ start, end }) {
+      updateHistory({
+        url: mergeUrlParams({ start, end }, window.location.href),
+        title: document.title,
+      });
+      this.selectedTimeRange = { start, end };
+    },
   },
   addMetric: {
     title: s__('Metrics|Add metric'),
@@ -577,6 +590,7 @@ export default {
                 :alerts-endpoint="alertsEndpoint"
                 :prometheus-alerts-available="prometheusAlertsAvailable"
                 :index="`${index}-${graphIndex}`"
+                @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,6 +163,7 @@ export default {
     },
     onDatazoom({ start, end }) {
       this.zoomedTimeRange = { start, end };
+      this.$emit(events.timeRangeZoom, { start, end });
     },
   },
 };

changelogs/unreleased/jivanvl-change-url-time-slider.yml

+---
+title: Change the url when the timeslider changes
+merge_request: 27726
+author:
+type: changed

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);