chore: added times to the dropdown box

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

plugins/scaffolder/src/next/Router/Router.tsx

@@ -29,7 +29,6 @@ import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplateGroupFilter } from '../TemplateListPage/TemplateGroups';
 import { DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS } from '../../extensions/default';
 
-import { FormProps } from '../types';
 import {
   nextScaffolderTaskRouteRef,
   nextSelectedTemplateRouteRef,

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

@@ -52,11 +52,10 @@ export const TaskPage = () => {
       />
       <Content>
         <Paper style={{ position: 'relative', overflow: 'hidden' }}>
-          {!taskStream.completed && (
-            <LinearProgress variant="indeterminate" value={100} />
-          )}
+          {!taskStream.completed && <LinearProgress variant="indeterminate" />}
           <Box padding={2}>
             <TaskSteps steps={steps} activeStep={activeStep} />
+            {/* <TaskLogStream logs={logs} /> */}
           </Box>
         </Paper>
       </Content>

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

@@ -0,0 +1,71 @@
+/*
+ * 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 { BackstageTheme } from '@backstage/theme';
+import { CircularProgress, makeStyles, StepIconProps } from '@material-ui/core';
+import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import classNames from 'classnames';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+
+const useStepIconStyles = makeStyles((theme: BackstageTheme) => ({
+  root: {
+    color: theme.palette.text.disabled,
+  },
+  completed: {
+    color: theme.palette.status.ok,
+  },
+  error: {
+    color: theme.palette.status.error,
+  },
+}));
+
+export const StepIcon = (props: StepIconProps & { skipped: boolean }) => {
+  const classes = useStepIconStyles();
+  const { active, completed, error, skipped } = props;
+
+  const getMiddle = () => {
+    if (active) {
+      return <CircularProgress size="20px" />;
+    }
+    if (completed) {
+      return <CheckCircleOutline />;
+    }
+
+    if (error) {
+      return <DeleteOutline />;
+    }
+
+    if (skipped) {
+      return <RemoveCircleOutline />;
+    }
+
+    return <FiberManualRecordIcon />;
+  };
+
+  return (
+    <div
+      className={classNames(classes.root, {
+        [classes.completed]: completed,
+        [classes.error]: error,
+      })}
+    >
+      {getMiddle()}
+    </div>
+  );
+};

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

@@ -0,0 +1,53 @@
+/*
+ * 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, { useState } from 'react';
+import useInterval from 'react-use/lib/useInterval';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration from 'humanize-duration';
+import { Typography } from '@material-ui/core';
+
+export const StepTime = ({
+  step,
+}: {
+  step: {
+    id: string;
+    name: string;
+    startedAt?: string;
+    endedAt?: string;
+  };
+}) => {
+  const [time, setTime] = useState('');
+
+  useInterval(() => {
+    if (!step.startedAt) {
+      setTime('');
+      return;
+    }
+
+    const end = step.endedAt
+      ? DateTime.fromISO(step.endedAt)
+      : DateTime.local();
+
+    const startedAt = DateTime.fromISO(step.startedAt);
+    const formatted = Interval.fromDateTimes(startedAt, end)
+      .toDuration()
+      .valueOf();
+
+    setTime(humanizeDuration(formatted, { round: true }));
+  }, 1000);
+
+  return <Typography variant="caption">{time}</Typography>;
+};

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

@@ -23,7 +23,8 @@ import {
 } from '@material-ui/core';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { Step } from '../../../components/hooks/useEventStream';
-import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
+import { StepIcon } from './StepIcon';
+import { StepTime } from './StepTime';
 
 interface StepperProps {
   steps: (TaskStep & Step)[];
@@ -43,21 +44,23 @@ export const TaskSteps = (props: StepperProps) => {
         const isFailed = step.status === 'failed';
         const isActive = step.status === 'processing';
         const isSkipped = step.status === 'skipped';
-        const stepIconProps: Partial<StepIconProps> = {
+        const stepIconProps: Partial<StepIconProps & { skipped: boolean }> = {
           completed: isCompleted,
           error: isFailed,
           active: isActive,
+          skipped: isSkipped,
         };
 
-        if (isSkipped) {
-          stepIconProps.icon = <RemoveCircleOutlineIcon />;
-        }
-
         return (
           <MuiStep key={index}>
             <MuiStepButton>
-              <MuiStepLabel StepIconProps={stepIconProps}>
+              <MuiStepLabel
+                StepIconProps={stepIconProps}
+                StepIconComponent={StepIcon}
+              >
                 {step.name}
+                <br />
+                <StepTime step={step} />
               </MuiStepLabel>
             </MuiStepButton>
           </MuiStep>