@openshift-assisted/ui-lib 2.49.0 → 2.50.1

package/lib/cim/components/Agent/BMHStatusInfo.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Level,
+  LevelItem,
+  Alert,
+  AlertVariant,
+  Content,
+  ContentVariants,
+  Button,
+  ButtonVariant,
+} from '@patternfly/react-core';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
+import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+
+import { getHumanizedDateTime, useTranslation } from '../../../common';
+import { BareMetalHostK8sResource } from '../../types';
+import { getBMHStatus } from '../helpers';
+import { BMHEventsModal } from './BMHEventsModal';
+
+export const BMHStatusInfo = ({
+  bmhStatus,
+  bmh,
+}: {
+  bmhStatus: ReturnType<typeof getBMHStatus>;
+  bmh: BareMetalHostK8sResource;
+}) => {
+  const { t } = useTranslation();
+  const [isModalOpen, setModalOpen] = React.useState(false);
+
+  let alertVariant = AlertVariant.warning;
+  if (!!bmh.status?.errorMessage) {
+    alertVariant = AlertVariant.danger;
+  } else if (
+    bmh.status?.provisioning?.state === 'provisioned' ||
+    bmh.status?.provisioning?.state === 'externally provisioned'
+  ) {
+    alertVariant = AlertVariant.success;
+  }
+
+  let icon: React.ReactNode;
+  switch (bmh.status?.operationalStatus) {
+    case 'OK':
+    case 'discovered':
+      icon = <CheckCircleIcon color={okColor.value} />;
+      break;
+    case 'error':
+      icon = <ExclamationTriangleIcon color={warningColor.value} />;
+      break;
+    default:
+      icon = <PendingIcon />;
+      break;
+  }
+
+  return (
+    <>
+      <Level>
+        <LevelItem className="pf-v6-u-font-weight-bold">{t('ai:Bare metal host')}</LevelItem>
+        <LevelItem>
+          {bmh.status?.operationalStatus} {icon}
+        </LevelItem>
+      </Level>
+      <Alert title={bmhStatus.state.title} variant={alertVariant} isInline>
+        {!!bmh.status?.errorMessage && (
+          <Content component={ContentVariants.p}>{bmh.status?.errorMessage}</Content>
+        )}
+
+        <Level hasGutter>
+          <LevelItem>
+            <Button variant={ButtonVariant.link} isInline onClick={() => setModalOpen(true)}>
+              {t('ai:View BMH events')}
+            </Button>
+          </LevelItem>
+          <LevelItem>
+            <Content component={ContentVariants.small}>
+              {t('ai:Last updated:')} {getHumanizedDateTime(bmh.status?.lastUpdated)}
+            </Content>
+          </LevelItem>
+        </Level>
+      </Alert>
+
+      {isModalOpen && (
+        <BMHEventsModal
+          isOpen={isModalOpen}
+          onClose={() => setModalOpen(false)}
+          namespace={bmh.metadata?.namespace || ''}
+          bmhName={bmh.metadata?.name || ''}
+        />
+      )}
+    </>
+  );
+};

