[ML] Add commonly used ranges to date picker (#96501)
This commit is contained in:
parent
767567fb47
commit
4a54188355
|
@ -35,7 +35,20 @@ jest.mock('../../../contexts/kibana', () => ({
|
|||
useMlKibana: () => {
|
||||
return {
|
||||
services: {
|
||||
uiSettings: { get: jest.fn() },
|
||||
uiSettings: {
|
||||
get: jest.fn().mockReturnValue([
|
||||
{
|
||||
from: 'now/d',
|
||||
to: 'now/d',
|
||||
display: 'Today',
|
||||
},
|
||||
{
|
||||
from: 'now/w',
|
||||
to: 'now/w',
|
||||
display: 'This week',
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: {
|
||||
query: {
|
||||
timefilter: {
|
||||
|
|
|
@ -5,17 +5,24 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { FC, useCallback, useEffect, useState } from 'react';
|
||||
import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
import { EuiSuperDatePicker, OnRefreshProps } from '@elastic/eui';
|
||||
import { TimeHistoryContract, TimeRange } from 'src/plugins/data/public';
|
||||
import { UI_SETTINGS } from '../../../../../../../../src/plugins/data/common';
|
||||
|
||||
import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
|
||||
import { useUrlState } from '../../../util/url_state';
|
||||
import { useMlKibana } from '../../../contexts/kibana';
|
||||
|
||||
interface TimePickerQuickRange {
|
||||
from: string;
|
||||
to: string;
|
||||
display: string;
|
||||
}
|
||||
|
||||
interface Duration {
|
||||
start: string;
|
||||
end: string;
|
||||
|
@ -71,6 +78,19 @@ export const DatePickerWrapper: FC = () => {
|
|||
);
|
||||
|
||||
const dateFormat = config.get('dateFormat');
|
||||
const timePickerQuickRanges = config.get<TimePickerQuickRange[]>(
|
||||
UI_SETTINGS.TIMEPICKER_QUICK_RANGES
|
||||
);
|
||||
|
||||
const commonlyUsedRanges = useMemo(
|
||||
() =>
|
||||
timePickerQuickRanges.map(({ from, to, display }) => ({
|
||||
start: from,
|
||||
end: to,
|
||||
label: display,
|
||||
})),
|
||||
[timePickerQuickRanges]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const subscriptions = new Subscription();
|
||||
|
@ -141,6 +161,7 @@ export const DatePickerWrapper: FC = () => {
|
|||
onRefreshChange={updateInterval}
|
||||
recentlyUsedRanges={recentlyUsedRanges}
|
||||
dateFormat={dateFormat}
|
||||
commonlyUsedRanges={commonlyUsedRanges}
|
||||
/>
|
||||
</div>
|
||||
) : null;
|
||||
|
|
|
@ -5,8 +5,11 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
|
||||
|
||||
export const kibanaContextMock = {
|
||||
services: {
|
||||
uiSettings: { get: jest.fn() },
|
||||
chrome: { recentlyAccessed: { add: jest.fn() } },
|
||||
application: { navigateToApp: jest.fn() },
|
||||
http: {
|
||||
|
@ -17,6 +20,7 @@ export const kibanaContextMock = {
|
|||
share: {
|
||||
urlGenerators: { getUrlGenerator: jest.fn() },
|
||||
},
|
||||
data: dataPluginMock.createStartContract(),
|
||||
},
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue