@openshift-assisted/ui-lib 2.7.12-cim → 2.8.2-cim

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

@@ -0,0 +1,207 @@
+import React from 'react';
+import {
+  Divider,
+  ExpandableSection,
+  Grid,
+  GridItem,
+  gridSpans,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InfoCircleIcon,
+} from '@patternfly/react-icons';
+import {
+  global_success_color_100 as okColor,
+  global_info_color_100 as infoColor,
+  global_danger_color_100 as dangerColor,
+  global_warning_color_100 as warningColor,
+} from '@patternfly/react-tokens';
+
+import {
+  Cluster,
+  ClusterValidations,
+  DetailItem,
+  DetailList,
+  HostsValidations,
+  stringToJSON,
+} from '../../../../common';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
+import { useOpenshiftVersions } from '../../../hooks';
+import { wizardStepNames } from '../../clusterWizard/constants';
+import {
+  ClusterWizardStepsType,
+  wizardStepsValidationsMap,
+  allClusterWizardSoftValidationIds,
+} from '../../clusterWizard/wizardTransition';
+import { ClusterFeatureSupportLevelsDetailItem } from '../../featureSupportLevels';
+import {
+  SupportLevelMemo,
+  getSupportLevelInfo,
+} from '../../featureSupportLevels/ReviewClusterFeatureSupportLevels';
+
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ValidationsInfo as ClusterValidationsInfo } from '../../../../common/types/clusters';
+import { ValidationsInfo as HostValidationsInfo } from '../../../../common/types/hosts';
+import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
+
+const PreflightChecksDetailExpanded = ({ cluster }: { cluster: Cluster }) => {
+  const clusterWizardContext = useClusterWizardContext();
+
+  return (
+    <DetailList>
+      <DetailItem
+        title="Cluster preflight checks"
+        value={
+          <ClusterValidations<ClusterWizardStepsType>
+            validationsInfo={cluster.validationsInfo}
+            setCurrentStepId={(stepId) => clusterWizardContext.setCurrentStepId(stepId)}
+            wizardStepNames={wizardStepNames}
+            wizardStepsValidationsMap={wizardStepsValidationsMap}
+          />
+        }
+        classNameValue={'pf-u-mb-md'}
+        testId="cluster-preflight-checks"
+      />
+      <DetailItem
+        title="Host preflight checks"
+        value={
+          <HostsValidations<ClusterWizardStepsType, typeof allClusterWizardSoftValidationIds>
+            hosts={cluster.hosts}
+            setCurrentStepId={(stepId) => clusterWizardContext.setCurrentStepId(stepId)}
+            wizardStepNames={wizardStepNames}
+            allClusterWizardSoftValidationIds={allClusterWizardSoftValidationIds}
+            wizardStepsValidationsMap={wizardStepsValidationsMap}
+          />
+        }
+        classNameValue={'pf-u-mb-md'}
+        testId="host-preflight-checks"
+      />
+      <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
+    </DetailList>
+  );
+};
+
+const PreflightCheckInfo = ({
+  title,
+  icon,
+  span = 3,
+  offset,
+  className,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  span?: gridSpans;
+  offset?: gridSpans;
+  className?: string;
+}) => {
+  return (
+    <GridItem span={span} offset={offset} className={className}>
+      <Split hasGutter>
+        <SplitItem>{icon}</SplitItem>
+        <SplitItem>
+          <b>{title}</b>
+        </SplitItem>
+      </Split>
+    </GridItem>
+  );
+};
+
+const getCheckIcon = (validationStatuses: string[]) => {
+  if (validationStatuses.includes('failure') || validationStatuses.includes('error')) {
+    return <ExclamationCircleIcon color={dangerColor.value} size="sm" />;
+  } else if (validationStatuses.includes('warning')) {
+    return <ExclamationTriangleIcon color={warningColor.value} />;
+  } else if (validationStatuses.includes('pending')) {
+    return <InfoCircleIcon size="sm" color={infoColor.value} />;
+  }
+  return <CheckCircleIcon color={okColor.value} />;
+};
+
+const PreflightChecksDetailCollapsed = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
+  const featureSupportLevelData = useNewFeatureSupportLevel();
+  const { isSupportedOpenShiftVersion } = useOpenshiftVersions();
+
+  const { isFullySupported } = React.useMemo<SupportLevelMemo>(
+    () => getSupportLevelInfo(cluster, featureSupportLevelData, isSupportedOpenShiftVersion, t),
+    [cluster, featureSupportLevelData, t, isSupportedOpenShiftVersion],
+  );
+
+  const supportLevelIcon = isFullySupported ? (
+    <CheckCircleIcon color={okColor.value} />
+  ) : (
+    <InfoCircleIcon size="sm" color={infoColor.value} />
+  );
+
+  const clusterValidations = React.useMemo(
+    () =>
+      Object.values(stringToJSON<ClusterValidationsInfo>(cluster.validationsInfo) || {})
+        .flat()
+        .map((val) => val?.status || '')
+        .filter(Boolean),
+    [cluster.validationsInfo],
+  );
+
+  const hostValidations = React.useMemo(() => {
+    const hostValidations = cluster.hosts
+      ?.map((host) => Object.values(stringToJSON<HostValidationsInfo>(host.validationsInfo) || {}))
+      .flat(2);
+
+    return (
+      hostValidations?.map((val) =>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        allClusterWizardSoftValidationIds.includes(val?.id || '') && val?.status !== 'success'
+          ? 'warning'
+          : val?.status || '',
+      ) || []
+    );
+  }, [cluster.hosts]);
+
+  return (
+    <>
+      <PreflightCheckInfo
+        title="Cluster preflight checks"
+        icon={getCheckIcon(clusterValidations)}
+      />
+      <PreflightCheckInfo title="Host preflight checks" icon={getCheckIcon(hostValidations)} />
+      <PreflightCheckInfo
+        title={`Cluster support level: ${isFullySupported ? 'Full' : 'Limited'}`}
+        icon={supportLevelIcon}
+        span={4}
+      />
+    </>
+  );
+};
+
+const ReviewPreflightChecks = ({ cluster }: { cluster: Cluster }) => {
+  const [isChecksExpanded, setChecksExpanded] = React.useState(false);
+  return (
+    <>
+      <Divider />
+
+      <ExpandableSection
+        toggleContent={
+          <Grid>
+            <GridItem span={2}>Preflight checks</GridItem>
+            {!isChecksExpanded && <PreflightChecksDetailCollapsed cluster={cluster} />}
+          </Grid>
+        }
+        isIndented
+        isExpanded={isChecksExpanded}
+        onToggle={() => setChecksExpanded(!isChecksExpanded)}
+        className={'review-expandable'}
+        data-testid="review-preflight-checks-main"
+      >
+        <PreflightChecksDetailExpanded cluster={cluster} />
+      </ExpandableSection>
+      <Divider />
+    </>
+  );
+};
+
+export default ReviewPreflightChecks;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ActionListItem, Button, ButtonVariant, Grid, GridItem } from '@patternfly/react-core';
+import { Cluster, ClusterWizardStepHeader, useAlerts, ClusterWizardStep } from '../../../../common';
+import { useClusterWizardContext } from '../../clusterWizard/ClusterWizardContext';
+import { getApiErrorMessage, handleApiError } from '../../../api';
+import { updateCluster } from '../../../reducers/clusters';
+import ClusterWizardFooter from '../../clusterWizard/ClusterWizardFooter';
+import ClusterWizardNavigation from '../../clusterWizard/ClusterWizardNavigation';
+import { ClustersService } from '../../../services';
+import { useStateSafely } from '../../../../common/hooks';
+import { selectCurrentClusterPermissionsState } from '../../../selectors';
+import ReviewPreflightChecks from './ReviewPreflightChecks';
+import ReviewSummary from './ReviewSummary';
+import './ReviewCluster.css';
+
+const ReviewStep = ({ cluster }: { cluster: Cluster }) => {
+  const { addAlert } = useAlerts();
+  const clusterWizardContext = useClusterWizardContext();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const [isStartingInstallation, setIsStartingInstallation] = useStateSafely(false);
+  const dispatch = useDispatch();
+
+  const handleClusterInstall = async () => {
+    setIsStartingInstallation(true);
+    try {
+      const { data } = await ClustersService.install(cluster.id, cluster.tags);
+      dispatch(updateCluster(data));
+      setIsStartingInstallation(false);
+      // 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={isViewerMode || isStartingInstallation || cluster.status !== 'ready'}
+          >
+            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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+import {
+  Cluster,
+  DetailItem,
+  DetailList,
+  hasEnabledOperators,
+  isClusterPlatformTypeVM,
+  OPERATOR_NAME_CNV,
+  OPERATOR_NAME_LVM,
+  OPERATOR_NAME_ODF,
+  ReviewHostsInventory,
+  SupportedPlatformType,
+  RenderIf,
+} from '../../../../common';
+import {
+  ReviewClusterDetailTable,
+  ReviewNetworkingTable,
+  ReviewOperatorsTable,
+  TableSummaryExpandable,
+} from '.';
+import { ReviewCustomManifestsTable } from './ReviewCustomManifestsTable';
+import PlatformIntegrationNote from '../platformIntegration/PlatformIntegrationNote';
+import useClusterCustomManifests from '../../../hooks/useClusterCustomManifests';
+
+export const ReviewSummaryContent = ({ cluster }: { cluster: Cluster }) => {
+  const showOperatorsSummary =
+    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_CNV) ||
+    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_ODF) ||
+    hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_LVM);
+  const { customManifests } = useClusterCustomManifests(cluster.id, false);
+  return (
+    <>
+      <TableSummaryExpandable title={'Cluster details'} id={'cluster-details-expandable'}>
+        <ReviewClusterDetailTable cluster={cluster} />
+      </TableSummaryExpandable>
+
+      {showOperatorsSummary && (
+        <TableSummaryExpandable title={'Operators'} id={'operators-expandable'}>
+          <ReviewOperatorsTable cluster={cluster} />
+        </TableSummaryExpandable>
+      )}
+
+      <TableSummaryExpandable title={'Host inventory'} id={'host-inventory-expandable'}>
+        <>
+          <ReviewHostsInventory hosts={cluster.hosts} />
+          <RenderIf condition={isClusterPlatformTypeVM(cluster)}>
+            <DetailList>
+              <DetailItem
+                title={'Platform integration'}
+                value={
+                  <PlatformIntegrationNote
+                    platformType={cluster.platform?.type as SupportedPlatformType}
+                  />
+                }
+                testId="platform-integration-note"
+                classNameValue={'pf-u-mt-sm'}
+              />
+            </DetailList>
+          </RenderIf>
+        </>
+      </TableSummaryExpandable>
+
+      <TableSummaryExpandable title={'Networking'} id={'networking-expandable'}>
+        <ReviewNetworkingTable cluster={cluster} />
+      </TableSummaryExpandable>
+
+      {customManifests && customManifests.length > 0 && (
+        <TableSummaryExpandable title={'Custom manifests'} id={'custom-manifests-expandable'}>
+          <ReviewCustomManifestsTable manifests={customManifests} />
+        </TableSummaryExpandable>
+      )}
+    </>
+  );
+};
+
+const ReviewSummary = ({ cluster }: { cluster: Cluster }) => {
+  return (
+    <ExpandableSection
+      toggleText={'Cluster summary'}
+      className={'summary-expandable'}
+      isIndented
+      isExpanded
+    >
+      <ReviewSummaryContent cluster={cluster} />
+    </ExpandableSection>
+  );
+};
+
+export default ReviewSummary;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const TableSummaryExpandable = ({
+  title,
+  children,
+  id,
+}: {
+  title: string;
+  children?: React.ReactNode;
+  id?: string;
+}) => {
+  const [isExpanded, setExpanded] = React.useState(true);
+  return (
+    <ExpandableSection
+      toggleContent={<b>{title}</b>}
+      isExpanded={isExpanded}
+      onToggle={() => setExpanded(!isExpanded)}
+      isIndented
+      id={id ? id : title}
+    >
+      {children}
+      <br />
+    </ExpandableSection>
+  );
+};

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

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

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

