From d7e4f303c475a84397a39843f8b9f51bd7f6e033 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 23 Nov 2021 09:56:06 +0100
Subject: [PATCH] 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
---
 .../features/explore/LogsNavigation.test.tsx  | 48 ++++++++++++++-----
 .../app/features/explore/LogsNavigation.tsx   | 14 +++---
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/public/app/features/explore/LogsNavigation.test.tsx b/public/app/features/explore/LogsNavigation.test.tsx
index 9b0772e1bd5..1c78947acb2 100644
--- a/public/app/features/explore/LogsNavigation.test.tsx
+++ b/public/app/features/explore/LogsNavigation.test.tsx
@@ -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 });
+  });
 });
diff --git a/public/app/features/explore/LogsNavigation.tsx b/public/app/features/explore/LogsNavigation.tsx
index 7d992321559..29007e21b2a 100644
--- a/public/app/features/explore/LogsNavigation.tsx
+++ b/public/app/features/explore/LogsNavigation.tsx
@@ -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