@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/ocm/components/clusters/ClusterBreadcrumbs.tsx

@@ -3,7 +3,7 @@ import { Breadcrumb, BreadcrumbItem, PageSection } from '@patternfly/react-core'
 import { Link } from 'react-router';
 import { isInOcm } from '../../../common/api';
 
-const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {
+export const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {
   return (
     !isInOcm && (
       <PageSection hasBodyWrapper={false}>
@@ -21,5 +21,3 @@ const ClusterBreadcrumbs = ({ clusterName }: { clusterName?: string }) => {
     )
   );
 };
-
-export default ClusterBreadcrumbs;

package/lib/ocm/components/clusters/index.ts

@@ -1,9 +1,7 @@
-export { default as Clusters } from './Clusters';
-export { default as ClusterLoading } from './ClusterLoading';
-export { default as ClusterToolbar } from './ClusterToolbar';
-export { ClusterUiError } from './ClusterPageErrors';
 export { default as ClusterStatus, ClusterStatusIcon } from './ClusterStatus';
 
-export * from './NewClusterPage';
-export * from './ClusterPage';
-export { useClusterPolling } from './clusterPolling';
+export * from './clusterPolling';
+
+export * from './AssistedInstallerHeader';
+export * from './ClusterBreadcrumbs';
+export * from './utils';

package/lib/ocm/components/clusters/utils.ts

@@ -31,9 +31,3 @@ export const canAbortInstallation = (cluster: Cluster) => {
   ];
   return allowedClusterStates.includes(cluster.status);
 };
-
-export const isSomeDisksSkipFormatting = (cluster: Cluster) => {
-  return cluster.hosts?.some(
-    (host) => host.skipFormattingDisks && host.skipFormattingDisks.length > 0,
-  );
-};

package/lib/ocm/components/discoveryImage/DiscoveryImageForm.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import Axios, { CancelTokenSource } from 'axios';
+import { FormikHelpers } from 'formik';
+import { ModalBody } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  getApiErrorMessage,
+  handleApiError,
+  isUnknownServerError,
+  CpuArchitecture,
+  ErrorState,
+  LoadingState,
+} from '../../../common';
+import { useInfraEnv, usePullSecret } from '../../hooks';
+import { forceReload, setServerUpdateError, updateCluster } from '../../store';
+import { DiscoveryImageFormService, mapClusterCpuArchToInfraEnvCpuArch } from '../../services';
+import { isOciPlatformType } from '../utils';
+import {
+  OcmDiscoveryImageConfigForm,
+  OcmDiscoveryImageFormValues,
+} from './OcmDiscoveryImageConfigForm';
+
+type DiscoveryImageFormProps = {
+  cluster: Cluster;
+  onCancel: () => void;
+  onSuccess: () => Promise<void>;
+  cpuArchitecture: CpuArchitecture;
+  onSuccessIpxe: () => Promise<void>;
+  isIpxeSelected?: boolean;
+};
+
+export const DiscoveryImageForm = ({
+  cluster,
+  onCancel,
+  onSuccess,
+  cpuArchitecture,
+  onSuccessIpxe,
+  isIpxeSelected,
+}: DiscoveryImageFormProps) => {
+  const pullSecret = usePullSecret();
+  const { infraEnv, error: infraEnvError } = useInfraEnv(
+    cluster.id,
+    cpuArchitecture,
+    cluster.name,
+    pullSecret,
+    cluster.openshiftVersion,
+  );
+  const cancelSourceRef = React.useRef<CancelTokenSource>();
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    cancelSourceRef.current = Axios.CancelToken.source();
+    return () => cancelSourceRef.current?.cancel('Image generation cancelled by user.');
+  }, []);
+
+  const handleCancel = () => {
+    dispatch(forceReload());
+    onCancel();
+  };
+
+  const handleSubmit = async (
+    formValues: OcmDiscoveryImageFormValues,
+    formikActions: FormikHelpers<OcmDiscoveryImageFormValues>,
+  ) => {
+    if (cluster.id && infraEnv?.id) {
+      const isIPXE = formValues['imageType'] === 'discovery-image-ipxe';
+      try {
+        const { updatedCluster } = await DiscoveryImageFormService.update(
+          cluster.id,
+          cluster.tags,
+          infraEnv.id,
+          formValues,
+          undefined,
+          isIPXE,
+        );
+        isIPXE ? await onSuccessIpxe() : await onSuccess();
+        dispatch(updateCluster(updatedCluster));
+      } catch (error) {
+        handleApiError(error, () => {
+          formikActions.setStatus({
+            error: {
+              title: isIPXE ? 'Failed to create ipxe scripts' : 'Failed to create discovery image',
+              message: getApiErrorMessage(error),
+            },
+          });
+        });
+        if (isUnknownServerError(error as Error)) {
+          dispatch(setServerUpdateError());
+          onCancel();
+        }
+      }
+    }
+  };
+
+  if (infraEnvError) {
+    return (
+      <ModalBody style={{ height: '696px' }}>
+        <ErrorState />
+      </ModalBody>
+    );
+  }
+  if (!infraEnv) {
+    return (
+      <ModalBody style={{ height: '696px' }}>
+        <LoadingState />
+      </ModalBody>
+    );
+  }
+  return (
+    <OcmDiscoveryImageConfigForm
+      onCancel={handleCancel}
+      handleSubmit={handleSubmit}
+      sshPublicKey={infraEnv.sshAuthorizedKey}
+      httpProxy={infraEnv.proxy?.httpProxy}
+      httpsProxy={infraEnv.proxy?.httpsProxy}
+      noProxy={infraEnv.proxy?.noProxy}
+      ntpSources={infraEnv.ntpSources}
+      imageType={infraEnv.type}
+      enableCertificate={infraEnv.additionalTrustBundle !== undefined}
+      trustBundle={infraEnv.additionalTrustBundle}
+      isIpxeSelected={isIpxeSelected}
+      selectedCpuArchitecture={
+        cpuArchitecture === CpuArchitecture.USE_DAY1_ARCHITECTURE
+          ? mapClusterCpuArchToInfraEnvCpuArch(infraEnv.cpuArchitecture)
+          : mapClusterCpuArchToInfraEnvCpuArch(cpuArchitecture)
+      }
+      isOracleCloudInfrastructure={isOciPlatformType(cluster)}
+    />
+  );
+};

