[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:
parent
83a088cb49
commit
dddeec51b7
|
@ -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);
|
||||||
|
|
|
@ -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 />);
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Reference in a new issue