From e5f756122ee17e7c867b4aecf0090308809f947f Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 23 Sep 2024 11:48:10 +0200
Subject: [PATCH] combined host and summary columns to a new details column
---
src/components/Job/JobDetails.tsx | 13 ++--
.../Job/{JobTable => }/JobGitRefIcon.js | 6 +-
.../Job/{JobTable => }/JobGitRefLink.js | 4 +-
src/components/Job/JobRevisionChip.tsx | 31 ++++++++++
.../Job/JobTable/JobDetailsColumn.js | 62 +++++++++++++++++++
src/components/Job/JobTable/JobHostColumn.js | 20 ------
.../Job/JobTable/JobSummaryColumn.js | 55 ----------------
7 files changed, 103 insertions(+), 88 deletions(-)
rename src/components/Job/{JobTable => }/JobGitRefIcon.js (81%)
rename src/components/Job/{JobTable => }/JobGitRefLink.js (93%)
create mode 100644 src/components/Job/JobRevisionChip.tsx
create mode 100644 src/components/Job/JobTable/JobDetailsColumn.js
delete mode 100644 src/components/Job/JobTable/JobHostColumn.js
delete mode 100644 src/components/Job/JobTable/JobSummaryColumn.js
diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index 454ad5e3..1a60b195 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -16,14 +16,11 @@ import {
} from "@ess-ics/ce-ui-common";
import { JobBadge } from "./JobBadge";
import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
-import { JobGitRefIcon } from "./JobTable/JobGitRefIcon";
-import { JobGitRefLink } from "./JobTable/JobGitRefLink";
-import { AWXJobDetails, Status } from "../../api/DataTypes";
-
-interface JobDetailsProps {
- operation: OperationDetails;
- job: AwxJobDetails;
-}
+import { JobGitRefIcon } from "./JobGitRefIcon";
+import { JobGitRefLink } from "./JobGitRefLink";
+import AccessControl from "../auth/AccessControl";
+import { AWXJobDetails } from "../../api/DataTypes";
+import { JobStatusStepper } from "./JobStatus";
const createAlert = (type: Status, message: string) => {
return {
diff --git a/src/components/Job/JobTable/JobGitRefIcon.js b/src/components/Job/JobGitRefIcon.js
similarity index 81%
rename from src/components/Job/JobTable/JobGitRefIcon.js
rename to src/components/Job/JobGitRefIcon.js
index abf97c78..ec2b1b6b 100644
--- a/src/components/Job/JobTable/JobGitRefIcon.js
+++ b/src/components/Job/JobGitRefIcon.js
@@ -1,10 +1,10 @@
import { useContext, useMemo } from "react";
-import { apiContext } from "../../../api/DeployApi";
+import { apiContext } from "../../api/DeployApi";
import { useAPIMethod } from "@ess-ics/ce-ui-common";
import { Skeleton } from "@mui/material";
-import { GitRefTypeIcon } from "../../common/Git/GitRefTypeIcon";
+import { GitRefTypeIcon } from "../common/Git/GitRefTypeIcon";
-export const JobGitRefIcon = ({ job, fontSize }) => {
+export const JobGitRefIcon = ({ job, fontSize = null }) => {
const client = useContext(apiContext);
const params = useMemo(
() => ({
diff --git a/src/components/Job/JobTable/JobGitRefLink.js b/src/components/Job/JobGitRefLink.js
similarity index 93%
rename from src/components/Job/JobTable/JobGitRefLink.js
rename to src/components/Job/JobGitRefLink.js
index dce74898..edd460cf 100644
--- a/src/components/Job/JobTable/JobGitRefLink.js
+++ b/src/components/Job/JobGitRefLink.js
@@ -1,6 +1,6 @@
import { useContext, useMemo } from "react";
-import { GitRefLink } from "../../common/Git/GitRefLink";
-import { apiContext } from "../../../api/DeployApi";
+import { GitRefLink } from "../common/Git/GitRefLink";
+import { apiContext } from "../../api/DeployApi";
import { useAPIMethod } from "@ess-ics/ce-ui-common";
import { Skeleton } from "@mui/material";
diff --git a/src/components/Job/JobRevisionChip.tsx b/src/components/Job/JobRevisionChip.tsx
new file mode 100644
index 00000000..f4ecc68e
--- /dev/null
+++ b/src/components/Job/JobRevisionChip.tsx
@@ -0,0 +1,31 @@
+import { PagedOperationResponse } from "../../store/deployApi";
+import { Chip } from "@mui/material";
+import { JobGitRefIcon } from "./JobGitRefIcon";
+import { JobGitRefLink } from "./JobGitRefLink";
+
+interface JobRevisionChipProps {
+ job: PagedOperationResponse;
+}
+
+export const JobRevisionChip = ({ job }: JobRevisionChipProps) => {
+ return (
+ <Chip
+ sx={{
+ padding: "8px",
+ gap: "4px",
+ "& .MuiChip-label": {
+ paddingLeft: "0",
+ paddingRight: "0"
+ }
+ }}
+ size="small"
+ icon={<JobGitRefIcon job={job} />}
+ label={
+ <JobGitRefLink
+ job={job}
+ disableExternalLinkIcon
+ />
+ }
+ />
+ );
+};
diff --git a/src/components/Job/JobTable/JobDetailsColumn.js b/src/components/Job/JobTable/JobDetailsColumn.js
new file mode 100644
index 00000000..d1eb0c29
--- /dev/null
+++ b/src/components/Job/JobTable/JobDetailsColumn.js
@@ -0,0 +1,62 @@
+import { Stack, Typography } from "@mui/material";
+import { InternalLink } from "@ess-ics/ce-ui-common";
+import { JobTypeIcon } from "../JobIcons";
+import { JobRevisionChip } from "../JobRevisionChip";
+
+export const JobDetailsColumn = ({ job, colorStyle }) => {
+ return (
+ <Stack>
+ <JobTypeIcon
+ type={job.type}
+ colorStyle={colorStyle}
+ labelPosition="right"
+ />
+ {/* TODO: Fix hard coded job types in next commit */}
+ {job.type !== "BATCH_DEPLOY" || job.type !== "BATCH_UNDEPLOY" ? (
+ <Stack>
+ <Stack
+ flexDirection="row"
+ gap={1}
+ alignItems="center"
+ >
+ <InternalLink
+ to={`/iocs/${job.iocId}`}
+ label={`IOC Details, ${job.iocName}`}
+ >
+ {job.iocName}
+ </InternalLink>
+ {job.type === "DEPLOY" && <JobRevisionChip job={job} />}
+ </Stack>
+ <Stack
+ flexDirection="row"
+ gap={1}
+ alignItems="baseline"
+ >
+ <InternalLink
+ to={`/hosts/${job?.host?.hostId}`}
+ label={`Host details, ${job.host?.hostName}`}
+ >
+ {job.host.hostName}
+ </InternalLink>
+ <Typography variant="body2">{job.host.network}</Typography>
+ </Stack>
+ </Stack>
+ ) : (
+ <Stack>
+ <Typography
+ variant="body2"
+ sx={{ width: "30px" }}
+ >
+ {job.noOfIOCs} IOCs
+ </Typography>
+ <Typography
+ variant="body2"
+ sx={{ width: "30px" }}
+ >
+ {job.noOfHosts} Hosts
+ </Typography>
+ </Stack>
+ )}
+ </Stack>
+ );
+};
diff --git a/src/components/Job/JobTable/JobHostColumn.js b/src/components/Job/JobTable/JobHostColumn.js
deleted file mode 100644
index a06afea4..00000000
--- a/src/components/Job/JobTable/JobHostColumn.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import { InternalLink } from "@ess-ics/ce-ui-common";
-
-export const JobHostColumn = ({ job }) => {
- if (job.host?.hostName) {
- return (
- <Stack>
- <InternalLink
- to={`/hosts/${job?.host?.hostId}`}
- label={`Host details, ${job.host?.hostName}`}
- >
- {job.host.hostName}
- </InternalLink>
- <Typography variant="body2">{job.host.network}</Typography>
- </Stack>
- );
- }
-
- return null;
-};
diff --git a/src/components/Job/JobTable/JobSummaryColumn.js b/src/components/Job/JobTable/JobSummaryColumn.js
deleted file mode 100644
index 9c835931..00000000
--- a/src/components/Job/JobTable/JobSummaryColumn.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Chip, Stack } from "@mui/material";
-import { JobGitRefLink } from "./JobGitRefLink";
-import { JobTypeIcon } from "../JobIcons";
-import { InternalLink } from "@ess-ics/ce-ui-common";
-import { JobGitRefIcon } from "./JobGitRefIcon";
-
-export const JobSummaryColumn = ({ job, colorStyle }) => {
- return (
- <Stack>
- <JobTypeIcon
- type={job.type}
- colorStyle={colorStyle}
- labelPosition="right"
- />
- <InternalLink
- to={`/iocs/${job.iocId}`}
- label={`IOC Details, ${job.iocName}`}
- >
- {job.iocName}
- </InternalLink>
- <Stack
- flexDirection="row"
- gap={0.5}
- alignItems="center"
- >
- <InternalLink
- to={`/jobs/${job?.id}`}
- label={`Job Details, ID ${job.id}`}
- >
- {`#${job.id}`}
- </InternalLink>
- {job.type === "DEPLOY" ? (
- <Chip
- sx={{
- padding: "8px",
- gap: "4px",
- "& .MuiChip-label": {
- paddingLeft: "0",
- paddingRight: "0"
- }
- }}
- size="small"
- icon={<JobGitRefIcon job={job} />}
- label={
- <JobGitRefLink
- job={job}
- disableExternalLinkIcon
- />
- }
- />
- ) : null}
- </Stack>
- </Stack>
- );
-};
--
GitLab