chore: added the error panel

Signed-off-by: blam <ben@blam.sh>

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}
         />
       </Header>
-      <Content>
+      <Content className={classes.contentWrapper}>
+        {taskStream.error ? (
+          <Box paddingBottom={2}>
+            <ErrorPanel
+              error={taskStream.error}
+              title={taskStream.error.message}
+            />
+          </Box>
+        ) : null}
+
         <Box paddingBottom={2}>
           <Paper style={{ position: 'relative', overflow: 'hidden' }}>
             <TaskBorder
@@ -116,6 +133,7 @@ export const OngoingTask = () => {
             </Box>
           </Paper>
         </Box>
+
         <DefaultOutputs output={taskStream.output} />
 
         {logsVisible ? (

plugins/scaffolder/src/next/OngoingTask/TaskLogStream.tsx

@@ -30,7 +30,6 @@ export const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {
   return (
     <div className={styles.root}>
       <LogViewer
-        tail
         text={Object.values(props.logs)
           .map(l => l.join('\n'))
           .filter(Boolean)

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}
-                <br />
+                <Box>{step.name}</Box>
                 <StepTime step={step} />
               </MuiStepLabel>
             </MuiStepButton>