From 656cd4c8ddca4e40027ff169ce26f0c377e812d8 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 2 May 2022 16:46:47 +0200
Subject: [PATCH] Logs: Fix pagination skipping entries (#48413)

* Logs: Add pagination range to prevent pagination from skipping entries

* Revert "Logs: Add pagination range to prevent pagination from skipping entries"

This reverts commit 2e7a6b38709e506c325b9264803e698165a995e6.

* Refactor

* Update
---
 packages/grafana-data/src/types/logs.ts |  1 +
 public/app/features/explore/Logs.tsx    | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-data/src/types/logs.ts b/packages/grafana-data/src/types/logs.ts
index daececb446e..16efd4002a3 100644
--- a/packages/grafana-data/src/types/logs.ts
+++ b/packages/grafana-data/src/types/logs.ts
@@ -85,6 +85,7 @@ export interface LogsModel {
   meta?: LogsMetaItem[];
   rows: LogRowModel[];
   series?: DataFrame[];
+  // visibleRange is time range for histogram created from log results
   visibleRange?: AbsoluteTimeRange;
   queries?: DataQuery[];
 }
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 1d4ba367bb2..d1ae1172991 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -163,7 +163,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
     }
   };
 
-  onChangewrapLogMessage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  onChangeWrapLogMessage = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = event;
     if (target) {
       const wrapLogMessage = target.checked;
@@ -249,6 +249,20 @@ class UnthemedLogs extends PureComponent<Props, State> {
     return filterLogLevels(logRows, new Set(hiddenLogLevels));
   });
 
+  createNavigationRange = memoizeOne((logRows: LogRowModel[]): { from: number; to: number } | undefined => {
+    if (!logRows || logRows.length === 0) {
+      return undefined;
+    }
+    const firstTimeStamp = logRows[0].timeEpochMs;
+    const lastTimeStamp = logRows[logRows.length - 1].timeEpochMs;
+
+    if (lastTimeStamp < firstTimeStamp) {
+      return { from: lastTimeStamp, to: firstTimeStamp };
+    }
+
+    return { from: firstTimeStamp, to: lastTimeStamp };
+  });
+
   scrollToTopLogs = () => this.topLogsRef.current?.scrollIntoView();
 
   render() {
@@ -295,8 +309,10 @@ class UnthemedLogs extends PureComponent<Props, State> {
 
     const filteredLogs = this.filterRows(logRows, hiddenLogLevels);
     const { dedupedRows, dedupCount } = this.dedupRows(filteredLogs, dedupStrategy);
+    const navigationRange = this.createNavigationRange(logRows);
 
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
+
     return (
       <>
         {logsSeries && logsSeries.length ? (
@@ -342,7 +358,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
             <InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
               <InlineSwitch
                 value={wrapLogMessage}
-                onChange={this.onChangewrapLogMessage}
+                onChange={this.onChangeWrapLogMessage}
                 className={styles.horizontalInlineSwitch}
                 transparent
                 id={`wrap-lines_${exploreId}`}
@@ -430,7 +446,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
           </div>
           <LogsNavigation
             logsSortOrder={logsSortOrder}
-            visibleRange={visibleRange ?? absoluteRange}
+            visibleRange={navigationRange ?? absoluteRange}
             absoluteRange={absoluteRange}
             timeZone={timeZone}
             onChangeTime={onChangeTime}