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

package/lib/ocm/components/clusterConfiguration/networkConfiguration/AdvancedNetworkFields.tsx

@@ -1,157 +0,0 @@
-import React from 'react';
-import {
-  Alert,
-  AlertVariant,
-  FormGroup,
-  StackItem,
-  TextInputTypes,
-  Grid,
-  Stack,
-} from '@patternfly/react-core';
-import { FieldArray, useFormikContext } from 'formik';
-import {
-  DUAL_STACK,
-  PREFIX_MAX_RESTRICTION,
-  NetworkConfigurationValues,
-  PopoverIcon,
-} from '../../../../common';
-import { OcmInputField } from '../../ui/OcmFormFields';
-
-const getNetworkLabelSuffix = (index: number, isDualStack: boolean) => {
-  return isDualStack ? ` (${index === 0 ? 'IPv4' : 'IPv6'})` : '';
-};
-
-const IPv4PrefixPopoverText =
-  'For example, if Cluster Network Host Prefix is set to 23, then each node is assigned a /23 subnet out of the given cidr (clusterNetworkCIDR), which allows for 510 (2^(32 - 23) - 2) pod IPs addresses.';
-
-const IPv6PrefixPopoverText =
-  'For example, if Cluster Network Host Prefix is set to 116, then each node is assigned a /116 subnet out of the given cidr (clusterNetworkCIDR), which allows for 4,094 (2^(128 - 116) - 2) pod IPs addresses.';
-
-const ClusterPrefixHelperText =
-  'Defines how big the subnets for each individual node are out of the given CIDR. Must enter a whole number.';
-
-const clusterCidrHelperText =
-  'The block must not overlap with existing physical networks. To access the Pods from an external network, configure load balancers and routers to manage the traffic.';
-
-const serviceCidrHelperText =
-  'Enter only 1 IP address pool. If you need to access the services from an external network, configure load balancers and routers to manage the traffic.';
-
-const AdvancedNetworkFields = () => {
-  const { values, errors } = useFormikContext<NetworkConfigurationValues>();
-
-  const isDualStack = values.stackType === DUAL_STACK;
-
-  const clusterNetworkCidrPrefix = (index: number) =>
-    parseInt(
-      ((values.clusterNetworks && values.clusterNetworks[index].cidr) || '').split('/')[1],
-    ) || 1;
-
-  const isSubnetIPv6 = (index: number) => (isDualStack ? !!index : false);
-
-  const clusterNetworkHostPrefixPopoverText = (index: number) => (
-    <>
-      <p>
-        The subnet prefix length to assign to each individual node.{' '}
-        {isSubnetIPv6(index) ? IPv6PrefixPopoverText : IPv4PrefixPopoverText}
-      </p>
-      <p>
-        If you are required to provide access to nodes from an external network, configure load
-        balancers and routers to manage the traffic.
-      </p>
-    </>
-  );
-
-  return (
-    <Grid hasGutter className="pf-v5-u-ml-lg">
-      <FieldArray name="clusterNetworks">
-        {() => (
-          <FormGroup fieldId="clusterNetworks" labelInfo={isDualStack && 'Primary'}>
-            {values.clusterNetworks?.map((_, index) => {
-              const networkSuffix = getNetworkLabelSuffix(index, isDualStack);
-              return (
-                <Stack key={index}>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
-                    <OcmInputField
-                      name={`clusterNetworks.${index}.cidr`}
-                      label={
-                        <>
-                          <span>{`Cluster network CIDR${networkSuffix} `}</span>
-                          <PopoverIcon
-                            bodyContent={'IP address blocks from which Pod IPs are allocated.'}
-                          />
-                        </>
-                      }
-                      helperText={clusterCidrHelperText}
-                      isRequired
-                      labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
-                    />
-                  </StackItem>
-                  <StackItem className={'network-field-group pf-v5-u-pb-md'}>
-                    <OcmInputField
-                      name={`clusterNetworks.${index}.hostPrefix`}
-                      label={
-                        <>
-                          <span>Cluster network host prefix{networkSuffix} </span>
-                          <PopoverIcon
-                            bodyContent={clusterNetworkHostPrefixPopoverText(index)}
-                            minWidth="30rem"
-                          />
-                        </>
-                      }
-                      type={TextInputTypes.number}
-                      min={clusterNetworkCidrPrefix(index)}
-                      max={
-                        isSubnetIPv6(index)
-                          ? PREFIX_MAX_RESTRICTION.IPv6
-                          : PREFIX_MAX_RESTRICTION.IPv4
-                      }
-                      helperText={ClusterPrefixHelperText}
-                      isRequired
-                    />
-                  </StackItem>
-                </Stack>
-              );
-            })}
-          </FormGroup>
-        )}
-      </FieldArray>
-
-      {typeof errors.clusterNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.clusterNetworks} isInline />
-      )}
-
-      <FieldArray name="serviceNetworks">
-        {() => (
-          <FormGroup fieldId="serviceNetworks" labelInfo={isDualStack && 'Primary'}>
-            {values.serviceNetworks?.map((_, index) => (
-              <StackItem key={index} className={'network-field-group pf-v5-u-pb-md'}>
-                <OcmInputField
-                  name={`serviceNetworks.${index}.cidr`}
-                  label={
-                    <>
-                      <span>
-                        {`Service network CIDR${getNetworkLabelSuffix(index, isDualStack)} `}
-                      </span>
-                      <PopoverIcon
-                        bodyContent={'The IP address pool used for service IP addresses.'}
-                      />
-                    </>
-                  }
-                  helperText={serviceCidrHelperText}
-                  isRequired
-                  labelInfo={index === 0 && isDualStack ? 'Primary' : ''}
-                />
-              </StackItem>
-            ))}
-          </FormGroup>
-        )}
-      </FieldArray>
-
-      {typeof errors.serviceNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.serviceNetworks} isInline />
-      )}
-    </Grid>
-  );
-};
-
-export default AdvancedNetworkFields;

