host name should only be a link if host exists

src/components/Job/JobTable/JobDetailsColumn.tsx

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