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

package/lib/common/components/clusterConfiguration/DownloadIso.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { saveAs } from 'file-saver';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  ClipboardCopy,
+  clipboardCopyFunc,
+  ModalBoxBody,
+  ModalBoxFooter,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { DetailItem, DetailList } from '../ui';
+import DiscoveryInstructions from './DiscoveryInstructions';
+import { StaticIPInfo } from './DiscoveryImageConfigForm';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export type DownloadISOProps = {
+  hasDHCP?: boolean;
+  isSNO?: boolean;
+  fileName?: string;
+  downloadUrl?: string;
+  onClose: () => void;
+  onReset?: () => void;
+};
+
+const DownloadIso = ({
+  fileName = 'discovery.iso',
+  downloadUrl,
+  onClose,
+  onReset,
+  hasDHCP,
+  isSNO = false,
+}: DownloadISOProps) => {
+  const wgetCommand = `wget -O ${fileName} '${downloadUrl || ''}'`;
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalBoxBody>
+        <Stack hasGutter>
+          <StackItem>
+            <Alert
+              isInline
+              variant="success"
+              title={t('ai:Discovery ISO is ready to be downloaded')}
+            >
+              <>
+                &nbsp;
+                <DiscoveryInstructions isSNO={isSNO} />
+              </>
+            </Alert>
+          </StackItem>
+          {hasDHCP === false && (
+            <StackItem>
+              <StaticIPInfo />
+            </StackItem>
+          )}
+          <StackItem>
+            <DetailList>
+              <DetailItem
+                title={t('ai:Discovery ISO URL')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    onCopy={(event) => clipboardCopyFunc(event, downloadUrl)}
+                  >
+                    {downloadUrl}
+                  </ClipboardCopy>
+                }
+              />
+              <DetailItem
+                title={t('ai:Command to download the ISO:')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    onCopy={(event) => clipboardCopyFunc(event, wgetCommand)}
+                  >
+                    {wgetCommand}
+                  </ClipboardCopy>
+                }
+              />
+            </DetailList>
+            <Alert
+              variant="info"
+              isInline
+              title={`${t('ai:Never share your downloaded ISO with anyone else.')} ${t(
+                'ai:Forwarding it could put your credentials and personal data at risk.',
+              )}`}
+            />
+          </StackItem>
+        </Stack>
+      </ModalBoxBody>
+      <ModalBoxFooter>
+        <Button
+          variant={ButtonVariant.primary}
+          onClick={() => downloadUrl && saveAs(downloadUrl)}
+          data-testid="download-iso-btn"
+          isDisabled={!downloadUrl}
+        >
+          {t('ai:Download Discovery ISO')}
+        </Button>
+        <Button variant={ButtonVariant.secondary} onClick={onClose} data-testid="close-iso-btn">
+          {t('ai:Close')}
+        </Button>
+        {onReset && (
+          <Button variant={ButtonVariant.link} onClick={onReset} data-testid="edit-iso-btn">
+            {t('ai:Edit ISO configuration')}
+          </Button>
+        )}
+      </ModalBoxFooter>
+    </>
+  );
+};
+
+export default DownloadIso;

package/lib/common/components/clusterConfiguration/DownloadIsoModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+import DownloadIso, { DownloadISOProps } from './DownloadIso';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type DownloadIsoModalProps = DownloadISOProps & {
+  isOpen: boolean;
+};
+
+const DownloadIsoModal: React.FC<DownloadIsoModalProps> = ({ isOpen, ...props }) => {
+  const { t } = useTranslation();
+  return (
+    <Modal
+      aria-label={t('ai:Download host discovery ISO dialog')}
+      title={t('ai:Add host')}
+      isOpen={isOpen}
+      onClose={props.onClose}
+      variant={ModalVariant.small}
+      hasNoBodyWrapper
+      id="download-discovery-iso-modal"
+    >
+      <DownloadIso {...props} />
+    </Modal>
+  );
+};
+
+export default DownloadIsoModal;

