Explore: Fix log context scroll to bottom (#50600) (#50645)

* Explore: Fix log context scroll to bottom

* Update

(cherry picked from commit 1231e0dd69)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

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}

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,