From 9d32233c2a07eccb59c2836b63efe1194c7e3c74 Mon Sep 17 00:00:00 2001
From: cjenkscybercom <christina.jenks@knowit.se>
Date: Fri, 3 Nov 2023 13:53:05 +0100
Subject: [PATCH] CE-2218: move job duration to details
---
src/components/Job/JobDetails.js | 11 ++++-
src/components/Job/JobDuration.js | 45 +++++++++++++++++++
.../Job/JobTable/JobStatusColumn.js | 33 +-------------
.../deployments/DeploymentJobOutput.js | 14 +-----
4 files changed, 58 insertions(+), 45 deletions(-)
create mode 100644 src/components/Job/JobDuration.js
diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index ea1879b6..26ba88fc 100644
--- a/src/components/Job/JobDetails.js
+++ b/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 ? (
diff --git a/src/components/Job/JobDuration.js b/src/components/Job/JobDuration.js
new file mode 100644
index 00000000..784fdddf
--- /dev/null
+++ b/src/components/Job/JobDuration.js
@@ -0,0 +1,45 @@
+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>
+ );
+};
diff --git a/src/components/Job/JobTable/JobStatusColumn.js b/src/components/Job/JobTable/JobStatusColumn.js
index a82aa04e..b4e57033 100644
--- a/src/components/Job/JobTable/JobStatusColumn.js
+++ b/src/components/Job/JobTable/JobStatusColumn.js
@@ -1,21 +1,10 @@
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>
diff --git a/src/components/deployments/DeploymentJobOutput.js b/src/components/deployments/DeploymentJobOutput.js
index f70854fd..ac1f26ee 100644
--- a/src/components/deployments/DeploymentJobOutput.js
+++ b/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>
) : (
--
GitLab