Add commonly used ranges to apm date-picker (#44082)

This commit is contained in:
Miqayel Ohanjanyan 2019-08-27 19:19:28 +04:00 committed by Søren Louv-Jansen
parent b680912073
commit 243a095073

View file

@ -5,6 +5,7 @@
*/
import { EuiSuperDatePicker } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { fromQuery, toQuery } from '../Links/url_helpers';
import { history } from '../../../utils/history';
@ -14,6 +15,64 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
export function DatePicker() {
const location = useLocation();
const { urlParams, refreshTimeRange } = useUrlParams();
const commonlyUsedRanges = [
{
start: 'now-15m',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last15MinutesLabel', {
defaultMessage: 'Last 15 minutes'
})
},
{
start: 'now-30m',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last30MinutesLabel', {
defaultMessage: 'Last 30 minutes'
})
},
{
start: 'now-1h',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last1HourLabel', {
defaultMessage: 'Last 1 hour'
})
},
{
start: 'now-24h',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last24HoursLabel', {
defaultMessage: 'Last 24 hours'
})
},
{
start: 'now-7d',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last7DaysLabel', {
defaultMessage: 'Last 7 days'
})
},
{
start: 'now-30d',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last30DaysLabel', {
defaultMessage: 'Last 30 days'
})
},
{
start: 'now-90d',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last90DaysLabel', {
defaultMessage: 'Last 90 days'
})
},
{
start: 'now-1y',
end: 'now',
label: i18n.translate('xpack.apm.datePicker.last1YearLabel', {
defaultMessage: 'Last 1 year'
})
}
];
function updateUrl(nextQuery: {
rangeFrom?: string;
@ -58,6 +117,7 @@ export function DatePicker() {
}}
onRefreshChange={onRefreshChange}
showUpdateButton={true}
commonlyUsedRanges={commonlyUsedRanges}
/>
);
}