Logs: Fix requesting of older logs when flipped order (#41966)

* Logs: Fix requesting of older logs wehn flipped order

* Fix index change when requesting logs
This commit is contained in:
Ivana Huckova 2021-11-23 09:56:06 +01:00 committed by GitHub
parent c4b21f7b51
commit d7e4f303c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 19 deletions

View File

@ -1,22 +1,25 @@
import React, { ComponentProps } from 'react';
import { render, screen } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import { LogsSortOrder } from '@grafana/data';
import LogsNavigation from './LogsNavigation';
type LogsNavigationProps = ComponentProps<typeof LogsNavigation>;
const defaultProps: LogsNavigationProps = {
absoluteRange: { from: 1637319381811, to: 1637322981811 },
timeZone: 'local',
queries: [],
loading: false,
logsSortOrder: undefined,
visibleRange: { from: 1637322959000, to: 1637322981811 },
onChangeTime: jest.fn(),
scrollToTopLogs: jest.fn(),
addResultsToCache: jest.fn(),
clearCache: jest.fn(),
};
const setup = (propOverrides?: object) => {
const props: LogsNavigationProps = {
absoluteRange: { from: 1619081645930, to: 1619081945930 },
timeZone: 'local',
queries: [],
loading: false,
logsSortOrder: undefined,
visibleRange: { from: 1619081941000, to: 1619081945930 },
onChangeTime: jest.fn(),
scrollToTopLogs: jest.fn(),
addResultsToCache: jest.fn(),
clearCache: jest.fn(),
const props = {
...defaultProps,
...propOverrides,
};
@ -40,7 +43,7 @@ describe('LogsNavigation', () => {
expect(Array.from(elements).map((el) => el.getAttribute('data-testid'))).toMatchObject(expectedOrder);
});
it('should render 3 navigation buttons in correect order when flipped logs order', () => {
it('should render 3 navigation buttons in correct order when flipped logs order', () => {
const { container } = setup({ logsSortOrder: LogsSortOrder.Ascending });
const expectedOrder = ['olderLogsButton', 'newerLogsButton', 'scrollToTop'];
const elements = container.querySelectorAll(
@ -61,4 +64,23 @@ describe('LogsNavigation', () => {
setup();
expect(screen.getByTestId('logsNavigationPages')).toBeInTheDocument();
});
it('should correctly request older logs when flipped order', () => {
const onChangeTimeMock = jest.fn();
const { rerender } = setup({ onChangeTime: onChangeTimeMock });
fireEvent.click(screen.getByTestId('olderLogsButton'));
expect(onChangeTimeMock).toHaveBeenCalledWith({ from: 1637319359000, to: 1637322959000 });
rerender(
<LogsNavigation
{...defaultProps}
absoluteRange={{ from: 1637319359000, to: 1637322959000 }}
visibleRange={{ from: 1637322938000, to: 1637322959000 }}
onChangeTime={onChangeTimeMock}
logsSortOrder={LogsSortOrder.Ascending}
/>
);
fireEvent.click(screen.getByTestId('olderLogsButton'));
expect(onChangeTimeMock).toHaveBeenCalledWith({ from: 1637319338000, to: 1637322938000 });
});
});

View File

@ -46,8 +46,8 @@ function LogsNavigation({
const rangeSpanRef = useRef(0);
const oldestLogsFirst = logsSortOrder === LogsSortOrder.Ascending;
const onFirstPage = currentPageIndex === 0;
const onLastPage = currentPageIndex === pages.length - 1;
const onFirstPage = oldestLogsFirst ? currentPageIndex === pages.length - 1 : currentPageIndex === 0;
const onLastPage = oldestLogsFirst ? currentPageIndex === 0 : currentPageIndex === pages.length - 1;
const theme = useTheme2();
const styles = getStyles(theme, oldestLogsFirst, loading);
@ -106,9 +106,10 @@ function LogsNavigation({
onClick={() => {
//If we are not on the last page, use next page's range
if (!onLastPage) {
const indexChange = oldestLogsFirst ? -1 : 1;
changeTime({
from: pages[currentPageIndex + 1].queryRange.from,
to: pages[currentPageIndex + 1].queryRange.to,
from: pages[currentPageIndex + indexChange].queryRange.from,
to: pages[currentPageIndex + indexChange].queryRange.to,
});
} else {
//If we are on the last page, create new range
@ -132,9 +133,10 @@ function LogsNavigation({
onClick={() => {
//If we are not on the first page, use previous page's range
if (!onFirstPage) {
const indexChange = oldestLogsFirst ? 1 : -1;
changeTime({
from: pages[currentPageIndex - 1].queryRange.from,
to: pages[currentPageIndex - 1].queryRange.to,
from: pages[currentPageIndex + indexChange].queryRange.from,
to: pages[currentPageIndex + indexChange].queryRange.to,
});
}
//If we are on the first page, button is disabled and we do nothing