package/lib/common/components/clusterConfiguration/FormatDiskWarning.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Alert, AlertVariant } from '@patternfly/react-core';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type FormatDiskWarningProps = {
+  someDisksAreSkipFormatting?: boolean;
+};
+
+const FormatDiskWarning = ({ someDisksAreSkipFormatting }: FormatDiskWarningProps) => {
+  const { t } = useTranslation();
+  return (
+    <Alert
+      variant={AlertVariant.warning}
+      data-testid="alert-format-bootable-disks"
+      isInline
+      title={
+        someDisksAreSkipFormatting
+          ? t('ai:There may be issues with the boot order')
+          : t(
+              'ai:All bootable disks, except for read-only disks, will be formatted during installation. Make sure to back up any sensitive data before proceeding.',
+            )
+      }
+    >
+      {someDisksAreSkipFormatting
+        ? t(
+            'ai:You have opted out of formatting bootable disks on some hosts. To ensure the hosts reboot into the expected installation disk, manual user intervention may be required during OpenShift installation.',
+          )
+        : ''}
+    </Alert>
+  );
+};
+
+export default FormatDiskWarning;

package/lib/common/components/clusterConfiguration/OpenShiftVersionSelect.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  ExternalLinkAltIcon,
+} from '@patternfly/react-icons';
+import {
+  global_warning_color_100 as warningColor,
+  global_danger_color_100 as dangerColor,
+} from '@patternfly/react-tokens';
+import { OPENSHIFT_LIFE_CYCLE_DATES_LINK } from '../../config';
+import { OpenshiftVersionOptionType } from '../../types';
+import { SelectField } from '../ui';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+const OpenShiftLifeCycleDatesLink = () => {
+  const { t } = useTranslation();
+  return (
+    <a href={OPENSHIFT_LIFE_CYCLE_DATES_LINK} target="_blank" rel="noopener noreferrer">
+      {t('ai:Learn more')} <ExternalLinkAltIcon />
+    </a>
+  );
+};
+
+const getOpenshiftVersionHelperText =
+  // eslint-disable-next-line react/display-name
+  (versions: OpenshiftVersionOptionType[]) => (selectedVersionValue: string) => {
+    const { t } = useTranslation();
+    if (!versions.length) {
+      return (
+        <>
+          <ExclamationCircleIcon color={dangerColor.value} size="sm" />
+          &nbsp; {t('ai:No release image is available.')}
+        </>
+      );
+    }
+    const selectedVersion = versions.find((version) => version.value === selectedVersionValue);
+    if (!selectedVersionValue || !selectedVersion) {
+      return null;
+    }
+
+    if (selectedVersion.supportLevel !== 'production') {
+      return (
+        <>
+          <ExclamationTriangleIcon color={warningColor.value} size="sm" />
+          &nbsp;{t('ai:Please note that this version is not production-ready.')}&nbsp;
+          <OpenShiftLifeCycleDatesLink />
+        </>
+      );
+    }
+
+    return null;
+  };
+
+type OpenShiftVersionSelectProps = {
+  versions: OpenshiftVersionOptionType[];
+};
+const OpenShiftVersionSelect: React.FC<OpenShiftVersionSelectProps> = ({ versions }) => {
+  const selectOptions = React.useMemo(
+    () =>
+      versions
+        .filter((version) => version.supportLevel !== 'maintenance')
+        .map((version) => ({
+          label: version.label,
+          value: version.value,
+        })),
+    [versions],
+  );
+  const { t } = useTranslation();
+  return (
+    <SelectField
+      label={t('ai:OpenShift version')}
+      name="openshiftVersion"
+      options={selectOptions}
+      getHelperText={getOpenshiftVersionHelperText(versions)}
+      isDisabled={versions.length === 0}
+      isRequired
+    />
+  );
+};
+
+export default OpenShiftVersionSelect;

package/lib/common/components/clusterConfiguration/ProxyFields.css

@@ -0,0 +1,3 @@
+.ai-proxy-fields .pf-c-check__body {
+  width: 100%;
+}

