@openshift-assisted/ui-lib 2.48.6 → 2.49.0

package/lib/cim/components/modals/CimConfiguration/CimConfigurationFormFields.tsx

@@ -0,0 +1,259 @@
+import * as React from 'react';
+import { Trans } from 'react-i18next';
+import {
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  Icon,
+  InputGroup,
+  InputGroupItem,
+  InputGroupText,
+  Content,
+  ContentVariants,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { HelpIcon } from '@patternfly/react-icons/dist/js/icons/help-icon';
+
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { CheckboxField, InputField, PopoverIcon } from '../../../../common';
+import { CimConfigurationFormFieldsProps, CimConfigurationValues } from './types';
+import { useFormikContext } from 'formik';
+import { isIngressController } from './persist';
+
+export const CimConfigurationFormFields = ({
+  platform,
+  docConfigUrl,
+  docConfigAwsUrl,
+  isEdit,
+  isInProgressPeriod,
+  configureLoadBalancerInitial,
+  setConfigureLoadBalancerInitial,
+}: CimConfigurationFormFieldsProps) => {
+  const { t } = useTranslation();
+
+  const { setFieldValue, values } = useFormikContext<CimConfigurationValues>();
+
+  React.useEffect(
+    () => {
+      const doItAsync = async (): Promise<void> => {
+        if (platform === 'AWS') {
+          if (!isEdit || (await isIngressController())) {
+            setFieldValue('configureLoadBalancer', true);
+            setConfigureLoadBalancerInitial(true);
+            return;
+          }
+        }
+
+        setFieldValue('configureLoadBalancer', false);
+        setConfigureLoadBalancerInitial(false);
+      };
+
+      void doItAsync();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [platform],
+  );
+
+  return (
+    <Form>
+      <Content>
+        <Content component={ContentVariants.h4} className="pf-v5-u-font-weight-bold">
+          {t('ai:Storage sizes')}{' '}
+          <PopoverIcon
+            bodyContent={t(
+              'ai:The storage sizes will be used to store different files and data for cluster creation.',
+            )}
+            footerContent={
+              <a href={docConfigUrl} target="_blank" rel="noreferrer">
+                <Trans t={t}>
+                  ai:Learn more about storage sizes. <ExternalLinkAltIcon />
+                </Trans>
+              </a>
+            }
+            aria-label={t('ai:More info for configure storage sizes')}
+            noVerticalAlign
+          >
+            <Icon>
+              <HelpIcon />
+            </Icon>
+          </PopoverIcon>
+        </Content>
+        <Content>
+          {t('ai:If there are many clusters, use higher values for the storage fields.')}
+        </Content>
+      </Content>
+
+      <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+        <FlexItem>
+          <FormGroup
+            label={t('ai:Database storage')}
+            labelHelp={
+              <PopoverIcon
+                noVerticalAlign
+                bodyContent={t(
+                  'ai:Specify how much storage is allocated for storing files such as database tables and database views for the clusters. Recommended is 10Gi or more. The value can not be updated later.',
+                )}
+                aria-label={t('ai:More info for database storage')}
+              >
+                <Icon>
+                  <HelpIcon />
+                </Icon>
+              </PopoverIcon>
+            }
+            isRequired
+          >
+            <InputGroup>
+              <InputGroupItem isFill>
+                <InputField
+                  type="number"
+                  name="dbVolSize"
+                  isRequired
+                  isDisabled={isEdit}
+                  min={0}
+                  style={{ maxWidth: 'initial' }}
+                />
+              </InputGroupItem>
+              <InputGroupText isPlain>Gi</InputGroupText>
+            </InputGroup>
+          </FormGroup>
+        </FlexItem>
+
+        <FlexItem>
+          <FormGroup
+            label={t('ai:System storage')}
+            labelHelp={
+              <PopoverIcon
+                noVerticalAlign
+                bodyContent={t(
+                  'ai:Specify how much storage is allocated for storing logs, manifests and "kubeconfig" files for the clusters. Recommended is 100Gi or more. The value can not be updated later.',
+                )}
+                aria-label={t('ai:More info for system storage')}
+              >
+                <Icon>
+                  <HelpIcon />
+                </Icon>
+              </PopoverIcon>
+            }
+            isRequired
+          >
+            <InputGroup>
+              <InputGroupItem isFill>
+                <InputField
+                  isRequired
+                  isDisabled={isEdit}
+                  type="number"
+                  name="fsVolSize"
+                  min={0}
+                  style={{ maxWidth: 'initial' }}
+                />
+              </InputGroupItem>
+              <InputGroupText isPlain>Gi</InputGroupText>
+            </InputGroup>
+          </FormGroup>
+        </FlexItem>
+
+        <FlexItem>
+          <FormGroup
+            label={t('ai:Image storage')}
+            labelHelp={
+              <PopoverIcon
+                noVerticalAlign
+                bodyContent={t(
+                  'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 50Gi or more. The value can not be updated later.',
+                )}
+                aria-label={t('ai:More info for image storage')}
+              >
+                <Icon>
+                  <HelpIcon />
+                </Icon>
+              </PopoverIcon>
+            }
+            isRequired
+          >
+            <InputGroup>
+              <InputGroupItem isFill>
+                <InputField
+                  isRequired
+                  isDisabled={isEdit /* Not supported by backend */}
+                  type="number"
+                  name="imgVolSize"
+                  style={{ maxWidth: 'initial' }}
+                  min={0}
+                />
+              </InputGroupItem>
+              <InputGroupText isPlain>Gi</InputGroupText>
+            </InputGroup>
+          </FormGroup>
+        </FlexItem>
+      </Flex>
+
+      <Stack>
+        <StackItem>
+          <CheckboxField
+            name="configureLoadBalancer"
+            label={
+              <>
+                {t('ai:Configure load balancer on Amazon Web Services for me.')}{' '}
+                <PopoverIcon
+                  noVerticalAlign
+                  bodyContent={t(
+                    "ai:If you're running your hub cluster of Amazon Web Services and want to enable the CIM service, we recommend you to configure your load balancer if it is not already configured. Learn more about enabling CIM on AWS.",
+                  )}
+                  footerContent={
+                    <a href={docConfigAwsUrl} target="_blank" rel="noreferrer">
+                      <Trans t={t}>
+                        ai:Learn more about enabling CIM on AWS <ExternalLinkAltIcon />
+                      </Trans>
+                    </a>
+                  }
+                  aria-label={t('ai:More info for load balancer on Amazon web services')}
+                >
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
+                </PopoverIcon>
+              </>
+            }
+            isDisabled={isInProgressPeriod || (isEdit && configureLoadBalancerInitial)}
+          />
+        </StackItem>
+
+        <StackItem>
+          <CheckboxField
+            name={'addCiscoIntersightUrl'}
+            isDisabled={isEdit}
+            label={
+              <>
+                {t('ai:Configure custom URL for Cisco Intersight')}{' '}
+                <PopoverIcon
+                  noVerticalAlign
+                  bodyContent={t(
+                    'ai:Configure a custom URL to add hosts from Cisco Intersight on disconnected environments.',
+                  )}
+                >
+                  <Icon>
+                    <HelpIcon />
+                  </Icon>
+                </PopoverIcon>
+              </>
+            }
+          />
+
+          {values.addCiscoIntersightUrl && (
+            <InputField
+              name={'ciscoIntersightURL'}
+              label={t('ai:Cisco Intersight URL')}
+              isRequired
+              isDisabled={isEdit}
+              placeholder="https://www.intersight.com/an/workflow/workflow-definitions/execute/AddServersFromISO"
+              helperText={t('ai:Provide the complete URL, including the protocol and parameters.')}
+            />
+          )}
+        </StackItem>
+      </Stack>
+    </Form>
+  );
+};

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx

@@ -1,20 +1,29 @@
 import * as React from 'react';
-import { Alert, AlertVariant, Button, ButtonVariant } from '@patternfly/react-core';
+import * as Yup from 'yup';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  StackItem,
+  Stack,
+  Content,
+} from '@patternfly/react-core';
 import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Formik, FormikHelpers } from 'formik';
