@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/ocm/components/wizard/steps/networking/NetworkConfigurationForm.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { useFormikContext } from 'formik';
+import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  Cluster,
+  ClusterDefaultConfig,
+  InfraEnv,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ClusterWizardStep,
+  ClusterWizardStepHeader,
+  getFormikErrorFields,
+  HostSubnets,
+  NetworkConfigurationValues,
+  SecurityFields,
+  useAlerts,
+  useFormikAutoSave,
+} from '../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../store';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { ClusterWizardFooter, ClusterWizardNavigation } from '../../wizardComponents';
+import { canNextNetwork } from '../../utils';
+import { NetworkConfigurationFields, NetworkConfigurationTable } from './components';
+
+export const NetworkConfigurationForm: React.FC<{
+  cluster: Cluster;
+  hostSubnets: HostSubnets;
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >;
+  infraEnv?: InfraEnv;
+}> = ({ cluster, hostSubnets, defaultNetworkSettings, infraEnv }) => {
+  const { alerts } = useAlerts();
+  const clusterWizardContext = useClusterWizardContext();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const { errors, touched, isSubmitting, isValid, setFieldValue, values } =
+    useFormikContext<NetworkConfigurationValues>();
+  const isAutoSaveRunning = useFormikAutoSave();
+  const errorFields = getFormikErrorFields(errors, touched);
+
+  // DHCP allocation is currently not supported for Nutanix hosts
+  // https://issues.redhat.com/browse/MGMT-12382
+  const isHostsPlatformTypeNutanix = React.useMemo(
+    () => cluster.platform?.type === 'nutanix',
+    [cluster.platform],
+  );
+
+  React.useEffect(() => {
+    if (isHostsPlatformTypeNutanix && values.vipDhcpAllocation) {
+      setFieldValue('vipDhcpAllocation', false);
+    }
+  }, [isHostsPlatformTypeNutanix, setFieldValue, values.vipDhcpAllocation]);
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      errorFields={errorFields}
+      isSubmitting={isSubmitting}
+      isNextDisabled={
+        isSubmitting ||
+        isAutoSaveRunning ||
+        !!alerts.length ||
+        !isValid ||
+        !canNextNetwork({ cluster })
+      }
+      onNext={() => clusterWizardContext.moveNext()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isBackDisabled={isSubmitting || isAutoSaveRunning}
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <Form>
+        <Grid hasGutter>
+          <GridItem>
+            <ClusterWizardStepHeader>Networking</ClusterWizardStepHeader>
+          </GridItem>
+          <GridItem span={12} lg={10} xl={9} xl2={7}>
+            <Grid hasGutter>
+              <NetworkConfigurationFields
+                cluster={cluster}
+                hostSubnets={hostSubnets}
+                defaultNetworkSettings={defaultNetworkSettings}
+                isVipDhcpAllocationDisabled={isHostsPlatformTypeNutanix}
+              />
+              <SecurityFields
+                clusterSshKey={cluster.sshPublicKey}
+                imageSshKey={infraEnv?.sshAuthorizedKey}
+                isDisabled={isViewerMode}
+              />
+            </Grid>
+          </GridItem>
+          <GridItem>
+            <Content component="h2">Host inventory</Content>
+            <NetworkConfigurationTable cluster={cluster} />
+          </GridItem>
+        </Grid>
+      </Form>
+    </ClusterWizardStep>
+  );
+};

