From 4be022ce10ea7e9b889ec06120f7a2c895d70c4e Mon Sep 17 00:00:00 2001
From: Sky Brewer <sky.brewer@ess.eu>
Date: Tue, 28 May 2024 14:40:04 +0200
Subject: [PATCH] Swap to using common Duration
---
src/components/Job/JobDetails.js | 11 +++--
src/components/Job/JobDuration.js | 48 -------------------
.../Job/JobTable/JobStatusColumn.js | 35 +++-----------
3 files changed, 13 insertions(+), 81 deletions(-)
delete mode 100644 src/components/Job/JobDuration.js
diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index c00204ea..37d523ee 100644
--- a/src/components/Job/JobDetails.js
+++ b/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 />
diff --git a/src/components/Job/JobDuration.js b/src/components/Job/JobDuration.js
deleted file mode 100644
index 8bf71f8a..00000000
--- a/src/components/Job/JobDuration.js
+++ /dev/null
@@ -1,48 +0,0 @@
-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>
- );
-};
diff --git a/src/components/Job/JobTable/JobStatusColumn.js b/src/components/Job/JobTable/JobStatusColumn.js
index dd03c4ea..ef44bda4 100644
--- a/src/components/Job/JobTable/JobStatusColumn.js
+++ b/src/components/Job/JobTable/JobStatusColumn.js
@@ -1,39 +1,18 @@
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>
);
--
GitLab