@openshift-assisted/ui-lib 2.16.5-cim → 2.17.1-cim

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

@@ -1,30 +1,36 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { useFormikContext } from 'formik';
 import { Checkbox, Grid } from '@patternfly/react-core';
-import AdvancedNetworkFields from '../../../common/components/clusterConfiguration/AdvancedNetworkFields';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
-import { Address6 } from 'ip-address';
 import {
-  AvailableSubnetsControl,
   ManagedNetworkingControlGroup,
   UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
   VirtualIPControlGroup,
   VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
 } from '../../../common/components/clusterWizard/networkingSteps';
 import {
+  canBeDualStack,
   canSelectNetworkTypeSDN,
+  DUAL_STACK,
   isAdvNetworkConf,
   isSNO,
-  isSubnetInIPv6,
   NETWORK_TYPE_OVN,
-  NO_SUBNET_SET,
 } from '../../../common';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { NetworkTypeControlGroup } from '../../../common/components/clusterWizard/networkingSteps/NetworkTypeControlGroup';
 import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
 
 export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
-  defaultNetworkSettings: ClusterDefaultConfig;
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >;
   hideManagedNetworking?: boolean;
 };
 
@@ -40,60 +46,57 @@ const NetworkConfiguration = ({
     useFormikContext<NetworkConfigurationValues>();
 
   const isMultiNodeCluster = !isSNO(cluster);
-  const isClusterCIDRIPv6 = Address6.isValid(values.clusterNetworkCidr || '');
-  const { isIPv6, isSDNSelectable } = React.useMemo(() => {
-    const isIPv6 = isSubnetInIPv6({
-      machineNetworkCidr: cluster.machineNetworkCidr,
-      clusterNetworkCidr: values.clusterNetworkCidr,
-      serviceNetworkCidr: values.serviceNetworkCidr,
-    });
-    return {
-      isIPv6,
-      isSDNSelectable: canSelectNetworkTypeSDN(!isMultiNodeCluster, isIPv6),
-    };
-  }, [
-    isMultiNodeCluster,
-    values.clusterNetworkCidr,
-    cluster.machineNetworkCidr,
-    values.serviceNetworkCidr,
-  ]);
+  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
+
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isSDNSelectable = React.useMemo(
+    () => canSelectNetworkTypeSDN(!isMultiNodeCluster, isDualStack),
+    [isMultiNodeCluster, isDualStack],
+  );
 
   const [isAdvanced, setAdvanced] = React.useState(
-    isAdvNetworkConf(cluster, defaultNetworkSettings),
+    isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
   );
 
-  const toggleAdvConfiguration = (checked: boolean) => {
-    setAdvanced(checked);
+  const toggleAdvConfiguration = useCallback(
+    (checked: boolean) => {
+      setAdvanced(checked);
+
+      if (!checked) {
+        setFieldValue('clusterNetworks', defaultNetworkSettings.clusterNetworksIpv4);
+        setFieldValue('serviceNetworks', defaultNetworkSettings.serviceNetworksIpv4);
+      }
+    },
+    [setFieldValue, defaultNetworkSettings],
+  );
 
-    if (!checked) {
-      setFieldValue('clusterNetworkCidr', defaultNetworkSettings.clusterNetworkCidr);
-      setFieldValue('serviceNetworkCidr', defaultNetworkSettings.serviceNetworkCidr);
-      setFieldValue('clusterNetworkHostPrefix', defaultNetworkSettings.clusterNetworkHostPrefix);
+  // Auto-enable advanced networking when switching to dual-stack
+  useEffect(() => {
+    if (isDualStack) {
+      toggleAdvConfiguration(true);
     }
-  };
+  }, [isDualStack, toggleAdvConfiguration]);
 
   const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
-  const firstSubnet = hostSubnets[0]?.subnet;
+  const primaryMachineNetwork = values.machineNetworks?.[0]?.cidr;
 
+  // Clear machine networks when switching to user-managed networking for multi-node clusters
   useEffect(() => {
-    if (isUserManagedNetworking && isMultiNodeCluster) {
-      values.hostSubnet !== NO_SUBNET_SET && setFieldValue('hostSubnet', NO_SUBNET_SET, false);
-    } else if (values.hostSubnet === NO_SUBNET_SET && firstSubnet) {
-      setFieldValue('hostSubnet', firstSubnet, false);
+    if (isUserManagedNetworking && isMultiNodeCluster && values.machineNetworks?.length) {
+      setFieldValue('machineNetworks', [], false);
     }
-  }, [isUserManagedNetworking, isMultiNodeCluster, values.hostSubnet, setFieldValue, firstSubnet]);
-
+  }, [isUserManagedNetworking, isMultiNodeCluster, values.machineNetworks?.length, setFieldValue]);
   useEffect(() => {
     if (!cluster.networkType) {
       setFieldValue('networkType', NETWORK_TYPE_OVN);
     }
     // Skipping "cluster.networkType" as it's ultimately the value we are setting in the form
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isIPv6, isMultiNodeCluster, setFieldValue]);
+  }, [isDualStack, isMultiNodeCluster, setFieldValue]);
 
   useEffect(() => {
     if (isUserManagedNetworking) {
-      const shouldValidate = !!touched.hostSubnet;
+      const shouldValidate = !!touched.machineNetworks;
 
       // We need to reset these fields' values in order to align with the values the server sends
       setFieldValue('vipDhcpAllocation', false);
@@ -106,12 +109,13 @@ const NetworkConfiguration = ({
       }
     }
   }, [
-    touched.hostSubnet,
+    touched.machineNetworks,
     isMultiNodeCluster,
     isUserManagedNetworking,
     setFieldValue,
     values.vipDhcpAllocation,
     validateField,
+    primaryMachineNetwork,
   ]);
   return (
     <Grid hasGutter>
@@ -124,13 +128,25 @@ const NetworkConfiguration = ({
         />
       )}
 
+      {(!isMultiNodeCluster || !isUserManagedNetworking) && (
+        <StackTypeControlGroup
+          clusterId={cluster.id}
+          isDualStackSelectable={isDualStackSelectable}
+          hostSubnets={hostSubnets}
+          defaultNetworkValues={defaultNetworkSettings}
+        />
+      )}
+
       <NetworkTypeControlGroup isSDNSelectable={isSDNSelectable} />
 
       {!(isMultiNodeCluster && isUserManagedNetworking) && (
         <AvailableSubnetsControl
+          clusterId={cluster.id}
           hostSubnets={hostSubnets}
-          hosts={cluster.hosts || []}
           isRequired={!isUserManagedNetworking}
+          isDisabled={hostSubnets.length === 0}
+          openshiftVersion={cluster.openshiftVersion}
+          hosts={cluster.hosts || []}
           isMultiNodeCluster={isMultiNodeCluster}
         />
       )}
@@ -149,7 +165,8 @@ const NetworkConfiguration = ({
         description={t('ai:Configure advanced networking properties (e.g. CIDR ranges).')}
         isChecked={isAdvanced}
         onChange={(_event, checked: boolean) => toggleAdvConfiguration(checked)}
-        body={isAdvanced && <AdvancedNetworkFields isClusterCIDRIPv6={isClusterCIDRIPv6} />}
+        isDisabled={isDualStack}
+        body={isAdvanced && <AdvancedNetworkFields />}
       />
     </Grid>
   );

package/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDetailsFormFields.tsx

@@ -44,9 +44,9 @@ export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string
         'ai:All DNS records must be subdomains of this base and include the cluster name. This cannot be changed after cluster installation. The full cluster address will be:',
       )}{' '}
       <br />
-      <strong>
+      <span className="pf-v6-u-font-weight-bold">
         {name || '[Cluster Name]'}.{baseDnsDomain || '[example.com]'}
-      </strong>
+      </span>
     </>
   );
 };

