Add latest changes from gitlab-org/gitlab@master

2 files changed, 20 insertions, 1 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index dbfb3e97c20..531d23bb6e5 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/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>
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index ba92b72a71d..79f2c8ad41f 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/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 });
     },
   },
 };