+import parseUrl from 'parse-url';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
 import { getStorageSizeGiB } from '../../helpers';
 import { AlertPayload } from '../../../../common';
 
-import { CimConfigurationModalProps, CimConfiguratioProps } from './types';
-import { CimConfigurationForm } from './CimConfigurationForm';
-import { isIngressController, onEnableCIM } from './persist';
+import { CimConfigurationModalProps, CimConfigurationValues } from './types';
+import { onEnableCIM } from './persist';
 import { CimConfigDisconnectedAlert } from './CimConfigDisconnectedAlert';
 import { MIN_DB_VOL_SIZE, MIN_FS_VOL_SIZE, MIN_IMG_VOL_SIZE } from './constants';
 import { isCIMConfigProgressing } from './utils';
 import { resetCimConfigProgressAlertSuccessStatus } from './CimConfigProgressAlert';
-
-import './CimConfigurationModal.css';
+import { CimConfigurationFormFields } from './CimConfigurationFormFields';
 
 export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
   isOpen,
@@ -24,136 +33,41 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
   docDisconnectedUrl,
   docConfigUrl,
   docConfigAwsUrl,
-
-  getResource,
-  listResources,
-  patchResource,
-  createResource,
 }) => {
   const { t } = useTranslation();
   const [error, setError] = React.useState<AlertPayload>();
-  const [isSaving, setSaving] = React.useState(false);
-
-  const [dbVolSize, _setDbVolSize] = React.useState<number>(() =>
-    getStorageSizeGiB(10, agentServiceConfig?.spec?.databaseStorage?.resources?.requests?.storage),
-  );
-  const [dbVolSizeValidation, setDbVolSizeValidation] = React.useState<string>();
-
-  const [fsVolSize, _setFsVolSize] = React.useState<number>(() =>
-    getStorageSizeGiB(
-      100,
-      agentServiceConfig?.spec?.filesystemStorage?.resources?.requests?.storage,
-    ),
-  );
-  const [fsVolSizeValidation, setFsVolSizeValidation] = React.useState<string>();
 
-  const [imgVolSize, _setImgVolSize] = React.useState<number>(() =>
-    getStorageSizeGiB(50, agentServiceConfig?.spec?.imageStorage?.resources?.requests?.storage),
-  );
-  const [imgVolSizeValidation, setImgVolSizeValidation] = React.useState<string>();
-
-  const [configureLoadBalancer, setConfigureLoadBalancer] = React.useState<boolean>(
-    platform === 'AWS',
-  );
   const [configureLoadBalancerInitial, setConfigureLoadBalancerInitial] = React.useState(true);
-
-  const setDbVolSize = (v: number): void => {
-    if (v < MIN_DB_VOL_SIZE) {
-      setDbVolSizeValidation(t('ai:Minimal value is 1Gi'));
-    } else {
-      setDbVolSizeValidation(undefined);
-    }
-    _setDbVolSize(v);
-  };
-  const setFsVolSize = (v: number): void => {
-    if (v < MIN_FS_VOL_SIZE) {
-      setFsVolSizeValidation(t('ai:Minimal value is 1Gi'));
-    } else {
-      setFsVolSizeValidation(undefined);
-    }
-    _setFsVolSize(v);
-  };
-  const setImgVolSize = (v: number): void => {
-    if (v < MIN_IMG_VOL_SIZE) {
-      setImgVolSizeValidation(t('ai:Minimal value is 10Gi'));
-    } else {
-      setImgVolSizeValidation(undefined);
-    }
-    _setImgVolSize(v);
-  };
-
   const isEdit = !!agentServiceConfig;
 
-  React.useEffect(
-    () => {
-      const doItAsync = async (): Promise<void> => {
-        if (platform === 'AWS') {
-          if (!isEdit || (await isIngressController(getResource))) {
-            setConfigureLoadBalancer(true);
-            setConfigureLoadBalancerInitial(true);
-            return;
-          }
-        }
-
-        setConfigureLoadBalancer(false);
-        setConfigureLoadBalancerInitial(false);
-      };
-
-      void doItAsync();
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [platform],
-  );
-
-  const formProps: CimConfiguratioProps = {
-    dbVolSize,
-    dbVolSizeValidation,
-    setDbVolSize,
-    fsVolSize,
-    fsVolSizeValidation,
-    setFsVolSize,
-    imgVolSize,
-    imgVolSizeValidation,
-    setImgVolSize,
-
-    configureLoadBalancer,
-    configureLoadBalancerInitial,
-    setConfigureLoadBalancer,
-  };
-
-  const onConfigure = () => {
-    const doItAsync = async (): Promise<void> => {
-      setSaving(true);
-      setError(undefined);
-      resetCimConfigProgressAlertSuccessStatus();
-
-      if (
-        await onEnableCIM({
-          t,
-          setError,
-          getResource,
-          listResources,
-          patchResource,
-          createResource,
-          agentServiceConfig,
-
-          platform,
-          dbVolSizeGiB: dbVolSize,
-          fsVolSizeGiB: fsVolSize,
-          imgVolSizeGiB: imgVolSize,
-          configureLoadBalancer,
-        })
-      ) {
-        // successfuly persisted
-        onClose();
-      }
-
+  const onConfigure = async (
+    values: CimConfigurationValues,
+    helpers: FormikHelpers<CimConfigurationValues>,
+  ) => {
+    setError(undefined);
+    helpers.setSubmitting(true);
+    resetCimConfigProgressAlertSuccessStatus();
+
+    if (
+      await onEnableCIM({
+        t,
+        setError,
+        agentServiceConfig,
+        platform,
+        dbVolSizeGiB: values.dbVolSize,
+        fsVolSizeGiB: values.fsVolSize,
+        imgVolSizeGiB: values.imgVolSize,
+        configureLoadBalancer: values.configureLoadBalancer,
+        ciscoIntersightURL: values.addCiscoIntersightUrl ? values.ciscoIntersightURL : undefined,
+      })
+    ) {
+      // successfully persisted
+      onClose();
+    } else {
       // keep modal open and show error
-      setConfigureLoadBalancerInitial(configureLoadBalancer);
-      setSaving(false);
-    };
-
-    void doItAsync();
+      setConfigureLoadBalancerInitial(values.configureLoadBalancer);
+      helpers.setSubmitting(false);
+    }
   };
 
   const isError = !!error?.title; // this is a communication error only (not the one from agentServiceConfig)
@@ -161,75 +75,138 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
   const isConfigure =
     !isEdit || !configureLoadBalancerInitial; /* The only possible change for the Edit flow */
 
-  const isConfigureDisabled = !!(
-    isSaving ||
-    dbVolSizeValidation ||
-    fsVolSizeValidation ||
-    imgVolSizeValidation ||
-    (isEdit && configureLoadBalancerInitial === configureLoadBalancer)
-  );
-
   const isInProgressPeriod = isCIMConfigProgressing({ agentServiceConfig });
-  // const isConfiguring = isSaving || isInProgressPeriod;
-
-  let actions: React.ReactNode[];
-  if (isConfigure) {
-    actions = [
-      <Button
-        key="configure"
-        variant={ButtonVariant.primary}
-        isDisabled={isConfigureDisabled}
-        onClick={onConfigure}
-      >
-        {t('ai:Configure')}
-      </Button>,
-      <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
-        {t('ai:Cancel')}
-      </Button>,
-    ];
-  } else {
-    actions = [
-      <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
-        {t('ai:Close')}
-      </Button>,
-    ];
-  }
+
+  const initialValues: CimConfigurationValues = {
+    dbVolSize: getStorageSizeGiB(
+      10,
+      agentServiceConfig?.spec?.databaseStorage?.resources?.requests?.storage,
+    ),
+    fsVolSize: getStorageSizeGiB(
+      100,
+      agentServiceConfig?.spec?.filesystemStorage?.resources?.requests?.storage,
+    ),
+    imgVolSize: getStorageSizeGiB(
+      50,
+      agentServiceConfig?.spec?.imageStorage?.resources?.requests?.storage,
+    ),
+    configureLoadBalancer: platform === 'AWS',
+    addCiscoIntersightUrl: !!agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'],
+    ciscoIntersightURL: agentServiceConfig?.metadata?.annotations?.['ciscoIntersightURL'] || '',
+  };
+
+  const validationSchema = Yup.object<CimConfigurationValues>({
+    dbVolSize: Yup.number().min(MIN_DB_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
+    fsVolSize: Yup.number().min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi')).required(),
+    imgVolSize: Yup.number().min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi')).required(),
+    configureLoadBalancer: Yup.boolean(),
+    ciscoIntersightURL: Yup.string().when('addCiscoIntersightUrl', {
+      is: true,
+      then: (schema) =>
+        schema
+          .required(t('ai:Cisco Intersight URL is required'))
+          .test(
+            'url-valid',
+            t('ai:Cisco Intersight URL must be a valid URL starting with "http://" or "https://"'),
+            (val) => {
+              try {
+                const url = parseUrl(val);
+                return url.protocol === 'http' || url.protocol === 'https';
+              } catch (error) {
+                return false;
+              }
+            },
+          ),
+    }),
+  });
 
   return (
-    <Modal
-      aria-label={t('ai:Configure host inventory settings')}
-      title={t('ai:Configure host inventory settings')}
-      isOpen={isOpen}
-      onClose={onClose}
-      actions={actions}
-      variant={ModalVariant.medium}
-      id="cim-config-modal"
-      className="cim-config-modal"
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={onConfigure}
     >
-      {t(
-        'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.',
-      )}
-      {isError && (
-        <Alert title={error.title} variant={error.variant || AlertVariant.danger} isInline>
-          {error.message}
-        </Alert>
-      )}
-      <CimConfigDisconnectedAlert docDisconnectedUrl={docDisconnectedUrl} />
-      <CimConfigurationForm
-        isEdit={isEdit}
-        isInProgressPeriod={isInProgressPeriod}
-        onClose={onClose}
-        docConfigUrl={docConfigUrl}
-        docConfigAwsUrl={docConfigAwsUrl}
-        {...formProps}
-      />
-      {isConfigure && (
-        <Alert
-          variant={AlertVariant.warning}
-          title={t('ai:Storage sizes cannot be changed once you configure.')}
-          isInline
-        />
+      {({ values, handleSubmit, isValid, isSubmitting }) => (
+        <Modal
+          aria-label={t('ai:Configure host inventory settings')}
+          title={t('ai:Configure host inventory settings')}
+          isOpen={isOpen}
+          onClose={onClose}
+          actions={
+            isConfigure
+              ? [
+                  <Button
+                    key="configure"
+                    variant={ButtonVariant.primary}
+                    isDisabled={
+                      !!(
+                        isSubmitting ||
+                        !isValid ||
+                        (isEdit && configureLoadBalancerInitial === values.configureLoadBalancer)
+                      )
+                    }
+                    onClick={() => void handleSubmit()}
+                  >
+                    {t('ai:Configure')}
+                  </Button>,
+                  <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
+                    {t('ai:Cancel')}
+                  </Button>,
+                ]
+              : [
+                  <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
+                    {t('ai:Close')}
+                  </Button>,
+                ]
+          }
+          variant={ModalVariant.medium}
+          id="cim-config-modal"
+        >
+          <Stack hasGutter>
+            <StackItem>
+              <Content>
+                {t(
+                  'ai:Configuring the host inventory settings will enable the Central Infrastructure Management.',
+                )}
+              </Content>
+            </StackItem>
+
+            {isError && (
+              <StackItem>
+                <Alert title={error.title} variant={error.variant || AlertVariant.danger} isInline>
+                  {error.message}
+                </Alert>
+              </StackItem>
+            )}
+
+            <StackItem>
+              <CimConfigDisconnectedAlert docDisconnectedUrl={docDisconnectedUrl} />
+            </StackItem>
+
+            <StackItem>
+              <CimConfigurationFormFields
+                isEdit={isEdit}
+                platform={platform}
+                isInProgressPeriod={isInProgressPeriod}
+                docConfigUrl={docConfigUrl}
+                docConfigAwsUrl={docConfigAwsUrl}
+                configureLoadBalancerInitial={configureLoadBalancerInitial}
+                setConfigureLoadBalancerInitial={setConfigureLoadBalancerInitial}
+              />
+            </StackItem>
+
+            {isConfigure && (
+              <StackItem>
+                <Alert
+                  variant={AlertVariant.warning}
+                  title={t('ai:Storage sizes cannot be changed once you configure.')}
+                  isInline
+                />
+              </StackItem>
+            )}
+          </Stack>
+        </Modal>
       )}
-    </Modal>
+    </Formik>
   );
 };