@openshift-assisted/ui-lib 2.56.0 → 2.56.2

package/lib/ocm/components/wizard/steps/disconnected/OptionalConfigurationsStep.tsx

@@ -1,48 +1,82 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { Formik, useFormikContext } from 'formik';
-import { AlertVariant } from '@patternfly/react-core';
-import { Form, Grid, GridItem, Content } from '@patternfly/react-core';
-import { ImageType } from '@openshift-assisted/types/assisted-installer-service';
+import { Alert, AlertVariant, Form, Grid, GridItem, Content } from '@patternfly/react-core';
+import {
+  InfraEnv,
+  InfraEnvUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
 import {
   ClusterWizardStep,
   WithErrorBoundary,
   UploadSSH,
-  isInOcm,
-  PullSecret,
   useAlerts,
   sshPublicKeyValidationSchema,
-  pullSecretValidationSchema,
   InfraEnvsAPI,
-  ClustersAPI,
   handleApiError,
   getApiErrorMessage,
   useTranslation,
+  InputField,
+  ipValidationSchema,
+  getFormikErrorFields,
+  httpProxyValidationSchema,
+  httpsProxyValidationSchema,
+  noProxyValidationSchema,
+  ntpSourceValidationSchema,
+  ProxyFields,
+  NtpSourcesFields,
 } from '../../../../../common';
-import { usePullSecret } from '../../../../hooks';
 import { useClusterWizardContext } from '../../clusterWizardContext';
 import { ClusterWizardNavigation, ClusterWizardFooter } from '../../wizardComponents';
-import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
-
-const DISCONNECTED_IMAGE_TYPE: ImageType = 'disconnected-iso';
-const DISCONNECTED_CLUSTER_NAME = 'disconnected-cluster';
+import { getDummyInfraEnvField } from '../staticIp/data/dummyData';
+import {
+  canonicalizeIp,
+  getHostIpsFromInfraEnv,
+  getStaticNetworkConfig,
+} from '../staticIp/data/fromInfraEnv';
 
 type OptionalConfigurationsValues = {
   sshPublicKey: string;
-  pullSecret: string;
+  rendezvousIp: string;
+  enableProxy: boolean;
+  httpProxy: string;
+  httpsProxy: string;
+  noProxy: string;
+  enableNtpSources: boolean;
+  ntpSourcesList: string;
 };
 
 type OptionalConfigurationsFormProps = {
-  defaultPullSecret?: string;
   isSubmitting: boolean;
 };
 
+const isRendezvousIpInStaticHostList = (
+  rendezvousIp: string | undefined,
+  infraEnv: InfraEnv | undefined,
+): boolean => {
+  if (!rendezvousIp?.trim()) {
+    return true;
+  }
+  const staticHostIps = getHostIpsFromInfraEnv(infraEnv);
+  if (!staticHostIps.length) {
+    return true;
+  }
+  const canonicalRendezvousIp = canonicalizeIp(rendezvousIp.trim());
+  return staticHostIps.some((ip) => canonicalizeIp(ip) === canonicalRendezvousIp);
+};
+
 const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
-  defaultPullSecret,
   isSubmitting,
 }) => {
-  const { moveBack } = useClusterWizardContext();
-  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+  const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
+  const { isValid, submitForm, errors, touched, values } =
+    useFormikContext<OptionalConfigurationsValues>();
+  const errorFields = getFormikErrorFields(errors, touched);
+
+  const showRendezvousIpMismatchWarning =
+    !!disconnectedInfraEnv?.staticNetworkConfig &&
+    !!values.rendezvousIp.trim() &&
+    !isRendezvousIpInStaticHostList(values.rendezvousIp, disconnectedInfraEnv);
 
   return (
     <ClusterWizardStep
@@ -53,6 +87,7 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
           onBack={moveBack}
           isSubmitting={isSubmitting}
           isNextDisabled={!isValid}
+          errorFields={errorFields}
         />
       }
     >
@@ -63,8 +98,25 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
           </GridItem>
           <GridItem>
             <Form id="wizard-cluster-optional-config__form">
+              <InputField
+                label="Rendezvous IP"
+                name="rendezvousIp"
+                helperText="The IP address that hosts will use to communicate with the bootstrap node during installation."
+                maxLength={45}
+              />
+              {showRendezvousIpMismatchWarning && (
+                <Alert
+                  isInline
+                  variant="warning"
+                  title="Rendezvous IP does not match a configured static IP"
+                >
+                  The rendezvous IP does not match any of the configured static IP addresses. The
+                  installation may fail if the rendezvous IP is unreachable.
+                </Alert>
+              )}
               <UploadSSH />
-              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+              <ProxyFields />
+              <NtpSourcesFields />
             </Form>
           </GridItem>
         </Grid>
@@ -73,31 +125,76 @@ const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
   );
 };
 