package/lib/ocm/components/discoveryImage/DiscoveryImageModal.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
+import { pluralize } from 'humanize-plus';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  AI_CISCO_INTERSIGHT_TAG,
+  CpuArchitecture,
+  DownloadIso,
+  ErrorState,
+  isSNO,
+  ToolbarButton,
+  DownloadIpxeScript,
+} from '../../../common';
+import { useInfraEnvImageUrl, useInfraEnvIpxeImageUrl } from '../../hooks';
+import { ClustersService } from '../../services';
+import { updateCluster } from '../../store/slices/current-cluster/slice';
+import { useModalDialogsContext } from '../hostsTable/modals/ModalDialogsContext';
+import { DiscoveryImageForm } from './DiscoveryImageForm';
+
+type DiscoveryImageModalButtonProps = {
+  ButtonComponent?: typeof Button | typeof ToolbarButton;
+  cluster: Cluster;
+  idPrefix: string;
+};
+
+export const DiscoveryImageModalButton: React.FC<DiscoveryImageModalButtonProps> = ({
+  ButtonComponent = Button,
+  cluster,
+  idPrefix,
+}) => {
+  const { discoveryImageDialog } = useModalDialogsContext();
+  const { open } = discoveryImageDialog;
+  const isSNOCluster = isSNO(cluster);
+
+  return (
+    <ButtonComponent
+      variant={ButtonVariant.secondary}
+      onClick={() => open({ cluster })}
+      id={`${idPrefix}-button-download-discovery-iso`}
+    >
+      Add {pluralize(+isSNOCluster, 'host')}
+    </ButtonComponent>
+  );
+};
+
+export const DiscoveryImageModal = () => {
+  const [isoDownloadUrl, setIsoDownloadUrl] = React.useState<string>('');
+  const [isoDownloadError, setIsoDownloadError] = React.useState<string>('');
+  const [ipxeDownloadUrl, setIpxeDownloadUrl] = React.useState<string>('');
+  const [ipxeDownloadError, setIpxeDownloadError] = React.useState<string>('');
+  const [isIpxeSelected, setIpxeSelected] = React.useState<boolean>(false);
+
+  const { discoveryImageDialog } = useModalDialogsContext();
+  const { data, isOpen, close } = discoveryImageDialog;
+  const cluster = data?.cluster;
+  const { getIsoImageUrl } = useInfraEnvImageUrl();
+  const { getIpxeImageUrl } = useInfraEnvIpxeImageUrl();
+
+  const dispatch = useDispatch();
+
+  const onImageReady = React.useCallback(async () => {
+    // We need to retrieve the Iso for the only infraEnv on Day1, hence we don't specify the architecture
+    const { url, error } = await getIsoImageUrl(cluster.id, CpuArchitecture.USE_DAY1_ARCHITECTURE);
+    setIsoDownloadUrl(url);
+    setIsoDownloadError(error);
+  }, [getIsoImageUrl, cluster?.id]);
+
+  const onImageIpxeReady = React.useCallback(async () => {
+    // We need to retrieve the Iso for the only infraEnv on Day1, hence we don't specify the architecture
+    const { url, error } = await getIpxeImageUrl(cluster.id, CpuArchitecture.USE_DAY1_ARCHITECTURE);
+    setIpxeDownloadUrl(url);
+    setIpxeDownloadError(error);
+  }, [getIpxeImageUrl, cluster?.id]);
+
+  const onReset = React.useCallback(() => {
+    setIsoDownloadUrl('');
+    setIpxeSelected(false);
+  }, []);
+
+  const onResetIpxe = React.useCallback(() => {
+    setIpxeDownloadUrl('');
+    setIpxeSelected(true);
+  }, []);
+
+  const updateTagsForCiscoIntersight = async (cluster: Cluster) => {
+    try {
+      const { data: updatedCluster } = await ClustersService.update(cluster.id, cluster.tags, {
+        tags: AI_CISCO_INTERSIGHT_TAG,
+      });
+
+      dispatch(updateCluster(updatedCluster));
+    } catch (e) {}
+  };
+
+  if (!cluster) {
+    return null;
+  }
+
+  const isSNOCluster = isSNO(cluster);
+
+  return (
+    <Modal
+      aria-label="Add hosts dialog"
+      isOpen={isOpen}
+      onClose={close}
+      variant={ModalVariant.small}
+      id="generate-discovery-iso-modal"
+      ouiaId="discovery-image-modal"
+      tabIndex={0}
+    >
+      <ModalHeader
+        data-testid="discovery-modal-title"
+        title={`Add ${pluralize(+isSNOCluster, 'host')}`}
+      />
+      {(isoDownloadError || ipxeDownloadError) && (
+        <ModalBody>
+          <ErrorState />
+        </ModalBody>
+      )}
+      {isoDownloadUrl ? (
+        <DownloadIso
+          fileName={`discovery_image_${cluster.name || ''}.iso`}
+          downloadUrl={isoDownloadUrl}
+          isSNO={isSNOCluster}
+          onReset={onReset}
+          onClose={close}
+          updateTagsForCiscoIntersight={() => void updateTagsForCiscoIntersight(cluster)}
+        />
+      ) : ipxeDownloadUrl ? (
+        <DownloadIpxeScript
+          fileName={`discovery_ipxe_script_${cluster.name || ''}.txt`}
+          downloadUrl={ipxeDownloadUrl}
+          isSNO={isSNOCluster}
+          onReset={onResetIpxe}
+          onClose={close}
+        />
+      ) : (
+        <DiscoveryImageForm
+          cluster={cluster}
+          onCancel={close}
+          onSuccess={onImageReady}
+          cpuArchitecture={CpuArchitecture.USE_DAY1_ARCHITECTURE}
+          onSuccessIpxe={onImageIpxeReady}
+          isIpxeSelected={isIpxeSelected}
+        />
+      )}
+    </Modal>
+  );
+};

