fixed merge conflicts and migrated batch job to typescript

src/components/Job/JobDetailsBatchJob.jsx → 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}
       />

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" }}>

src/components/Job/JobDetailsSingleJob.tsx

 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} />
   };
 };
 

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}

src/components/Job/JobUtils.jsx → src/components/Job/JobHost.tsx

 import { EllipsisText, InternalLink } from "@ess-ics/ce-ui-common";
 import { Typography } from "@mui/material";
+import { JobDetails } 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 = (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;
+interface JobHostProps {
+  job: JobDetails;
+}
 
-export const calculateHostText = (job) => {
+export const JobHost = ({ job }: JobHostProps) => {
   // host is resolvable => show link for users
   if (job?.host?.hostId && job?.host?.externalIdValid) {
     return (

src/components/Job/JobUtils.ts

-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;