+const getStaticNetworkConfigUpdate = (infraEnv: InfraEnv) => {
+  if (!infraEnv.staticNetworkConfig) {
+    return [];
+  }
+  return getStaticNetworkConfig(infraEnv) ?? getDummyInfraEnvField();
+};
+
+const buildInfraEnvUpdateParams = (
+  values: OptionalConfigurationsValues,
+  disconnectedInfraEnv: InfraEnv,
+): InfraEnvUpdateParams => ({
+  sshAuthorizedKey: values.sshPublicKey,
+  rendezvousIp: values.rendezvousIp,
+  staticNetworkConfig: getStaticNetworkConfigUpdate(disconnectedInfraEnv),
+  proxy: {
+    httpProxy: values.httpProxy,
+    httpsProxy: values.httpsProxy,
+    noProxy: values.noProxy,
+  },
+  ntpSources: values.enableNtpSources ? values.ntpSourcesList : '',
+});
+
 export const OptionalConfigurationsStep = () => {
   const { t } = useTranslation();
-  const {
-    moveNext,
-    disconnectedCluster,
-    setDisconnectedCluster,
-    disconnectedInfraEnv,
-    setDisconnectedInfraEnv,
-  } = useClusterWizardContext();
+  const { moveNext, disconnectedInfraEnv, setDisconnectedInfraEnv } = useClusterWizardContext();
   const { addAlert, clearAlerts } = useAlerts();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const defaultPullSecret = usePullSecret();
 
   const validationSchema = React.useMemo(
     () =>
-      Yup.object({
-        sshPublicKey: sshPublicKeyValidationSchema(t),
-        pullSecret: isInOcm ? Yup.string() : pullSecretValidationSchema(t),
-      }),
+      Yup.lazy((values: OptionalConfigurationsValues) =>
+        Yup.object({
+          sshPublicKey: sshPublicKeyValidationSchema(t),
+          rendezvousIp: Yup.string()
+            .max(45, 'IP address must be at most 45 characters')
+            .concat(ipValidationSchema(t)),
+          httpProxy: httpProxyValidationSchema({
+            values,
+            pairValueName: 'httpsProxy',
+            allowEmpty: true,
+            t,
+          }),
+          httpsProxy: httpsProxyValidationSchema({
+            values,
+            pairValueName: 'httpProxy',
+            allowEmpty: true,
+            t,
+          }),
+          noProxy: noProxyValidationSchema(t),
+          ntpSourcesList: values.enableNtpSources
+            ? ntpSourceValidationSchema(t, false)
+            : ntpSourceValidationSchema(t),
+        }),
+      ),
     [t],
   );
 
   const initialValues: OptionalConfigurationsValues = {
     sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
-    pullSecret: defaultPullSecret ?? '',
+    rendezvousIp: disconnectedInfraEnv?.rendezvousIp ?? '',
+    enableProxy: !!(
+      disconnectedInfraEnv?.proxy?.httpProxy ||
+      disconnectedInfraEnv?.proxy?.httpsProxy ||
+      disconnectedInfraEnv?.proxy?.noProxy
+    ),
+    httpProxy: disconnectedInfraEnv?.proxy?.httpProxy ?? '',
+    httpsProxy: disconnectedInfraEnv?.proxy?.httpsProxy ?? '',
+    noProxy: disconnectedInfraEnv?.proxy?.noProxy ?? '',
+    enableNtpSources: !!disconnectedInfraEnv?.ntpSources?.trim(),
+    ntpSourcesList: disconnectedInfraEnv?.ntpSources ?? '',
   };
 
   const handleNext = React.useCallback(
@@ -105,31 +202,15 @@ export const OptionalConfigurationsStep = () => {
       clearAlerts();
       setIsSubmitting(true);
       try {
-        const pullSecretToUse = isInOcm ? defaultPullSecret ?? '' : values.pullSecret;
-
-        if (disconnectedCluster?.id && disconnectedInfraEnv?.id) {
-          const { data: updatedInfraEnv } = await InfraEnvsAPI.update(disconnectedInfraEnv.id, {
-            sshAuthorizedKey: values.sshPublicKey,
-          });
-          setDisconnectedInfraEnv(updatedInfraEnv);
-        } else {
-          const { data: cluster } = await ClustersAPI.registerDisconnected({
-            name: DISCONNECTED_CLUSTER_NAME,
-            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
-          });
-          setDisconnectedCluster(cluster);
-
-          const { data: createdInfraEnv } = await InfraEnvsAPI.register({
-            name: 'disconnected-infra-env',
-            pullSecret: pullSecretToUse,
-            clusterId: cluster.id,
-            imageType: DISCONNECTED_IMAGE_TYPE,
-            openshiftVersion: DISCONNECTED_OPENSHIFT_VERSION,
-            sshAuthorizedKey: values.sshPublicKey || undefined,
-          });
-          setDisconnectedInfraEnv(createdInfraEnv);
+        if (!disconnectedInfraEnv?.id) {
+          throw new Error('No disconnected infraEnv available');
         }
 
+        const { data: updatedInfraEnv } = await InfraEnvsAPI.update(
+          disconnectedInfraEnv.id,
+          buildInfraEnvUpdateParams(values, disconnectedInfraEnv),
+        );
+        setDisconnectedInfraEnv(updatedInfraEnv);
         moveNext();
       } catch (error) {
         handleApiError(error, () => {
@@ -143,29 +224,16 @@ export const OptionalConfigurationsStep = () => {
         setIsSubmitting(false);
       }
     },
-    [
-      clearAlerts,
-      defaultPullSecret,
-      disconnectedCluster,
-      disconnectedInfraEnv,
-      setDisconnectedCluster,
-      setDisconnectedInfraEnv,
-      addAlert,
-      moveNext,
-    ],
+    [clearAlerts, disconnectedInfraEnv, setDisconnectedInfraEnv, addAlert, moveNext],
   );
 
   return (
     <Formik<OptionalConfigurationsValues>
       initialValues={initialValues}
-      enableReinitialize
       validationSchema={validationSchema}
       onSubmit={(values) => void handleNext(values)}
     >
-      <OptionalConfigurationsForm
-        defaultPullSecret={defaultPullSecret}
-        isSubmitting={isSubmitting}
-      />
+      <OptionalConfigurationsForm isSubmitting={isSubmitting} />
     </Formik>
   );
 };

package/lib/ocm/components/wizard/steps/disconnected/index.tsx

@@ -2,3 +2,4 @@ export * from './InstallDisconnectedSwitch';
 export * from './BasicStep';
 export * from './OptionalConfigurationsStep';
 export * from './DisconnectedReviewStep';
+export * from './DisconnectedStaticIp';

package/lib/ocm/components/wizard/steps/staticIp/StaticIp.tsx

@@ -25,7 +25,7 @@ const getInitialFormStateProps = () => {
   };
 };
 
-export const StaticIp: React.FC<StaticIpProps & { cluster: Cluster }> = ({
+export const StaticIp: React.FC<StaticIpProps & { cluster?: Cluster }> = ({
   cluster,
   infraEnv,
   updateInfraEnv,

package/lib/ocm/components/wizard/steps/staticIp/commonValidationSchemas.tsx

@@ -2,7 +2,8 @@ import * as Yup from 'yup';
 import { isInSubnet } from 'is-in-subnet';
 import { Address4, Address6 } from 'ip-address';
 import { getDuplicates } from '../../../../../common';
-import { getAddressObject, ProtocolVersion } from './data';
+import { ProtocolVersion } from './data/dataTypes';
+import { getAddressObject } from './data/protocolVersion';
 
 const RESERVED_IPS = ['127.0.0.0', '127.0.0.1', '0.0.0.0', '255.255.255.255'];
 
@@ -41,7 +42,7 @@ export const getUniqueValidationSchema = <FormValues,>(
   );
 };
 
-const isValidIPv4Address = (addressStr: string) => {
+export 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()
@@ -52,7 +53,7 @@ const isValidIPv4Address = (addressStr: string) => {
   }
 };
 
-const isValidIPv6Address = (addressStr: string) => {
+export 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()
@@ -87,6 +88,44 @@ const isReservedAddress = (addressStr: string, protocolVersion?: ProtocolVersion
   }
 };
 
+export const detectProtocolVersionFromIp = (ip?: string): ProtocolVersion | undefined => {
+  if (!ip) {
+    return undefined;
+  }
+  if (isValidIPv4Address(ip)) {
+    return ProtocolVersion.ipv4;
+  }
+  if (isValidIPv6Address(ip)) {
+    return ProtocolVersion.ipv6;
+  }
+  return undefined;
+};
+
+export const getFamilyAgnosticIpValidationSchema = () => {
+  return Yup.string().test(
+    'ipv4-or-ipv6',
+    'Value ${value} is not a valid IPv4 or IPv6 address',
+    (value?: string) => {
+      if (!value) {
+        return true;
+      }
+      return isValidIPv4Address(value) || isValidIPv6Address(value);
+    },
+  );
+};
+
+export const getDnsMatchingSubnetFamilyValidationSchema = (subnetIp: string) => {
+  const family = detectProtocolVersionFromIp(subnetIp);
+  if (!family) {
+    return getFamilyAgnosticIpValidationSchema()
+      .required('A value is required')
+      .concat(isNotReservedHostDNSAddress());
+  }
+  return getMultipleIpAddressValidationSchema(family)
+    .required('A value is required')
+    .concat(isNotReservedHostDNSAddress(family));
+};
+
 export const getIpAddressValidationSchema = (protocolVersion: ProtocolVersion) => {
   const protocolVersionLabel = protocolVersion === ProtocolVersion.ipv4 ? 'IPv4' : 'IPv6';
   return Yup.string().test(

package/lib/ocm/components/wizard/steps/staticIp/components/FormViewNetworkWide/FormViewNetworkWide.tsx

@@ -5,15 +5,20 @@ import {
   getFormViewNetworkWideValues,
   getEmptyNetworkWideConfigurations,
   networkWideToInfraEnvField,
+  disconnectedNetworkWideToInfraEnvField,
+  getDisconnectedFormViewNetworkWideValues,
   FormViewHost,
   FormViewNetworkWideValues,
 } from '../../data';
 import { StaticIpForm } from '../StaticIpForm';
 import { StaticIpFormProps, StaticIpViewProps } from '../propTypes';
 import { networkWideValidationSchema } from './formViewNetworkWideValidationSchema';
+import { disconnectedNetworkWideValidationSchema } from './disconnectedNetworkWideValidationSchema';
 import { FormViewNetworkWideFields } from './FormViewNetworkWideFields';
+import { useClusterWizardContext } from '../../../../clusterWizardContext';
 
 export const FormViewNetworkWide: React.FC<StaticIpViewProps> = ({ infraEnv, ...props }) => {
+  const { installDisconnected } = useClusterWizardContext();
   const [formProps, setFormProps] = React.useState<StaticIpFormProps<FormViewNetworkWideValues>>();
   const [hosts, setHosts] = React.useState<FormViewHost[]>();
 
@@ -26,16 +31,22 @@ export const FormViewNetworkWide: React.FC<StaticIpViewProps> = ({ infraEnv, ...
     setFormProps({
       infraEnv,
       ...props,
-      validationSchema: networkWideValidationSchema,
+      validationSchema: installDisconnected
+        ? disconnectedNetworkWideValidationSchema
+        : networkWideValidationSchema,
       getInitialValues: (infraEnv: InfraEnv) => {
-        return getFormViewNetworkWideValues(infraEnv);
+        return installDisconnected
+          ? getDisconnectedFormViewNetworkWideValues(infraEnv)
+          : getFormViewNetworkWideValues(infraEnv);
       },
       getUpdateParams: (currentInfraEnv: InfraEnv, values: FormViewNetworkWideValues) =>
-        networkWideToInfraEnvField(currentInfraEnv, values),
+        installDisconnected
+          ? disconnectedNetworkWideToInfraEnvField(currentInfraEnv, values)
+          : networkWideToInfraEnvField(currentInfraEnv, values),
       getEmptyValues: () => getEmptyNetworkWideConfigurations(),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [installDisconnected]);
   if (!hosts || !formProps) {
     return null;
   }