Swap to using common Duration

src/components/Job/JobDetails.js

@@ -7,7 +7,8 @@ import {
   ExternalLink,
   InternalLink,
   formatDateAndTime,
-  EmptyValue
+  EmptyValue,
+  Duration
 } from "@ess-ics/ce-ui-common";
 import { JobBadge } from "./JobBadge";
 import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
@@ -15,7 +16,6 @@ import GitRefLink from "../IOC/GitRefLink";
 import AccessControl from "../auth/AccessControl";
 import { AWXJobDetails } from "../../api/DataTypes";
 import { JobStatusStepper } from "./JobStatus";
-import { JobDuration } from "./JobDuration";
 
 function createAlert(operation, job) {
   const jobDetails = new AWXJobDetails(operation.type, job);
@@ -94,9 +94,10 @@ export function JobDetails({ operation, job }) {
       <EmptyValue />
     ),
     duration: operation?.finishedAt ? (
-      <JobDuration
-        job={operation}
-        renderContents={(duration) => duration}
+      <Duration
+        createOrStartDate={operation?.startTime ?? operation?.createdAt}
+        finishedAt={operation?.finishedAt}
+        textOnly
       />
     ) : (
       <EmptyValue />

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";
-import { formatDateAndTime } from "@ess-ics/ce-ui-common";
-
-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 ${formatDateAndTime(job.finishedAt)}`}
-      aria-label={`Finshed ${formatDateAndTime(
-        job.finishedAt
-      )}, after ${duration}`}
-    >
-      {contents}
-    </Tooltip>
-  );
-};

src/components/Job/JobTable/JobStatusColumn.js

 import React from "react";
-import EventIcon from "@mui/icons-material/Event";
-import { Stack, Tooltip } from "@mui/material";
-import { timeAgo } from "../../common/Helper";
-import LabeledIcon from "../../common/LabeledIcon";
+import { Stack } from "@mui/material";
 import { JobStatusIcon } from "../JobStatus";
-import { JobDuration } from "../JobDuration";
-import { formatDateAndTime } from "@ess-ics/ce-ui-common";
+import { StartAndDuration } from "@ess-ics/ce-ui-common";
 
 export const JobStatusColumn = ({ job }) => {
-  const createOrStartDate = new Date(job?.startTime ?? job.createdAt);
-  const formattedCreateOrStartDate = `${
-    job?.startTime ? "Started" : "Created"
-  } ${timeAgo.format(new Date(createOrStartDate))}`;
-
   return (
     <Stack>
       <Stack gap={0.5}>
         <JobStatusIcon job={job} />
-        <Stack>
-          <Tooltip
-            title={`${formatDateAndTime(createOrStartDate)}`}
-            aria-label={`${formattedCreateOrStartDate}, on ${formatDateAndTime(
-              createOrStartDate
-            )}`}
-          >
-            <LabeledIcon
-              label={formattedCreateOrStartDate}
-              LabelProps={{ variant: "body2" }}
-              labelPosition="right"
-              Icon={EventIcon}
-              IconProps={{ fontSize: "small" }}
-            />
-          </Tooltip>
-          {job?.finishedAt ? <JobDuration job={job} /> : null}
-        </Stack>
+        <StartAndDuration
+          createdAt={job.createdAt}
+          startTime={job?.startTime}
+          finishedAt={job?.finishedAt}
+        />
       </Stack>
     </Stack>
   );