package/lib/cim/components/ClusterDeployment/customManifests/ClusterDeploymentCustomManifestsStep.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import * as Yup from 'yup';
 import { Formik } from 'formik';
 import { k8sPatch, Patch } from '@openshift-console/dynamic-plugin-sdk';
-import { Alert, AlertActionLink, Grid, GridItem, Text, TextVariants } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertActionLink,
+  Content,
+  ContentVariants,
+  Grid,
+  GridItem,
+} from '@patternfly/react-core';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { ClusterWizardStepHeader, useTranslation } from '../../../../common';
 import { AgentClusterInstallK8sResource, AgentClusterInstallModel } from '../../../types';
@@ -95,16 +102,16 @@ export const ClusterDeploymentCustomManifestsStep = ({
             </AlertActionLink>,
           ]}
         >
-          <Text component={TextVariants.p}>
+          <Content component={ContentVariants.p}>
             {t(
               'ai:Define a config map with your custom manifests and select it in the form below.',
             )}
-          </Text>
-          <Text component={TextVariants.p}>
+          </Content>
+          <Content component={ContentVariants.p}>
             {t(
               'ai:Manifest names in each config map should be unique across all referenced config maps.',
             )}
-          </Text>
+          </Content>
         </Alert>
       </GridItem>
       <GridItem>

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapDetail.tsx

