diff --git a/changelogs/upcoming/7501.md b/changelogs/upcoming/7501.md new file mode 100644 index 00000000000..1dc88c525a2 --- /dev/null +++ b/changelogs/upcoming/7501.md @@ -0,0 +1,3 @@ +- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. +- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. +- Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). diff --git a/src-docs/src/views/auto_refresh/playground.js b/src-docs/src/views/auto_refresh/playground.js index c9378d5e2a5..f59b57a705b 100644 --- a/src-docs/src/views/auto_refresh/playground.js +++ b/src-docs/src/views/auto_refresh/playground.js @@ -8,6 +8,7 @@ import { propUtilityForPlayground, dummyFunction, simulateFunction, + createOptionalEnum, } from '../../services/playground'; export const autoRefreshConfig = () => { @@ -21,6 +22,8 @@ export const autoRefreshConfig = () => { true ); + propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits); + propsToUse.append = { ...propsToUse.append, type: PropTypes.String, @@ -56,6 +59,8 @@ export const autoRefreshButtonConfig = () => { true ); + propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits); + return { config: { componentName: 'EuiAutoRefreshButton', @@ -86,6 +91,8 @@ export const refreshIntervalConfig = () => { true ); + propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits); + return { config: { componentName: 'EuiRefreshInterval', diff --git a/src-docs/src/views/super_date_picker/auto_refresh.tsx b/src-docs/src/views/super_date_picker/auto_refresh.tsx index 62cd2e65761..dda1e9600ac 100644 --- a/src-docs/src/views/super_date_picker/auto_refresh.tsx +++ b/src-docs/src/views/super_date_picker/auto_refresh.tsx @@ -5,9 +5,14 @@ import { OnRefreshChangeProps, OnRefreshProps, OnTimeChangeProps, + RefreshUnitsOptions, + EuiSwitch, } from '../../../../src'; export default () => { + const [doNotRoundUnits, setDoNotRoundUnits] = useState(false); + const [intervalUnits, setIntervalUnits] = useState(); + const [refreshInterval, setRefreshInterval] = useState(1000); const [isPaused, setIsPaused] = useState(true); const [start, setStart] = useState('now-30m'); @@ -29,9 +34,11 @@ export default () => { const onRefreshChange = ({ isPaused, refreshInterval, + intervalUnits, }: OnRefreshChangeProps) => { setIsPaused(isPaused); setRefreshInterval(refreshInterval); + setIntervalUnits(intervalUnits); }; return ( @@ -41,8 +48,20 @@ export default () => { onTimeChange={onTimeChange} onRefresh={onRefresh} isPaused={isPaused} - refreshInterval={refreshInterval} onRefreshChange={onRefreshChange} + refreshInterval={refreshInterval} + refreshIntervalUnits={doNotRoundUnits ? intervalUnits : undefined} + customQuickSelectRender={({ refreshInterval }) => ( + <> + setDoNotRoundUnits(!doNotRoundUnits)} + compressed + /> + {refreshInterval} + + )} /> ); }; diff --git a/src-docs/src/views/super_date_picker/playground.js b/src-docs/src/views/super_date_picker/playground.js index 31a5ab6f0ea..610014ac214 100644 --- a/src-docs/src/views/super_date_picker/playground.js +++ b/src-docs/src/views/super_date_picker/playground.js @@ -7,6 +7,7 @@ import { propUtilityForPlayground, dummyFunction, simulateFunction, + createOptionalEnum, } from '../../services/playground'; export const superDatePickerConfig = () => { @@ -18,6 +19,10 @@ export const superDatePickerConfig = () => { propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true); propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange); + propsToUse.refreshIntervalUnits = createOptionalEnum( + propsToUse.refreshIntervalUnits + ); + propsToUse.isPaused = { ...propsToUse.isPaused, type: PropTypes.Boolean, diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index 1f3b6b36bed..1607e80d973 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -303,7 +303,7 @@ if (!endMoment || !endMoment.isValid()) { text: ( <>

- Set isAutoRefreshOnly to true {' '} + Set isAutoRefreshOnly to true{' '} to limit the component to only display auto refresh content. This is useful in cases where there is no time data but auto-refresh configuration is still desired. diff --git a/src/components/date_picker/auto_refresh/auto_refresh.test.tsx b/src/components/date_picker/auto_refresh/auto_refresh.test.tsx index 6a99c8e2279..9edbcc3f546 100644 --- a/src/components/date_picker/auto_refresh/auto_refresh.test.tsx +++ b/src/components/date_picker/auto_refresh/auto_refresh.test.tsx @@ -7,6 +7,7 @@ */ import React from 'react'; +import { fireEvent } from '@testing-library/react'; import { requiredProps } from '../../../test/required_props'; import { render } from '../../../test/rtl'; @@ -40,6 +41,50 @@ describe('EuiAutoRefresh', () => { expect(container.firstChild).toMatchSnapshot(); }); + + test('intervalUnits forces rendering in the provided units', () => { + const { getByLabelText, getByRole, getByTestSubject } = render( + {}} + /> + ); + + expect(getByLabelText('Auto refresh')).toHaveValue('200 seconds'); + + fireEvent.click(getByRole('button')); + expect(getByTestSubject('superDatePickerRefreshIntervalInput')).toHaveValue( + 200 + ); + expect( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect') + ).toHaveValue('s'); + }); + + test('onRefreshChange passes back all expected values', () => { + const onRefreshChange = jest.fn(); + const { getByLabelText, getByTestSubject } = render( + + ); + + fireEvent.click(getByLabelText('Auto refresh')); + fireEvent.change( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect'), + { target: { value: 'h' } } + ); + + expect(onRefreshChange).toHaveBeenCalledWith({ + refreshInterval: 3600000, + intervalUnits: 'h', + isPaused: false, + }); + }); }); describe('EuiAutoRefreshButton', () => { @@ -70,4 +115,48 @@ describe('EuiAutoRefreshButton', () => { expect(container.firstChild).toMatchSnapshot(); }); + + test('intervalUnits forces rendering in the provided units', () => { + const { getByRole, getByTestSubject } = render( + {}} + /> + ); + + expect(getByRole('button')).toHaveTextContent('200 s'); + + fireEvent.click(getByRole('button')); + expect(getByTestSubject('superDatePickerRefreshIntervalInput')).toHaveValue( + 200 + ); + expect( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect') + ).toHaveValue('s'); + }); + + test('onRefreshChange passes back all expected values', () => { + const onRefreshChange = jest.fn(); + const { getByRole, getByTestSubject } = render( + + ); + + fireEvent.click(getByRole('button')); + fireEvent.change( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect'), + { target: { value: 'h' } } + ); + + expect(onRefreshChange).toHaveBeenCalledWith({ + refreshInterval: 3600000, + intervalUnits: 'h', + isPaused: false, + }); + }); }); diff --git a/src/components/date_picker/auto_refresh/auto_refresh.tsx b/src/components/date_picker/auto_refresh/auto_refresh.tsx index 47f5cd96f60..e4e7f89b67a 100644 --- a/src/components/date_picker/auto_refresh/auto_refresh.tsx +++ b/src/components/date_picker/auto_refresh/auto_refresh.tsx @@ -36,6 +36,7 @@ export type EuiAutoRefreshProps = EuiAutoRefreshSharedProps & { export const EuiAutoRefresh: FunctionComponent = ({ className, onRefreshChange, + intervalUnits, isDisabled, isPaused = true, refreshInterval = 1000, @@ -74,7 +75,9 @@ export const EuiAutoRefresh: FunctionComponent = ({ } readOnly={readOnly} disabled={isDisabled} - value={usePrettyInterval(Boolean(isPaused), refreshInterval)} + value={usePrettyInterval(Boolean(isPaused), refreshInterval, { + unit: intervalUnits, + })} {...rest} /> } @@ -87,6 +90,7 @@ export const EuiAutoRefresh: FunctionComponent = ({ onRefreshChange={onRefreshChange} isPaused={isPaused} refreshInterval={refreshInterval} + intervalUnits={intervalUnits} /> ); @@ -107,6 +111,7 @@ export const EuiAutoRefreshButton: FunctionComponent< > = ({ className, onRefreshChange, + intervalUnits, isDisabled, isPaused = true, refreshInterval = 1000, @@ -125,7 +130,11 @@ export const EuiAutoRefreshButton: FunctionComponent< const autoRefeshLabelOn = useEuiI18n( 'euiAutoRefresh.buttonLabelOn', 'Auto refresh is on and set to {prettyInterval}', - { prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval) } + { + prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval, { + unit: intervalUnits, + }), + } ); return ( @@ -141,7 +150,10 @@ export const EuiAutoRefreshButton: FunctionComponent< isDisabled={isDisabled} {...rest} > - {usePrettyInterval(Boolean(isPaused), refreshInterval, shortHand)} + {usePrettyInterval(Boolean(isPaused), refreshInterval, { + shortHand, + unit: intervalUnits, + })} } isOpen={isPopoverOpen} @@ -156,6 +168,7 @@ export const EuiAutoRefreshButton: FunctionComponent< onRefreshChange={onRefreshChange} isPaused={isPaused} refreshInterval={refreshInterval} + intervalUnits={intervalUnits} /> ); diff --git a/src/components/date_picker/auto_refresh/refresh_interval.tsx b/src/components/date_picker/auto_refresh/refresh_interval.tsx index 86e4830e017..5c86a7ef997 100644 --- a/src/components/date_picker/auto_refresh/refresh_interval.tsx +++ b/src/components/date_picker/auto_refresh/refresh_interval.tsx @@ -20,22 +20,29 @@ import { RenderI18nTimeOptions, TimeOptions, } from '../super_date_picker/time_options'; -import { Milliseconds, TimeUnitId, ApplyRefreshInterval } from '../types'; +import { + Milliseconds, + RefreshUnitsOptions, + ApplyRefreshInterval, +} from '../types'; const MILLISECONDS_IN_SECOND = 1000; const MILLISECONDS_IN_MINUTE = MILLISECONDS_IN_SECOND * 60; const MILLISECONDS_IN_HOUR = MILLISECONDS_IN_MINUTE * 60; -function fromMilliseconds(milliseconds: Milliseconds): EuiRefreshIntervalState { +function fromMilliseconds( + milliseconds: Milliseconds, + unit?: RefreshUnitsOptions +): EuiRefreshIntervalState { const round = (value: number) => parseFloat(value.toFixed(2)); - if (milliseconds > MILLISECONDS_IN_HOUR) { + if (unit === 'h' || (!unit && milliseconds > MILLISECONDS_IN_HOUR)) { return { units: 'h', value: round(milliseconds / MILLISECONDS_IN_HOUR), }; } - if (milliseconds > MILLISECONDS_IN_MINUTE) { + if (unit === 'm' || (!unit && milliseconds > MILLISECONDS_IN_MINUTE)) { return { units: 'm', value: round(milliseconds / MILLISECONDS_IN_MINUTE), @@ -48,7 +55,7 @@ function fromMilliseconds(milliseconds: Milliseconds): EuiRefreshIntervalState { }; } -function toMilliseconds(units: TimeUnitId, value: Milliseconds) { +function toMilliseconds(units: RefreshUnitsOptions, value: Milliseconds) { switch (units) { case 'h': return Math.round(value * MILLISECONDS_IN_HOUR); @@ -70,14 +77,21 @@ export type EuiRefreshIntervalProps = { */ refreshInterval?: Milliseconds; /** - * Passes back the updated state of `isPaused` and `refreshInterval`. + * Passes back the updated state of `isPaused` `refreshInterval`, and `intervalUnits`. */ onRefreshChange: ApplyRefreshInterval; + /** + * By default, refresh interval units will be rounded up to next largest unit of time + * (for example, 90 seconds will become 2m). + * + * If you do not want this behavior, you can manually control the rendered unit via this prop. + */ + intervalUnits?: RefreshUnitsOptions; }; interface EuiRefreshIntervalState { value: number | ''; - units: TimeUnitId; + units: RefreshUnitsOptions; } export class EuiRefreshInterval extends Component< @@ -90,7 +104,8 @@ export class EuiRefreshInterval extends Component< }; state: EuiRefreshIntervalState = fromMilliseconds( - this.props.refreshInterval || 0 + this.props.refreshInterval || 0, + this.props.intervalUnits ); generateId = htmlIdGenerator(); @@ -110,7 +125,7 @@ export class EuiRefreshInterval extends Component< onUnitsChange: ChangeEventHandler = (event) => { this.setState( { - units: event.target.value as TimeUnitId, + units: event.target.value as RefreshUnitsOptions, }, this.applyRefreshInterval ); @@ -123,6 +138,7 @@ export class EuiRefreshInterval extends Component< if (value !== '' && value > 0 && onRefreshChange !== undefined) { onRefreshChange({ refreshInterval: toMilliseconds(units, value), + intervalUnits: units, isPaused: false, }); } @@ -148,6 +164,7 @@ export class EuiRefreshInterval extends Component< onRefreshChange({ refreshInterval, + intervalUnits: units, isPaused: refreshInterval <= 0 ? true : !!isPaused, }); }; @@ -161,6 +178,7 @@ export class EuiRefreshInterval extends Component< } onRefreshChange({ refreshInterval: toMilliseconds(units, value), + intervalUnits: units, isPaused: !isPaused, }); }; diff --git a/src/components/date_picker/index.ts b/src/components/date_picker/index.ts index 04764572402..2bfc07141f0 100644 --- a/src/components/date_picker/index.ts +++ b/src/components/date_picker/index.ts @@ -29,6 +29,7 @@ export type { NowDateMode, DateMode, OnRefreshChangeProps, + RefreshUnitsOptions, ShortDate, RelativeParts, RelativeOption, diff --git a/src/components/date_picker/super_date_picker/pretty_interval.test.ts b/src/components/date_picker/super_date_picker/pretty_interval.test.ts index ad5b563dd8f..059aef6c961 100644 --- a/src/components/date_picker/super_date_picker/pretty_interval.test.ts +++ b/src/components/date_picker/super_date_picker/pretty_interval.test.ts @@ -12,7 +12,6 @@ import { usePrettyInterval } from './pretty_interval'; const IS_NOT_PAUSED = false; const IS_PAUSED = true; -const SHORT_HAND = true; describe('usePrettyInterval', () => { test('off', () => { @@ -32,9 +31,14 @@ describe('usePrettyInterval', () => { renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000)).result.current ).toBe('15 seconds'); expect( - renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000, SHORT_HAND)) - .result.current + renderHook(() => + usePrettyInterval(IS_NOT_PAUSED, 15000, { shortHand: true }) + ).result.current ).toBe('15 s'); + expect( + renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 90000, { unit: 's' })) + .result.current + ).toBe('90 seconds'); }); test('minutes', () => { @@ -45,9 +49,14 @@ describe('usePrettyInterval', () => { renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 1800000)).result.current ).toBe('30 minutes'); expect( - renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 1800000, SHORT_HAND)) - .result.current + renderHook(() => + usePrettyInterval(IS_NOT_PAUSED, 1800000, { shortHand: true }) + ).result.current ).toBe('30 m'); + expect( + renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 3600000, { unit: 'm' })) + .result.current + ).toBe('60 minutes'); }); test('hours', () => { @@ -59,9 +68,15 @@ describe('usePrettyInterval', () => { .current ).toBe('12 hours'); expect( - renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 43200000, SHORT_HAND)) - .result.current + renderHook(() => + usePrettyInterval(IS_NOT_PAUSED, 43200000, { shortHand: true }) + ).result.current ).toBe('12 h'); + expect( + renderHook(() => + usePrettyInterval(IS_NOT_PAUSED, 86400000, { unit: 'h' }) + ).result.current + ).toBe('24 hours'); }); test('days', () => { @@ -74,8 +89,9 @@ describe('usePrettyInterval', () => { .current ).toBe('2 days'); expect( - renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000, SHORT_HAND)) - .result.current + renderHook(() => + usePrettyInterval(IS_NOT_PAUSED, 86400000, { shortHand: true }) + ).result.current ).toBe('1 d'); }); }); diff --git a/src/components/date_picker/super_date_picker/pretty_interval.ts b/src/components/date_picker/super_date_picker/pretty_interval.ts index cced154246e..aa66f00b8ca 100644 --- a/src/components/date_picker/super_date_picker/pretty_interval.ts +++ b/src/components/date_picker/super_date_picker/pretty_interval.ts @@ -8,12 +8,20 @@ import { useEuiI18n } from '../../i18n'; -const MS_IN_SECOND = 1000; -const MS_IN_MINUTE = 60 * MS_IN_SECOND; -const MS_IN_HOUR = 60 * MS_IN_MINUTE; -const MS_IN_DAY = 24 * MS_IN_HOUR; +const MS_INTERVALS = { + s: 1000, + get m() { + return 60 * this.s; + }, + get h() { + return 60 * this.m; + }, + get d() { + return 24 * this.h; + }, +} as const; -type IntervalUnitId = 's' | 'm' | 'h' | 'd'; +type IntervalUnitId = keyof typeof MS_INTERVALS; /** * Pretty interval i18n strings @@ -61,24 +69,31 @@ const usePrettyIntervalI18n = (interval: number) => ({ export const usePrettyInterval = ( isPaused: boolean, intervalInMs: number, - shortHand: boolean = false + options?: { shortHand?: boolean; unit?: IntervalUnitId } ) => { + const { shortHand = false, unit } = options || {}; + let prettyInterval = ''; let interval: number; let unitId: IntervalUnitId; - if (intervalInMs < MS_IN_MINUTE) { - interval = Math.round(intervalInMs / MS_IN_SECOND); - unitId = 's'; - } else if (intervalInMs < MS_IN_HOUR) { - interval = Math.round(intervalInMs / MS_IN_MINUTE); - unitId = 'm'; - } else if (intervalInMs < MS_IN_DAY) { - interval = Math.round(intervalInMs / MS_IN_HOUR); - unitId = 'h'; + if (unit) { + unitId = unit; + interval = Math.round(intervalInMs / MS_INTERVALS[unit]); } else { - interval = Math.round(intervalInMs / MS_IN_DAY); - unitId = 'd'; + if (intervalInMs < MS_INTERVALS.m) { + interval = Math.round(intervalInMs / MS_INTERVALS.s); + unitId = 's'; + } else if (intervalInMs < MS_INTERVALS.h) { + interval = Math.round(intervalInMs / MS_INTERVALS.m); + unitId = 'm'; + } else if (intervalInMs < MS_INTERVALS.d) { + interval = Math.round(intervalInMs / MS_INTERVALS.h); + unitId = 'h'; + } else { + interval = Math.round(intervalInMs / MS_INTERVALS.d); + unitId = 'd'; + } } const prettyIntervalI18n = usePrettyIntervalI18n(interval); prettyInterval = shortHand diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx index b6cd055e3bd..50f94e093ee 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx +++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx @@ -30,6 +30,7 @@ import { TimeOptions } from '../time_options'; import { DurationRange, ApplyRefreshInterval, + RefreshUnitsOptions, ApplyTime, QuickSelect, QuickSelectPanel, @@ -57,6 +58,7 @@ export interface EuiQuickSelectPopoverProps { isPaused: boolean; recentlyUsedRanges: DurationRange[]; refreshInterval: number; + intervalUnits?: RefreshUnitsOptions; start: string; timeOptions: TimeOptions; } @@ -135,6 +137,7 @@ export const EuiQuickSelectPanels: FunctionComponent< customQuickSelectRender, isPaused, refreshInterval, + intervalUnits, applyRefreshInterval, applyTime, prevQuickSelect, @@ -170,6 +173,7 @@ export const EuiQuickSelectPanels: FunctionComponent< onRefreshChange={applyRefreshInterval} isPaused={isPaused} refreshInterval={refreshInterval} + intervalUnits={intervalUnits} /> ); diff --git a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index 418089185fa..03f6f151647 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -320,6 +320,62 @@ describe('EuiSuperDatePicker', () => { }); }); + describe('refreshInterval and refreshIntervalUnits', () => { + it('renders', () => { + const { container, getByTestSubject } = render( + + ); + + const autoRefreshButton = container.querySelector( + '.euiAutoRefreshButton' + )!; + expect(autoRefreshButton).toHaveTextContent('60 m'); + + fireEvent.click(autoRefreshButton); + expect( + getByTestSubject('superDatePickerRefreshIntervalInput') + ).toHaveValue(60); + expect( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect') + ).toHaveValue('m'); + }); + }); + + describe('onRefreshChange', () => { + it('returns the expected props', () => { + const onRefreshChange = jest.fn(); + const { getByTestSubject } = render( + + ); + + fireEvent.click( + getByTestSubject('superDatePickerToggleQuickMenuButton') + ); + fireEvent.change( + getByTestSubject('superDatePickerToggleRefreshButton') + ); + fireEvent.change( + getByTestSubject('superDatePickerRefreshIntervalUnitsSelect'), + { target: { value: 'h' } } + ); + + expect(onRefreshChange).toHaveBeenCalledWith({ + refreshInterval: 3600000, + intervalUnits: 'h', + isPaused: expect.any(Boolean), + }); + }); + }); + describe('canRoundRelativeUnits', () => { const props = { onTimeChange: noop, diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index 4c7af4498e3..31817cd7113 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -28,6 +28,7 @@ import { DurationRange, ApplyTime, ApplyRefreshInterval, + RefreshUnitsOptions, QuickSelectPanel, } from '../types'; @@ -147,6 +148,14 @@ export type EuiSuperDatePickerProps = CommonProps & { * @default 1000 */ refreshInterval?: Milliseconds; + /** + * By default, refresh interval units will be rounded up to next largest unit of time + * (for example, 90 seconds will become 2m). + * + * If you do not want this behavior, you will need to store the user-set `intervalUnits` + * (passed by `onRefreshChange`) and manually control it via this prop. + */ + refreshIntervalUnits?: RefreshUnitsOptions; /** * @default 'now-15m' @@ -400,13 +409,17 @@ export class EuiSuperDatePickerInternal extends Component< this.setState({ isEndDatePopoverOpen: false }); }; - onRefreshChange: ApplyRefreshInterval = ({ refreshInterval, isPaused }) => { + onRefreshChange: ApplyRefreshInterval = ({ + refreshInterval, + intervalUnits, + isPaused, + }) => { this.stopInterval(); if (!isPaused) { this.startInterval(refreshInterval); } if (this.props.onRefreshChange) { - this.props.onRefreshChange({ refreshInterval, isPaused }); + this.props.onRefreshChange({ refreshInterval, isPaused, intervalUnits }); } }; @@ -439,6 +452,7 @@ export class EuiSuperDatePickerInternal extends Component< onRefreshChange, recentlyUsedRanges, refreshInterval, + refreshIntervalUnits, isPaused, isDisabled, } = this.props; @@ -458,6 +472,7 @@ export class EuiSuperDatePickerInternal extends Component< isPaused={isPaused} recentlyUsedRanges={recentlyUsedRanges} refreshInterval={refreshInterval} + intervalUnits={refreshIntervalUnits} start={start} timeOptions={timeOptions} /> @@ -482,6 +497,7 @@ export class EuiSuperDatePickerInternal extends Component< timeOptions, dateFormat, refreshInterval, + refreshIntervalUnits, isPaused, isDisabled, isLoading, @@ -495,6 +511,7 @@ export class EuiSuperDatePickerInternal extends Component< const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? ( void;