From 0ff2a8cb26b945605c2a28c5777edb1e44492a98 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 13 Jan 2025 09:29:03 +0100
Subject: [PATCH] improved UI for single and batch job details
---
src/components/Job/JobDetails.tsx | 63 +----------
src/components/Job/JobDetailsBatchJob.jsx | 105 ++++++++++++++++++
src/components/Job/JobDetailsSection.tsx | 119 +++++++++++++++++++++
src/components/Job/JobDetailsSingleJob.tsx | 55 ++++++++++
4 files changed, 282 insertions(+), 60 deletions(-)
create mode 100644 src/components/Job/JobDetailsBatchJob.jsx
create mode 100644 src/components/Job/JobDetailsSection.tsx
create mode 100644 src/components/Job/JobDetailsSingleJob.tsx
diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index d03c90c5..8513e2a6 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -1,20 +1,13 @@
import { useEffect, useState, useMemo } from "react";
-import { Typography, Stack, Box } from "@mui/material";
+import { Typography, Stack } from "@mui/material";
import {
- KeyValueTable,
SimpleAccordion,
AlertBannerList,
- ExternalLink,
- InternalLink,
- formatDateAndTime,
- EmptyValue,
- Duration,
SingleStateStepper,
STEPPER_STATES,
AccessControl
} from "@ess-ics/ce-ui-common";
-import { ActionTypeIconText } from "./JobIcons";
-import { JobDetailsTable } from "./JobDetailsTable";
+import { JobDetailsSection } from "./JobDetailsSection";
import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
import { AWXJobDetails, Status } from "../../api/DataTypes";
import { JobDetails } from "../../store/deployApi";
@@ -30,47 +23,6 @@ const createAlert = (type: Status, message: string) => {
};
};
-const getDeploymentDetails = (operation: JobDetails) => {
- return {
- user: (
- <InternalLink
- to={`/user/${operation.createdBy}`}
- label={`User profile, ${operation.createdBy}`}
- >
- {operation.createdBy}
- </InternalLink>
- ),
- "AWX job link": operation?.jobUrl ? (
- <ExternalLink
- href={operation.jobUrl}
- label="AWX job"
- >
- {operation.jobUrl}
- </ExternalLink>
- ) : (
- <EmptyValue />
- ),
- "created time": operation?.createdAt ? (
- formatDateAndTime(operation.createdAt)
- ) : (
- <EmptyValue />
- ),
- "AWX job start time": operation?.startTime ? (
- formatDateAndTime(operation.startTime)
- ) : (
- <EmptyValue />
- ),
- duration: operation ? (
- <Duration
- createOrStartDate={new Date(operation.createdAt ?? new Date())}
- finishedAt={new Date(operation.finishedAt ?? new Date())}
- />
- ) : (
- <EmptyValue />
- )
- };
-};
-
export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
const [alerts, setAlerts] = useState<
{ type?: Status; message?: string; link?: string }[]
@@ -93,16 +45,7 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
return (
<Stack spacing={2}>
<Stack>{<AlertBannerList alerts={alerts} />}</Stack>
- <Box sx={{ paddingLeft: "46px" }}>
- <ActionTypeIconText action={operation.action} />
- </Box>
- <JobDetailsTable operation={operation} />
- <KeyValueTable
- obj={getDeploymentDetails(operation)}
- variant="overline"
- sx={{ border: 0 }}
- valueOptions={{ headerName: "" }}
- />
+ <JobDetailsSection job={operation} />
<AccessControl
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
diff --git a/src/components/Job/JobDetailsBatchJob.jsx b/src/components/Job/JobDetailsBatchJob.jsx
new file mode 100644
index 00000000..cad2712e
--- /dev/null
+++ b/src/components/Job/JobDetailsBatchJob.jsx
@@ -0,0 +1,105 @@
+import { useMemo } from "react";
+import {
+ EllipsisText,
+ InternalLink,
+ Table,
+ SimpleAccordion
+} from "@ess-ics/ce-ui-common";
+import { Typography, Stack } from "@mui/material";
+import {
+ getNoOfIOCs,
+ getNoOfHosts,
+ isDeploymentJob,
+ calculateHostText
+} from "./JobUtils";
+import { JobRevisionChip } from "./JobRevisionChip";
+
+const columns = [
+ {
+ field: "ioc",
+ headerName: "IOC",
+ flex: 0.7
+ },
+ {
+ field: "host",
+ headerName: "Host",
+ flex: 1
+ }
+];
+
+const createRow = (job, action) => {
+ return {
+ id: `${job.host.hostId}${job.iocId}`,
+ ioc: (
+ <Stack
+ sx={{ padding: "8px 16px 8px 0" }}
+ gap={2}
+ >
+ <Stack
+ key={job.iocId}
+ flexDirection="row"
+ gap={1}
+ >
+ <InternalLink
+ to={`/iocs/${job.iocId}`}
+ label={`Ioc details, ${job.iocName}`}
+ >
+ <EllipsisText>{job.iocName}</EllipsisText>
+ </InternalLink>
+ {isDeploymentJob(action) && (
+ <JobRevisionChip
+ gitReference={job.gitReference}
+ gitProjectId={job.gitProjectId}
+ />
+ )}
+ </Stack>
+ </Stack>
+ ),
+ host: calculateHostText(job)
+ };
+};
+
+export const JobDetailsBatchJob = ({ operation }) => {
+ const noOfIOCs = useMemo(() => {
+ return getNoOfIOCs(operation.jobs);
+ }, [operation]);
+
+ const noOfHosts = useMemo(() => {
+ return getNoOfHosts(operation.jobs);
+ }, [operation]);
+
+ return (
+ <SimpleAccordion
+ summary={
+ <Stack
+ flexDirection="row"
+ alignItems="end"
+ sx={{ width: "100%" }}
+ gap={1}
+ >
+ {" "}
+ <Typography
+ component="h2"
+ variant="h3"
+ >
+ Batch
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{ fontWeight: "600", marginRight: "10px" }}
+ >
+ {noOfIOCs} {noOfIOCs > 1 ? "IOCs" : "IOC"}
+ {", "}
+ {noOfHosts} {noOfHosts > 1 ? "Hosts" : "Host"}
+ </Typography>
+ </Stack>
+ }
+ >
+ <Table
+ columns={columns}
+ disableColumnSorting
+ rows={operation.jobs.map((job) => createRow(job, operation.action))}
+ />
+ </SimpleAccordion>
+ );
+};
diff --git a/src/components/Job/JobDetailsSection.tsx b/src/components/Job/JobDetailsSection.tsx
new file mode 100644
index 00000000..108220f9
--- /dev/null
+++ b/src/components/Job/JobDetailsSection.tsx
@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { Paper, Box, Typography } from "@mui/material";
+import {
+ KeyValueTable,
+ ExternalLink,
+ InternalLink,
+ formatDateAndTime,
+ EmptyValue,
+ Duration,
+ SimpleAccordion
+} from "@ess-ics/ce-ui-common";
+import { JobDetailsBatchJob } from "./JobDetailsBatchJob";
+import { JobDetailsSingleJob } from "./JobDetailsSingleJob";
+import { ActionTypeIconText } from "./JobIcons";
+import { isBatchJob } from "./JobUtils";
+import { JobDetails } from "../../store/deployApi";
+
+interface JobDetailsSectionProps {
+ job: JobDetails;
+}
+
+const getTimeDetails = (job: JobDetails) => {
+ return {
+ started: job?.createdAt ? formatDateAndTime(job.createdAt) : <EmptyValue />,
+ completed: job?.finishedAt ? (
+ formatDateAndTime(job.finishedAt)
+ ) : (
+ <EmptyValue />
+ ),
+ duration: job?.finishedAt ? (
+ <Duration
+ createOrStartDate={job.createdAt && new Date(job.createdAt)}
+ finishedAt={job.finishedAt && new Date(job.finishedAt)}
+ textOnly
+ />
+ ) : (
+ <EmptyValue />
+ )
+ };
+};
+
+const getDeploymentDetails = (job: JobDetails) => {
+ return {
+ user: (
+ <InternalLink
+ to={`/user/${job.createdBy}`}
+ label={`User profile, ${job.createdBy}`}
+ >
+ {job.createdBy}
+ </InternalLink>
+ ),
+ "AWX job link": job?.jobUrl ? (
+ <ExternalLink
+ href={job.jobUrl}
+ label="AWX job"
+ >
+ {job.jobUrl}
+ </ExternalLink>
+ ) : (
+ <EmptyValue />
+ )
+ };
+};
+
+export const JobDetailsSection = ({ job }: JobDetailsSectionProps) => {
+ const [expanded, setExpanded] = useState(false);
+ return (
+ <>
+ <Paper sx={{ padding: "12px 12px 0 12px" }}>
+ <Box sx={{ paddingLeft: "4px" }}>
+ <ActionTypeIconText action={job.action} />
+ </Box>
+ {isBatchJob(job.action) ? (
+ <Box sx={{ marginBottom: "16px" }}>
+ <JobDetailsBatchJob operation={job} />
+ </Box>
+ ) : (
+ <Box sx={{ marginBottom: "16px" }}>
+ <JobDetailsSingleJob job={job} />
+ </Box>
+ )}
+ </Paper>
+
+ <SimpleAccordion
+ expanded={expanded}
+ onChange={() => setExpanded((prev) => !prev)}
+ summary={
+ <Typography
+ component="h2"
+ variant="h3"
+ sx={{ marginRight: "8px" }}
+ >
+ Job details
+ </Typography>
+ }
+ >
+ <KeyValueTable
+ obj={getDeploymentDetails(job)}
+ variant="overline"
+ sx={{
+ border: 0,
+ "& .MuiBox-root": {
+ width: "100%"
+ }
+ }}
+ valueOptions={{ headerName: "" }}
+ />
+ <Paper sx={{ marginTop: "8px", padding: "12px" }}>
+ <KeyValueTable
+ obj={getTimeDetails(job)}
+ variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
+ />
+ </Paper>
+ </SimpleAccordion>
+ </>
+ );
+};
diff --git a/src/components/Job/JobDetailsSingleJob.tsx b/src/components/Job/JobDetailsSingleJob.tsx
new file mode 100644
index 00000000..a6a2e77e
--- /dev/null
+++ b/src/components/Job/JobDetailsSingleJob.tsx
@@ -0,0 +1,55 @@
+import { Stack } from "@mui/material";
+import { InternalLink, KeyValueTable } from "@ess-ics/ce-ui-common";
+import { calculateHostText } from "./JobUtils";
+import { JobGitRefLink } from "./JobGitRefLink";
+import { JobGitRefIcon } from "./JobGitRefIcon";
+import { JobDetails } from "../../store/deployApi";
+
+interface JobDetailsSingleJobProps {
+ job: JobDetails;
+}
+
+const getSingleOperationFields = (operation: JobDetails) => {
+ return {
+ ioc: (
+ <InternalLink
+ to={`/iocs/${operation.iocName}`}
+ label={`IOC details, ${operation.iocName}`}
+ >
+ {operation.iocName}
+ </InternalLink>
+ ),
+ revision:
+ operation.gitReference && operation.gitProjectId ? (
+ <Stack
+ flexDirection="row"
+ alignItems="center"
+ gap={0.5}
+ >
+ <JobGitRefIcon
+ gitReference={operation.gitReference}
+ gitProjectId={operation.gitProjectId}
+ />
+ <JobGitRefLink
+ gitReference={operation.gitReference}
+ gitProjectId={operation.gitProjectId}
+ disableExternalLinkIcon
+ />
+ </Stack>
+ ) : (
+ "Unknown"
+ ),
+ host: calculateHostText(operation)
+ };
+};
+
+export const JobDetailsSingleJob = ({ job }: JobDetailsSingleJobProps) => {
+ return (
+ <KeyValueTable
+ obj={getSingleOperationFields(job)}
+ variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
+ />
+ );
+};
--
GitLab