@@ -5,6 +5,8 @@ import {
   Button,
   CodeBlock,
   CodeBlockCode,
+  Content,
+  ContentVariants,
   DescriptionList,
   DescriptionListDescription,
   DescriptionListGroup,
@@ -17,8 +19,6 @@ import {
   GridItem,
   Label,
   Spinner,
-  Text,
-  TextVariants,
 } from '@patternfly/react-core';
 import { ExternalLink, useTranslation } from '../../../../common';
 import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
@@ -75,7 +75,7 @@ const ExpandedConfigMap = ({
 
                 {Object.entries(configMap?.data || {}).map(([key, val]) => (
                   <GridItem key={key}>
-                    <Text component={TextVariants.h4}>{key}</Text>
+                    <Content component={ContentVariants.h4}>{key}</Content>
                     <CodeBlock>
                       <CodeBlockCode>{val}</CodeBlockCode>
                     </CodeBlock>

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
   useAgentsTable,
   canChangeHostname,
-} from '../../Agent/tableUtils';
+  discoveryTypeColumn,
+  agentStatusColumn,
+} from '../../Agent';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
@@ -20,8 +20,6 @@ import {
   labelsColumn,
   memoryColumn,
   roleColumn,
-} from '../../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   ChangeHostnameAction,
   MassChangeHostnameModal,

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostsDiscovery.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  Grid,
-  GridItem,
-  TextContent,
-  Text,
-  TextListItem,
-  OrderType,
-  TextList,
-} from '@patternfly/react-core';
+import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
 import Measure from 'react-measure';
 import {
   DiscoveryTroubleshootingModal,
@@ -27,25 +19,25 @@ import AddHostDropdown from '../../InfraEnv/AddHostDropdown';
 const DiscoveryInstructions = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem>{t('ai:Click the Add hosts button.')}</TextListItem>
-        <TextListItem>
+    <>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li">{t('ai:Click the Add hosts button.')}</Content>
+        <Content component="li">
           {t('ai:Configure the SSH key and proxy settings after the modal appears (optional).')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             "ai:Select how you'd like to add hosts (Discovery ISO, iPXE, or BMC form) and follow the instructions that appear.",
           )}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Booted hosts should appear in the host inventory table. This may take a few minutes.',
           )}
-        </TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+      </Content>
+    </>
   );
 };
 
@@ -78,9 +70,7 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
   return (
     <Grid hasGutter>
       <GridItem>
-        <TextContent>
-          <DiscoveryInstructions />
-        </TextContent>
+        <DiscoveryInstructions />
       </GridItem>
       <GridItem span={5}>
         <AddHostDropdown
@@ -91,18 +81,18 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
         />
       </GridItem>
       <GridItem>
-        <TextContent>
-          <Text component="h3">{t('ai:Information and warnings')}</Text>
+        <Content>
+          <Content component="h3">{t('ai:Information and warnings')}</Content>
           {aiConfigMap && (
-            <Text component="p">
+            <Content component="p">
               <MinimalHWRequirements aiConfigMap={aiConfigMap} isSNOCluster={isSNOCluster} />
-            </Text>
+            </Content>
           )}
-          <Text component="p">
+          <Content component="p">
             <HostsNotShowingLink setDiscoveryHintModalOpen={setDiscoveryHintModalOpen} />
-          </Text>
+          </Content>
           {isVM && <VMRebootConfigurationInfo />}
-        </TextContent>
+        </Content>
       </GridItem>
       <GridItem>
         {/* <OCSDisksManualFormattingHint /> Recently not used in the ACM flow */}

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostSelectionStep.tsx

@@ -171,7 +171,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     setSubmitting,
   } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
   const [nextRequested, setNextRequested] = React.useState(false);