@@ -0,0 +1,193 @@
+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', function (value: string) {
+    const context = this.options.context as Yup.TestContext & { values?: FormValues };
+    if (!context || !context.values) {
+      return this.createError({
+        message: 'Unexpected error: Yup test context should contain form values',
+      });
+    }
+
+    const values = uniqueStringArrayExtractor(context.values, this, value);
+
+    if (!values) {
+      return this.createError({
+        message: 'Unexpected error: Failed to get values to test uniqueness',
+      });
+    }
+    return values.filter((currentValue) => currentValue === value).length === 1;
+  });
+};
+
+const isValidAddress = (protocolVersion: ProtocolVersion, addressStr: string) => {
+  try {
+    const address =
+      protocolVersion === ProtocolVersion.ipv4
+        ? new Address4(addressStr)
+        : new Address6(addressStr);
+    // ip-address package treats cidr addresses as valid so need to verify it isn't a cidr
+    return !address.parsedSubnet;
+  } catch (e) {
+    return false;
+  }
+};
+
+const isReservedAddress = (ip: string, protocolVersion: ProtocolVersion) => {
+  try {
+    if (protocolVersion === ProtocolVersion.ipv4) {
+      return RESERVED_IPS.includes(ip);
+    } else {
+      return isReservedIpv6Address(new Address6(ip));
+    }
+  } 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`,
+    function (value: string) {
+      if (!value) {
+        return true;
+      }
+      return isValidAddress(protocolVersion, value);
+    },
+  );
+};
+
+export const getMultipleIpAddressValidationSchema = (protocolVersion: ProtocolVersion) => {
+  const protocolVersionLabel = protocolVersion === ProtocolVersion.ipv4 ? 'IPv4' : 'IPv6';
+  return Yup.string().test(
+    protocolVersion,
+    ({ value }) => {
+      const addresses = (value as string).split(',');
+      const invalidAddresses = addresses.filter(
+        (address) => !isValidAddress(protocolVersion, address),
+      );
+      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(',')}`;
+    },
+    function (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(protocolVersion, address));
+    },
+  );
+};
+
+export const isReservedIpv6Address = (ipv6Address: Address6) => {
+  return ipv6Address.isLoopback() || ipv6Address.isMulticast();
+};
+
+export const isNotReservedHostIPAddress = (
+  protocolVersion: ProtocolVersion,
+  isDnsAddress = false,
+) => {
+  const textForAddress = isDnsAddress ? 'a DNS' : 'an interface';
+  return Yup.string().test(
+    'is-not-reserved-address',
+    ({ value }) => {
+      const addresses = (value as string).split(',');
+      if (addresses.length === 1) {
+        return `Provided IP address is not a correct address for ${textForAddress}.`;
+      }
+
+      const reservedAddresses = addresses.filter((address) => {
+        return isReservedAddress(address, protocolVersion);
+      });
+      return `Provided IP addresses ${reservedAddresses.join(
+        ', ',
+      )} are not correct addresses for ${textForAddress}.`;
+    },
+    function (value) {
+      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 getIpAddressInSubnetValidationSchema = (
+  protocolVersion: ProtocolVersion,
+  subnet: string,
+) => {
+  return Yup.string().test(
+    'is-in-subnet',
+    `IP Address is outside of the machine network ${subnet}`,
+    function (value: string) {
+      if (!value) {
+        return true;
+      }
+      const ipValidationSchema = getIpAddressValidationSchema(protocolVersion);
+      try {
+        ipValidationSchema.validateSync(value);
+      } catch (err) {
+        const error = err as { message: string };
+        return this.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) => {
+      const subnetAddr = getAddressObject(subnet, protocolVersion);
+      if (!subnetAddr) {
+        return false;
+      } 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

@@ -0,0 +1,72 @@
+import {
+  Flex,
+  FlexItem,
+  Label,
+  StackItem,
+  TextContent,
+  TextVariants,
+  Text,
+} from '@patternfly/react-core';
+import { InfoCircleIcon } from '@patternfly/react-icons';
+import React from 'react';
+
+export type HostSummaryProps = {
+  title: string;
+  macAddress: string;
+  mappingValue: string;
+  numInterfaces: number;
+  hostIdx: number;
+  hasError: boolean;
+};
+
+const HostSummary: React.FC<HostSummaryProps> = ({
+  title,
+  macAddress,
+  mappingValue,
+  numInterfaces,
+  hasError,
+  hostIdx,
+}) => {
+  return (
+    <>
+      <StackItem data-testid={`collapsed-host-${hostIdx}`}>
+        <Flex>
+          <FlexItem>
+            <TextContent>
+              <Text component={TextVariants.small}>{title}</Text>
+            </TextContent>
+          </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"
+                >{`${macAddress} -> ${mappingValue}`}</Label>{' '}
+              </FlexItem>
+              {numInterfaces > 1 && (
+                <FlexItem>
+                  <Label variant="outline" data-testid="remaining-mapping-label">{`${
+                    numInterfaces - 1
+                  } left`}</Label>
+                </FlexItem>
+              )}
+            </>
+          )}
+        </Flex>
+      </StackItem>
+    </>
+  );
+};
+
+export default HostSummary;