package/lib/cim/components/Agent/MinimalHWRequirements.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ConfigMapK8sResource } from '../../types';
@@ -100,18 +107,16 @@ export const MinimalHWRequirementsModal = ({
 }: MinimalHWRequirementsModalProps) => {
   const { t } = useTranslation();
   return (
-    <Modal
-      title={t('ai:Minimum hardware requirements')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Minimum hardware requirements')} />
+      <ModalBody>
+        <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.medium}
-    >
-      <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/cim/components/Agent/index.ts

@@ -1,3 +1,5 @@
 export { default as AgentTable } from './AgentTable';
 export { default as BMCForm } from './BMCForm';
 export * from './types';
+export * from './tableColumns';
+export * from './tableUtils';

package/lib/cim/components/Agent/tableColumns.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Link } from 'react-router-dom-v5-compat';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { HostsTableActions, getInventory, getHostname, Hostname } from '../../../common';
+import { TableRow } from '../../../common/components/hosts/AITable';
+import { HostStatus } from '../../../common/components/hosts/types';
+import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
+import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment';
+import { AGENT_BMH_NAME_LABEL_KEY } from '../common';
+import {
+  getBMHStatus,
+  getWizardStepAgentStatus,
+  getAgentStatus,
+  getInfraEnvNameOfAgent,
+} from '../helpers';
+import { AgentMachineK8sResource } from '../Hypershift';
+import AgentStatus from './AgentStatus';
+import BMHStatus from './BMHStatus';
+import { BMHStatusInfo } from './BMHStatusInfo';
+
+export const agentHostnameColumn = (
+  t: TFunction,
+  hosts: Host[],
+  agents: AgentK8sResource[],
+  bareMetalHosts: BareMetalHostK8sResource[],
+  onEditHostname?: HostsTableActions['onEditHost'],
+  canEditHostname?: HostsTableActions['canEditHostname'],
+  canEditBMH?: HostsTableActions['canEditBMH'],
+): TableRow<Host> => ({
+  header: {
+    title: t<string>('ai:Hostname'),
+    props: {
+      id: 'col-header-hostname', // ACM jest tests require id over testId
+      modifier: 'breakWord',
+    },
+    sort: true,
+  },
+  cell: (host) => {
+    const inventory = getInventory(host);
+    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
+    const computedHostname = getHostname(host, inventory);
+
+    let readonly = true;
+
+    const agent = agents.find((a) => a.metadata?.uid === host.id);
+    if (agent) {
+      readonly = canEditHostname ? !canEditHostname(host) : false;
+    } else {
+      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
+      if (bmh && canEditBMH) {
+        readonly = !canEditBMH(host);
+      }
+    }
+
+    return {
+      title: (
+        <Hostname
+          host={host}
+          inventory={inventory}
+          onEditHostname={editHostname}
+          hosts={hosts}
+          readonly={readonly}
+        />
+      ),
+      props: { 'data-testid': 'host-name' },
+      sortableValue: computedHostname || '',
+    };
+  },
+});
+
+export const discoveryTypeColumn = (
+  agents: AgentK8sResource[],
+  bareMetalHosts: BareMetalHostK8sResource[],
+  t: TFunction,
+): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Discovery type'),
+      props: {
+        id: 'col-header-discovery-type',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      let discoveryType = t<string>('ai:Unknown');
+      if (agent) {
+        // eslint-disable-next-line no-prototype-builtins
+        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
+          ? t<string>('ai:BMC')
+          : t<string>('ai:Discovery ISO');
+      } else {
+        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
+        if (bmh) {
+          discoveryType = t<string>('ai:BMC');
+        }
+      }
+      return {
+        title: discoveryType,
+        props: { 'data-testid': 'discovery-type' },
+        sortableValue: discoveryType,
+      };
+    },
+  };
+};
+
+type AgentStatusColumnProps = {
+  agents: AgentK8sResource[];
+  agentStatuses: HostStatus<string>;
+  bareMetalHosts?: BareMetalHostK8sResource[];
+  bmhStatuses?: HostStatus<string>;
+  onEditHostname?: AgentTableActions['onEditHost'];
+  onApprove?: AgentTableActions['onApprove'];
+  wizardStepId?: ClusterDeploymentWizardStepsType;
+  t: TFunction;
+  isDay2?: boolean;
+};
+
+export const agentStatusColumn = ({
+  agents,
+  agentStatuses,
+  bareMetalHosts,
+  bmhStatuses,
+  onEditHostname,
+  onApprove,
+  wizardStepId,
+  t,
+  isDay2,
+}: AgentStatusColumnProps): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Status'),
+      props: {
+        id: 'col-header-infraenvstatus',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      const bmh = bareMetalHosts?.find(
+        (b) =>
+          b.metadata?.annotations?.['bmac.agent-install.openshift.io/hostname'] ===
+          host.requestedHostname,
+      );
+
+      let bmhStatus;
+      let title: React.ReactNode = '--';
+      if (agent) {
+        const editHostname = onEditHostname ? () => onEditHostname(agent) : undefined;
+        title = (
+          <AgentStatus
+            agent={agent}
+            onApprove={onApprove}
+            onEditHostname={editHostname}
+            wizardStepId={wizardStepId}
+            isDay2={isDay2}
+            additionalBMHInfo={
+              bmh &&
+              bmhStatuses && <BMHStatusInfo bmhStatus={getBMHStatus(bmh, bmhStatuses)} bmh={bmh} />
+            }
+          />
+        );
+      } else if (bmh && bmhStatuses) {
+        bmhStatus = getBMHStatus(bmh, bmhStatuses);
+        title = <BMHStatus bmhStatus={bmhStatus} bmh={bmh} />;
+      }
+
+      return {
+        title,
+        props: { 'data-testid': 'host-status' },
+        sortableValue: agent
+          ? wizardStepId
+            ? getWizardStepAgentStatus(agent, wizardStepId, t).status.title
+            : getAgentStatus(agent, agentStatuses).status.title
+          : bmhStatus?.state.title || '',
+      };
+    },
+  };
+};
+
+export const clusterColumn = (
+  agents: AgentK8sResource[],
+  agentMachines: AgentMachineK8sResource[],
+  getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string,
+  t: TFunction,
+): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Cluster'),
+      props: {
+        id: 'col-header-cluster',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      let cdLink: string | undefined = undefined;
+      if (agent?.spec?.clusterDeploymentName) {
+        //hypershift
+        const amNamespace = agent.metadata?.annotations?.['agentMachineRefNamespace'];
+        if (amNamespace) {
+          const am = agentMachines.find(
+            (am) =>
+              am.status?.agentRef?.name === agent.metadata?.name &&
+              am.status?.agentRef?.namespace === agent.metadata?.namespace,
+          );
+          const nodePool = am?.metadata?.annotations?.['hypershift.openshift.io/nodePool'];
+          if (nodePool) {
+            const hcNamespace = nodePool.split('/')[0];
+            const hcName = agent.spec.clusterDeploymentName.name;
+            cdLink = getClusterDeploymentLink({ name: hcName, namespace: hcNamespace });
+          }
+        } else {
+          cdLink = getClusterDeploymentLink(agent.spec.clusterDeploymentName);
+        }
+      }
+      return {
+        title: cdLink ? <Link to={cdLink}>{agent?.spec?.clusterDeploymentName?.name}</Link> : '--',
+        props: { 'data-testid': 'cluster' },
+        sortableValue: agent?.spec?.clusterDeploymentName?.name ?? '--',
+      };
+    },
+  };
+};
+
+export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Infrastructure env'),
+      props: {
+        id: 'col-header-infraenv',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      const infraEnvName = getInfraEnvNameOfAgent(agent);
+      const title = infraEnvName ? (
+        <Link
+          to={`/multicloud/infrastructure/environments/details/${
+            agent?.metadata?.namespace || ''
+          }/${infraEnvName}/overview`}
+        >
+          {infraEnvName}
+        </Link>
+      ) : (
+        '--'
+      );
+      return {
+        title,
+        props: { 'data-testid': 'infra-env' },
+        sortableValue: infraEnvName,
+      };
+    },
+  };
+};