package/lib/ocm/components/clusterConfiguration/networkConfiguration/AvailableSubnetsControl.tsx

@@ -1,104 +0,0 @@
-import React, { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { Alert, AlertVariant, FormGroup, Stack, StackItem } from '@patternfly/react-core';
-import { FieldArray, useFormikContext, FormikHelpers } from 'formik';
-import { Address4, Address6 } from 'ip-address';
-
-import {
-  HostSubnet,
-  NetworkConfigurationValues,
-  DUAL_STACK,
-  NO_SUBNET_SET,
-} from '../../../../common';
-import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
-import { SubnetsDropdown } from './SubnetsDropdown';
-import { Cluster, MachineNetwork } from '@openshift-assisted/types/assisted-installer-service';
-
-const subnetSort = (subA: HostSubnet, subB: HostSubnet) =>
-  subA.humanized.localeCompare(subB.humanized);
-
-const useAutoSelectSingleAvailableSubnet = (
-  autoSelectNetwork: boolean,
-  setFieldValue: FormikHelpers<NetworkConfigurationValues>['setFieldValue'],
-  cidr: MachineNetwork['cidr'],
-  clusterId: string,
-) => {
-  useEffect(() => {
-    if (autoSelectNetwork) {
-      setFieldValue('machineNetworks', [{ cidr, clusterId }], true);
-    }
-  }, [autoSelectNetwork, cidr, clusterId, setFieldValue]);
-};
-
-export interface AvailableSubnetsControlProps {
-  clusterId: Cluster['id'];
-  hostSubnets: HostSubnet[];
-  isRequired: boolean;
-  isDisabled: boolean;
-}
-
-export const AvailableSubnetsControl = ({
-  clusterId,
-  hostSubnets,
-  isRequired = false,
-  isDisabled,
-}: AvailableSubnetsControlProps) => {
-  const { values, errors, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
-  const isDualStack = values.stackType === DUAL_STACK;
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-
-  const IPv4Subnets = hostSubnets
-    .filter((subnet) => Address4.isValid(subnet.subnet))
-    .sort(subnetSort);
-  const IPv6Subnets = hostSubnets
-    .filter((subnet) => Address6.isValid(subnet.subnet))
-    .sort(subnetSort);
-
-  const cidr = IPv4Subnets.length >= 1 ? IPv4Subnets[0].subnet : NO_SUBNET_SET;
-  const hasEmptySelection = (values.machineNetworks ?? []).length === 0;
-  const autoSelectNetwork = !isViewerMode && hasEmptySelection;
-  useAutoSelectSingleAvailableSubnet(autoSelectNetwork, setFieldValue, cidr, clusterId);
-
-  return (
-    <FormGroup
-      label="Machine network"
-      labelInfo={isDualStack && 'Primary'}
-      fieldId="machine-networks"
-      isRequired={isRequired}
-    >
-      <FieldArray name="machineNetworks">
-        {() => (
-          <Stack>
-            {isDualStack ? (
-              values.machineNetworks?.map((_machineNetwork, index) => {
-                const machineSubnets = index === 1 ? IPv6Subnets : IPv4Subnets;
-
-                return (
-                  <StackItem key={index}>
-                    <SubnetsDropdown
-                      name={`machineNetworks.${index}.cidr`}
-                      machineSubnets={machineSubnets}
-                      isDisabled={isDisabled}
-                    />
-                  </StackItem>
-                );
-              })
-            ) : (
-              <StackItem>
-                <SubnetsDropdown
-                  name={`machineNetworks.0.cidr`}
-                  machineSubnets={IPv4Subnets}
-                  isDisabled={isDisabled}
-                />
-              </StackItem>
-            )}
-          </Stack>
-        )}
-      </FieldArray>
-
-      {typeof errors.machineNetworks === 'string' && (
-        <Alert variant={AlertVariant.warning} title={errors.machineNetworks} isInline />
-      )}
-    </FormGroup>
-  );
-};

package/lib/ocm/components/clusterConfiguration/networkConfiguration/StackTypeControl.tsx

@@ -1,222 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { ButtonVariant, FormGroup, Split, SplitItem, Tooltip } from '@patternfly/react-core';
-import { useFormikContext } from 'formik';
-import { Address6 } from 'ip-address';
-
-import {
-  HostSubnets,
-  NetworkConfigurationValues,
-  getFieldId,
-  DUAL_STACK,
-  IPV4_STACK,
-  NETWORK_TYPE_OVN,
-  NETWORK_TYPE_SDN,
-  NO_SUBNET_SET,
-} from '../../../../common';
-import { ConfirmationModal, PopoverIcon } from '../../../../common/components/ui';
-import { useDefaultConfiguration } from '../ClusterDefaultConfigurationContext';
-import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
-import { OcmRadioField } from '../../ui/OcmFormFields';
-import {
-  Cluster,
-  ClusterNetwork,
-  MachineNetwork,
-  ServiceNetwork,
-} from '@openshift-assisted/types/assisted-installer-service';
-
-type StackTypeControlGroupProps = {
-  clusterId: Cluster['id'];
-  isDualStackSelectable: boolean;
-  hostSubnets: HostSubnets;
-};
-
-const hasDualStackConfigurationChanged = (
-  clusterNetworks: ClusterNetwork[],
-  serviceNetworks: ServiceNetwork[],
-  cidrIPv6: MachineNetwork['cidr'],
-  values: NetworkConfigurationValues,
-) =>
-  clusterNetworks &&
-  serviceNetworks &&
-  ((values.machineNetworks && values.machineNetworks[1].cidr !== cidrIPv6) ||
-    (values.clusterNetworks && values.clusterNetworks[1].cidr !== clusterNetworks[1].cidr) ||
-    (values.clusterNetworks &&
-      values.clusterNetworks[1].hostPrefix !== clusterNetworks[1].hostPrefix) ||
-    (values.serviceNetworks && values.serviceNetworks[1].cidr !== serviceNetworks[1].cidr));
-
-export const StackTypeControlGroup = ({
-  clusterId,
-  isDualStackSelectable,
-  hostSubnets,
-}: StackTypeControlGroupProps) => {
-  const { setFieldValue, values, validateForm } = useFormikContext<NetworkConfigurationValues>();
-  const [openConfirmModal, setConfirmModal] = React.useState(false);
-  const defaultNetworkValues = useDefaultConfiguration([
-    'clusterNetworksDualstack',
-    'clusterNetworksIpv4',
-    'serviceNetworksDualstack',
-    'serviceNetworksIpv4',
-  ]);
-
-  const IPv6Subnets = hostSubnets.filter((subnet) => Address6.isValid(subnet.subnet));
-  const cidrIPv6 = IPv6Subnets.length >= 1 ? IPv6Subnets[0].subnet : NO_SUBNET_SET;
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const shouldSetSingleStack =
-    !isViewerMode && !isDualStackSelectable && values.stackType === DUAL_STACK;
-
-  const setSingleStack = React.useCallback(() => {
-    setFieldValue('stackType', IPV4_STACK);
-
-    if (values.machineNetworks && values.machineNetworks?.length >= 2) {
-      setFieldValue('machineNetworks', values.machineNetworks.slice(0, 1));
-    }
-    if (values.clusterNetworks && values.clusterNetworks?.length >= 2) {
-      setFieldValue('clusterNetworks', values.clusterNetworks.slice(0, 1));
-    }
-    if (values.serviceNetworks && values.serviceNetworks?.length >= 2) {
-      setFieldValue('serviceNetworks', values.serviceNetworks.slice(0, 1));
-    }
-
-    void validateForm();
-  }, [
-    setFieldValue,
-    validateForm,
-    values.clusterNetworks,
-    values.machineNetworks,
-    values.serviceNetworks,
-  ]);
-
-  const setDualStack = () => {
-    setFieldValue('stackType', DUAL_STACK);
-    setFieldValue('vipDhcpAllocation', false);
-
-    if (values.networkType === NETWORK_TYPE_SDN) {
-      setFieldValue('networkType', NETWORK_TYPE_OVN);
-    }
-
-    if (values.machineNetworks && values.machineNetworks?.length < 2) {
-      setFieldValue(
-        'machineNetworks',
-        [...values.machineNetworks, { cidr: cidrIPv6, clusterId: clusterId }],
-        false,
-      );
-    }
-    if (values.clusterNetworks && values.clusterNetworks?.length < 2) {
-      setFieldValue(
-        'clusterNetworks',
-        [
-          ...values.clusterNetworks,
-          defaultNetworkValues.clusterNetworksDualstack?.length
-            ? defaultNetworkValues.clusterNetworksDualstack[1]
-            : { cidr: '', hostPrefix: '', clusterId: clusterId },
-        ],
-        false,
-      );
-    }
-    if (values.serviceNetworks && values.serviceNetworks?.length < 2) {
-      setFieldValue(
-        'serviceNetworks',
-        [
-          ...values.serviceNetworks,
-          defaultNetworkValues.serviceNetworksDualstack?.length
-            ? defaultNetworkValues.serviceNetworksDualstack[1]
-            : { cidr: '', clusterId: clusterId },
-        ],
-        false,
-      );
-    }
-  };
-
-  const setStackType = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value === DUAL_STACK) {
-      setDualStack();
-    } else if (
-      hasDualStackConfigurationChanged(
-        defaultNetworkValues.clusterNetworksDualstack || [],
-        defaultNetworkValues.serviceNetworksDualstack || [],
-        cidrIPv6,
-        values,
-      )
-    ) {
-      setConfirmModal(true);
-    } else {
-      setSingleStack();
-    }
-  };
-
-  React.useEffect(() => {
-    if (shouldSetSingleStack) {
-      setSingleStack();
-    }
-  }, [shouldSetSingleStack, setSingleStack]);
-
-  return (
-    <>
-      <FormGroup
-        label="Networking stack type"
-        fieldId={getFieldId('stackType', 'radio')}
-        onChange={setStackType}
-        isInline
-      >
-        <Split>
-          <SplitItem>
-            <OcmRadioField
-              name={'stackType'}
-              value={IPV4_STACK}
-              isDisabled={!isDualStackSelectable}
-              label="IPv4&nbsp;"
-            />
-          </SplitItem>
-          <SplitItem>
-            <PopoverIcon
-              bodyContent="Select this when your hosts are using only IPv4."
-              buttonStyle={{ top: '-4px' }}
-            />
-          </SplitItem>
-        </Split>
-        <Split>
-          <SplitItem>
-            <Tooltip
-              content={
-                'Dual-stack is only available when your hosts are using IPV4 together with IPV6.'
-              }
-              hidden={isDualStackSelectable}
-            >
-              <OcmRadioField
-                name={'stackType'}
-                value={DUAL_STACK}
-                isDisabled={!isDualStackSelectable}
-                label="Dual-stack&nbsp;"
-              />
-            </Tooltip>
-          </SplitItem>
-          <SplitItem>
-            <PopoverIcon
-              bodyContent="Select dual-stack when your hosts are using IPV4 together with IPV6."
-              buttonStyle={{ top: '-4px' }}
-            />
-          </SplitItem>
-        </Split>
-      </FormGroup>
-
-      {openConfirmModal && (
-        <ConfirmationModal
-          title={'Change stack type?'}
-          titleIconVariant={'warning'}
-          confirmationButtonText={'Change'}
-          confirmationButtonVariant={ButtonVariant.primary}
-          content={<p>All data and configuration done for 'Dual-stack' will be lost.</p>}
-          onClose={() => {
-            setConfirmModal(false);
-            setDualStack();
-          }}
-          onConfirm={() => {
-            setConfirmModal(false);
-            setSingleStack();
-          }}
-        />
-      )}
-    </>
-  );
-};

