diff --git a/.changeset/brown-frogs-judge.md b/.changeset/brown-frogs-judge.md new file mode 100644 index 0000000000..e8c62522be --- /dev/null +++ b/.changeset/brown-frogs-judge.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +When clicking on a log line the url will be updated from `/task/uid` to `/task/uid/#line-1`. These urls are also sharable, meaning that the UI will highlight the log line in the hash of the url. diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx index cd30e96c92..ac66d7cdf5 100644 --- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx +++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx @@ -15,6 +15,7 @@ */ import React, { useEffect, useMemo, useRef } from 'react'; +import { useLocation } from 'react-router-dom'; import IconButton from '@material-ui/core/IconButton'; import CopyIcon from '@material-ui/icons/FileCopy'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -42,6 +43,7 @@ export function RealLogViewer(props: RealLogViewerProps) { const search = useLogViewerSearch(lines); const selection = useLogViewerSelection(lines); + const location = useLocation(); useEffect(() => { if (search.resultLine !== undefined && listRef.current) { @@ -49,11 +51,18 @@ export function RealLogViewer(props: RealLogViewerProps) { } }, [search.resultLine]); + useEffect(() => { + if (location.hash) { + // #line-6 -> 6 + const line = parseInt(location.hash.replace(/\D/g, ''), 10); + selection.setSelection(line, false); + } + }, []); // eslint-disable-line react-hooks/exhaustive-deps + const handleSelectLine = ( line: number, event: { shiftKey: boolean; preventDefault: () => void }, ) => { - event.preventDefault(); selection.setSelection(line, event.shiftKey); };