package/lib/ocm/components/discoveryImage/OcmDiscoveryImageConfigForm.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import * as Yup from 'yup';
+import { Formik, FormikHelpers } from 'formik';
+import { TFunction } from 'i18next';
+import {
+  Button,
+  Form,
+  AlertVariant,
+  Alert,
+  Stack,
+  StackItem,
+  ModalBody,
+  ModalFooter,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import {
+  HostStaticNetworkConfig,
+  ImageType,
+  InfraEnv,
+  Proxy,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  DiscoveryImageType,
+  NtpSourcesFieldsType,
+  ProxyFieldsType,
+  StatusErrorType,
+  SupportedCpuArchitecture,
+  TrustedCertificateFieldsType,
+  AlertFormikError,
+  useTranslation,
+  httpProxyValidationSchema,
+  httpsProxyValidationSchema,
+  noProxyValidationSchema,
+  ntpSourceValidationSchema,
+  sshPublicKeyValidationSchema,
+  ProxyFields,
+  UploadSSH,
+  CertificateFields,
+  NtpSourcesFields,
+} from '../../../common';
+import { DiscoveryImageTypeDropdown, discoveryImageTypes } from './DiscoveryImageTypeDropdown';
+
+export interface OcmImageCreateParams {
+  /**
+   * SSH public key for debugging the installation.
+   */
+  sshPublicKey?: string;
+  staticNetworkConfig?: HostStaticNetworkConfig[];
+  /**
+   * Type of image that should be generated.
+   */
+  imageType?: DiscoveryImageType;
+}
+
+export type OcmDiscoveryImageFormValues = OcmImageCreateParams &
+  ProxyFieldsType &
+  TrustedCertificateFieldsType &
+  NtpSourcesFieldsType;
+
+const validationSchema = (t: TFunction) =>
+  Yup.lazy((values: OcmDiscoveryImageFormValues) =>
+    Yup.object<OcmDiscoveryImageFormValues>().shape({
+      sshPublicKey: sshPublicKeyValidationSchema(t),
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpsProxyValidationSchema({ values, pairValueName: 'httpProxy', t }),
+      noProxy: noProxyValidationSchema(t),
+      ntpSourcesList: values.enableNtpSources
+        ? ntpSourceValidationSchema(t, false)
+        : ntpSourceValidationSchema(t),
+    }),
+  );
+
+type OcmDiscoveryImageConfigFormProps = Proxy & {
+  onCancel: () => void;
+  handleSubmit: (
+    values: OcmDiscoveryImageFormValues,
+    formikActions: FormikHelpers<OcmDiscoveryImageFormValues>,
+  ) => Promise<void>;
+  sshPublicKey?: string;
+  imageType?: ImageType;
+  isIpxeSelected?: boolean;
+  enableCertificate?: boolean;
+  trustBundle?: InfraEnv['additionalTrustBundle'];
+  selectedCpuArchitecture?: SupportedCpuArchitecture;
+  isOracleCloudInfrastructure?: boolean;
+  ntpSources?: InfraEnv['ntpSources'];
+};
+
+export const OcmDiscoveryImageConfigForm = ({
+  handleSubmit,
+  onCancel,
+  sshPublicKey,
+  httpProxy,
+  httpsProxy,
+  noProxy,
+  imageType,
+  isIpxeSelected,
+  enableCertificate,
+  trustBundle,
+  selectedCpuArchitecture,
+  isOracleCloudInfrastructure = false,
+  ntpSources,
+}: OcmDiscoveryImageConfigFormProps) => {
+  const imageTypeValue = isIpxeSelected
+    ? 'discovery-image-ipxe'
+    : imageType
+    ? imageType
+    : 'full-iso';
+
+  const initialValues: OcmDiscoveryImageFormValues = {
+    sshPublicKey: sshPublicKey || '',
+    httpProxy: httpProxy || '',
+    httpsProxy: httpsProxy || '',
+    noProxy: noProxy || '',
+    enableProxy: !!(httpProxy || httpsProxy || noProxy),
+    imageType: imageTypeValue as DiscoveryImageType,
+    enableCertificate: enableCertificate || false,
+    trustBundle: trustBundle || '',
+    enableNtpSources: !!ntpSources?.trim(),
+    ntpSourcesList: ntpSources || '',
+  };
+
+  const { t } = useTranslation();
+  const [buttonText, setButtonText] = React.useState<string>(t('ai:Generate Discovery ISO'));
+
+  const updateDiscoveryButtonAndAlertText = React.useCallback(
+    (isIpxeSelected?: boolean) => {
+      if (!isIpxeSelected) {
+        setButtonText(t('ai:Generate Discovery ISO'));
+        setAlertDiscoveryText(t('ai:To add hosts to the cluster, generate a Discovery ISO.'));
+      } else {
+        setButtonText(t('ai:Generate script file'));
+        setAlertDiscoveryText(t('ai:To add hosts to the cluster, generate iPXE script.'));
+      }
+    },
+    [t],
+  );
+
+  React.useEffect(() => {
+    updateDiscoveryButtonAndAlertText(isIpxeSelected);
+  }, [updateDiscoveryButtonAndAlertText, isIpxeSelected]);
+
+  const [alertDiscoveryText, setAlertDiscoveryText] = React.useState<string>(
+    t('ai:To add hosts to the cluster, generate a Discovery ISO.'),
+  );
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      initialStatus={{ error: null }}
+      validationSchema={validationSchema(t)}
+      onSubmit={handleSubmit}
+    >
+      {({ submitForm, isSubmitting, status, setStatus }) => {
+        return (
+          <>
+            <ModalBody style={{ maxHeight: '750px' }}>
+              <Stack hasGutter>
+                <StackItem>
+                  <Alert variant={AlertVariant.info} isInline title={alertDiscoveryText} />
+                </StackItem>
+
+                <StackItem>
+                  <Form>
+                    <DiscoveryImageTypeDropdown
+                      name="imageType"
+                      defaultValue={discoveryImageTypes[imageTypeValue as DiscoveryImageType]}
+                      onChange={updateDiscoveryButtonAndAlertText}
+                      selectedCpuArchitecture={selectedCpuArchitecture}
+                      isDisabled={isOracleCloudInfrastructure}
+                    />
+                    <UploadSSH
+                      labelText={t(
+                        'ai:Provide an SSH key to be able to connect to the hosts for debugging purposes during the discovery process',
+                      )}
+                    />
+                    <ProxyFields />
+                    <NtpSourcesFields />
+                    <CertificateFields />
+                  </Form>
+                </StackItem>
+              </Stack>
+            </ModalBody>
+            <ModalFooter>
+              <Stack hasGutter style={{ width: '100%' }}>
+                {(status as StatusErrorType)?.error && (
+                  <StackItem>
+                    <AlertFormikError
+                      status={status as StatusErrorType}
+                      onClose={() => setStatus(undefined)}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <Flex>
+                    <FlexItem>
+                      <Button
+                        onClick={() => {
+                          void submitForm();
+                        }}
+                        isDisabled={isSubmitting}
+                        isLoading={isSubmitting}
+                        data-testid="generate-discovery-iso-button"
+                      >
+                        {isSubmitting ? t('ai:Generating') : buttonText}
+                      </Button>
+                    </FlexItem>
+                    <FlexItem>
+                      <Button key="cancel" variant="link" onClick={onCancel}>
+                        {t('ai:Cancel')}
+                      </Button>
+                    </FlexItem>
+                  </Flex>
+                </StackItem>
+              </Stack>
+            </ModalFooter>
+          </>
+        );
+      }}
+    </Formik>
+  );
+};

package/lib/ocm/components/discoveryImage/index.tsx

@@ -0,0 +1,3 @@
+export * from './DiscoveryImageModal';
+export * from './DiscoveryImageForm';
+export * from './OcmDiscoveryImageConfigForm';

package/lib/ocm/components/featureSupportLevels/FeatureSupportLevelProvider.tsx

@@ -1,27 +1,23 @@
 import React, { PropsWithChildren } from 'react';
 import {
-  ActiveFeatureConfiguration,
+  Cluster,
+  PlatformType,
+  SupportLevel,
+  SupportLevels,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  NewActiveFeatureConfiguration,
   CpuArchitecture,
   FeatureId,
   SupportedCpuArchitecture,
   getDefaultCpuArchitecture,
-} from '../../../common';
-import { usePullSecret } from '../../hooks';
-import { getNewFeatureDisabledReason, isFeatureSupportedAndAvailable } from './featureStateUtils';
-import useInfraEnv from '../../hooks/useInfraEnv';
-import {
   NewFeatureSupportLevelContextProvider,
   NewFeatureSupportLevelData,
   NewFeatureSupportLevelMap,
-} from '../../../common/components/newFeatureSupportLevels';
-import useSupportLevelsAPI from '../../hooks/useSupportLevelsAPI';
-import {
-  Cluster,
-  PlatformType,
-  SupportLevel,
-  SupportLevels,
-} from '@openshift-assisted/types/assisted-installer-service';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+} from '../../../common';
+import { useOpenShiftVersionsContext } from '../../contexts';
+import { useSupportLevelsAPI, useInfraEnv, usePullSecret } from '../../hooks';
+import { getNewFeatureDisabledReason, isFeatureSupportedAndAvailable } from './featureStateUtils';
 
 export type NewSupportLevelProviderProps = PropsWithChildren<{
   clusterFeatureUsage?: string;
@@ -71,7 +67,7 @@ export const NewFeatureSupportLevelProvider: React.FC<NewSupportLevelProviderPro
 
   const isLoading = !supportLevelData || loadingOCPVersions || isInfraEnvLoading;
 
-  const activeFeatureConfiguration = React.useMemo<ActiveFeatureConfiguration>(
+  const activeFeatureConfiguration = React.useMemo<NewActiveFeatureConfiguration>(
     () => ({
       underlyingCpuArchitecture: (infraEnv?.cpuArchitecture ||
         cluster?.cpuArchitecture ||
@@ -163,5 +159,3 @@ export const NewFeatureSupportLevelProvider: React.FC<NewSupportLevelProviderPro
     </NewFeatureSupportLevelContextProvider>
   );
 };
-
-export default NewFeatureSupportLevelProvider;

package/lib/ocm/components/featureSupportLevels/ReviewClusterFeatureSupportLevels.tsx

@@ -15,7 +15,7 @@ import { DetailItem } from '../../../common';
 import { getLimitedFeatureSupportLevels } from '../../../common/components/newFeatureSupportLevels/utils';
 import { WithErrorBoundary } from '../../../common/components/ErrorHandling/WithErrorBoundary';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
+import { useOpenShiftVersionsContext } from '../../contexts/OpenShiftVersionsContext';
 import { TFunction } from 'i18next';
 import {
   NewFeatureSupportLevelData,
@@ -198,9 +198,8 @@ const SupportLevel = ({ cluster }: SupportLevelProps) => {
   );
 };
 
-const ClusterFeatureSupportLevelsDetailItem = ({ ...props }: SupportLevelProps) => (
+export const ClusterFeatureSupportLevelsDetailItem = ({ ...props }: SupportLevelProps) => (
   <WithErrorBoundary title="Failed to load feature support levels">
     <SupportLevel {...props} />
   </WithErrorBoundary>
 );
-export default ClusterFeatureSupportLevelsDetailItem;