[ML] Anomaly Detection: Fix persist/restore of refreshInterval in globalState. (#56113) (#56164)

Fixes persist/restore of the date picker's refreshInterval in globalState.
This commit is contained in:
Walter Rafelsberger 2020-01-28 17:57:09 +01:00 committed by GitHub
parent 030cdf258e
commit 39d0fe431a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 90 deletions

View file

@ -1,76 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Navigation Menu: <TopNav /> Minimal initialization. 1`] = `
<Fragment>
<div
className="mlNavigationMenu__topNav"
>
<EuiSuperDatePicker
commonlyUsedRanges={
Array [
Object {
"end": "now/d",
"label": "Today",
"start": "now/d",
},
Object {
"end": "now/w",
"label": "This week",
"start": "now/w",
},
Object {
"end": "now/M",
"label": "This month",
"start": "now/M",
},
Object {
"end": "now/y",
"label": "This year",
"start": "now/y",
},
Object {
"end": "now-1d/d",
"label": "Yesterday",
"start": "now-1d/d",
},
Object {
"end": "now",
"label": "Week to date",
"start": "now/w",
},
Object {
"end": "now",
"label": "Month to date",
"start": "now/M",
},
Object {
"end": "now",
"label": "Year to date",
"start": "now/y",
},
]
}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
end="Sun Sep 29 2019 01:45:36 GMT+0200"
isAutoRefreshOnly={false}
isDisabled={false}
isPaused={true}
onRefresh={[Function]}
onRefreshChange={[Function]}
onTimeChange={[Function]}
recentlyUsedRanges={
Array [
Object {
"end": "Sun Sep 29 2019 01:45:36 GMT+0200",
"start": "Thu Aug 29 2019 02:04:19 GMT+0200",
},
]
}
refreshInterval={0}
showUpdateButton={true}
start="Thu Aug 29 2019 02:04:19 GMT+0200"
timeFormat="HH:mm"
/>
</div>
</Fragment>
`;

View file

@ -4,8 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { mount, shallow } from 'enzyme';
import { mount } from 'enzyme';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { EuiSuperDatePicker } from '@elastic/eui';
@ -34,8 +35,13 @@ describe('Navigation Menu: <TopNav />', () => {
const refreshListener = jest.fn();
const refreshSubscription = mlTimefilterRefresh$.subscribe(refreshListener);
const wrapper = shallow(<TopNav />);
expect(wrapper).toMatchSnapshot();
const wrapper = mount(
<MemoryRouter>
<TopNav />
</MemoryRouter>
);
expect(wrapper.find(TopNav)).toHaveLength(1);
expect(wrapper.find('EuiSuperDatePicker')).toHaveLength(1);
expect(refreshListener).toBeCalledTimes(0);
refreshSubscription.unsubscribe();

View file

@ -15,6 +15,7 @@ import {
mlTimefilterTimeChange$,
} from '../../../services/timefilter_refresh_service';
import { useUiContext } from '../../../contexts/ui/use_ui_context';
import { useUrlState } from '../../../util/url_state';
interface Duration {
start: string;
@ -40,9 +41,17 @@ function updateLastRefresh(timeRange: OnRefreshProps) {
export const TopNav: FC = () => {
const { chrome, timefilter, timeHistory } = useUiContext();
const [globalState, setGlobalState] = useUrlState('_g');
const getRecentlyUsedRanges = getRecentlyUsedRangesFactory(timeHistory);
const [refreshInterval, setRefreshInterval] = useState(timefilter.getRefreshInterval());
const [refreshInterval, setRefreshInterval] = useState(
globalState?.refreshInterval ?? timefilter.getRefreshInterval()
);
useEffect(() => {
setGlobalState({ refreshInterval });
timefilter.setRefreshInterval(refreshInterval);
}, [refreshInterval?.pause, refreshInterval?.value]);
const [time, setTime] = useState(timefilter.getTime());
const [recentlyUsedRanges, setRecentlyUsedRanges] = useState(getRecentlyUsedRanges());
const [isAutoRefreshSelectorEnabled, setIsAutoRefreshSelectorEnabled] = useState(
@ -96,20 +105,13 @@ export const TopNav: FC = () => {
}
function updateInterval({
isPaused,
refreshInterval: interval,
isPaused: pause,
refreshInterval: value,
}: {
isPaused: boolean;
refreshInterval: number;
}) {
const newInterval = {
pause: isPaused,
value: interval,
};
// Update timefilter for controllers listening for changes
timefilter.setRefreshInterval(newInterval);
// Update state
setRefreshInterval(newInterval);
setRefreshInterval({ pause, value });
}
return (