chore: make a little clearer when a task has failed

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

plugins/scaffolder/src/next/TaskPage/TaskBorder.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { LinearProgress, makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
+
+const useStyles = makeStyles((theme: BackstageTheme) => ({
+  failed: {
+    backgroundColor: theme.palette.error.main,
+  },
+  success: {
+    backgroundColor: theme.palette.success.main,
+  },
+}));
+
+export const TaskBorder = ({
+  isComplete,
+  isError,
+}: {
+  isComplete: boolean;
+  isError: boolean;
+}) => {
+  const styles = useStyles();
+
+  if (!isComplete) {
+    return <LinearProgress variant="indeterminate" />;
+  }
+
+  if (isError) {
+    return (
+      <LinearProgress variant="determinate" classes={{ bar: styles.failed }} />
+    );
+  }
+
+  return (
+    <LinearProgress variant="determinate" classes={{ bar: styles.success }} />
+  );
+};

plugins/scaffolder/src/next/TaskPage/TaskPage.tsx

@@ -17,8 +17,9 @@ import React, { useMemo } from 'react';
 import { Page, Header, Content } from '@backstage/core-components';
 import { useTaskEventStream } from '../../components/hooks/useEventStream';
 import { useParams } from 'react-router-dom';
-import { Box, LinearProgress, Paper } from '@material-ui/core';
+import { Box, Paper } from '@material-ui/core';
 import { TaskSteps } from './TaskSteps';
+import { TaskBorder } from './TaskBorder';
 
 export const TaskPage = () => {
   const { taskId } = useParams();
@@ -52,7 +53,10 @@ export const TaskPage = () => {
       />
       <Content>
         <Paper style={{ position: 'relative', overflow: 'hidden' }}>
-          {!taskStream.completed && <LinearProgress variant="indeterminate" />}
+          <TaskBorder
+            isComplete={taskStream.completed}
+            isError={Boolean(taskStream.error)}
+          />
           <Box padding={2}>
             <TaskSteps steps={steps} activeStep={activeStep} />
             {/* <TaskLogStream logs={logs} /> */}