maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[APM] Prevent infinite loop when updating time range (#109043)

Browse source 
Closes #108983.
This commit is contained in:
Dario Gieselaar 2021-08-18 19:26:44 +02:00 committed by GitHub
parent fd676afb9c
commit 2e5eb5ce66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
x-pack/plugins/apm/public/hooks/use_time_range.test.ts
View file

@ -4,11 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import {
act,
renderHook,
RenderHookResult,
} from '@testing-library/react-hooks';
import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
import { useTimeRange } from './use_time_range';
describe('useTimeRange', () => {
@ -29,40 +25,33 @@ describe('useTimeRange', () => {
);
});
afterEach(() => {});
it('returns the parsed range on first render', () => {
expect(hook.result.current.start).toEqual('2021-01-01T11:45:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T12:00:00.000Z');
});
it('only changes the parsed range when rangeFrom/rangeTo change', () => {
Date.now = jest.fn(() => new Date(Date.UTC(2021, 0, 1, 13)).valueOf());
hook.rerender({ rangeFrom: 'now-30m', rangeTo: 'now' });
hook.rerender({ rangeFrom: 'now-15m', rangeTo: 'now' });
expect(hook.result.current.start).toEqual('2021-01-01T11:45:00.000Z');
expect(hook.result.current.start).toEqual('2021-01-01T11:30:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T12:00:00.000Z');
Date.now = jest.fn(() => new Date(Date.UTC(2021, 0, 1, 13)).valueOf());
hook.rerender({ rangeFrom: 'now-30m', rangeTo: 'now' });
expect(hook.result.current.start).toEqual('2021-01-01T12:30:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T13:00:00.000Z');
});
it('updates when refreshTimeRange is called', async () => {
Date.now = jest.fn(() => new Date(Date.UTC(2021, 0, 1, 13)).valueOf());
hook.rerender({ rangeFrom: 'now-15m', rangeTo: 'now' });
expect(hook.result.current.start).toEqual('2021-01-01T11:45:00.000Z');
// times should not change, because rangeFrom/rangeTo did not change
expect(hook.result.current.start).toEqual('2021-01-01T11:30:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T12:00:00.000Z');
act(() => {
hook.result.current.refreshTimeRange();
});
hook.rerender({ rangeFrom: 'now-30m', rangeTo: 'now-15m' });
expect(hook.result.current.start).toEqual('2021-01-01T12:45:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T13:00:00.000Z');
expect(hook.result.current.start).toEqual('2021-01-01T12:30:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T12:45:00.000Z');
hook.rerender({ rangeFrom: 'now-45m', rangeTo: 'now-30m' });
expect(hook.result.current.start).toEqual('2021-01-01T12:15:00.000Z');
expect(hook.result.current.end).toEqual('2021-01-01T12:30:00.000Z');
});
});

17
x-pack/plugins/apm/public/hooks/use_time_range.ts
View file

@ -6,7 +6,7 @@
*/
import { isEqual } from 'lodash';
import { useCallback, useRef, useState } from 'react';
import { useRef } from 'react';
import { getDateRange } from '../context/url_params_context/helpers';
export function useTimeRange({
@ -18,24 +18,19 @@ export function useTimeRange({
}) {
const rangeRef = useRef({ rangeFrom, rangeTo });
const [timeRangeId, setTimeRangeId] = useState(0);
const stateRef = useRef(getDateRange({ state: {}, rangeFrom, rangeTo }));
const updateParsedTime = useCallback(() => {
const updateParsedTime = () => {
stateRef.current = getDateRange({ state: {}, rangeFrom, rangeTo });
}, [rangeFrom, rangeTo]);
};
if (!isEqual(rangeRef.current, { rangeFrom, rangeTo })) {
updateParsedTime();
}
const { start, end } = stateRef.current;
rangeRef.current = { rangeFrom, rangeTo };
const refreshTimeRange = useCallback(() => {
updateParsedTime();
setTimeRangeId((id) => id + 1);
}, [setTimeRangeId, updateParsedTime]);
const { start, end } = stateRef.current;
if (!start || !end) {
throw new Error('start and/or end were unexpectedly not set');
@ -44,7 +39,5 @@ export function useTimeRange({
return {
start,
end,
refreshTimeRange,
timeRangeId,
};
}