package/lib/common/components/clusterConfiguration/ProxyFields.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Grid } from '@patternfly/react-core';
+import { InputField, CheckboxField, trimCommaSeparatedList, PopoverIcon } from '../ui';
+import { ProxyFieldsType } from '../../types';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+import './ProxyFields.css';
+import { Trans } from 'react-i18next';
+
+export const ProxyInputFields = () => {
+  const { setFieldValue, values } = useFormikContext<ProxyFieldsType>();
+  const onNoProxyBlur = () => {
+    if (values.noProxy) {
+      setFieldValue('noProxy', trimCommaSeparatedList(values.noProxy));
+    }
+  };
+  const { t } = useTranslation();
+  return (
+    <Grid hasGutter>
+      <InputField
+        label={
+          <>
+            {t('ai:HTTP proxy URL')}{' '}
+            <PopoverIcon
+              bodyContent={t(
+                'ai:The HTTP proxy URL that agents should use to access the discovery service.',
+              )}
+            />
+          </>
+        }
+        name="httpProxy"
+        placeholder="http://<user>:<password>@<ipaddr>:<port>"
+        helperText={
+          <div>
+            <Trans
+              t={t}
+              components={{ bold: <strong /> }}
+              i18nKey="ai:URL must start with <bold>http</bold>."
+            />
+          </div>
+        }
+      />
+      <InputField
+        label={
+          <>
+            {t('ai:HTTPS proxy URL')}{' '}
+            <PopoverIcon
+              bodyContent={t(
+                "ai:Specify the HTTPS proxy that agents should use to access the discovery service. If you don't provide a value, your HTTP proxy URL will be used by default for both HTTP and HTTPS connections.",
+              )}
+            />
+          </>
+        }
+        name="httpsProxy"
+        placeholder="http://<user>:<password>@<ipaddr>:<port>"
+        helperText={
+          <div>
+            <Trans
+              t={t}
+              components={{ bold: <strong /> }}
+              i18nKey="ai:URL must start with <bold>http</bold> (https schemes are not currently supported)."
+            />
+          </div>
+        }
+      />
+      <InputField
+        label={
+          <>
+            {t('ai:No proxy domains')}{' '}
+            <PopoverIcon
+              bodyContent={t(
+                'ai:Exclude destination domain names, IP addresses, or other network CIDRs from proxying by adding them to this comma-separated list.',
+              )}
+            />
+          </>
+        }
+        name="noProxy"
+        placeholder="one.domain.com,second.domain.com"
+        helperText={
+          <div>
+            <Trans
+              t={t}
+              components={{ bold: <strong /> }}
+              i18nKey="ai:Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations."
+            />
+          </div>
+        }
+        onBlur={onNoProxyBlur}
+      />
+    </Grid>
+  );
+};
+
+const ProxyFields: React.FC = () => {
+  const { setFieldValue, values, initialValues } = useFormikContext<ProxyFieldsType>();
+  const resetProxy = (isNewlyChecked: boolean) => {
+    if (isNewlyChecked) {
+      setFieldValue('httpProxy', initialValues.httpProxy);
+      setFieldValue('httpsProxy', initialValues.httpsProxy);
+      setFieldValue('noProxy', initialValues.noProxy);
+    } else {
+      setFieldValue('httpProxy', '');
+      setFieldValue('httpsProxy', '');
+      setFieldValue('noProxy', '');
+    }
+  };
+  const { t } = useTranslation();
+  // https://docs.openshift.com/container-platform/4.6/networking/enable-cluster-wide-proxy.html
+  return (
+    <>
+      <CheckboxField
+        label={t('ai:Show proxy settings')}
+        name="enableProxy"
+        className="ai-proxy-fields"
+        helperText={
+          <p>
+            {t(
+              'ai:If hosts are behind a firewall that requires the use of a proxy, provide additional information about the proxy.',
+            )}
+          </p>
+        }
+        onChange={(value: boolean) => resetProxy(value)}
+        body={values.enableProxy && <ProxyInputFields />}
+      />
+    </>
+  );
+};
+
+export default ProxyFields;

package/lib/common/components/clusterConfiguration/SNOControlGroup.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues } from '../../../common/components/clusterWizard/types';
+import { SingleNodeCheckbox } from '../ui';
+import { OpenshiftVersionOptionType } from '../../types';
+import SNODisclaimer from './SNODisclaimer';
+import { useFeatureSupportLevel } from '../featureSupportLevels';
+
+type SNOControlGroupProps = {
+  versions: OpenshiftVersionOptionType[];
+  highAvailabilityMode: ClusterDetailsValues['highAvailabilityMode'];
+};
+
+const SNOControlGroup = ({ versions, highAvailabilityMode }: SNOControlGroupProps) => {
+  const { values } = useFormikContext<ClusterDetailsValues>();
+  const featureSupportLevelContext = useFeatureSupportLevel();
+  const snoSupportLevel = featureSupportLevelContext.getFeatureSupportLevel(
+    values.openshiftVersion,
+    'SNO',
+  );
+  const snoExpansion = featureSupportLevelContext.isFeatureSupported(
+    values.openshiftVersion,
+    'SINGLE_NODE_EXPANSION',
+  );
+  const isDisabled = featureSupportLevelContext.isFeatureDisabled(values.openshiftVersion, 'SNO');
+
+  return (
+    <>
+      <SingleNodeCheckbox name="highAvailabilityMode" versions={versions} isDisabled={isDisabled} />
+      {highAvailabilityMode === 'None' && snoSupportLevel && (
+        <SNODisclaimer
+          isDisabled={isDisabled}
+          snoSupportLevel={snoSupportLevel}
+          snoExpansionSupported={snoExpansion}
+        />
+      )}
+    </>
+  );
+};
+
+export default SNOControlGroup;