package/lib/cim/components/Agent/tableUtils.tsx

@@ -1,268 +1,29 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
 import countBy from 'lodash-es/countBy';
 
-import {
-  HostsTableActions,
-  getInventory,
-  getHostname,
-  Hostname,
-  ActionCheck,
-} from '../../../common';
+import { HostsTableActions, ActionCheck } from '../../../common';
 import { AgentClusterInstallK8sResource, AgentK8sResource, InfraEnvK8sResource } from '../../types';
-import AgentStatus from './AgentStatus';
-import { ActionsResolver, TableRow } from '../../../common/components/hosts/AITable';
-import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment/types';
+import { ActionsResolver } from '../../../common/components/hosts/AITable';
+import { AgentTableActions } from '../ClusterDeployment/types';
 import { hostActionResolver } from '../../../common/components/hosts/tableUtils';
-import { getAgentClusterInstallOfAgent, getAIHosts, getInfraEnvNameOfAgent } from '../helpers';
+import { getAgentClusterInstallOfAgent, getAIHosts } from '../helpers';
 import { isInstallationInProgress } from '../ClusterDeployment/helpers';
 import { AGENT_BMH_NAME_LABEL_KEY, INFRAENV_GENERATED_AI_FLOW } from '../common';
 import { BareMetalHostK8sResource } from '../../types/k8s/bare-metal-host';
