diff --git a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx index a146780683..e166a96dd7 100644 --- a/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/OngoingTask.tsx @@ -14,10 +14,10 @@ * limitations under the License. */ import React, { useEffect, useMemo, useState, useCallback } from 'react'; -import { Page, Header, Content } from '@backstage/core-components'; +import { Page, Header, Content, ErrorPanel } from '@backstage/core-components'; import { useTaskEventStream } from '../../components/hooks/useEventStream'; import { useNavigate, useParams } from 'react-router-dom'; -import { Box, Button, Paper } from '@material-ui/core'; +import { Box, makeStyles, Paper } from '@material-ui/core'; import { TaskSteps } from './TaskSteps'; import { TaskBorder } from './TaskBorder'; import { TaskLogStream } from './TaskLogStream'; @@ -27,12 +27,20 @@ import qs from 'qs'; import { DefaultOutputs } from './Outputs'; import { ContextMenu } from './ContextMenu'; +const useStyles = makeStyles({ + contentWrapper: { + display: 'flex', + flexDirection: 'column', + }, +}); + export const OngoingTask = () => { // todo(blam): check that task Id actually exists, and that it's valid. otherwise redirect to something more useful. const { taskId } = useParams(); const templateRouteRef = useRouteRef(nextSelectedTemplateRouteRef); const navigate = useNavigate(); const taskStream = useTaskEventStream(taskId!); + const classes = useStyles(); const steps = useMemo( () => taskStream.task?.spec.steps.map(step => ({ @@ -104,7 +112,16 @@ export const OngoingTask = () => { logsVisible={logsVisible} /> - + + {taskStream.error ? ( + + + + ) : null} + { + {logsVisible ? ( diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx b/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx index 2cfcdf1da6..00e8452b42 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx @@ -30,7 +30,6 @@ export const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => { return (
l.join('\n')) .filter(Boolean) diff --git a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx index 40f9f9c189..7cf5ed71bf 100644 --- a/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx +++ b/plugins/scaffolder/src/next/OngoingTask/TaskSteps/TaskSteps.tsx @@ -20,6 +20,7 @@ import { StepButton as MuiStepButton, StepLabel as MuiStepLabel, StepIconProps, + Box, } from '@material-ui/core'; import { TaskStep } from '@backstage/plugin-scaffolder-common'; import { Step } from '../../../components/hooks/useEventStream'; @@ -29,7 +30,6 @@ import { StepTime } from './StepTime'; interface StepperProps { steps: (TaskStep & Step)[]; activeStep?: number; - setActiveStep?: (step: number) => void; } export const TaskSteps = (props: StepperProps) => { @@ -58,8 +58,7 @@ export const TaskSteps = (props: StepperProps) => { StepIconProps={stepIconProps} StepIconComponent={StepIcon} > - {step.name} -
+ {step.name}