package/lib/ocm/components/wizard/steps/networking/NetworkingPage.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { FormikConfig, Formik } from 'formik';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Cluster,
+  V2ClusterUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  CpuArchitecture,
+  useAlerts,
+  getHostSubnets,
+  useNewFeatureSupportLevel,
+  NetworkConfigurationValues,
+  isSNO,
+  SINGLE_STACK,
+  handleApiError,
+  getApiErrorMessage,
+  isUnknownServerError,
+  LoadingState,
+  useTranslation,
+} from '../../../../../common';
+import { captureException } from '../../../../sentry';
+import { ClustersService } from '../../../../services';
+import { usePullSecret, useInfraEnv } from '../../../../hooks';
+import {
+  selectCurrentClusterPermissionsState,
+  updateClusterBase,
+  setServerUpdateError,
+} from '../../../../store';
+import { useDefaultConfiguration } from '../../../../contexts';
+import { NetworkConfigurationForm } from './NetworkConfigurationForm';
+import { getNetworkValidationSchema } from './validationSchema';
+import { getNetworkInitialValues } from './initialValues';
+
+export const NetworkingPage = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
+  const pullSecret = usePullSecret();
+  const {
+    infraEnv,
+    error: infraEnvError,
+    isLoading,
+  } = useInfraEnv(
+    cluster.id,
+    cluster.cpuArchitecture
+      ? (cluster.cpuArchitecture as CpuArchitecture)
+      : CpuArchitecture.USE_DAY1_ARCHITECTURE,
+    cluster.name,
+    pullSecret,
+    cluster.openshiftVersion,
+  );
+  const defaultNetworkValues = useDefaultConfiguration([
+    'clusterNetworksDualstack',
+    'clusterNetworksIpv4',
+    'serviceNetworksDualstack',
+    'serviceNetworksIpv4',
+  ]);
+
+  const { addAlert, clearAlerts, alerts } = useAlerts();
+  const dispatch = useDispatch();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const hostSubnets = React.useMemo(() => getHostSubnets(cluster, true), [cluster]);
+  const featureSupportLevelData = useNewFeatureSupportLevel();
+  const isClusterManagedNetworkingUnsupported = !featureSupportLevelData.isFeatureSupported(
+    'CLUSTER_MANAGED_NETWORKING',
+  );
+  const initialValues = React.useMemo(
+    () =>
+      getNetworkInitialValues(cluster, defaultNetworkValues, isClusterManagedNetworkingUnsupported),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [], // just once, Formik does not reinitialize
+  );
+
+  const memoizedValidationSchema = React.useMemo(
+    () => getNetworkValidationSchema(initialValues, hostSubnets, t, cluster.openshiftVersion),
+    [initialValues, hostSubnets, t, cluster.openshiftVersion],
+  );
+
+  React.useEffect(() => {
+    if (infraEnvError) {
+      const title = `Failed to retrieve infra env (clusterId: ${cluster.id})`;
+      //TODO(brotman) add handling of existing errors to alerts context
+      if (alerts.find((alert) => alert.title === title)) {
+        return;
+      }
+      captureException(infraEnvError, title);
+      addAlert({
+        title,
+        message: infraEnvError,
+      });
+    }
+    //shouldn't respond to cluster polling. shouldn't respond to alerts changes so remove alert wouldn't trigger adding it back
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infraEnvError]);
+
+  const handleSubmit: FormikConfig<NetworkConfigurationValues>['onSubmit'] = async (values) => {
+    clearAlerts();
+    // update the cluster configuration
+    try {
+      const isMultiNodeCluster = !isSNO(cluster);
+      const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
+
+      // Only send VIPs that have a non-empty IP;
+      const apiVips = (values.apiVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+      const ingressVips = (values.ingressVips || []).filter((v) => (v?.ip ?? '').trim() !== '');
+
+      const params: V2ClusterUpdateParams = {
+        apiVips,
+        ingressVips,
+        sshPublicKey: values.sshPublicKey,
+        vipDhcpAllocation: values.vipDhcpAllocation,
+        networkType: values.networkType,
+        machineNetworks: values.machineNetworks,
+        clusterNetworks: values.clusterNetworks,
+        serviceNetworks: values.serviceNetworks,
+        userManagedNetworking: isUserManagedNetworking,
+      };
+      if (params.userManagedNetworking) {
+        params.apiVips = [];
+        params.ingressVips = [];
+        if (isMultiNodeCluster) {
+          delete params.machineNetworks;
+        }
+      } else {
+        // cluster-managed can't be chosen in SNO, so this must be a multi-node cluster
+        if (values.vipDhcpAllocation) {
+          delete params.apiVips;
+          delete params.ingressVips;
+        } else if (values.stackType === SINGLE_STACK) {
+          // The API will rebuild the default machineNetwork
+          params.machineNetworks = [];
+        }
+      }
+
+      const { data } = await ClustersService.update(cluster.id, cluster.tags, params);
+      dispatch(updateClusterBase(data));
+    } catch (e) {
+      handleApiError(e, () =>
+        addAlert({ title: 'Failed to update the cluster', message: getApiErrorMessage(e) }),
+      );
+      if (isUnknownServerError(e as Error)) {
+        dispatch(setServerUpdateError());
+      }
+    }
+  };
+
+  if (isLoading) {
+    return <LoadingState />;
+  }
+
+  const onSubmit = isViewerMode ? () => Promise.resolve() : handleSubmit;
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={memoizedValidationSchema}
+      onSubmit={onSubmit}
+      validateOnMount
+    >
+      <NetworkConfigurationForm
+        cluster={cluster}
+        hostSubnets={hostSubnets}
+        defaultNetworkSettings={defaultNetworkValues}
+        infraEnv={infraEnv}
+      />
+    </Formik>
+  );
+};

