[ML] Fix the limit control on the Anomaly explorer page (#65459)

* [ML] persist limit control value

* [ML] remove console statement

* [ML] fix default value
This commit is contained in:
Dima Arnautov 2020-05-07 11:52:28 +02:00 committed by GitHub
parent 83a088cb49
commit dddeec51b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 12 deletions

View file

@ -14,7 +14,7 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react'; import { FormattedMessage } from '@kbn/i18n/react';
import DragSelect from 'dragselect/dist/ds.min.js'; import DragSelect from 'dragselect/dist/ds.min.js';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { import {
EuiFlexGroup, EuiFlexGroup,
@ -169,12 +169,7 @@ export class Explorer extends React.Component {
}; };
componentDidMount() { componentDidMount() {
limit$ limit$.pipe(takeUntil(this._unsubscribeAll)).subscribe(explorerService.setSwimlaneLimit);
.pipe(
takeUntil(this._unsubscribeAll),
map(d => d.val)
)
.subscribe(explorerService.setSwimlaneLimit);
// Required to redraw the time series chart when the container is resized. // Required to redraw the time series chart when the container is resized.
this.resizeChecker = new ResizeChecker(this.resizeRef.current); this.resizeChecker = new ResizeChecker(this.resizeRef.current);

View file

@ -9,8 +9,6 @@ import { act } from 'react-dom/test-utils';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import { SelectLimit } from './select_limit'; import { SelectLimit } from './select_limit';
jest.useFakeTimers();
describe('SelectLimit', () => { describe('SelectLimit', () => {
test('creates correct initial selected value', () => { test('creates correct initial selected value', () => {
const wrapper = shallow(<SelectLimit />); const wrapper = shallow(<SelectLimit />);

View file

@ -9,7 +9,7 @@
*/ */
import React from 'react'; import React from 'react';
import useObservable from 'react-use/lib/useObservable'; import useObservable from 'react-use/lib/useObservable';
import { Subject } from 'rxjs'; import { BehaviorSubject } from 'rxjs';
import { EuiSelect } from '@elastic/eui'; import { EuiSelect } from '@elastic/eui';
@ -20,13 +20,13 @@ const euiOptions = limitOptions.map(limit => ({
text: `${limit}`, text: `${limit}`,
})); }));
export const limit$ = new Subject<number>();
export const defaultLimit = limitOptions[1]; export const defaultLimit = limitOptions[1];
export const limit$ = new BehaviorSubject<number>(defaultLimit);
export const useSwimlaneLimit = (): [number, (newLimit: number) => void] => { export const useSwimlaneLimit = (): [number, (newLimit: number) => void] => {
const limit = useObservable(limit$, defaultLimit); const limit = useObservable(limit$, defaultLimit);
return [limit, (newLimit: number) => limit$.next(newLimit)]; return [limit!, (newLimit: number) => limit$.next(newLimit)];
}; };
export const SelectLimit = () => { export const SelectLimit = () => {