From 1231e0dd691e73d3daa5c9cb343c334ce3f3ba14 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Sat, 11 Jun 2022 21:33:12 +0200
Subject: [PATCH] Explore: Fix log context scroll to bottom (#50600)

* Explore: Fix log context scroll to bottom

* Update
---
 packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx | 1 +
 packages/grafana-ui/src/components/Logs/LogRowContext.tsx  | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
index b7633b714b5..918ff631cc3 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
@@ -82,6 +82,7 @@ export class UnThemedLogMessageAnsi extends PureComponent<Props, State> {
     return chunks.map((chunk, index) => {
       const chunkText = this.props.highlight?.searchWords ? (
         <Highlighter
+          key={index}
           textToHighlight={chunk.text}
           searchWords={this.props.highlight.searchWords}
           findChunks={findHighlightChunksInText}
diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
index ee68d49fd3d..be7217cdeaf 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
@@ -137,10 +137,12 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
   const listContainerRef = useRef<HTMLDivElement>() as React.RefObject<HTMLDivElement>;
 
   useLayoutEffect(() => {
-    if (shouldScrollToBottom && listContainerRef.current) {
+    // We want to scroll to bottom only when we receive first 10 log lines
+    const shouldScrollRows = rows.length > 0 && rows.length <= 10;
+    if (shouldScrollToBottom && shouldScrollRows && listContainerRef.current) {
       setScrollTop(listContainerRef.current.offsetHeight);
     }
-  }, [shouldScrollToBottom]);
+  }, [shouldScrollToBottom, rows]);
 
   const headerProps = {
     row,