package/lib/ocm/components/wizard/steps/networking/components/NetworkConfigurationFields.tsx

@@ -0,0 +1,271 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useSelector } from 'react-redux';
+import { Address6 } from 'ip-address';
+import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
+import { ClusterDefaultConfig } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  canBeDualStack,
+  CpuArchitecture,
+  DUAL_STACK,
+  HostSubnets,
+  isAdvNetworkConf,
+  isSNO,
+  NetworkConfigurationValues,
+  NO_SUBNET_SET,
+  selectApiVip,
+  selectIngressVip,
+  ManagedNetworkingControlGroup,
+  UserManagedNetworkingTextContent,
+  StackTypeControlGroup,
+  AvailableSubnetsControl,
+  VirtualIPControlGroup,
+  VirtualIPControlGroupProps,
+  AdvancedNetworkFields,
+  useNewFeatureSupportLevel,
+} from '../../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../../store';
+import { useFeature, useSupportLevelsAPI } from '../../../../../hooks';
+import { OcmCheckbox } from '../../../../ui';
+import { isOciPlatformType } from '../../../../utils';
+import { NetworkTypeDropDown } from './NetworkTypeDropdown';
+import { getManagedNetworkingState, getNetworkDefaultsByFamily } from './utils';
+
+export type NetworkConfigurationProps = VirtualIPControlGroupProps & {
+  hostSubnets: HostSubnets;
+  defaultNetworkSettings: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >;
+};
+
+export const NetworkConfigurationFields = ({
+  cluster,
+  hostSubnets,
+  isVipDhcpAllocationDisabled,
+  defaultNetworkSettings,
+}: NetworkConfigurationProps) => {
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const featureSupportLevelData = useSupportLevelsAPI(
+    'features',
+    cluster.openshiftVersion,
+    cluster.cpuArchitecture as CpuArchitecture,
+    cluster.platform?.type,
+  );
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const { setFieldValue, values, validateField, validateForm } =
+    useFormikContext<NetworkConfigurationValues>();
+
+  const isSingleClusterFeature = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const isSNOCluster = isSNO(cluster);
+  const isUserManagedNetworking = values.managedNetworkingType === 'userManaged';
+  const isDualStack = values.stackType === DUAL_STACK;
+
+  const isDualStackSelectable = React.useMemo(() => canBeDualStack(hostSubnets), [hostSubnets]);
+
+  const [isAdvanced, setAdvanced] = React.useState(
+    isDualStack || isAdvNetworkConf(cluster, defaultNetworkSettings),
+  );
+
+  React.useEffect(() => {
+    if (isUserManagedNetworking) {
+      // We need to reset these fields' values in order to align with the values the server sends
+      if (values.vipDhcpAllocation || values.ingressVips?.length || values.apiVips?.length) {
+        setFieldValue('vipDhcpAllocation', false);
+        setFieldValue('ingressVips', [], false);
+        setFieldValue('apiVips', [], false);
+      }
+
+      if (!isSNOCluster && values.machineNetworks?.length) {
+        setFieldValue('machineNetworks', [], false);
+      }
+    }
+  }, [
+    isSNOCluster,
+    isUserManagedNetworking,
+    values.vipDhcpAllocation,
+    setFieldValue,
+    validateField,
+    values.apiVips,
+    values.ingressVips,
+    values.machineNetworks,
+  ]);
+
+  const toggleAdvConfiguration = React.useCallback(
+    (checked: boolean) => {
+      setAdvanced(checked);
+
+      if (!checked) {
+        const primaryCidr = values.machineNetworks?.[0]?.cidr;
+        const isIPv6Stack = !!primaryCidr && Address6.isValid(primaryCidr);
+        const { clusterNetworkDefaults, serviceNetworkDefaults } = getNetworkDefaultsByFamily(
+          defaultNetworkSettings,
+          isDualStack,
+          isIPv6Stack,
+        );
+        setFieldValue('clusterNetworks', clusterNetworkDefaults, true);
+        setFieldValue('serviceNetworks', serviceNetworkDefaults, true);
+      }
+    },
+    [setFieldValue, isDualStack, values.machineNetworks, defaultNetworkSettings],
+  );
+
+  React.useEffect(() => {
+    if (!isViewerMode && isDualStack) {
+      toggleAdvConfiguration(true);
+    }
+  }, [isDualStack, isViewerMode, toggleAdvConfiguration]);
+
+  React.useEffect(() => {
+    if (!isSingleClusterFeature || isViewerMode || isDualStack || isAdvanced) {
+      return;
+    }
+    const primaryCidr = values.machineNetworks?.[0]?.cidr;
+    if (!primaryCidr || primaryCidr === NO_SUBNET_SET) {
+      return;
+    }
+    const isIPv6 = Address6.isValid(primaryCidr);
+    const currentClusterCidr = values.clusterNetworks?.[0]?.cidr;
+    const clusterIsIPv6 = currentClusterCidr ? Address6.isValid(currentClusterCidr) : null;
+
+    if (clusterIsIPv6 === isIPv6) {
+      return;
+    }
+
+    const { clusterNetworkDefaults, serviceNetworkDefaults } = getNetworkDefaultsByFamily(
+      defaultNetworkSettings,
+      false,
+      isIPv6,
+    );
+    if (clusterNetworkDefaults) {
+      setFieldValue('clusterNetworks', clusterNetworkDefaults);
+    }
+    if (serviceNetworkDefaults) {
+      setFieldValue('serviceNetworks', serviceNetworkDefaults);
+    }
+    void validateForm();
+  }, [
+    isSingleClusterFeature,
+    isViewerMode,
+    isDualStack,
+    isAdvanced,
+    values.machineNetworks,
+    values.clusterNetworks,
+    defaultNetworkSettings,
+    setFieldValue,
+    validateForm,
+    cluster.id,
+  ]);
+
+  const managedNetworkingState = React.useMemo(
+    () =>
+      getManagedNetworkingState(
+        isDualStack,
+        isOciPlatformType(cluster),
+        featureSupportLevelContext,
+        cluster.platform?.type,
+        featureSupportLevelData,
+      ),
+    [isDualStack, cluster, featureSupportLevelContext, featureSupportLevelData],
+  );
+
+  const isSDNSupported = React.useMemo(() => {
+    return featureSupportLevelContext.isFeatureSupported('SDN_NETWORK_TYPE');
+  }, [featureSupportLevelContext]);
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ManagedNetworkingControlGroup
+          disabled={isViewerMode || managedNetworkingState.isDisabled}
+          tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
+          tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
+        />
+      </StackItem>
+
+      {isUserManagedNetworking && (
+        <StackItem>
+          <UserManagedNetworkingTextContent
+            shouldDisplayLoadBalancersBullet={!isSNOCluster}
+            docVersion={cluster.openshiftVersion}
+          />
+        </StackItem>
+      )}
+
+      {(isSNOCluster || !isUserManagedNetworking) && (
+        <StackItem>
+          <StackTypeControlGroup
+            clusterId={cluster.id}
+            isDualStackSelectable={isDualStackSelectable}
+            hostSubnets={hostSubnets}
+            defaultNetworkValues={defaultNetworkSettings}
+            isViewerMode={isViewerMode}
+            allowSingleStackIPv6={isSingleClusterFeature}
+          />
+        </StackItem>
+      )}
+      <StackItem>
+        <NetworkTypeDropDown
+          isDisabled={isViewerMode}
+          featureSupportLevelData={featureSupportLevelData}
+        />
+      </StackItem>
+
+      {!(isUserManagedNetworking && !isSNOCluster) && (
+        <StackItem>
+          <AvailableSubnetsControl
+            clusterId={cluster.id}
+            hostSubnets={hostSubnets}
+            isRequired={!isUserManagedNetworking}
+            isDisabled={
+              (cluster.vipDhcpAllocation &&
+                selectApiVip(cluster) === '' &&
+                selectIngressVip(cluster) === '') ||
+              hostSubnets.length === 0 ||
+              false
+            }
+            openshiftVersion={cluster.openshiftVersion}
+            isViewerMode={isViewerMode}
+            allowSingleStackIPv6={isSingleClusterFeature}
+          />
+        </StackItem>
+      )}
+
+      {!isUserManagedNetworking && (
+        <StackItem>
+          <VirtualIPControlGroup
+            cluster={cluster}
+            hostSubnets={hostSubnets}
+            isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
+            supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
+            isViewerMode={isViewerMode}
+          />
+        </StackItem>
+      )}
+      <StackItem>
+        <Tooltip
+          content={'Advanced networking properties must be configured in dual-stack'}
+          hidden={!isDualStack}
+          position={'top-start'}
+        >
+          <OcmCheckbox
+            id="useAdvancedNetworking"
+            label="Use advanced networking"
+            description="Configure advanced networking properties (e.g. CIDR ranges)."
+            isChecked={isAdvanced}
+            onChange={(_event, value) => toggleAdvConfiguration(value)}
+            isDisabled={isDualStack}
+          />
+        </Tooltip>
+      </StackItem>
+      {isAdvanced && (
+        <StackItem>
+          <AdvancedNetworkFields isDisabled={isViewerMode} />
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

package/lib/ocm/components/wizard/steps/networking/components/NetworkConfigurationTable.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { isSNO, HostsTableEmptyState } from '../../../../../../common';
+import {
+  HostsTableModals,
+  useHostsTable,
+  AdditionalNTPSourcesDialogToggle,
+} from '../../../../hostsTable';
+import { NetworkConfigurationTableBase } from './NetworkConfigurationTableBase';
+import { NtpSyncFailureMessage } from '../../../../hostsTable/components/NtpSyncFailureMessage';
+
+export const NetworkConfigurationTable = ({ cluster }: { cluster: Cluster }) => {
+  const { actionChecks, onEditHost, actionResolver, ...modalProps } = useHostsTable(cluster);
+
+  return (
+    <>
+      <NetworkConfigurationTableBase
+        cluster={cluster}
+        AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
+        NtpSyncFailureMessageComponent={NtpSyncFailureMessage}
+        onEditHost={onEditHost}
+        canEditHostname={actionChecks.canEditHostname}
+        actionResolver={actionResolver}
+      >
+        <HostsTableEmptyState isSNO={isSNO(cluster)} />
+      </NetworkConfigurationTableBase>
+      <HostsTableModals cluster={cluster} {...modalProps} />
+    </>
+  );
+};

package/lib/ocm/components/wizard/steps/networking/components/NetworkConfigurationTableBase.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  HostsTableActions,
+  selectSchedulableMasters,
+  hostnameColumn,
+  roleColumn,
+  activeNICColumn,
+  ipv4Column,
+  ipv6Column,
+  macAddressColumn,
+  countColumn,
+  ActionsResolver,
+  TableRow,
+  usePagination,
+  HostDetail,
+  HostsTable,
+  stringToJSON,
+  useTranslation,
+} from '../../../../../../common';
+import { ValidationsInfo } from '../../../../../../common/types/hosts';
+import { useClusterWizardContext } from '../../../clusterWizardContext';
+import { NetworkingStatus } from './NetworkingStatus';
+
+export const networkingStatusColumn = (
+  onEditHostname?: HostsTableActions['onEditHost'],
+): TableRow<Host> => ({
+  header: {
+    title: 'Status',
+    sort: true,
+  },
+  cell: (host) => {
+    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
+    const validationsInfo = stringToJSON<ValidationsInfo>(host.validationsInfo) || {};
+    return {
+      title: (
+        <NetworkingStatus
+          host={host}
+          onEditHostname={editHostname}
+          validationsInfo={validationsInfo}
+        />
+      ),
+      props: { 'data-testid': 'host-status' },
+      sortableValue: status,
+    };
+  },
+});
+
+type NetworkConfigurationTableProps = {
+  cluster: Cluster;
+  AdditionalNTPSourcesDialogToggleComponent: React.FC;
+  NtpSyncFailureMessageComponent?: React.FC;
+  actionResolver: ActionsResolver<Host>;
+  children: React.ReactNode;
+  onEditHost?: HostsTableActions['onEditHost'];
+  onEditRole?: HostsTableActions['onEditRole'];
+  canEditRole?: HostsTableActions['canEditRole'];
+  canEditHostname?: HostsTableActions['canEditHostname'];
+  onSelect?: (obj: Host, isSelected: boolean) => void;
+  selectedIDs?: string[];
+};
+
+export const NetworkConfigurationTableBase = ({
+  cluster,
+  AdditionalNTPSourcesDialogToggleComponent,
+  NtpSyncFailureMessageComponent,
+  onEditHost,
+  onEditRole,
+  canEditRole,
+  canEditHostname,
+  actionResolver,
+  children,
+  onSelect,
+  selectedIDs,
+}: NetworkConfigurationTableProps) => {
+  const { wizardPerPage, setWizardPerPage } = useClusterWizardContext();
+  const { t } = useTranslation();
+  const content = React.useMemo(
+    () => [
+      hostnameColumn(t, onEditHost, undefined, canEditHostname),
+      roleColumn(t, canEditRole, onEditRole, selectSchedulableMasters(cluster)),
+      networkingStatusColumn(onEditHost),
+      activeNICColumn(cluster, t),
+      ipv4Column(cluster),
+      ipv6Column(cluster),
+      macAddressColumn(cluster),
+      countColumn(cluster),
+    ],
+    [t, onEditHost, onEditRole, canEditHostname, canEditRole, cluster],
+  );
+
+  const hosts = cluster.hosts || [];
+
+  const paginationProps = usePagination(hosts.length, wizardPerPage, setWizardPerPage);
+
+  const ExpandComponent = React.useCallback(
+    ({ obj }: { obj: Host }) => {
+      return (
+        <HostDetail
+          host={obj}
+          AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggleComponent}
+          NtpSyncFailureMessageComponent={NtpSyncFailureMessageComponent}
+        />
+      );
+    },
+    [AdditionalNTPSourcesDialogToggleComponent, NtpSyncFailureMessageComponent],
+  );
+
+  return (
+    <HostsTable
+      testId="networking-host-table"
+      hosts={hosts}
+      ExpandComponent={ExpandComponent}
+      content={content}
+      actionResolver={actionResolver}
+      onSelect={onSelect}
+      selectedIDs={selectedIDs}
+      {...paginationProps}
+    >
+      {children}
+    </HostsTable>
+  );
+};