diff --git a/.changeset/loud-baboons-relate.md b/.changeset/loud-baboons-relate.md new file mode 100644 index 0000000000..8f719861e1 --- /dev/null +++ b/.changeset/loud-baboons-relate.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-scaffolder': minor +--- + +Updating the `TaskLogStream` to take up all space in a running task, and also show the last line of the log by default diff --git a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx index cbeb249815..37768ad80b 100644 --- a/packages/core-components/src/components/LogViewer/RealLogViewer.tsx +++ b/packages/core-components/src/components/LogViewer/RealLogViewer.tsx @@ -18,12 +18,12 @@ import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import CopyIcon from '@material-ui/icons/FileCopy'; import classnames from 'classnames'; -import React, { useEffect, useMemo, useRef } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useLocation } from 'react-router-dom'; import AutoSizer from 'react-virtualized-auto-sizer'; import { FixedSizeList } from 'react-window'; -import { AnsiProcessor } from './AnsiProcessor'; +import { AnsiLine, AnsiProcessor } from './AnsiProcessor'; import { LogLine } from './LogLine'; import { LogViewerControls } from './LogViewerControls'; import { HEADER_SIZE, useStyles } from './styles'; @@ -37,7 +37,9 @@ export interface RealLogViewerProps { export function RealLogViewer(props: RealLogViewerProps) { const classes = useStyles({ classes: props.classes }); - const listRef = useRef(null); + const [fixedListInstance, setFixedListInstance] = useState | null>(null); // The processor keeps state that optimizes appending to the text const processor = useMemo(() => new AnsiProcessor(), []); @@ -48,10 +50,21 @@ export function RealLogViewer(props: RealLogViewerProps) { const location = useLocation(); useEffect(() => { - if (search.resultLine !== undefined && listRef.current) { - listRef.current.scrollToItem(search.resultLine - 1, 'center'); + if (fixedListInstance) { + fixedListInstance.scrollToItem(lines.length - 1, 'end'); } - }, [search.resultLine]); + }, [fixedListInstance, lines]); + + useEffect(() => { + if (!fixedListInstance) { + return; + } + if (search.resultLine) { + fixedListInstance.scrollToItem(search.resultLine - 1, 'center'); + } else { + fixedListInstance.scrollToItem(lines.length - 1, 'end'); + } + }, [fixedListInstance, search.resultLine, lines]); useEffect(() => { if (location.hash) { @@ -76,7 +89,9 @@ export function RealLogViewer(props: RealLogViewerProps) { ) => { + setFixedListInstance(instance); + }} className={classes.log} height={(height || 480) - HEADER_SIZE} width={width || 640} diff --git a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx index ffcc377995..97047d00c9 100644 --- a/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/components/OngoingTask/OngoingTask.tsx @@ -20,7 +20,6 @@ import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import Paper from '@material-ui/core/Paper'; import { makeStyles } from '@material-ui/core/styles'; -import { ResizableBox } from 'react-resizable'; import { ScaffolderTaskOutput, scaffolderApiRef, @@ -119,6 +118,7 @@ export const OngoingTask = (props: { useEffect(() => { if (taskStream.completed && !taskStream.error) { + setLogVisibleState(true); setButtonBarVisibleState(false); } }, [taskStream.error, taskStream.completed]); @@ -292,13 +292,11 @@ export const OngoingTask = (props: { ) : null} {logsVisible ? ( - - - - - - - + + + + + ) : null}