@openshift-assisted/ui-lib 2.55.1 → 2.56.0

package/lib/ocm/components/clusterConfiguration/review/ReviewStep.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActionListItem, Button, ButtonVariant, Grid, GridItem } from '@patternfly/react-core';
-import { ClusterWizardStepHeader, useAlerts, ClusterWizardStep } from '../../../../common';
-import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
-import { getApiErrorMessage, handleApiError } from '../../../../common/api';
-import { updateCluster } from '../../../store/slices/current-cluster/slice';
-import ClusterWizardFooter from '../../clusterWizard/ClusterWizardFooter';
-import ClusterWizardNavigation from '../../clusterWizard/ClusterWizardNavigation';
-import { ClustersService } from '../../../services';
-import { useStateSafely } from '../../../../common/hooks';
-import { selectCurrentClusterPermissionsState } from '../../../store/slices/current-cluster/selectors';
-import ReviewPreflightChecks from './ReviewPreflightChecks';
-import ReviewSummary from './ReviewSummary';
-import './ReviewCluster.css';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
-  const { addAlert, clearAlerts } = useAlerts();
-  const clusterWizardContext = useClusterWizardContext();
-  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
-  const [isStartingInstallation, setIsStartingInstallation] = useStateSafely(false);
-  const dispatch = useDispatch();
-  const [disableInstallButton, setDisableInstallButton] = React.useState<boolean>();
-
-  React.useEffect(() => {
-    const manifestFail =
-      cluster['last-installation-preparation']?.status === 'failed' &&
-      cluster['last-installation-preparation'].reason?.includes('manifest');
-    const userDidntAddressManifestIssue =
-      clusterWizardContext.uiSettings?.customManifestsUpdated !== true;
-    setDisableInstallButton(
-      (manifestFail && userDidntAddressManifestIssue) ||
-        isViewerMode ||
-        isStartingInstallation ||
-        cluster.status !== 'ready',
-    );
-  }, [cluster, isStartingInstallation, isViewerMode, clusterWizardContext]);
-
-  const handleClusterInstall = async () => {
-    clearAlerts();
-    setIsStartingInstallation(true);
-    try {
-      const { data } = await ClustersService.install(cluster.id, cluster.tags);
-      dispatch(updateCluster(data));
-      setIsStartingInstallation(false);
-
-      if (clusterWizardContext.uiSettings?.customManifestsUpdated) {
-        void clusterWizardContext.updateUISettings({ customManifestsUpdated: undefined });
-      }
-      // If successful, backend changes cluster state which leads to unmounting the Wizard
-      // If validation fails, the wizard stays on this step and shows alerts
-    } catch (e) {
-      handleApiError(e, () =>
-        addAlert({
-          title: 'Failed to start cluster installation',
-          message: getApiErrorMessage(e),
-        }),
-      );
-      setIsStartingInstallation(false);
-    }
-  };
-
-  const footer = (
-    <ClusterWizardFooter
-      cluster={cluster}
-      onBack={() => clusterWizardContext.moveBack()}
-      isSubmitting={isStartingInstallation}
-      submittingText="Starting installation..."
-      additionalActions={
-        <ActionListItem>
-          <Button
-            variant={ButtonVariant.primary}
-            name="install"
-            data-testid="button-install-cluster"
-            onClick={() => void handleClusterInstall()}
-            isDisabled={disableInstallButton}
-          >
-            Install cluster
-          </Button>
-        </ActionListItem>
-      }
-    />
-  );
-
-  return (
-    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
-      <Grid hasGutter>
-        <GridItem>
-          <ClusterWizardStepHeader>Review and create</ClusterWizardStepHeader>
-        </GridItem>
-        <ReviewPreflightChecks cluster={cluster} />
-        <ReviewSummary cluster={cluster} />
-      </Grid>
-    </ClusterWizardStep>
-  );
-};
-
-export default ReviewStep;