package/lib/common/components/clusterConfiguration/SNODisclaimer.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Alert, AlertVariant, List, ListItem, Stack, StackItem } from '@patternfly/react-core';
+import { CheckboxField } from '../ui';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { SupportLevel } from '../../api/types';
+
+type SNODisclaimerProps = {
+  snoSupportLevel: SupportLevel;
+  isDisabled?: boolean;
+  snoExpansionSupported?: boolean;
+};
+const SNODisclaimer = ({
+  snoSupportLevel,
+  isDisabled = false,
+  snoExpansionSupported = false,
+}: SNODisclaimerProps) => {
+  const { t } = useTranslation();
+  if (!['dev-preview', 'supported'].includes(snoSupportLevel)) {
+    //if tech preview or unsupported there's no definition which warning to show
+    return null;
+  }
+  const isDevPreview = snoSupportLevel === 'dev-preview';
+  const generalSNOFacts = (
+    <>
+      <ListItem>
+        {t(
+          'ai:Installing SNO will result in an OpenShift deployment that is not highly available.',
+        )}
+      </ListItem>
+      {!snoExpansionSupported && (
+        <ListItem>
+          {t('ai:Currently, adding additional machines to your cluster is not supported.')}
+        </ListItem>
+      )}
+    </>
+  );
+  const unsupportedWarnings = (
+    <>
+      <ListItem>
+        {t('ai:SNO is in a proof-of-concept stage and is not supported in any way.')}
+      </ListItem>
+      <ListItem>
+        {t(
+          "ai:OpenShift in-place upgrades aren't expected to work with SNO. If an upgrade is needed, your system will need a redeployment.",
+        )}
+      </ListItem>
+    </>
+  );
+
+  return (
+    <Alert
+      variant={isDevPreview ? AlertVariant.warning : AlertVariant.info}
+      title={t('ai:Limitations for using Single Node OpenShift')}
+      isInline
+    >
+      <Stack hasGutter>
+        <StackItem>
+          <List>
+            {generalSNOFacts}
+            {isDevPreview && unsupportedWarnings}
+          </List>
+        </StackItem>
+        {isDevPreview && (
+          <StackItem>
+            <CheckboxField
+              name="SNODisclaimer"
+              label={t(
+                'ai:I understand, accept, and agree to the limitations associated with using Single Node OpenShift.',
+              )}
+              isDisabled={isDisabled}
+            />
+          </StackItem>
+        )}
+      </Stack>
+    </Alert>
+  );
+};
+
+export default SNODisclaimer;

