fixed popover id not being correct for Host table

src/components/IOC/IOCStatus/IOCStatus.jsx

@@ -48,12 +48,15 @@ export const IOCStatus = ({ id, hideAlerts }) => {
       justifyContent="center"
       alignItems="center"
     >
-      <Status
-        state={iocStateStatus}
-        alert={iocAlert}
-        hideAlerts={hideAlerts}
-        getStatusFcn={getIOCStatus}
-      />
+      {iocStateStatus && (
+        <Status
+          id={iocStateStatus.id}
+          state={iocStateStatus}
+          alert={iocAlert}
+          hideAlerts={hideAlerts}
+          getStatusFcn={getIOCStatus}
+        />
+      )}
     </Grid>
   );
 };

src/components/common/Status/Status.jsx

@@ -16,7 +16,7 @@ const propsTypes = {
   getStatusFcn: func
 };
 
-export function Status({ state, alert, hideAlerts = false, getStatusFcn }) {
+export function Status({ id, state, alert, hideAlerts = false, getStatusFcn }) {
   const [status, setStatus] = useState(null);
   const theme = useTheme();
 
@@ -30,7 +30,7 @@ export function Status({ state, alert, hideAlerts = false, getStatusFcn }) {
     <>
       {status ? (
         <Popover
-          id={`ioc-status-popover-${state?.id ? state.id : ""}`}
+          id={`ioc-status-popover-${id}`}
           renderOwningComponent={({
             ariaOwns,
             ariaHasPopup,

src/components/host/HostStatus/HostStatus.jsx

@@ -40,11 +40,16 @@ export const HostStatus = ({ hostId, hideAlerts }) => {
   }, [hideAlerts, callFetchHostAlerts, abortCallFetchHostAlerts]);
 
   return (
-    <Status
-      state={hostStateStatus}
-      alert={hostAlert}
-      hideAlerts={hideAlerts}
-      getStatusFcn={getHostStatus}
-    />
+    <>
+      {hostStateStatus && (
+        <Status
+          id={hostStateStatus.hostId}
+          state={hostStateStatus}
+          alert={hostAlert}
+          hideAlerts={hideAlerts}
+          getStatusFcn={getHostStatus}
+        />
+      )}
+    </>
   );
 };