From 2b536bba63a2c31d8e288d0707c495804e5236b7 Mon Sep 17 00:00:00 2001 From: Johanna Szepanski <johanna.szepanski@softhouse.se> Date: Mon, 20 Jan 2025 08:20:09 +0100 Subject: [PATCH] fixed merge conflicts and migrated batch job to typescript --- ...ilsBatchJob.jsx => JobDetailsBatchJob.tsx} | 46 ++++++++++--------- src/components/Job/JobDetailsSection.tsx | 2 +- src/components/Job/JobDetailsSingleJob.tsx | 5 +- src/components/Job/JobDetailsTable.tsx | 24 +--------- src/components/Job/JobHost.tsx | 28 +++++++++++ src/components/Job/JobUtils.jsx | 45 ------------------ src/components/Job/JobUtils.ts | 13 +++++- 7 files changed, 70 insertions(+), 93 deletions(-) rename src/components/Job/{JobDetailsBatchJob.jsx => JobDetailsBatchJob.tsx} (67%) create mode 100644 src/components/Job/JobHost.tsx delete mode 100644 src/components/Job/JobUtils.jsx diff --git a/src/components/Job/JobDetailsBatchJob.jsx b/src/components/Job/JobDetailsBatchJob.tsx similarity index 67% rename from src/components/Job/JobDetailsBatchJob.jsx rename to src/components/Job/JobDetailsBatchJob.tsx index fdfb6e15..cbb02c58 100644 --- a/src/components/Job/JobDetailsBatchJob.jsx +++ b/src/components/Job/JobDetailsBatchJob.tsx @@ -7,14 +7,15 @@ import { usePagination } from "@ess-ics/ce-ui-common"; import { Typography, Stack } from "@mui/material"; -import { - getNoOfIOCs, - getNoOfHosts, - isDeploymentJob, - calculateHostText -} from "./JobUtils"; +import { getNoOfIOCs, getNoOfHosts, isDeploymentJob } from "./JobUtils"; +import { JobHost } from "./JobHost"; import { JobRevisionChip } from "./JobRevisionChip"; import { ROWS_PER_PAGE } from "../../constants"; +import { JobDetails, JobDetailsEntry } from "../../store/deployApi"; + +interface JobDetailsBatchJobProps { + job: JobDetails; +} const columns = [ { @@ -29,9 +30,9 @@ const columns = [ } ]; -const createRow = (job, action) => { +const createRow = (job: JobDetails, action: string | undefined) => { return { - id: `${job.host.hostId}${job.iocId}`, + id: `${job.host?.hostId}${job.iocId}`, ioc: ( <Stack sx={{ padding: "8px 16px 8px 0" }} @@ -48,7 +49,7 @@ const createRow = (job, action) => { > <EllipsisText>{job.iocName}</EllipsisText> </InternalLink> - {isDeploymentJob(action) && ( + {isDeploymentJob(action) && job.gitReference && job.gitProjectId && ( <JobRevisionChip gitReference={job.gitReference} gitProjectId={job.gitProjectId} @@ -57,38 +58,39 @@ const createRow = (job, action) => { </Stack> </Stack> ), - host: calculateHostText(job) + host: <JobHost job={job} /> }; }; -export const JobDetailsBatchJob = ({ operation }) => { - const [currentRows, setCurrentRows] = useState([]); +export const JobDetailsBatchJob = ({ job }: JobDetailsBatchJobProps) => { + const [currentRows, setCurrentRows] = useState<JobDetailsEntry[]>([]); const { pagination, setPagination } = usePagination({ rowsPerPageOptions: ROWS_PER_PAGE, initLimit: ROWS_PER_PAGE[0], initPage: 0, - initTotalCount: operation.jobs.length + initTotalCount: job.jobs?.length || 0 }); const noOfIOCs = useMemo(() => { - return getNoOfIOCs(operation.jobs); - }, [operation]); + return getNoOfIOCs(job.jobs); + }, [job]); const noOfHosts = useMemo(() => { - return getNoOfHosts(operation.jobs); - }, [operation]); + return getNoOfHosts(job.jobs); + }, [job]); useEffect(() => { const { limit, page } = pagination; - const list = operation.jobs.reduce((acc, _, index) => { + const jobs = (job.jobs as JobDetailsEntry[]) || []; + const list = jobs.reduce((acc: JobDetailsEntry[][], _, index) => { if (index % limit === 0) { - acc.push(operation.jobs.slice(index, index + limit)); + acc.push(jobs.slice(index, index + limit)); } return acc; }, []); - setCurrentRows(list[page]); - }, [pagination, setPagination, operation]); + setCurrentRows(list ? list[page] : []); + }, [pagination, setPagination, job]); return ( <SimpleAccordion @@ -120,7 +122,7 @@ export const JobDetailsBatchJob = ({ operation }) => { <Table columns={columns} disableColumnSorting - rows={currentRows.map((job) => createRow(job, operation.action))} + rows={currentRows.map((batchJob) => createRow(batchJob, job.action))} pagination={pagination} onPage={setPagination} /> diff --git a/src/components/Job/JobDetailsSection.tsx b/src/components/Job/JobDetailsSection.tsx index 108220f9..19ef325d 100644 --- a/src/components/Job/JobDetailsSection.tsx +++ b/src/components/Job/JobDetailsSection.tsx @@ -72,7 +72,7 @@ export const JobDetailsSection = ({ job }: JobDetailsSectionProps) => { </Box> {isBatchJob(job.action) ? ( <Box sx={{ marginBottom: "16px" }}> - <JobDetailsBatchJob operation={job} /> + <JobDetailsBatchJob job={job} /> </Box> ) : ( <Box sx={{ marginBottom: "16px" }}> diff --git a/src/components/Job/JobDetailsSingleJob.tsx b/src/components/Job/JobDetailsSingleJob.tsx index 53ff1fa4..e60018e1 100644 --- a/src/components/Job/JobDetailsSingleJob.tsx +++ b/src/components/Job/JobDetailsSingleJob.tsx @@ -1,6 +1,7 @@ import { InternalLink, KeyValueTable } from "@ess-ics/ce-ui-common"; -import { calculateHostText, isDeploymentJob } from "./JobUtils"; +import { isDeploymentJob } from "./JobUtils"; import { JobRevisionChip } from "./JobRevisionChip"; +import { JobHost } from "./JobHost"; import { JobDetails } from "../../store/deployApi"; interface JobDetailsSingleJobProps { @@ -35,7 +36,7 @@ const getSingleOperationFields = ( </InternalLink> ), ...(isDeployJob && getRevision(operation)), - host: calculateHostText(operation) + host: <JobHost job={operation} /> }; }; diff --git a/src/components/Job/JobDetailsTable.tsx b/src/components/Job/JobDetailsTable.tsx index ef15b140..2832645a 100644 --- a/src/components/Job/JobDetailsTable.tsx +++ b/src/components/Job/JobDetailsTable.tsx @@ -8,6 +8,7 @@ import { import { Typography, Stack } from "@mui/material"; import { getNoOfIOCs, getNoOfHosts, isBatchJob } from "./JobUtils"; import { JobRevisionChip } from "./JobRevisionChip"; +import { JobHost } from "./JobHost"; import { JobDetails, JobDetailsEntry } from "../../store/deployApi"; const columns = [ @@ -28,27 +29,6 @@ const columns = [ } ]; -const calculateHostText = (job: JobDetailsEntry) => { - // host is resolvable => show link for users - if (job?.host?.hostId && job?.host?.externalIdValid) { - return ( - <InternalLink - to={`/hosts/${job.host.hostId}`} - label={`Host Details, ${job.host.fqdn}`} - width="100%" - > - <EllipsisText>{job.host.fqdn}</EllipsisText> - </InternalLink> - ); - } - // gray out hostname if it is from cache - return ( - <Typography color="gray"> - <EllipsisText>{job?.host?.fqdn}</EllipsisText> - </Typography> - ); -}; - const createRow = (job: JobDetailsEntry) => { const { iocId, iocName, host, gitReference, gitProjectId } = job; return { @@ -62,7 +42,7 @@ const createRow = (job: JobDetailsEntry) => { <EllipsisText>{iocName}</EllipsisText> </InternalLink> ), - host: calculateHostText(job), + host: <JobHost job={job} />, revision: gitReference && gitProjectId && ( <JobRevisionChip gitReference={gitReference} diff --git a/src/components/Job/JobHost.tsx b/src/components/Job/JobHost.tsx new file mode 100644 index 00000000..465f26a7 --- /dev/null +++ b/src/components/Job/JobHost.tsx @@ -0,0 +1,28 @@ +import { EllipsisText, InternalLink } from "@ess-ics/ce-ui-common"; +import { Typography } from "@mui/material"; +import { JobDetails } from "../../store/deployApi"; + +interface JobHostProps { + job: JobDetails; +} + +export const JobHost = ({ job }: JobHostProps) => { + // host is resolvable => show link for users + if (job?.host?.hostId && job?.host?.externalIdValid) { + return ( + <InternalLink + to={`/hosts/${job.host.hostId}`} + label={`Host Details, ${job.host.fqdn}`} + width="100%" + > + <EllipsisText>{job.host.fqdn}</EllipsisText> + </InternalLink> + ); + } + // gray out hostname if it is from cache + return ( + <Typography color="gray"> + <EllipsisText>{job?.host?.fqdn}</EllipsisText> + </Typography> + ); +}; diff --git a/src/components/Job/JobUtils.jsx b/src/components/Job/JobUtils.jsx deleted file mode 100644 index 4d76a2de..00000000 --- a/src/components/Job/JobUtils.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import { EllipsisText, InternalLink } from "@ess-ics/ce-ui-common"; -import { Typography } from "@mui/material"; - -export const ACTION_TYPES = { - DEPLOY: "DEPLOY", - UNDEPLOY: "UNDEPLOY", - BATCH_DEPLOY: "BATCH_DEPLOY", - BATCH_UNDEPLOY: "BATCH_UNDEPLOY", - START: "START", - STOP: "STOP" -}; - -export const isBatchJob = (action) => - action === ACTION_TYPES.BATCH_DEPLOY || - action === ACTION_TYPES.BATCH_UNDEPLOY; - -export const isDeploymentJob = (action) => - action === ACTION_TYPES.BATCH_DEPLOY || action === ACTION_TYPES.DEPLOY; - -export const getNoOfIOCs = (jobs) => - [...new Set(jobs.map((job) => job.iocId))].length; - -export const getNoOfHosts = (jobs) => - [...new Set(jobs.map((job) => job.host.hostId))].length; - -export const calculateHostText = (job) => { - // host is resolvable => show link for users - if (job?.host?.hostId && job?.host?.externalIdValid) { - return ( - <InternalLink - to={`/hosts/${job.host.hostId}`} - label={`Host Details, ${job.host.fqdn}`} - width="100%" - > - <EllipsisText>{job.host.fqdn}</EllipsisText> - </InternalLink> - ); - } - // gray out hostname if it is from cache - return ( - <Typography color="gray"> - <EllipsisText>{job?.host?.fqdn}</EllipsisText> - </Typography> - ); -}; diff --git a/src/components/Job/JobUtils.ts b/src/components/Job/JobUtils.ts index 157e23bf..b842300f 100644 --- a/src/components/Job/JobUtils.ts +++ b/src/components/Job/JobUtils.ts @@ -1,9 +1,20 @@ -import { ACTION_TYPES } from "./JobData"; import { Job, JobEntry } from "../../store/deployApi"; +export const ACTION_TYPES = { + DEPLOY: "DEPLOY", + UNDEPLOY: "UNDEPLOY", + BATCH_DEPLOY: "BATCH_DEPLOY", + BATCH_UNDEPLOY: "BATCH_UNDEPLOY", + START: "START", + STOP: "STOP" +}; + export const isBatchJob = (type: Job["action"]) => type === ACTION_TYPES.BATCH_DEPLOY || type === ACTION_TYPES.BATCH_UNDEPLOY; +export const isDeploymentJob = (action: string | undefined) => + action === ACTION_TYPES.BATCH_DEPLOY || action === ACTION_TYPES.DEPLOY; + export const getNoOfIOCs = (jobs?: JobEntry[]) => [...new Set(jobs?.map((job) => job.iocId))].length; -- GitLab