generalized JobHost to be more reusable

src/components/Job/JobDetailsBatchJob.tsx

@@ -58,7 +58,12 @@ const createRow = (job: JobDetails, action: string | undefined) => {
         </Stack>
       </Stack>
     ),
-    host: <JobHost job={job} />
+    host: (
+      <JobHost
+        url={job.host?.externalIdValid ? job.host.hostId : undefined}
+        label={job.host?.fqdn}
+      />
+    )
   };
 };
 

src/components/Job/JobDetailsSingleJob.tsx

@@ -8,13 +8,13 @@ interface JobDetailsSingleJobProps {
   job: JobDetails;
 }
 
-const getRevision = (operation: JobDetails) => {
+const getRevision = (job: JobDetails) => {
   return {
     revision:
-      operation.gitReference && operation.gitProjectId ? (
+      job.gitReference && job.gitProjectId ? (
         <JobRevisionChip
-          gitReference={operation.gitReference}
-          gitProjectId={operation.gitProjectId}
+          gitReference={job.gitReference}
+          gitProjectId={job.gitProjectId}
         />
       ) : (
         "Unknown"
@@ -22,21 +22,23 @@ const getRevision = (operation: JobDetails) => {
   };
 };
 
-const getSingleOperationFields = (
-  operation: JobDetails,
-  isDeployJob: boolean
-) => {
+const getSingleOperationFields = (job: JobDetails, isDeployJob: boolean) => {
   return {
     ioc: (
       <InternalLink
-        to={`/iocs/${operation.iocName}`}
-        label={`IOC details, ${operation.iocName}`}
+        to={`/iocs/${job.iocName}`}
+        label={`IOC details, ${job.iocName}`}
       >
-        {operation.iocName}
+        {job.iocName}
       </InternalLink>
     ),
-    ...(isDeployJob && getRevision(operation)),
-    host: <JobHost job={operation} />
+    ...(isDeployJob && getRevision(job)),
+    host: (
+      <JobHost
+        url={job.host?.externalIdValid ? job.host.hostId : undefined}
+        label={job.host?.fqdn}
+      />
+    )
   };
 };
 

src/components/Job/JobDetailsTable.tsx

-import { useMemo } from "react";
-import {
-  EllipsisText,
-  InternalLink,
-  Table,
-  SimpleAccordion
-} from "@ess-ics/ce-ui-common";
-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 = [
-  {
-    field: "ioc",
-    headerName: "IOC",
-    flex: 1
-  },
-  {
-    field: "revision",
-    headerName: "Revision",
-    flex: 1
-  },
-  {
-    field: "host",
-    headerName: "Host",
-    flex: 1
-  }
-];
-
-const createRow = (job: JobDetailsEntry) => {
-  const { iocId, iocName, host, gitReference, gitProjectId } = job;
-  return {
-    id: `${iocId}${host?.hostId}`,
-    ioc: (
-      <InternalLink
-        to={`/iocs/${iocId}`}
-        label={`Ioc details, ${iocName}`}
-        width="100%"
-      >
-        <EllipsisText>{iocName}</EllipsisText>
-      </InternalLink>
-    ),
-    host: <JobHost job={job} />,
-    revision: gitReference && gitProjectId && (
-      <JobRevisionChip
-        gitReference={gitReference}
-        gitProjectId={gitProjectId}
-      />
-    )
-  };
-};
-
-export const JobDetailsTable = ({ operation }: { operation: JobDetails }) => {
-  const isBatchOperation = isBatchJob(operation.action);
-
-  const noOfIOCs = useMemo(() => {
-    if (isBatchOperation) {
-      return getNoOfIOCs(operation.jobs);
-    }
-  }, [operation, isBatchOperation]);
-
-  const noOfHosts = useMemo(() => {
-    if (isBatchOperation) {
-      return getNoOfHosts(operation.jobs);
-    }
-  }, [operation, isBatchOperation]);
-
-  return (
-    <>
-      {isBatchJob(operation.action) ? (
-        <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 && noOfIOCs > 1 ? "IOCs" : "IOC"}
-                {", "}
-                {noOfHosts} {noOfHosts && noOfHosts > 1 ? "Hosts" : "Host"}
-              </Typography>
-            </Stack>
-          }
-        >
-          <Table
-            columns={columns}
-            disableColumnSorting
-            rows={operation?.jobs?.map((job) => createRow(job))}
-          />
-        </SimpleAccordion>
-      ) : (
-        <Table
-          columns={columns}
-          disableColumnSorting
-          rows={[operation].map((job) => createRow(job))}
-        />
-      )}
-    </>
-  );
-};

src/components/Job/JobHost.tsx

 import { EllipsisText, InternalLink } from "@ess-ics/ce-ui-common";
 import { Typography } from "@mui/material";
-import { JobDetails } from "../../store/deployApi";
 
 interface JobHostProps {
-  job: JobDetails;
+  url: string | undefined;
+  label: string | undefined;
 }
 
-export const JobHost = ({ job }: JobHostProps) => {
+export const JobHost = ({ url, label }: JobHostProps) => {
   // host is resolvable => show link for users
-  if (job?.host?.hostId && job?.host?.externalIdValid) {
+  if (url) {
     return (
       <InternalLink
-        to={`/hosts/${job.host.hostId}`}
-        label={`Host Details, ${job.host.fqdn}`}
+        to={`/hosts/${url}`}
+        label={`Host Details, ${label}`}
         width="100%"
       >
-        <EllipsisText>{job.host.fqdn}</EllipsisText>
+        <EllipsisText>{label}</EllipsisText>
       </InternalLink>
     );
   }
-  // gray out hostname if it is from cache
   return (
     <Typography color="gray">
-      <EllipsisText>{job?.host?.fqdn}</EllipsisText>
+      <EllipsisText>{label}</EllipsisText>
     </Typography>
   );
 };

src/components/Job/JobTable/JobDetailsColumn.tsx

@@ -10,6 +10,7 @@ import {
 } from "../JobUtils";
 import { ActionTypeIconText } from "../JobIcons";
 import { JobRevisionChip } from "../JobRevisionChip";
+import { JobHost } from "../JobHost";
 
 export const JobDetailsColumn = ({ job }: { job: Job }) => {
   const isBatchOperation = isBatchJob(job.action);
@@ -69,16 +70,14 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => {
             flexWrap="wrap"
           >
             <Box sx={{ minWidth: "112px" }}>
-              {!checkHostExistsLoading && isSuccess ? (
-                <InternalLink
-                  to={`/hosts/${job?.host?.hostId}`}
-                  label={`Host details, ${job.host?.hostName}`}
-                >
-                  {job.host?.hostName}
-                </InternalLink>
-              ) : (
-                <Typography>{job.host?.hostName}</Typography>
-              )}
+              <JobHost
+                url={
+                  !checkHostExistsLoading && isSuccess
+                    ? job?.host?.hostId
+                    : undefined
+                }
+                label={job.host?.hostName}
+              />
             </Box>
             <Typography variant="body2">{job?.host?.network}</Typography>
           </Stack>