CE-2218: move job duration to details

src/components/Job/JobDetails.js

@@ -20,6 +20,7 @@ import AccessControl from "../auth/AccessControl";
 import { AWXJobDetails } from "../../api/DataTypes";
 import { JobStatusStepper } from "./JobStatus";
 import { ExternalLink, ExternalLinkContents } from "../common/Link";
+import { JobDuration } from "./JobDuration";
 
 function createAlert(operation, job) {
   const jobDetails = new AWXJobDetails(operation.type, job);
@@ -95,7 +96,15 @@ export function JobDetails({ operation, job }) {
       : "-",
     "AWX job start time": operation?.startTime
       ? formatDate(operation.startTime)
-      : "-"
+      : "-",
+    duration: operation?.finishedAt ? (
+      <JobDuration
+        job={operation}
+        renderContents={(duration) => duration}
+      />
+    ) : (
+      "-"
+    )
   };
 
   const finishedJobAlerts = finishedJob ? (

src/components/Job/JobDuration.js

+import React from "react";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { Tooltip } from "@mui/material";
+import LabeledIcon from "../common/LabeledIcon";
+import moment from "moment";
+
+const formattedDuration = ({ startDate, finishDate }) => {
+  if (startDate && finishDate) {
+    return moment
+      .utc(finishDate.getTime() - startDate.getTime())
+      .format("HH:mm:ss");
+  } else {
+    return null;
+  }
+};
+
+export const JobDuration = ({ job, renderContents }) => {
+  const createOrStartDate = new Date(job?.startTime ?? job.createdAt);
+
+  const duration = formattedDuration({
+    finishDate: new Date(job.finishedAt),
+    startDate: new Date(createOrStartDate)
+  });
+
+  const contents = renderContents ? (
+    renderContents(duration)
+  ) : (
+    <LabeledIcon
+      label={`${duration}`}
+      LabelProps={{ variant: "body2" }}
+      labelPosition="right"
+      Icon={AccessTimeIcon}
+      IconProps={{ fontSize: "small" }}
+    />
+  );
+
+  return (
+    <Tooltip
+      title={`Finished ${job.finishedAt}`}
+      aria-label={`Finshed ${job.finishedAt}, after ${duration}`}
+    >
+      {contents}
+    </Tooltip>
+  );
+};

src/components/Job/JobTable/JobStatusColumn.js

 import React from "react";
 import EventIcon from "@mui/icons-material/Event";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import { Stack, Tooltip } from "@mui/material";
 import { formatDate, timeAgo } from "../../common/Helper";
 import LabeledIcon from "../../common/LabeledIcon";
-import moment from "moment";
 import { JobStatusIcon } from "../JobStatus";
-
-const formattedDuration = ({ startDate, finishDate }) => {
-  if (startDate && finishDate) {
-    return moment
-      .utc(finishDate.getTime() - startDate.getTime())
-      .format("HH:mm:ss");
-  } else {
-    return null;
-  }
-};
+import { JobDuration } from "../JobDuration";
 
 export const JobStatusColumn = ({ job }) => {
   const createOrStartDate = new Date(job?.startTime ?? job.createdAt);
@@ -23,11 +12,6 @@ export const JobStatusColumn = ({ job }) => {
     job?.startTime ? "Started" : "Created"
   } ${timeAgo.format(new Date(createOrStartDate))}`;
 
-  const duration = formattedDuration({
-    finishDate: new Date(job.finishedAt),
-    startDate: new Date(createOrStartDate)
-  });
-
   return (
     <Stack>
       <Stack gap={0.5}>
@@ -47,20 +31,7 @@ export const JobStatusColumn = ({ job }) => {
               IconProps={{ fontSize: "small" }}
             />
           </Tooltip>
-          {job?.finishedAt ? (
-            <Tooltip
-              title={`Finished ${job.finishedAt}`}
-              aria-label={`Finshed ${job.finishedAt}, after ${duration}`}
-            >
-              <LabeledIcon
-                label={`${duration}`}
-                LabelProps={{ variant: "body2" }}
-                labelPosition="right"
-                Icon={AccessTimeIcon}
-                IconProps={{ fontSize: "small" }}
-              />
-            </Tooltip>
-          ) : null}
+          {job?.finishedAt ? <JobDuration job={job} /> : null}
         </Stack>
       </Stack>
     </Stack>

src/components/deployments/DeploymentJobOutput.js

@@ -5,7 +5,7 @@ import React, {
   useContext,
   useMemo
 } from "react";
-import { LinearProgress, Typography, Stack } from "@mui/material";
+import { LinearProgress, Stack } from "@mui/material";
 import { Console } from "../common/Console/Console";
 import { useSafePolling } from "../../hooks/Polling";
 import { apiContext } from "../../api/DeployApi";
@@ -57,17 +57,6 @@ export function DeploymentJobOutput({ deploymentJob }) {
     return deploymentJob?.started;
   }, [deploymentJob?.started]);
 
-  let header = (
-    <Stack
-      flexDirection="row"
-      alignItems="center"
-      height="100%"
-    >
-      <Typography fontWeight="bold">DURATION: </Typography>
-      <Typography marginLeft={"6px"}>{log?.elapsed.toFixed(0)} s</Typography>
-    </Stack>
-  );
-
   return (
     <Stack>
       {log ? (
@@ -80,7 +69,6 @@ export function DeploymentJobOutput({ deploymentJob }) {
             html={log.stdoutHtml}
             dataReady={dataReady}
             title="AWX job details"
-            dialogHeader={header}
           />
         </div>
       ) : (