Add latest changes from gitlab-org/gitlab@master

3 files changed, 41 insertions, 44 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index c76c039fb3b..5f410c487e9 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -19,10 +19,10 @@ 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 { getParameterValues, mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { mergeUrlParams, redirectTo } from '~/lib/utils/url_utility';
 import invalidUrl from '~/lib/utils/invalid_url';
+import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import Icon from '~/vue_shared/components/icon.vue';
-import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 
 import GraphGroup from './graph_group.vue';
@@ -31,11 +31,8 @@ import GroupEmptyState from './group_empty_state.vue';
 import DashboardsDropdown from './dashboards_dropdown.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
-import { getAddMetricTrackingOptions } from '../utils';
-
-import { datePickerTimeWindows, metricStates } from '../constants';
-
-const defaultTimeRange = getTimeRange();
+import { getAddMetricTrackingOptions, timeRangeToUrl, timeRangeFromUrl } from '../utils';
+import { defaultTimeRange, timeRanges, metricStates } from '../constants';
 
 export default {
   components: {
@@ -197,10 +194,9 @@ export default {
     return {
       state: 'gettingStarted',
       formIsValid: null,
-      startDate: getParameterValues('start')[0] || defaultTimeRange.start,
-      endDate: getParameterValues('end')[0] || defaultTimeRange.end,
+      selectedTimeRange: timeRangeFromUrl() || defaultTimeRange,
       hasValidDates: true,
-      datePickerTimeWindows,
+      timeRanges,
       isRearrangingPanels: false,
     };
   },
@@ -260,9 +256,11 @@ export default {
     if (!this.hasMetrics) {
       this.setGettingStartedEmptyState();
     } else {
+      const { start, end } = convertToFixedRange(this.selectedTimeRange);
+
       this.fetchData({
-        start: this.startDate,
-        end: this.endDate,
+        start,
+        end,
       });
     }
   },
@@ -287,8 +285,8 @@ export default {
       });
     },
 
-    onDateTimePickerApply(params) {
-      redirectTo(mergeUrlParams(params, window.location.href));
+    onDateTimePickerInput(timeRange) {
+      redirectTo(timeRangeToUrl(timeRange));
     },
     onDateTimePickerInvalid() {
       createFlash(
@@ -296,8 +294,8 @@ export default {
           'Metrics|Link contains an invalid time window, please verify the link to see the requested time range.',
         ),
       );
-      this.startDate = defaultTimeRange.start;
-      this.endDate = defaultTimeRange.end;
+      // As a fallback, switch to default time range instead
+      this.selectedTimeRange = defaultTimeRange;
     },
 
     generateLink(group, title, yLabel) {
@@ -447,10 +445,9 @@ export default {
         >
           <date-time-picker
             ref="dateTimePicker"
-            :start="startDate"
-            :end="endDate"
-            :time-windows="datePickerTimeWindows"
-            @apply="onDateTimePickerApply"
+            :value="selectedTimeRange"
+            :options="timeRanges"
+            @input="onDateTimePickerInput"
             @invalid="onDateTimePickerInvalid"
           />
         </gl-form-group>
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index c79e43c7c29..e55de1c0105 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -1,9 +1,9 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
 import PanelType from 'ee_else_ce/monitoring/components/panel_type.vue';
-import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
-import { sidebarAnimationDuration } from '../constants';
-import { getTimeRange } from '~/vue_shared/components/date_time_picker/date_time_picker_lib';
+import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import { timeRangeFromUrl, removeTimeRangeParams } from '../utils';
+import { sidebarAnimationDuration, defaultTimeRange } from '../constants';
 
 let sidebarMutationObserver;
 
@@ -18,10 +18,8 @@ export default {
     },
   },
   data() {
-    const defaultRange = getTimeRange();
-    const start = getParameterValues('start', this.dashboardUrl)[0] || defaultRange.start;
-    const end = getParameterValues('end', this.dashboardUrl)[0] || defaultRange.end;
-
+    const timeRange = timeRangeFromUrl(this.dashboardUrl) || defaultTimeRange;
+    const { start, end } = convertToFixedRange(timeRange);
     const params = {
       start,
       end,
@@ -81,7 +79,7 @@ export default {
     },
     setInitialState() {
       this.setEndpoints({
-        dashboardEndpoint: removeParams(['start', 'end'], this.dashboardUrl),
+        dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
       });
       this.setShowErrorBanner(false);
     },
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index 2d5361a5029..789b3131d11 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -83,34 +83,36 @@ export const dateFormats = {
   default: 'dd mmm yyyy, h:MMTT',
 };
 
-export const datePickerTimeWindows = {
-  thirtyMinutes: {
+export const timeRanges = [
+  {
     label: __('30 minutes'),
-    seconds: 60 * 30,
+    duration: { seconds: 60 * 30 },
   },
-  threeHours: {
+  {
     label: __('3 hours'),
-    seconds: 60 * 60 * 3,
+    duration: { seconds: 60 * 60 * 3 },
   },
-  eightHours: {
+  {
     label: __('8 hours'),
-    seconds: 60 * 60 * 8,
+    duration: { seconds: 60 * 60 * 8 },
     default: true,
   },
-  oneDay: {
+  {
     label: __('1 day'),
-    seconds: 60 * 60 * 24 * 1,
+    duration: { seconds: 60 * 60 * 24 * 1 },
   },
-  threeDays: {
+  {
     label: __('3 days'),
-    seconds: 60 * 60 * 24 * 3,
+    duration: { seconds: 60 * 60 * 24 * 3 },
   },
-  oneWeek: {
+  {
     label: __('1 week'),
-    seconds: 60 * 60 * 24 * 7 * 1,
+    duration: { seconds: 60 * 60 * 24 * 7 * 1 },
   },
-  twoWeeks: {
+  {
     label: __('2 weeks'),
-    seconds: 60 * 60 * 24 * 7 * 2,
+    duration: { seconds: 60 * 60 * 24 * 7 * 2 },
   },
-};
+];
+
+export const defaultTimeRange = timeRanges.find(tr => tr.default);