CE-3465: Ui not existing host

If host exists, host name should be a clickable link otherwise plain text Could be tested by checking job view stories, host ccce-test-ioc-01 does not exist

For the job list view, host exists is checked by calling checkHostExists, in details view it is determined by externalValidId

List view

Details view single job

Details view batch job

src/components/Job/JobTable/JobDetailsColumn.tsx

-import { useMemo } from "react";
-import { Stack, Typography } from "@mui/material";
+import { useMemo, useEffect } from "react";
+import { Box, Stack, Typography } from "@mui/material";
 import { InternalLink } from "@ess-ics/ce-ui-common";
+import { useLazyCheckHostExistsQuery, Job } from "../../../store/deployApi";
 import {
   ACTION_TYPES,
   getNoOfIOCs,
@@ -9,10 +10,14 @@ import {
 } from "../JobUtils";
 import { ActionTypeIconText } from "../JobIcons";
 import { JobRevisionChip } from "../JobRevisionChip";
-import { Job } from "../../../store/deployApi";
+import { JobHost } from "../JobHost";
 
 export const JobDetailsColumn = ({ job }: { job: Job }) => {
   const isBatchOperation = isBatchJob(job.action);
+  const [
+    callCheckHostExists,
+    { isLoading: checkHostExistsLoading, isSuccess, isError }
+  ] = useLazyCheckHostExistsQuery();
 
   const noOfIOCs = useMemo(() => {
     if (isBatchOperation) {
@@ -26,6 +31,12 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => {
     }
   }, [job, isBatchOperation]);
 
+  useEffect(() => {
+    if (!isBatchOperation && job.host?.hostId) {
+      callCheckHostExists({ hostId: job.host.hostId });
+    }
+  }, [isBatchOperation, job?.host, callCheckHostExists]);
+
   return (
     <Stack>
       <ActionTypeIconText action={job.action} />
@@ -52,20 +63,24 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => {
                 />
               )}
           </Stack>
-          <Stack
-            flexDirection="row"
-            gap={1}
-            alignItems="baseline"
-            flexWrap="wrap"
-          >
-            <InternalLink
-              to={`/hosts/${job?.host?.hostId}`}
-              label={`Host details, ${job.host?.hostName}`}
-            >
-              {job?.host?.hostName}
-            </InternalLink>
-            <Typography variant="body2">{job?.host?.network}</Typography>
-          </Stack>
+          <Box sx={{ height: "24px" }}>
+            {!checkHostExistsLoading && (isSuccess || isError) && (
+              <Stack
+                flexDirection="row"
+                gap={1}
+                alignItems="baseline"
+                flexWrap="wrap"
+              >
+                <span>
+                  <JobHost
+                    url={isSuccess ? job?.host?.hostId : undefined}
+                    label={job.host?.hostName}
+                  />
+                </span>
+                <Typography variant="body2">{job?.host?.network}</Typography>
+              </Stack>
+            )}
+          </Box>
         </Stack>
       ) : (
         <Stack>