-import BMHStatus from './BMHStatus';
 import {
   getAgentStatus,
   getAgentStatusKey,
   getBMHStatus,
   getBMHStatusKey,
-  getWizardStepAgentStatus,
 } from '../helpers/status';
 import { filterByHostname, getHostLabels } from '../../../common/components/hosts/utils';
 import { agentStatus } from '../helpers/agentStatus';
 import noop from 'lodash-es/noop.js';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { AgentMachineK8sResource } from '../Hypershift/types';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from '../../../common/components/hosts/types';
 
-export const agentHostnameColumn = (
-  t: TFunction,
-  hosts: Host[],
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  onEditHostname?: HostsTableActions['onEditHost'],
-  canEditHostname?: HostsTableActions['canEditHostname'],
-  canEditBMH?: HostsTableActions['canEditBMH'],
-): TableRow<Host> => ({
-  header: {
-    title: t('ai:Hostname'),
-    props: {
-      id: 'col-header-hostname', // ACM jest tests require id over testId
-      modifier: 'breakWord',
-    },
-    sort: true,
-  },
-  cell: (host) => {
-    const inventory = getInventory(host);
-    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
-    const computedHostname = getHostname(host, inventory);
-
-    let readonly = true;
-
-    const agent = agents.find((a) => a.metadata?.uid === host.id);
-    if (agent) {
-      readonly = canEditHostname ? !canEditHostname(host) : false;
-    } else {
-      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-      if (bmh && canEditBMH) {
-        readonly = !canEditBMH(host);
-      }
-    }
-
-    return {
-      title: (
-        <Hostname
-          host={host}
-          inventory={inventory}
-          onEditHostname={editHostname}
-          hosts={hosts}
-          readonly={readonly}
-        />
-      ),
-      props: { 'data-testid': 'host-name' },
-      sortableValue: computedHostname || '',
-    };
-  },
-});
-
-export const discoveryTypeColumn = (
-  agents: AgentK8sResource[],
-  bareMetalHosts: BareMetalHostK8sResource[],
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Discovery type'),
-      props: {
-        id: 'col-header-discovery-type',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let discoveryType = t('ai:Unknown');
-      if (agent) {
-        // eslint-disable-next-line no-prototype-builtins
-        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
-          ? t('ai:BMC')
-          : t('ai:Discovery ISO');
-      } else {
-        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-        if (bmh) {
-          discoveryType = t('ai:BMC');
-        }
-      }
-      return {
-        title: discoveryType,
-        props: { 'data-testid': 'discovery-type' },
-        sortableValue: discoveryType,
-      };
-    },
-  };
-};
-
-type AgentStatusColumnProps = {
-  agents: AgentK8sResource[];
-  agentStatuses: HostStatus<string>;
-  bareMetalHosts?: BareMetalHostK8sResource[];
-  bmhStatuses?: HostStatus<string>;
-  onEditHostname?: AgentTableActions['onEditHost'];
-  onApprove?: AgentTableActions['onApprove'];
-  wizardStepId?: ClusterDeploymentWizardStepsType;
-  t: TFunction;
-  isDay2?: boolean;
-};
-
-export const agentStatusColumn = ({
-  agents,
-  agentStatuses,
-  bareMetalHosts,
-  bmhStatuses,
-  onEditHostname,
-  onApprove,
-  wizardStepId,
-  t,
-  isDay2,
-}: AgentStatusColumnProps): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Status'),
-      props: {
-        id: 'col-header-infraenvstatus',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const bmh = bareMetalHosts?.find((b) => b.metadata?.uid === host.id);
-      let bmhStatus;
-      let title: React.ReactNode = '--';
-      if (agent) {
-        const editHostname = onEditHostname ? () => onEditHostname(agent) : undefined;
-        title = (
-          <AgentStatus
-            agent={agent}
-            onApprove={onApprove}
-            onEditHostname={editHostname}
-            wizardStepId={wizardStepId}
-            isDay2={isDay2}
-          />
-        );
-      } else if (bmh && bmhStatuses) {
-        bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
-      }
-
-      return {
-        title,
-        props: { 'data-testid': 'host-status' },
-        sortableValue: agent
-          ? wizardStepId
-            ? getWizardStepAgentStatus(agent, wizardStepId, t).status.title
-            : getAgentStatus(agent, agentStatuses).status.title
-          : bmhStatus?.state.title || '',
-      };
-    },
-  };
-};
-
-export const clusterColumn = (
-  agents: AgentK8sResource[],
-  agentMachines: AgentMachineK8sResource[],
-  getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string,
-  t: TFunction,
-): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Cluster'),
-      props: {
-        id: 'col-header-cluster',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id);
-      let cdLink: string | undefined = undefined;
-      if (agent?.spec?.clusterDeploymentName) {
-        //hypershift
-        const amNamespace = agent.metadata?.annotations?.['agentMachineRefNamespace'];
-        if (amNamespace) {
-          const am = agentMachines.find(
-            (am) =>
-              am.status?.agentRef?.name === agent.metadata?.name &&
-              am.status?.agentRef?.namespace === agent.metadata?.namespace,
-          );
-          const nodePool = am?.metadata?.annotations?.['hypershift.openshift.io/nodePool'];
-          if (nodePool) {
-            const hcNamespace = nodePool.split('/')[0];
-            const hcName = agent.spec.clusterDeploymentName.name;
-            cdLink = getClusterDeploymentLink({ name: hcName, namespace: hcNamespace });
-          }
-        } else {
-          cdLink = getClusterDeploymentLink(agent.spec.clusterDeploymentName);
-        }
-      }
-      return {
-        title: cdLink ? <Link to={cdLink}>{agent?.spec?.clusterDeploymentName?.name}</Link> : '--',
-        props: { 'data-testid': 'cluster' },
-        sortableValue: agent?.spec?.clusterDeploymentName?.name ?? '--',
-      };
-    },
-  };
-};
-
-export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
-  return {
-    header: {
-      title: t('ai:Infrastructure env'),
-      props: {
-        id: 'col-header-infraenv',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
-      const infraEnvName = getInfraEnvNameOfAgent(agent);
-      const title = infraEnvName ? (
-        <Link
-          to={`/multicloud/infrastructure/environments/details/${
-            agent.metadata?.namespace || ''
-          }/${infraEnvName}/overview`}
-        >
-          {infraEnvName}
-        </Link>
-      ) : (
-        'N/A'
-      );
-      return {
-        title,
-        props: { 'data-testid': 'infra-env' },
-        sortableValue: infraEnvName,
-      };
-    },
-  };
-};
-
 export const canEditBMH = (bmh: BareMetalHostK8sResource, t: TFunction): ActionCheck => {
   const canEdit = ['deprovisioning', 'pending', 'registering'].includes(getBMHStatusKey(bmh) || '');
 

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsTable.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { AgentClusterInstallK8sResource, AgentK8sResource } from '../../types';
 import DefaultEmptyState from '../../../common/components/ui/uiState/EmptyState';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { infraEnvColumn, agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
+import { useAgentsTable, infraEnvColumn, agentStatusColumn } from '../Agent';
 import {
   cpuCoresColumn,
   disksColumn,
   hostnameColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
+} from '../../../common';
 import HostsTable, { DefaultExpandComponent } from '../../../common/components/hosts/HostsTable';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';