diff --git a/public/app/features/explore/Logs/LogsContainer.tsx b/public/app/features/explore/Logs/LogsContainer.tsx index 732ec2fe766..ab0f2cb65b6 100644 --- a/public/app/features/explore/Logs/LogsContainer.tsx +++ b/public/app/features/explore/Logs/LogsContainer.tsx @@ -244,6 +244,14 @@ class LogsContainer extends PureComponent { + this.props.addResultsToCache(this.props.exploreId); + }; + + clearCache = () => { + this.props.clearCache(this.props.exploreId); + }; + render() { const { loading, @@ -267,8 +275,6 @@ class LogsContainer extends PureComponent addResultsToCache(exploreId)} - clearCache={() => clearCache(exploreId)} + addResultsToCache={this.addResultsToCache} + clearCache={this.clearCache} eventBus={this.props.eventBus} panelState={this.props.panelState} logsFrames={this.props.logsFrames} diff --git a/public/app/features/explore/Logs/LogsNavigation.test.tsx b/public/app/features/explore/Logs/LogsNavigation.test.tsx index 3e0e2178745..6c2a5153bd4 100644 --- a/public/app/features/explore/Logs/LogsNavigation.test.tsx +++ b/public/app/features/explore/Logs/LogsNavigation.test.tsx @@ -138,4 +138,31 @@ describe('LogsNavigation', () => { await userEvent.click(screen.getByTestId('olderLogsButton')); expect(scrollToTopLogsMock).toHaveBeenCalled(); }); + + it('should not trigger actions while loading', async () => { + const scrollToTopLogs = jest.fn(); + const changeTimeMock = jest.fn(); + setup({ scrollToTopLogs, onChangeTime: changeTimeMock, loading: true }); + + expect(scrollToTopLogs).not.toHaveBeenCalled(); + expect(changeTimeMock).not.toHaveBeenCalled(); + await userEvent.click(screen.getByTestId('olderLogsButton')); + await userEvent.click(screen.getByTestId('newerLogsButton')); + expect(scrollToTopLogs).not.toHaveBeenCalled(); + expect(changeTimeMock).not.toHaveBeenCalled(); + }); + + it('should not add results to cache unless pagination is used', async () => { + const addResultsToCache = jest.fn(); + setup({ addResultsToCache }); + + expect(addResultsToCache).not.toHaveBeenCalled(); + expect(screen.getByTestId('olderLogsButton')).not.toBeDisabled(); + expect(screen.getByTestId('newerLogsButton')).toBeDisabled(); + + await userEvent.click(screen.getByTestId('olderLogsButton')); + await userEvent.click(screen.getByTestId('newerLogsButton')); + + expect(addResultsToCache).toHaveBeenCalledTimes(1); + }); }); diff --git a/public/app/features/explore/Logs/LogsNavigation.tsx b/public/app/features/explore/Logs/LogsNavigation.tsx index f9f498a566a..e053660260a 100644 --- a/public/app/features/explore/Logs/LogsNavigation.tsx +++ b/public/app/features/explore/Logs/LogsNavigation.tsx @@ -82,21 +82,15 @@ function LogsNavigation({ return newPages; }); } - addResultsToCache(); }, [visibleRange, absoluteRange, logsSortOrder, queries, clearCache, addResultsToCache]); - useEffect(() => { - clearCache(); - // We can't enforce the eslint rule here because we only want to run when component is mounted. - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const changeTime = useCallback( ({ from, to }: AbsoluteTimeRange) => { + addResultsToCache(); expectedRangeRef.current = { from, to }; onChangeTime({ from, to }); }, - [onChangeTime] + [onChangeTime, addResultsToCache] ); const sortPages = (a: LogsPage, b: LogsPage, logsSortOrder?: LogsSortOrder | null) => { @@ -173,10 +167,10 @@ function LogsNavigation({ pageType: 'page', pageNumber, }); - !loading && changeTime({ from: page.queryRange.from, to: page.queryRange.to }); + changeTime({ from: page.queryRange.from, to: page.queryRange.to }); scrollToTopLogs(); }, - [changeTime, loading, scrollToTopLogs] + [changeTime, scrollToTopLogs] ); return ( diff --git a/public/app/features/explore/Logs/LogsNavigationPages.tsx b/public/app/features/explore/Logs/LogsNavigationPages.tsx index 51066e5dc9c..a6b1fd20108 100644 --- a/public/app/features/explore/Logs/LogsNavigationPages.tsx +++ b/public/app/features/explore/Logs/LogsNavigationPages.tsx @@ -49,6 +49,7 @@ export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst, onClick={() => { onClick(page, index + 1); }} + disabled={loading} >