Fix metrics filter bar Custom date range option

app/assets/javascripts/observability/client.js

@@ -2,7 +2,7 @@ import { isValidDate } from '~/lib/utils/datetime_utility';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import { logError } from '~/lib/logger';
-import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from './constants';
+import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS, CUSTOM_DATE_RANGE_OPTION } from './constants';
 
 function reportErrorAndThrow(e) {
   logError(e);
@@ -358,7 +358,7 @@ function addMetricsDateRangeFilterToQueryParams(dateRangeFilter, params) {
   if (!dateRangeFilter || !params) return;
 
   const { value, endDate, startDate } = dateRangeFilter;
-  if (value === 'custom') {
+  if (value === CUSTOM_DATE_RANGE_OPTION) {
     if (isValidDate(startDate) && isValidDate(endDate)) {
       params.append('start_time', startDate.toISOString());
       params.append('end_time', endDate.toISOString());

app/assets/javascripts/observability/constants.js

@@ -9,17 +9,30 @@ export const SORTING_OPTIONS = {
 Object.freeze(SORTING_OPTIONS);
 export const DEFAULT_SORTING_OPTION = SORTING_OPTIONS.TIMESTAMP_DESC;
 
+export const TIME_RANGE_OPTIONS_VALUES = {
+  FIVE_MIN: '5m',
+  FIFTEEN_MIN: '15m',
+  THIRTY_MIN: '30m',
+  ONE_HOUR: '1h',
+  FOUR_HOURS: '4h',
+  TWELVE_HOURS: '12h',
+  ONE_DAY: '24h',
+  ONE_WEEK: '7d',
+  TWO_WEEKS: '14d',
+  ONE_MONTH: '30d',
+};
+
 export const TIME_RANGE_OPTIONS = [
-  { value: '5m', title: s__('Observability|Last 5 minutes') },
-  { value: '15m', title: s__('Observability|Last 15 minutes') },
-  { value: '30m', title: s__('Observability|Last 30 minutes') },
-  { value: '1h', title: s__('Observability|Last 1 hour') },
-  { value: '4h', title: s__('Observability|Last 4 hours') },
-  { value: '12h', title: s__('Observability|Last 12 hours') },
-  { value: '24h', title: s__('Observability|Last 24 hours') },
-  { value: '7d', title: s__('Observability|Last 7 days') },
-  { value: '14d', title: s__('Observability|Last 14 days') },
-  { value: '30d', title: s__('Observability|Last 30 days') },
+  { value: TIME_RANGE_OPTIONS_VALUES.FIVE_MIN, title: s__('Observability|Last 5 minutes') },
+  { value: TIME_RANGE_OPTIONS_VALUES.FIFTEEN_MIN, title: s__('Observability|Last 15 minutes') },
+  { value: TIME_RANGE_OPTIONS_VALUES.THIRTY_MIN, title: s__('Observability|Last 30 minutes') },
+  { value: TIME_RANGE_OPTIONS_VALUES.ONE_HOUR, title: s__('Observability|Last 1 hour') },
+  { value: TIME_RANGE_OPTIONS_VALUES.FOUR_HOURS, title: s__('Observability|Last 4 hours') },
+  { value: TIME_RANGE_OPTIONS_VALUES.TWELVE_HOURS, title: s__('Observability|Last 12 hours') },
+  { value: TIME_RANGE_OPTIONS_VALUES.ONE_DAY, title: s__('Observability|Last 24 hours') },
+  { value: TIME_RANGE_OPTIONS_VALUES.ONE_WEEK, title: s__('Observability|Last 7 days') },
+  { value: TIME_RANGE_OPTIONS_VALUES.TWO_WEEKS, title: s__('Observability|Last 14 days') },
+  { value: TIME_RANGE_OPTIONS_VALUES.ONE_MONTH, title: s__('Observability|Last 30 days') },
 ];
 Object.freeze(TIME_RANGE_OPTIONS);
 
@@ -31,3 +44,5 @@ const OPERERATOR_NOT_LIKE_TEXT = s__('ObservabilityMetrics|is not like');
 const OPERATORS_LIKE = [{ value: OPERERATOR_LIKE, description: OPERERATOR_LIKE_TEXT }];
 const OPERATORS_NOT_LIKE = [{ value: OPERERATOR_NOT_LIKE, description: OPERERATOR_NOT_LIKE_TEXT }];
 export const OPERATORS_LIKE_NOT = [...OPERATORS_LIKE, ...OPERATORS_NOT_LIKE];
+
+export const CUSTOM_DATE_RANGE_OPTION = 'custom';

ee/app/assets/javascripts/metrics/details/filter_bar/date_range_filter.vue

@@ -2,7 +2,11 @@
 import { GlDaterangePicker } from '@gitlab/ui';
 import { periodToDate } from '~/observability/utils';
 import DateRangesDropdown from '~/analytics/shared/components/date_ranges_dropdown.vue';
-import { TIME_RANGE_OPTIONS } from '~/observability/constants';
+import {
+  TIME_RANGE_OPTIONS,
+  TIME_RANGE_OPTIONS_VALUES,
+  CUSTOM_DATE_RANGE_OPTION,
+} from '~/observability/constants';
 
 export default {
   components: {
@@ -18,11 +22,10 @@ export default {
   },
   data() {
     return {
-      shouldShowDateRangePicker: false,
       dateRange: this.selected ?? {
         value: '',
-        min: null,
-        max: null,
+        startDate: null,
+        endDate: null,
       },
     };
   },
@@ -38,10 +41,12 @@ export default {
         };
       });
     },
+    shouldShowDateRangePicker() {
+      return this.dateRange.value === CUSTOM_DATE_RANGE_OPTION;
+    },
   },
   methods: {
     onSelectPredefinedDateRange({ value, startDate, endDate }) {
-      this.shouldShowDateRangePicker = false;
       this.dateRange = {
         value,
         startDate: new Date(startDate),
@@ -50,11 +55,17 @@ export default {
       this.$emit('onDateRangeSelected', this.dateRange);
     },
     onSelectCustomDateRange() {
-      this.shouldShowDateRangePicker = true;
+      const defaultDateRange = periodToDate(TIME_RANGE_OPTIONS_VALUES.ONE_MONTH);
+      this.dateRange = {
+        value: CUSTOM_DATE_RANGE_OPTION,
+        startDate: defaultDateRange.min,
+        endDate: defaultDateRange.max,
+      };
+      this.$emit('onDateRangeSelected', this.dateRange);
     },
     onCustomRangeSelected({ startDate, endDate }) {
       this.dateRange = {
-        value: 'custom',
+        value: CUSTOM_DATE_RANGE_OPTION,
         startDate: new Date(startDate),
         endDate: new Date(endDate),
       };
@@ -77,7 +88,8 @@ export default {
     />
     <gl-daterange-picker
       v-if="shouldShowDateRangePicker"
-      start-opened
+      :default-start-date="dateRange.startDate"
+      :default-end-date="dateRange.endDate"
       @input="onCustomRangeSelected"
     />
   </div>

ee/spec/frontend/metrics/details/filter_bar/date_range_filter_spec.js

@@ -102,10 +102,24 @@ describe('DateRangeFilter', () => {
     expect(findDateRangesDropdown().props('selected')).toBe('');
   });
 
-  it('renders the daterange-picker only if custom option is selected', async () => {
+  it('renders the daterange-picker with default 30d date range when customDateRangeSelected is emitteed', async () => {
     expect(findDateRangesPicker().exists()).toBe(false);
     await findDateRangesDropdown().vm.$emit('customDateRangeSelected');
     expect(findDateRangesPicker().exists()).toBe(true);
+    // mocked 30d date range
+    expect(findDateRangesPicker().props('defaultStartDate')).toEqual(new Date('2020-06-06'));
+    expect(findDateRangesPicker().props('defaultEndDate')).toEqual(new Date('2020-07-06'));
+  });
+
+  it('renders the daterange-picker if custom option is selected', () => {
+    const timeRange = {
+      startDate: new Date('2022-01-01'),
+      endDate: new Date('2022-01-02'),
+    };
+    mount({ value: 'custom', startDate: timeRange.startDate, endDate: timeRange.endDate });
+    expect(findDateRangesPicker().exists()).toBe(true);
+    expect(findDateRangesPicker().props('defaultStartDate')).toBe(timeRange.startDate);
+    expect(findDateRangesPicker().props('defaultEndDate')).toBe(timeRange.endDate);
   });
 
   it('emits the onDateRangeSelected event when the time range is selected', async () => {
@@ -119,12 +133,38 @@ describe('DateRangeFilter', () => {
   });
 
   it('emits the onDateRangeSelected event when a custom time range is selected', async () => {
+    const defaultCustomTimeRange = {
+      // last30d
+      endDate: new Date('2020-07-06T00:00:00.000Z'),
+      startDate: new Date('2020-06-06T00:00:00.000Z'),
+    };
     const timeRange = {
       startDate: new Date('2021-01-01'),
       endDate: new Date('2021-01-02'),
     };
     await findDateRangesDropdown().vm.$emit('customDateRangeSelected');
+    expect(wrapper.emitted('onDateRangeSelected')).toEqual([
+      [
+        {
+          ...defaultCustomTimeRange,
+          value: 'custom',
+        },
+      ],
+    ]);
     await findDateRangesPicker().vm.$emit('input', timeRange);
-    expect(wrapper.emitted('onDateRangeSelected')).toEqual([[{ value: 'custom', ...timeRange }]]);
+    expect(wrapper.emitted('onDateRangeSelected')).toEqual([
+      [
+        {
+          ...defaultCustomTimeRange,
+          value: 'custom',
+        },
+      ],
+      [
+        {
+          ...timeRange,
+          value: 'custom',
+        },
+      ],
+    ]);
   });
 });