-  const [showFormErrors, setShowFormErrors] = React.useState(false);
+  const [hasAttemptedSubmit, setHasAttemptedSubmit] = React.useState(false);
   const selectedAgents = getSelectedAgents(agents, values);
   const { t } = useTranslation();
   const onEditRole = React.useCallback(
@@ -189,7 +189,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   const onAutoSelectChange = React.useCallback(() => {
     setNextRequested(false);
     setShowClusterErrors(false);
-    setShowFormErrors(false);
+    setHasAttemptedSubmit(false);
   }, []);
 
   const onHostSelect = React.useCallback(() => {
@@ -198,8 +198,8 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
   }, []);
 
   const onNext = React.useCallback(async () => {
-    if (!showFormErrors) {
-      setShowFormErrors(true);
+    if (!hasAttemptedSubmit) {
+      setHasAttemptedSubmit(true);
       const errors = await validateForm();
       setTouched(
         Object.keys(errors).reduce((acc, curr) => {
@@ -213,7 +213,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     }
     void submitForm();
     setNextRequested(true);
-  }, [setTouched, showFormErrors, submitForm, validateForm]);
+  }, [setTouched, hasAttemptedSubmit, submitForm, validateForm]);
 
   React.useEffect(() => {
     if (nextRequested && !isSubmitting) {
@@ -265,35 +265,34 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
     </ValidationSection>
   );
 
-  const footer = React.useMemo(
-    () => (
+  const footer = React.useMemo(() => {
+    const hasValidationErrors = hasAttemptedSubmit && (!isValid || isValidating);
+    const isNextDisabled = nextRequested || isSubmitting || hasValidationErrors; // || !!syncError
+
+    return (
       <WizardFooter
         activeStep={activeStep}
         onNext={onNext}
-        isNextDisabled={
-          nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false) // ||
-          // !!syncError
-        }
+        isNextDisabled={isNextDisabled}
         nextButtonText={submittingText || t('ai:Next')}
         nextButtonProps={{ isLoading: !!submittingText }}
         onBack={goToPrevStep}
         onClose={close}
       />
-    ),
-    [
-      activeStep,
-      onNext,
-      nextRequested,
-      isSubmitting,
-      showFormErrors,
-      isValid,
-      isValidating,
-      submittingText,
-      t,
-      goToPrevStep,
-      close,
-    ],
-  );
+    );
+  }, [
+    activeStep,
+    onNext,
+    nextRequested,
+    isSubmitting,
+    hasAttemptedSubmit,
+    isValid,
+    isValidating,
+    submittingText,
+    t,
+    goToPrevStep,
+    close,
+  ]);
 
   useWizardFooter(footer);
 
@@ -316,14 +315,14 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
           hostsBinding={nextRequested && !showClusterErrors}
         />
       </GridItem>
-      {(showClusterErrors || showFormErrors) && !!alerts.length && (
+      {(showClusterErrors || hasAttemptedSubmit) && !!alerts.length && (
         <GridItem>
           <Alerts />
         </GridItem>
       )}
 
       {syncError && <GridItem>{errorsSection}</GridItem>}
-      {showFormErrors && errors.selectedHostIds && touched.selectedHostIds && (
+      {hasAttemptedSubmit && errors.selectedHostIds && touched.selectedHostIds && (
         <GridItem>
           <Alert
             variant={AlertVariant.danger}

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostsSelection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { Grid, GridItem, TextContent, Form } from '@patternfly/react-core';
+import { Grid, GridItem, Content, Form } from '@patternfly/react-core';
 import { SwitchField } from '../../../../common';
 import {
   ClusterDeploymentHostsSelectionProps,
@@ -74,7 +74,7 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   return (
     <Grid hasGutter>
       <GridItem>
-        <TextContent>{hostRequirementText}</TextContent>
+        <Content>{hostRequirementText}</Content>
       </GridItem>
 
       {aiConfigMap && (

package/lib/cim/components/ClusterDeployment/networkConfigurationValidation.ts

@@ -3,54 +3,48 @@ import {
   ClusterDefaultConfig,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NetworkConfigurationValues } from '../../../common/types/clusters';
-import {
-  getSubnetFromMachineNetworkCidr,
-  getHostSubnets,
-} from '../../../common/components/clusterConfiguration/utils';
-import {
-  isSNO,
-  selectClusterNetworkCIDR,
-  selectClusterNetworkHostPrefix,
-  selectMachineNetworkCIDR,
-  selectServiceNetworkCIDR,
-} from '../../../common/selectors/clusterSelectors';
-import { NETWORK_TYPE_OVN, NO_SUBNET_SET } from '../../../common/config';
-
-const getInitHostSubnet = (
-  cluster: Cluster,
-  managedNetworkingType: 'userManaged' | 'clusterManaged',
-) => {
-  if (!isSNO(cluster) && managedNetworkingType === 'userManaged') {
-    return NO_SUBNET_SET;
-  }
-  const machineNetworkCIDR = selectMachineNetworkCIDR(cluster);
-  if (machineNetworkCIDR) {
-    return getSubnetFromMachineNetworkCidr(machineNetworkCIDR);
-  }
-  if (managedNetworkingType === 'clusterManaged') {
-    return getHostSubnets(cluster)?.[0]?.subnet;
-  }
-};
+import { isDualStack } from '../../../common/components/clusterConfiguration/utils';
+import { DUAL_STACK, IPV4_STACK, NETWORK_TYPE_OVN } from '../../../common/config';
 
 export const getNetworkInitialValues = (
   cluster: Cluster,
-  defaultNetworkSettings: ClusterDefaultConfig,
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >,
 ): NetworkConfigurationValues => {
   const managedNetworkingType = cluster.userManagedNetworking ? 'userManaged' : 'clusterManaged';
+  const isDualStackCluster = isDualStack(cluster);
+
+  let clusterNetworks = cluster.clusterNetworks;
+  if (!cluster.clusterNetworks?.length) {
+    clusterNetworks = isDualStackCluster
+      ? defaultNetworkSettings.clusterNetworksDualstack
+      : defaultNetworkSettings.clusterNetworksIpv4;
+  }
+
+  let serviceNetworks = cluster.serviceNetworks;
+  if (!serviceNetworks?.length) {
+    serviceNetworks = isDualStackCluster
+      ? defaultNetworkSettings.serviceNetworksDualstack
+      : defaultNetworkSettings.serviceNetworksIpv4;
+  }
+
+  const machineNetworks = cluster.machineNetworks || [];
 
   return {
-    clusterNetworkCidr:
-      selectClusterNetworkCIDR(cluster) || defaultNetworkSettings.clusterNetworkCidr,
-    clusterNetworkHostPrefix:
-      selectClusterNetworkHostPrefix(cluster) || defaultNetworkSettings.clusterNetworkHostPrefix,
-    serviceNetworkCidr:
-      selectServiceNetworkCIDR(cluster) || defaultNetworkSettings.serviceNetworkCidr,
+    clusterNetworks,
+    serviceNetworks,
+    machineNetworks,
     apiVips: cluster.apiVips,
     ingressVips: cluster.ingressVips,
     sshPublicKey: cluster.sshPublicKey || '',
-    hostSubnet: getInitHostSubnet(cluster, managedNetworkingType) || NO_SUBNET_SET,
     vipDhcpAllocation: cluster.vipDhcpAllocation,
     managedNetworkingType,
     networkType: cluster.networkType || NETWORK_TYPE_OVN,
+    stackType: isDualStackCluster ? DUAL_STACK : IPV4_STACK,
   };
 };

package/lib/cim/components/ClusterDeployment/networking/ClusterDeploymentHostsNetworkTable.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { EmptyState } from '../../../../common';
+import { EmptyState, activeNICColumn, hostnameColumn, roleColumn } from '../../../../common';
 import { AgentTableActions } from '../types';
 import {
   AgentClusterInstallK8sResource,
@@ -9,14 +9,9 @@ import {
 } from '../../../types';
 import { getAICluster, getIsSNOCluster } from '../../helpers';
 import { AdditionalNTPSourcesDialogToggle } from '../components/AdditionalNTPSourcesDialogToggle';
-import { agentStatusColumn, useAgentsTable } from '../../Agent/tableUtils';
+import { agentStatusColumn, useAgentsTable } from '../../Agent';
 import HostsTable from '../../../../common/components/hosts/HostsTable';
 import { HostDetail } from '../../../../common/components/hosts/HostRowDetail';
-import {
-  activeNICColumn,
-  hostnameColumn,
-  roleColumn,
-} from '../../../../common/components/hosts/tableUtils';
 import { usePagination } from '../../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';