package/lib/ocm/components/clusterConfiguration/review/ReviewSummary.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-import {
-  DetailItem,
-  DetailList,
-  isClusterPlatformTypeVM,
-  ReviewHostsInventory,
-  SupportedPlatformType,
-  RenderIf,
-} from '../../../../common';
-import {
-  ReviewClusterDetailTable,
-  ReviewNetworkingTable,
-  ReviewOperatorsTable,
-  ReviewPlatformTable,
-  TableSummaryExpandable,
-} from '.';
-import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
-import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
-import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { userProvidedManifests } from '../manifestsConfiguration/components/utils';
-
-export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
-  const { customManifests } = useClusterCustomManifests(cluster.id, false);
-  const manifestsForReview = userProvidedManifests(customManifests);
-  const showCustomManifests = manifestsForReview.length > 0;
-
-  return (
-    <>
-      <TableSummaryExpandable title={'Cluster details'} id={'cluster-details-expandable'}>
-        <ReviewClusterDetailTable cluster={cluster} />
-      </TableSummaryExpandable>
-
-      <ReviewOperatorsTable cluster={cluster} />
-
-      <TableSummaryExpandable title={'Host inventory'} id={'host-inventory-expandable'}>
-        <>
-          <ReviewHostsInventory hosts={cluster.hosts} />
-          <RenderIf condition={isClusterPlatformTypeVM(cluster)}>
-            <DetailList>
-              <DetailItem
-                title={'Platform integration'}
-                value={
-                  <>
-                    <ReviewPlatformTable cluster={cluster} />
-                    <PlatformIntegrationNote
-                      platformType={cluster.platform?.type as SupportedPlatformType}
-                    />
-                  </>
-                }
-                testId="platform-integration-note"
-                classNameValue={'pf-v6-u-mt-sm'}
-              />
-            </DetailList>
-          </RenderIf>
-        </>
-      </TableSummaryExpandable>
-
-      <TableSummaryExpandable title={'Networking'} id={'networking-expandable'}>
-        <ReviewNetworkingTable cluster={cluster} />
-      </TableSummaryExpandable>
-
-      {showCustomManifests && (
-        <TableSummaryExpandable title={'Custom manifests'} id={'custom-manifests-expandable'}>
-          <ReviewCustomManifestsTable manifests={manifestsForReview} />
-        </TableSummaryExpandable>
-      )}
-    </>
-  );
-};
-
-const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
-  return (
-    <ExpandableSection
-      toggleContent={'Cluster summary'}
-      id={'summary-expandable'}
-      isExpanded={true}
-      isIndented
-    >
-      <ReviewSummaryContent cluster={cluster} />
-    </ExpandableSection>
-  );
-};
-
-export default ReviewSummary;

package/lib/ocm/components/clusterConfiguration/review/index.tsx

@@ -1,5 +0,0 @@
-export * from './ReviewClusterDetailTable';
-export * from './ReviewOperatorsTable';
-export * from './ReviewNetworkingTable';
-export * from './TableSummaryExpandable';
-export * from './ReviewPlatformTable';

package/lib/ocm/components/clusterConfiguration/review/utils.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { isDualStack } from '../../../../common';
-import { Cluster, DiskEncryption } from '@openshift-assisted/types/assisted-installer-service';
-
-export const getManagementType = ({ userManagedNetworking }: Cluster): string =>
-  userManagedNetworking ? 'User-managed networking' : 'Cluster-managed networking';
-
-export const getStackTypeLabel = (cluster: Cluster, isSingleClusterFeature = false): string => {
-  if (isDualStack(cluster)) return 'Dual-stack';
-  if (isSingleClusterFeature) return 'Single stack';
-  return 'IPv4';
-};
-
-export const getDiskEncryptionEnabledOnStatus = (diskEncryption: DiskEncryption['enableOn']) => {
-  let diskEncryptionType = null;
-  switch (diskEncryption) {
-    case undefined:
-    case 'none':
-      break;
-    case 'all':
-      diskEncryptionType = (
-        <>
-          Enabled on control plane nodes
-          <br />
-          Enabled on workers
-        </>
-      );
-      break;
-    case 'masters':
-      diskEncryptionType = <>Enabled on control plane nodes</>;
-      break;
-    case 'workers':
-      diskEncryptionType = <>Enabled on workers</>;
-      break;
-    case 'arbiters':
-      diskEncryptionType = <>Enabled on arbiters</>;
-      break;
-    case 'masters,arbiters':
-      diskEncryptionType = <>Enabled on control plane nodes and arbiters</>;
-      break;
-    case 'masters,workers':
-      diskEncryptionType = <>Enabled on control plane nodes and workers</>;
-      break;
-    case 'arbiters,workers':
-      diskEncryptionType = <>Enabled on arbiters and workers</>;
-      break;
-    case 'masters,arbiters,workers':
-      diskEncryptionType = (
-        <>
-          Enabled on control plane nodes
-          <br />
-          Enabled on arbiters
-          <br />
-          Enabled on workers
-        </>
-      );
-      break;
-    default: {
-      const _exhaustive: never = diskEncryption;
-      return _exhaustive;
-    }
-  }
-  return diskEncryptionType;
-};

package/lib/ocm/components/clusterConfiguration/staticIp/commonValidationSchemas.tsx