package/lib/common/components/clusterConfiguration/SecurityFields.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { useFormikContext } from 'formik';
+import { Checkbox, FormGroup } from '@patternfly/react-core';
+
+import { RenderIf } from '../ui/RenderIf';
+import { getFieldId, HelperText, TextAreaField, trimSshPublicKey, ExternalLink } from '../ui';
+import { Cluster } from '../../api';
+import { NetworkConfigurationValues } from '../../types/clusters';
+import { SSH_GENERATION_DOC_LINK } from '../../config';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+export const SshPublicKeyHelperText: React.FC<{
+  fieldId?: string;
+}> = ({ fieldId = 'sshPublicKey' }) => {
+  const { t } = useTranslation();
+  return (
+    <HelperText fieldId={fieldId}>
+      {t(
+        'ai:Paste the content of a public ssh key you want to use to connect to the hosts into this field.',
+      )}{' '}
+      <ExternalLink href={SSH_GENERATION_DOC_LINK}>{t('ai:Learn more')}</ExternalLink>
+    </HelperText>
+  );
+};
+
+interface SecurityFieldsFieldsProps {
+  clusterSshKey: Cluster['sshPublicKey'];
+  imageSshKey?: Cluster['imageInfo']['sshPublicKey'];
+  isDisabled?: boolean;
+}
+
+const SecurityFields = ({
+  clusterSshKey,
+  imageSshKey,
+  isDisabled = false,
+}: SecurityFieldsFieldsProps) => {
+  //shareSshKey shouldn't response to changes. imageSshKey stays the same, there's a loading state while it's requested
+  //clusterSshKey updating causes the textarea to disappear when the user clears it to edit it
+  const defaultShareSshKey = !!imageSshKey && (clusterSshKey === imageSshKey || !clusterSshKey);
+  const [shareSshKey, setShareSshKey] = React.useState(defaultShareSshKey);
+  const { values, setFieldValue, errors, touched } =
+    useFormikContext<Pick<NetworkConfigurationValues, 'sshPublicKey'>>();
+
+  const errorMsg = errors.sshPublicKey;
+
+  const handleSshKeyBlur = () => {
+    if (values.sshPublicKey) {
+      setFieldValue('sshPublicKey', trimSshPublicKey(values.sshPublicKey));
+    }
+  };
+
+  React.useEffect(() => {
+    if (!isDisabled && shareSshKey) {
+      setFieldValue('sshPublicKey', imageSshKey);
+    }
+  }, [shareSshKey, imageSshKey, setFieldValue, isDisabled]);
+
+  const fieldId = getFieldId('shareDiscoverySshKey', 'checkbox');
+  const { t } = useTranslation();
+  return (
+    <>
+      <FormGroup
+        fieldId={fieldId}
+        label={t('ai:Host SSH Public Key for troubleshooting after installation')}
+        validated={touched && errorMsg ? 'error' : 'default'}
+      >
+        <RenderIf condition={Boolean(imageSshKey)}>
+          <Checkbox
+            name="shareDiscoverySshKey"
+            id={fieldId}
+            label={t('ai:Use the same host discovery SSH key')}
+            aria-describedby={`${fieldId}-helper`}
+            isChecked={shareSshKey}
+            isDisabled={isDisabled}
+            onChange={setShareSshKey}
+          />
+        </RenderIf>
+        <RenderIf condition={!shareSshKey}>
+          <TextAreaField
+            name="sshPublicKey"
+            helperText={<SshPublicKeyHelperText />}
+            onBlur={handleSshKeyBlur}
+            isDisabled={isDisabled}
+          />
+        </RenderIf>
+      </FormGroup>
+    </>
+  );
+};
+
+export default SecurityFields;

package/lib/common/components/clusterConfiguration/UploadSSH.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useField } from 'formik';
+
+import { PopoverIcon, trimSshPublicKey, UploadField } from '../ui';
+import { SshPublicKeyHelperText } from './SecurityFields';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+
+type UploadSSHProps = {
+  isRequired?: boolean;
+  labelText?: string;
+};
+
+const UploadSSH: React.FC<UploadSSHProps> = ({ isRequired, labelText }) => {
+  const [{ name, value }, , { setValue }] = useField<string>('sshPublicKey');
+  const { t } = useTranslation();
+  const defaultLabelText = t(
+    'ai:Provide an SSH key to be able to connect to the hosts for debugging purposes during the discovery process',
+  );
+
+  return (
+    <UploadField
+      label={
+        <>
+          {t('ai:SSH public key')} <PopoverIcon bodyContent={labelText || defaultLabelText} />
+        </>
+      }
+      name={name}
+      helperText={<SshPublicKeyHelperText />}
+      idPostfix="discovery"
+      onBlur={() => value && setValue(trimSshPublicKey(value))}
+      dropzoneProps={{
+        accept: '.pub',
+        maxSize: 2048,
+        onDropRejected:
+          ({ setError }) =>
+          () =>
+            setError(t('ai:File not supported.')),
+      }}
+      isRequired={isRequired}
+    />
+  );
+};
+
+export default UploadSSH;

package/lib/common/components/clusterConfiguration/index.ts

@@ -0,0 +1,14 @@
+export { default as SNOControlGroup } from './SNOControlGroup';
+export { default as SNODisclaimer } from './SNODisclaimer';
+export { default as OpenShiftVersionSelect } from './OpenShiftVersionSelect';
+export { default as UploadSSH } from './UploadSSH';
+export { default as ProxyFields, ProxyInputFields } from './ProxyFields';
+export { default as DownloadIsoModal } from './DownloadIsoModal';
+export { default as DownloadIso } from './DownloadIso';
+export { default as DiscoveryInstructions } from './DiscoveryInstructions';
+export { default as FormatDiskWarning } from './FormatDiskWarning';
+export { default as SecurityFields } from './SecurityFields';
+
+export * from './utils';
+export * from './DiscoveryTroubleshootingModal';
+export * from './DiscoveryImageConfigForm';