Add typing /components/host

src/components/host/HostStatus/HostStatus.tsx

@@ -6,14 +6,24 @@ import {
   useLazyFindHostAlertsQuery
 } from "../../../store/deployApi";
 
-export const HostStatus = ({ hostId, hideAlerts }) => {
+interface HostStatusProps {
+  hostId?: string;
+  hideAlerts: boolean;
+}
+
+export const HostStatus = ({ hostId, hideAlerts }: HostStatusProps) => {
   const [callFindHostAlerts, { data: hostAlert }] =
     useLazyFindHostAlertsQuery();
 
-  const { data: hostStateStatus } = useFindHostStatusQuery({ hostId });
+  const { data: hostStateStatus } = useFindHostStatusQuery(
+    {
+      hostId: hostId ?? ""
+    },
+    { skip: !hostId }
+  );
 
   useEffect(() => {
-    if (!hideAlerts) {
+    if (!hideAlerts && hostId) {
       callFindHostAlerts({ hostId });
     }
   }, [callFindHostAlerts, hideAlerts, hostId]);

src/components/host/HostStatus/HostStatusData.ts

+import {
+  HostAlertResponse,
+  HostStatusResponse
+} from "../../../store/deployApi";
 import { SEVERITY, STATUS } from "../../common/Status";
 
 export const HOST_STATUS = {
@@ -5,8 +9,11 @@ export const HOST_STATUS = {
   unreachable: "UNREACHABLE"
 };
 
-export const getHostStatus = (state, alert) => {
-  let { status } = state;
+export const getHostStatus = (
+  state: HostStatusResponse,
+  alert: HostAlertResponse | undefined
+) => {
+  const { status } = state;
   const alertSeverity = alert?.alertSeverity?.toLowerCase();
 
   if (

src/components/host/HostTable.tsx

 import { Table, InternalLink, EllipsisText } from "@ess-ics/ce-ui-common";
 import { HostStatus } from "./HostStatus";
+import { HostInfoWithId } from "../../store/deployApi";
+import { OnPageParams, Pagination } from "../../types/common";
 
 const columns = [
   {
@@ -15,10 +17,15 @@ const columns = [
   { field: "scope", headerName: "Network scope" }
 ];
 
-function CreateRow(host) {
+function CreateRow(host: HostInfoWithId) {
   return {
     id: host.hostId,
-    status: <HostStatus hostId={host.hostId} />,
+    status: (
+      <HostStatus
+        hostId={host?.hostId}
+        hideAlerts={false}
+      />
+    ),
     hostName: (
       <InternalLink
         to={`/hosts/${host.hostId}`}
@@ -35,7 +42,19 @@ function CreateRow(host) {
   };
 }
 
-export function HostTable({ hosts, pagination, onPage, loading }) {
+interface HostTableProps {
+  hosts: HostInfoWithId[] | undefined;
+  pagination?: Pagination;
+  onPage?: (page: OnPageParams) => void;
+  loading: boolean;
+}
+
+export function HostTable({
+  hosts,
+  pagination,
+  onPage,
+  loading
+}: HostTableProps) {
   return (
     <Table
       columns={columns}