package/lib/ocm/components/clusterConfiguration/networkConfiguration/SubnetsDropdown.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Dropdown, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-import { useField } from 'formik';
-import { getFieldId, HostSubnet, NO_SUBNET_SET } from '../../../../common';
-
-type SubnetsDropdownProps = {
-  name: string;
-  machineSubnets: HostSubnet[];
-  isDisabled: boolean;
-};
-
-const toFormSelectOptions = (subnets: HostSubnet[]) => {
-  return subnets.map((hn, index) => ({
-    label: `${hn.humanized}${hn.isValid ? '' : ' (Invalid network)'}`,
-    value: hn.subnet,
-    isDisabled: false,
-    id: `form-input-hostSubnet-field-option-${index}`,
-  }));
-};
-
-const makeNoSubnetSelectedOption = (availableSubnets: number) => ({
-  label: `Please select a subnet. (${availableSubnets} available)`,
-  value: NO_SUBNET_SET,
-  isDisabled: true,
-  id: 'form-input-hostSubnet-field-option-no-subnet-selected',
-});
-
-const noSubnetAvailableOption = {
-  label: 'No subnets are currently available',
-  value: NO_SUBNET_SET,
-  isDisabled: true,
-  id: 'form-input-hostSubnet-field-option-no-subnet-available',
-};
-
-export const SubnetsDropdown = ({ name, machineSubnets, isDisabled }: SubnetsDropdownProps) => {
-  const [field, , { setValue }] = useField(name);
-  const [isOpen, setOpen] = React.useState(false);
-  const fieldId = getFieldId(name, 'input');
-
-  const { itemsSubnets, currentDisplayValue } = React.useMemo(() => {
-    const itemsSubnets =
-      machineSubnets.length === 0
-        ? [noSubnetAvailableOption]
-        : [makeNoSubnetSelectedOption(machineSubnets.length)].concat(
-            toFormSelectOptions(machineSubnets),
-          );
-
-    let currentDisplayValue = itemsSubnets[0].label; // The placeholder is the fallback
-    if (field.value) {
-      const subnetItem = itemsSubnets.find((item) => item.value === field.value);
-      if (subnetItem) {
-        currentDisplayValue = subnetItem.label;
-      }
-    } else if (machineSubnets.length === 1) {
-      // When there is only one subnet, it's selected by default. We skip the placeholder at index 0.
-      currentDisplayValue = itemsSubnets[1].label;
-    }
-
-    return { itemsSubnets, currentDisplayValue: currentDisplayValue };
-  }, [machineSubnets, field.value]);
-
-  const dropdownItems = itemsSubnets.map(({ value, label, isDisabled }) => (
-    <DropdownItem key={value} id={value} isDisabled={isDisabled} value={value}>
-      {label}
-    </DropdownItem>
-  ));
-
-  const onSelect = (event?: React.MouseEvent<Element, MouseEvent>): void => {
-    setValue(event?.currentTarget.id);
-    setOpen(false);
-  };
-
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <MenuToggle
-      ref={toggleRef}
-      onClick={() => setOpen(!isOpen)}
-      isExpanded={isOpen}
-      isDisabled={isDisabled}
-      className="pf-v5-u-w-100"
-      id={fieldId}
-    >
-      {currentDisplayValue}
-    </MenuToggle>
-  );
-
-  return (
-    <Dropdown
-      {...field}
-      id={`${fieldId}-dropdown`}
-      onOpenChange={() => setOpen(!isOpen)}
-      onSelect={onSelect}
-      toggle={toggle}
-      isOpen={isOpen}
-    >
-      {dropdownItems}
-    </Dropdown>
-  );
-};

package/lib/ocm/components/clusterConfiguration/networkConfiguration/UserManagedNetworkingTextContent.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
-import { ExternalLink } from '../../../../common/components/ui';
-import { getOpenShiftNetworkingDocsLink } from '../../../../common/config/docs_links';
-
-export interface UserManagedNetworkingTextContentProps {
-  shouldDisplayLoadBalancersBullet?: boolean;
-}
-
-export const UserManagedNetworkingTextContent = ({
-  shouldDisplayLoadBalancersBullet = false,
-}: UserManagedNetworkingTextContentProps) => {
-  return (
-    <TextContent>
-      <Text component={'p'}>
-        Please refer to the{' '}
-        <ExternalLink href={getOpenShiftNetworkingDocsLink()}>
-          OpenShift networking documentation
-        </ExternalLink>{' '}
-        to configure your cluster's networking, including:{' '}
-      </Text>
-      <List>
-        <ListItem>DHCP or static IP Addresses</ListItem>
-        {shouldDisplayLoadBalancersBullet && <ListItem>Load balancers</ListItem>}
-        <ListItem>Network ports</ListItem>
-        <ListItem>DNS</ListItem>
-      </List>
-    </TextContent>
-  );
-};