diff --git a/src/components/Job/JobTable/JobDetailsColumn.tsx b/src/components/Job/JobTable/JobDetailsColumn.tsx index fa2423c5cd97e3dce04fbb61bfe2b356d6a659da..a69133612e56b3e5735c0aeea6fcfdf37c2d6f3a 100644 --- a/src/components/Job/JobTable/JobDetailsColumn.tsx +++ b/src/components/Job/JobTable/JobDetailsColumn.tsx @@ -1,6 +1,7 @@ -import { useMemo } from "react"; -import { Stack, Typography } from "@mui/material"; +import { useMemo, useEffect } from "react"; +import { Stack, Typography, Box } from "@mui/material"; import { InternalLink } from "@ess-ics/ce-ui-common"; +import { useLazyCheckHostExistsQuery, Job } from "../../../store/deployApi"; import { ACTION_TYPES, getNoOfIOCs, @@ -9,10 +10,13 @@ import { } from "../JobUtils"; import { ActionTypeIconText } from "../JobIcons"; import { JobRevisionChip } from "../JobRevisionChip"; -import { Job } from "../../../store/deployApi"; export const JobDetailsColumn = ({ job }: { job: Job }) => { const isBatchOperation = isBatchJob(job.action); + const [ + callCheckHostExists, + { isLoading: checkHostExistsLoading, isSuccess } + ] = useLazyCheckHostExistsQuery(); const noOfIOCs = useMemo(() => { if (isBatchOperation) { @@ -26,6 +30,12 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => { } }, [job, isBatchOperation]); + useEffect(() => { + if (!isBatchOperation && job.host?.hostId) { + callCheckHostExists({ hostId: job.host.hostId }); + } + }, [isBatchOperation, job?.host?.hostId, callCheckHostExists]); + return ( <Stack> <ActionTypeIconText action={job.action} /> @@ -58,12 +68,18 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => { alignItems="baseline" flexWrap="wrap" > - <InternalLink - to={`/hosts/${job?.host?.hostId}`} - label={`Host details, ${job.host?.hostName}`} - > - {job?.host?.hostName} - </InternalLink> + <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> + )} + </Box> <Typography variant="body2">{job?.host?.network}</Typography> </Stack> </Stack>