diff --git a/packages/core-components/src/components/LogViewer/LogViewer.tsx b/packages/core-components/src/components/LogViewer/LogViewer.tsx index d6722edbcd..1b7b7c2c38 100644 --- a/packages/core-components/src/components/LogViewer/LogViewer.tsx +++ b/packages/core-components/src/components/LogViewer/LogViewer.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeList } from 'react-window'; import { AnsiProcessor } from './AnsiProcessor'; @@ -49,6 +49,7 @@ export interface ChunkModifiers { export function LogViewer(props: LogViewerProps) { const { noLineNumbers } = props; + const listRef = useRef(null); const classes = useStyles(); const [selectedLine, setSelectedLine] = useState(); const [searchInput, setSearchInput] = useState(''); @@ -85,6 +86,15 @@ export function LogViewer(props: LogViewerProps) { return lines.filter(line => line.text.includes(searchText)); }, [lines, searchText]); + const [foundLine] = filteredLines; + const scrollToLineNumber = foundLine?.lineNumber; + + useEffect(() => { + if (scrollToLineNumber !== undefined && listRef.current) { + listRef.current.scrollToItem(scrollToLineNumber - 1, 'center'); + } + }, [scrollToLineNumber]); + return ( {({ height, width }) => ( @@ -99,12 +109,13 @@ export function LogViewer(props: LogViewerProps) { /> {({ index, style, data }) => { const line = data[index];