@@ -1,249 +0,0 @@
-import { Address4, Address6 } from 'ip-address';
-import { isInSubnet } from 'is-in-subnet';
-import * as Yup from 'yup';
-import { getAddressObject } from './data/protocolVersion';
-import { ProtocolVersion } from './data/dataTypes';
-import { getDuplicates } from '../../../../common';
-
-const RESERVED_IPS = ['127.0.0.0', '127.0.0.1', '0.0.0.0', '255.255.255.255'];
-
-export type UniqueStringArrayExtractor<FormValues> = (
-  values: FormValues,
-  context: Yup.TestContext,
-  value: string,
-) => string[] | undefined;
-
-export const getUniqueValidationSchema = <FormValues,>(
-  uniqueStringArrayExtractor: UniqueStringArrayExtractor<FormValues>,
-) => {
-  return Yup.string().test(
-    'unique',
-    'Value must be unique',
-    (value, testContext: Yup.TestContext) => {
-      const context = testContext.options.context as Yup.TestContext & { values?: FormValues };
-      if (!context || !context.values) {
-        return testContext.createError({
-          message: 'Unexpected error: Yup test context should contain form values',
-        });
-      }
-
-      const values = uniqueStringArrayExtractor(context.values, testContext, value as string);
-
-      if (!values) {
-        return testContext.createError({
-          message: 'Unexpected error: Failed to get values to test uniqueness',
-        });
-      }
-      return (
-        values.filter((currentValue) => currentValue.toLowerCase() === value?.toLowerCase())
-          .length === 1
-      );
-    },
-  );
-};
-
-const isValidIPv4Address = (addressStr: string) => {
-  try {
-    // ip-address package treats cidr addresses as valid so need to verify it isn't a cidr
-    // Can't use Address4.isValid()
-    const address = new Address4(addressStr);
-    return !address.parsedSubnet;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isValidIPv6Address = (addressStr: string) => {
-  try {
-    // ip-address package treats cidr addresses as valid so need to verify it isn't a cidr
-    // Can't use Address6.isValid()
-    const address = new Address6(addressStr);
-    return !address.parsedSubnet;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isValidAddress = (addressStr: string, protocolVersion?: ProtocolVersion) => {
-  if (protocolVersion === undefined) {
-    return isValidIPv4Address(addressStr) || isValidIPv6Address(addressStr);
-  }
-  return protocolVersion === ProtocolVersion.ipv4
-    ? isValidIPv4Address(addressStr)
-    : isValidIPv6Address(addressStr);
-};
-
-const isReservedAddress = (addressStr: string, protocolVersion?: ProtocolVersion) => {
-  try {
-    if (
-      (protocolVersion === undefined && isValidIPv4Address(addressStr)) ||
-      protocolVersion === ProtocolVersion.ipv4
-    ) {
-      return RESERVED_IPS.includes(addressStr);
-    } else {
-      return isReservedIpv6Address(new Address6(addressStr));
-    }
-  } catch (e) {
-    return false;
-  }
-};
-
-export const getIpAddressValidationSchema = (protocolVersion: ProtocolVersion) => {
-  const protocolVersionLabel = protocolVersion === ProtocolVersion.ipv4 ? 'IPv4' : 'IPv6';
-  return Yup.string().test(
-    protocolVersion,
-    `Value \${value} is not a valid ${protocolVersionLabel} address`,
-    (value?: string) => {
-      if (!value) {
-        return true;
-      }
-      return isValidAddress(value, protocolVersion);
-    },
-  );
-};
-
-export const getMultipleIpAddressValidationSchema = (protocolVersion?: ProtocolVersion) => {
-  const validationId = protocolVersion === undefined ? 'is-ipv4-or-ipv6-csv' : protocolVersion;
-  const protocolVersionLabel =
-    protocolVersion === undefined
-      ? 'IPv4 or IPv6'
-      : protocolVersion === ProtocolVersion.ipv4
-      ? 'IPv4'
-      : 'IPv6';
-  return Yup.string().test(
-    validationId,
-    ({ value }) => {
-      const addresses = (value as string).split(',');
-      const invalidAddresses = addresses.filter(
-        (address) => !isValidAddress(address, protocolVersion),
-      );
-      const displayValue = invalidAddresses.join(', ');
-      if (invalidAddresses.length === 1) {
-        return `Value ${displayValue} is not a valid ${protocolVersionLabel} address`;
-      } else if (invalidAddresses.length > 1) {
-        return `The values ${displayValue} are not valid ${protocolVersionLabel} addresses`;
-      }
-      // If all addresses are valid, then there must be duplicated addresses
-      const duplicates = getDuplicates(addresses);
-      return `The following IP addresses are duplicated: ${duplicates.join(',')}`;
-    },
-    (value?: string) => {
-      if (!value) {
-        return true;
-      }
-      const addresses: string[] = value.split(',');
-      const duplicates = getDuplicates(addresses);
-      if (duplicates.length !== 0) {
-        return false;
-      }
-
-      return addresses.every((address) => isValidAddress(address, protocolVersion));
-    },
-  );
-};
-
-export const isReservedIpv6Address = (ipv6Address: Address6) => {
-  return ipv6Address.isLoopback() || ipv6Address.isMulticast();
-};
-
-function areNotReservedAdresses(value: unknown, protocolVersion?: ProtocolVersion): boolean {
-  if (!value) {
-    return true;
-  }
-  // The field may admit multiple values as a comma-separated string
-  const addresses = (value as string).split(',');
-  return addresses.every((address) => !isReservedAddress(address, protocolVersion));
-}
-
-export const isNotReservedHostIPAddress = (protocolVersion?: ProtocolVersion) => {
-  return Yup.string().test(
-    'is-not-reserved-ip-address',
-    ({ value }) => {
-      const addresses = (value as string).split(',');
-      if (addresses.length === 1) {
-        return `The provided IP address is not a correct address for an interface.`;
-      }
-
-      const reservedAddresses = addresses.filter((address) => {
-        return isReservedAddress(address, protocolVersion);
-      });
-      return `The provided IP addresses ${reservedAddresses.join(
-        ', ',
-      )} are not correct addresses for an interface.`;
-    },
-    (value) => areNotReservedAdresses(value, protocolVersion),
-  );
-};
-
-export const isNotReservedHostDNSAddress = (protocolVersion?: ProtocolVersion) => {
-  return Yup.string().test(
-    'is-not-reserved-dns-address',
-    ({ value }) => {
-      const addresses = (value as string).split(',');
-      if (addresses.length === 1) {
-        return `The provided IP address is not a valid DNS address.`;
-      }
-
-      const reservedAddresses = addresses.filter((address) => {
-        return isReservedAddress(address, protocolVersion);
-      });
-      return `The provided IP addresses ${reservedAddresses.join(
-        ', ',
-      )} are not valid DNS addresses.`;
-    },
-    (value) => areNotReservedAdresses(value, protocolVersion),
-  );
-};
-
-export const getIpAddressInSubnetValidationSchema = (
-  protocolVersion: ProtocolVersion,
-  subnet: string,
-) => {
-  return Yup.string().test(
-    'is-in-subnet',
-    `IP Address is outside of the subnet ${subnet}`,
-    (value, testContext: Yup.TestContext) => {
-      if (!value) {
-        return true;
-      }
-      const ipValidationSchema = getIpAddressValidationSchema(protocolVersion);
-      try {
-        ipValidationSchema.validateSync(value);
-      } catch (err) {
-        const error = err as { message: string };
-        return testContext.createError({ message: error.message });
-      }
-      try {
-        const inSubnet = isInSubnet(value, subnet);
-        return inSubnet;
-      } catch (err) {
-        //if isInSubnet fails it means the machine network cidr isn't valid and this validation is irrelevant
-        return true;
-      }
-    },
-  );
-};
-
-export const getIpIsNotNetworkOrBroadcastAddressSchema = (
-  protocolVersion: ProtocolVersion,
-  subnet: string,
-) => {
-  return Yup.string().test(
-    'is-not-network-or-broadcast',
-    `The IP address must not match the network or broadcast address`,
-    (value) => {
-      // Allow both addresses for IPv4 /31 subnets (RFC 3021)
-      if (protocolVersion === ProtocolVersion.ipv4 && subnet.endsWith('/31')) {
-        return true;
-      }
-      const subnetAddr = getAddressObject(subnet, protocolVersion);
-      if (!subnetAddr) {
-        return true;
-      } else {
-        const subnetStart = subnetAddr?.startAddress().correctForm();
-        const subnetEnd = subnetAddr?.endAddress().correctForm();
-        return !(value === subnetStart || value === subnetEnd);
-      }
-    },
-  );
-};

package/lib/ocm/components/clusterConfiguration/staticIp/components/CollapsedHost.tsx

@@ -1,83 +0,0 @@
-import { Flex, FlexItem, Label, StackItem, Content, ContentVariants } from '@patternfly/react-core';
-import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import React from 'react';
-
-export type HostSummaryProps = {
-  title: string;
-  macAddress: string;
-  mappingValue: string;
-  numInterfaces: number;
-  hostIdx: number;
-  hasError: boolean;
-  bondPrimaryInterface: string;
-  bondSecondaryInterface: string;
-};
-
-const getLabelCollapsedHost = (
-  macAddress: string,
-  mappingValue: string,
-  bondPrimaryInterface: string,
-  bondSecondaryInterface: string,
-) => {
-  if (bondPrimaryInterface !== '' && bondSecondaryInterface !== '') {
-    return `${bondPrimaryInterface}/${bondSecondaryInterface} -> ${mappingValue}`;
-  } else {
-    return `${macAddress} -> ${mappingValue}`;
-  }
-};
-
-const HostSummary: React.FC<HostSummaryProps> = ({
-  title,
-  macAddress,
-  mappingValue,
-  numInterfaces,
-  hasError,
-  hostIdx,
-  bondPrimaryInterface,
-  bondSecondaryInterface,
-}) => {
-  return (
-    <>
-      <StackItem data-testid={`collapsed-host-${hostIdx}`}>
-        <Flex>
-          <FlexItem>
-            <Content component={ContentVariants.small}>{title}</Content>
-          </FlexItem>
-          {hasError && (
-            <Label
-              variant="outline"
-              color="red"
-              icon={<InfoCircleIcon />}
-              data-testid="host-errors-label"
-            >
-              Missing Information
-            </Label>
-          )}
-          {!hasError && (
-            <>
-              <FlexItem>
-                <Label variant="outline" data-testid="first-mapping-label">
-                  {getLabelCollapsedHost(
-                    macAddress,
-                    mappingValue,
-                    bondPrimaryInterface,
-                    bondSecondaryInterface,
-                  )}
-                </Label>{' '}
-              </FlexItem>
-              {numInterfaces > 1 && (
-                <FlexItem>
-                  <Label variant="outline" data-testid="remaining-mapping-label">{`${
-                    numInterfaces - 1
-                  } left`}</Label>
-                </FlexItem>
-              )}
-            </>
-          )}
-        </Flex>
-      </StackItem>
-    </>
-  );
-};
-
-export default HostSummary;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsConfirmationModal.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
-
-import { useTranslation } from '../../../../../../common/hooks/use-translation-wrapper';
-
-type BondDeleteModalModalProps = {
-  isOpen: boolean;
-  onConfirm: VoidFunction;
-  onCancel: VoidFunction;
-};
-
-const BondDeleteModalModal = ({ isOpen, onConfirm, onCancel }: BondDeleteModalModalProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal
-      aria-label={t('ai:Remove bond dialog')}
-      isOpen={isOpen}
-      onClose={onCancel}
-      id="remove-bond-modal"
-      variant="medium"
-    >
-      <ModalHeader title={t('ai:Remove bond?')} titleIconVariant="warning" />
-      <ModalBody>
-        <Stack hasGutter>
-          <StackItem>{t('ai:The bond associated with the host will be removed.')}</StackItem>
-        </Stack>
-      </ModalBody>
-      <ModalFooter>
-        <Button onClick={onConfirm} variant={ButtonVariant.danger}>
-          {t('ai:Remove bond')}
-        </Button>
-        <Button onClick={onCancel} variant={ButtonVariant.secondary}>
-          {t('ai:Cancel')}
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export default BondDeleteModalModal;

package/lib/ocm/components/clusterConfiguration/staticIp/components/FormViewHosts/BondsSelect.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { SelectFieldProps } from '../../../../../../common/components/ui/formik/types';
-import { SelectField } from '../../../../../../common';
-
-type BondsSelectProps = {
-  onChange?: SelectFieldProps['onChange'];
-  name: string;
-};
-
-const bondsList = [
-  { value: 'balance-rr', label: 'Balance-rr (0)', default: false },
-  { value: 'active-backup', label: 'Active-Backup (1)', default: true },
-  { value: 'balance-xor', label: 'Balance-xor (2)', default: false },
-  { value: 'broadcase', label: 'Broadcase (3)', default: false },
-  { value: '802.3ad', label: '802.3ad (4)', default: false },
-  { value: 'balance-tlb', label: 'Balance-tlb (5)', default: false },
-  { value: 'balance-alb', label: 'Balance-alb (6)', default: false },
-];
-const BondsSelect: React.FC<BondsSelectProps> = ({ onChange, name }) => {
-  const selectOptions = bondsList.map((version) => ({
-    label: version.label,
-    value: version.value,
-  }));
-  return (
-    <SelectField
-      name={name}
-      label="Bond type"
-      options={selectOptions}
-      isRequired
-      onChange={onChange}
-    />
-  );
-};
-
-export default BondsSelect;