diff --git a/app/assets/javascripts/observability/client.js b/app/assets/javascripts/observability/client.js
index 1ce8cde54a97b54f53d12bc66e08db156b536478..3785f42a769f06a8a2ae07522a523732fdf3d319 100644
--- a/app/assets/javascripts/observability/client.js
+++ b/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());
diff --git a/app/assets/javascripts/observability/constants.js b/app/assets/javascripts/observability/constants.js
index dbbec3678e879e96fe5517503eefb785298f2c33..5d6bd4faed603fd5902a75f63c380e4883a464b4 100644
--- a/app/assets/javascripts/observability/constants.js
+++ b/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';
diff --git a/ee/app/assets/javascripts/metrics/details/filter_bar/date_range_filter.vue b/ee/app/assets/javascripts/metrics/details/filter_bar/date_range_filter.vue
index cdeaa49d2c7ae6b1c7e50bd0b5e596e53116fc98..a8abd3cf9f0c055ddb2ceedf69298077a72ae079 100644
--- a/ee/app/assets/javascripts/metrics/details/filter_bar/date_range_filter.vue
+++ b/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>
diff --git a/ee/spec/frontend/metrics/details/filter_bar/date_range_filter_spec.js b/ee/spec/frontend/metrics/details/filter_bar/date_range_filter_spec.js
index 1cdb38df60b0c2d10c390555cf37229079f2a06f..6009594b93fa580c6a6cd8c0d81bb596eb3d8e89 100644
--- a/ee/spec/frontend/metrics/details/filter_bar/date_range_filter_spec.js
+++ b/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',
+ },
+ ],
+ ]);
});
});