diff --git a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/toolbar.tsx b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/toolbar.tsx index ab6949e2f1d06..839e40e057c9a 100644 --- a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/toolbar.tsx +++ b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/toolbar.tsx @@ -26,6 +26,8 @@ import { MetricsExplorerChartOptions as MetricsExplorerChartOptionsComponent } f import { SavedViewsToolbarControls } from '../saved_views/toolbar_control'; import { MetricExplorerViewState } from '../../pages/infrastructure/metrics_explorer/use_metric_explorer_state'; import { metricsExplorerViewSavedObjectType } from '../../../common/saved_objects/metrics_explorer_view'; +import { useKibanaUiSetting } from '../../utils/use_kibana_ui_setting'; +import { mapKibanaQuickRangesToDatePickerRanges } from '../../utils/map_timepicker_quickranges_to_datepicker_ranges'; interface Props { derivedIndexPattern: IIndexPattern; @@ -59,6 +61,8 @@ export const MetricsExplorerToolbar = ({ onViewStateChange, }: Props) => { const isDefaultOptions = options.aggregation === 'avg' && options.metrics.length === 0; + const [timepickerQuickRanges] = useKibanaUiSetting('timepicker:quickRanges'); + const commonlyUsedRanges = mapKibanaQuickRangesToDatePickerRanges(timepickerQuickRanges); return ( @@ -134,6 +138,7 @@ export const MetricsExplorerToolbar = ({ end={timeRange.to} onTimeChange={({ start, end }) => onTimeChange(start, end)} onRefresh={onRefresh} + commonlyUsedRanges={commonlyUsedRanges} /> diff --git a/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.test.tsx b/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.test.tsx index 624a2bb4a6f0f..91e25fd8ef585 100644 --- a/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.test.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.test.tsx @@ -3,6 +3,18 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ +jest.mock('../../../utils/use_kibana_ui_setting', () => ({ + _esModule: true, + useKibanaUiSetting: jest.fn(() => [ + [ + { + from: 'now/d', + to: 'now/d', + display: 'Today', + }, + ], + ]), +})); import React from 'react'; import { MetricsTimeControls } from './time_controls'; diff --git a/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.tsx b/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.tsx index d181aa37f59aa..1546966c10a1e 100644 --- a/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.tsx +++ b/x-pack/legacy/plugins/infra/public/pages/metrics/components/time_controls.tsx @@ -5,9 +5,11 @@ */ import { EuiSuperDatePicker, OnRefreshChangeProps, OnTimeChangeProps } from '@elastic/eui'; -import React from 'react'; +import React, { useCallback } from 'react'; import euiStyled from '../../../../../../common/eui_styled_components'; import { MetricsTimeInput } from '../containers/with_metrics_time'; +import { useKibanaUiSetting } from '../../../utils/use_kibana_ui_setting'; +import { mapKibanaQuickRangesToDatePickerRanges } from '../../../utils/map_timepicker_quickranges_to_datepicker_ranges'; interface MetricsTimeControlsProps { currentTimeRange: MetricsTimeInput; @@ -19,41 +21,58 @@ interface MetricsTimeControlsProps { onRefresh: () => void; } -export class MetricsTimeControls extends React.Component { - public render() { - const { currentTimeRange, isLiveStreaming, refreshInterval } = this.props; - return ( - - - - ); - } - - private handleTimeChange = ({ start, end }: OnTimeChangeProps) => { - this.props.onChangeTimeRange({ - from: start, - to: end, - interval: '>=1m', - }); - }; - - private handleRefreshChange = ({ isPaused, refreshInterval }: OnRefreshChangeProps) => { - if (isPaused) { - this.props.setAutoReload(false); - } else { - this.props.setRefreshInterval(refreshInterval); - this.props.setAutoReload(true); - } - }; -} +export const MetricsTimeControls = (props: MetricsTimeControlsProps) => { + const [timepickerQuickRanges] = useKibanaUiSetting('timepicker:quickRanges'); + const { + onChangeTimeRange, + onRefresh, + currentTimeRange, + isLiveStreaming, + refreshInterval, + setAutoReload, + setRefreshInterval, + } = props; + + const commonlyUsedRanges = mapKibanaQuickRangesToDatePickerRanges(timepickerQuickRanges); + + const handleTimeChange = useCallback( + ({ start, end }: OnTimeChangeProps) => { + onChangeTimeRange({ + from: start, + to: end, + interval: '>=1m', + }); + }, + [onChangeTimeRange] + ); + + const handleRefreshChange = useCallback( + ({ isPaused, refreshInterval: _refreshInterval }: OnRefreshChangeProps) => { + if (isPaused) { + setAutoReload(false); + } else { + setRefreshInterval(_refreshInterval); + setAutoReload(true); + } + }, + [setAutoReload, setRefreshInterval] + ); + + return ( + + + + ); +}; const MetricsTimeControlsContainer = euiStyled.div` max-width: 750px; diff --git a/x-pack/legacy/plugins/infra/public/utils/map_timepicker_quickranges_to_datepicker_ranges.ts b/x-pack/legacy/plugins/infra/public/utils/map_timepicker_quickranges_to_datepicker_ranges.ts new file mode 100644 index 0000000000000..68fac1ef6c084 --- /dev/null +++ b/x-pack/legacy/plugins/infra/public/utils/map_timepicker_quickranges_to_datepicker_ranges.ts @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { EuiSuperDatePickerCommonRange } from '@elastic/eui'; +import { TimePickerQuickRange } from './use_kibana_ui_setting'; + +export const mapKibanaQuickRangesToDatePickerRanges = ( + timepickerQuickRanges: TimePickerQuickRange[] | undefined +): EuiSuperDatePickerCommonRange[] => + timepickerQuickRanges + ? timepickerQuickRanges.map(r => ({ + start: r.from, + end: r.to, + label: r.display, + })) + : []; diff --git a/x-pack/legacy/plugins/infra/public/utils/use_kibana_ui_setting.ts b/x-pack/legacy/plugins/infra/public/utils/use_kibana_ui_setting.ts index ce39a31c0fc3f..b3697db81fb6e 100644 --- a/x-pack/legacy/plugins/infra/public/utils/use_kibana_ui_setting.ts +++ b/x-pack/legacy/plugins/infra/public/utils/use_kibana_ui_setting.ts @@ -25,7 +25,27 @@ import useObservable from 'react-use/lib/useObservable'; * Unlike the `useState`, it doesn't give type guarantees for the value, * because the underlying `UiSettingsClient` doesn't support that. */ -export const useKibanaUiSetting = (key: string, defaultValue?: any) => { + +export interface TimePickerQuickRange { + from: string; + to: string; + display: string; +} + +export function useKibanaUiSetting( + key: 'timepicker:quickRanges', + defaultValue?: TimePickerQuickRange[] +): [ + TimePickerQuickRange[], + (key: 'timepicker:quickRanges', value: TimePickerQuickRange[]) => Promise +]; + +export function useKibanaUiSetting( + key: string, + defaultValue?: any +): [any, (key: string, value: any) => Promise]; + +export function useKibanaUiSetting(key: string, defaultValue?: any) { const uiSettingsClient = npSetup.core.uiSettings; const uiSetting$ = useMemo(() => uiSettingsClient.get$(key, defaultValue), [ @@ -41,4 +61,4 @@ export const useKibanaUiSetting = (key: string, defaultValue?: any) => { ]); return [uiSetting, setUiSetting]; -}; +}