chore: moving some files around and making them pretty

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

packages/core-components/src/components/LogViewer/LogLine.tsx

@@ -15,7 +15,6 @@
  */
 
 import React, { useMemo } from 'react';
-import Typography from '@material-ui/core/Typography';
 import { AnsiChunk, AnsiLine, ChunkModifiers } from './AnsiProcessor';
 import startCase from 'lodash/startCase';
 import classnames from 'classnames';
@@ -159,8 +158,8 @@ export function LogLine({
   const elements = useMemo(
     () =>
       chunks.map(({ text, modifiers, highlight }, index) => (
-        <Typography
-          component="span"
+        // eslint-disable-next-line react/forbid-elements
+        <span
           key={index}
           className={classnames(
             getModifierClasses(classes, modifiers),
@@ -171,7 +170,7 @@ export function LogLine({
           )}
         >
           {text}
-        </Typography>
+        </span>
       )),
     [chunks, highlightResultIndex, classes],
   );

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

@@ -20,8 +20,9 @@ import { useParams } from 'react-router-dom';
 import { Box, Paper } from '@material-ui/core';
 import { TaskSteps } from './TaskSteps';
 import { TaskBorder } from './TaskBorder';
+import { TaskLogStream } from './TaskLogStream';
 
-export const TaskPage = () => {
+export const OngoingTask = () => {
   const { taskId } = useParams();
   // check that task Id actually exists, and that it's valid. otherwise redirect to something more useful.
   const taskStream = useTaskEventStream(taskId!);
@@ -44,12 +45,19 @@ export const TaskPage = () => {
     return 0;
   }, [steps]);
 
+  const templateName =
+    taskStream.task?.spec.templateInfo?.entity?.metadata.name;
+
   return (
     <Page themeId="website">
       <Header
-        pageTitleOverride="Task ID"
-        title="View Task"
-        subtitle="View the status of a task"
+        pageTitleOverride={`Run of ${templateName}`}
+        title={
+          <div>
+            Run of <code>{templateName}</code>
+          </div>
+        }
+        subtitle={`Task ${taskId}`}
       />
       <Content>
         <Paper style={{ position: 'relative', overflow: 'hidden' }}>
@@ -59,7 +67,7 @@ export const TaskPage = () => {
           />
           <Box padding={2}>
             <TaskSteps steps={steps} activeStep={activeStep} />
-            {/* <TaskLogStream logs={logs} /> */}
+            <TaskLogStream logs={taskStream.stepLogs} />
           </Box>
         </Paper>
       </Content>

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { LogViewer } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {
+    width: '100%',
+    height: '200px',
+    position: 'relative',
+  },
+});
+
+export const TaskLogStream = (opts: { logs: { [k: string]: string[] } }) => {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <LogViewer
+        text={Object.values(opts.logs)
+          .map(l => l.join('\n'))
+          .join('\n')}
+      />
+    </div>
+  );
+};

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
 import { DateTime, Interval } from 'luxon';
 import humanizeDuration from 'humanize-duration';
@@ -31,7 +31,7 @@ export const StepTime = ({
 }) => {
   const [time, setTime] = useState('');
 
-  useInterval(() => {
+  const calculate = useCallback(() => {
     if (!step.startedAt) {
       setTime('');
       return;
@@ -47,7 +47,11 @@ export const StepTime = ({
       .valueOf();
 
     setTime(humanizeDuration(formatted, { round: true }));
-  }, 1000);
+  }, [step.endedAt, step.startedAt]);
+
+  useMemo(() => calculate(), [calculate]);
+
+  useInterval(() => !step.endedAt && calculate(), 1000);
 
   return <Typography variant="caption">{time}</Typography>;
 };

plugins/scaffolder/src/next/OngoingTask/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { TaskPage } from './TaskPage';
+export { OngoingTask } from './OngoingTask';

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

@@ -34,7 +34,7 @@ import {
   nextSelectedTemplateRouteRef,
 } from '../routes';
 import { ErrorPage } from '@backstage/core-components';
-import { TaskPage } from '../TaskPage';
+import { OngoingTask } from '../OngoingTask';
 
 /**
  * The Props for the Scaffolder Router
@@ -97,7 +97,7 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
           </SecretsContextProvider>
         }
       />
-      <Route path={nextScaffolderTaskRouteRef.path} element={<TaskPage />} />
+      <Route path={nextScaffolderTaskRouteRef.path} element={<OngoingTask />} />
       <Route
         path="*"
         element={<ErrorPage status="404" statusMessage="Page not found" />}