@openshift-assisted/ui-lib 2.55.0 → 2.56.0

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

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { Formik } from 'formik';
+import { saveAs } from 'file-saver';
+import { useNavigate } from 'react-router';
+import {
+  Split,
+  SplitItem,
+  Alert,
+  Grid,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  List,
+  ListItem,
+  ListComponent,
+  OrderType,
+  Content,
+} from '@patternfly/react-core';
+import {
+  ClusterWizardStep,
+  TechnologyPreview,
+  PULL_SECRET_INFO_LINK,
+  singleClusterOperators,
+  WithErrorBoundary,
+  getOperatorSpecs,
+} from '../../../../../common';
+import { ClusterWizardFooter, ClusterWizardNavigation } from '../../wizardComponents';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { DISCONNECTED_OPENSHIFT_VERSION } from './BasicStep';
+
+export const DisconnectedReviewStep = () => {
+  const { moveBack, disconnectedInfraEnv } = useClusterWizardContext();
+  const opSpecs = getOperatorSpecs(() => undefined);
+  const navigate = useNavigate();
+
+  return (
+    <Formik
+      initialValues={{}}
+      onSubmit={() => {
+        // nothing to do
+      }}
+    >
+      <ClusterWizardStep
+        navigation={<ClusterWizardNavigation />}
+        footer={
+          <ClusterWizardFooter
+            onNext={() => {
+              saveAs(disconnectedInfraEnv?.downloadUrl ?? '');
+              void navigate('/cluster-list');
+            }}
+            onBack={moveBack}
+            nextButtonText="Download ISO"
+          />
+        }
+      >
+        <WithErrorBoundary title="Failed to load Review step">
+          <Grid hasGutter>
+            <Split>
+              <SplitItem>
+                <Content component="h2">Review and download ISO</Content>
+              </SplitItem>
+              <SplitItem>
+                <TechnologyPreview />
+              </SplitItem>
+            </Split>
+            <Alert isInline variant="info" title="Discovery ISO boot instructions">
+              <List component={ListComponent.ol} type={OrderType.number}>
+                <ListItem>Download ISO</ListItem>
+                <ListItem>
+                  Download or copy your pull secret from{' '}
+                  <a href={PULL_SECRET_INFO_LINK} target="_blank" rel="noopener noreferrer">
+                    here
+                  </a>
+                </ListItem>
+                <ListItem>
+                  Boot your cluster's machines from this ISO and follow instructions
+                </ListItem>
+                <ListItem>
+                  Provide your pull secret inside the installation wizard when requested
+                </ListItem>
+              </List>
+            </Alert>
+            <Alert isInline isExpandable variant="info" title="List of available operators">
+              <List>
+                {singleClusterOperators.map((o) => {
+                  const operator = Object.values(opSpecs)
+                    .flatMap((op) => op)
+                    .find((op) => op.operatorKey === o);
+                  return <ListItem key={o}>{operator ? operator.title : o}</ListItem>;
+                })}
+              </List>
+            </Alert>
+            <DescriptionList isHorizontal>
+              <DescriptionListGroup>
+                <DescriptionListTerm>OpenShift version</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.openshiftVersion ?? DISCONNECTED_OPENSHIFT_VERSION}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>CPU architecture</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {disconnectedInfraEnv?.cpuArchitecture ?? 'x86_64'}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+              <DescriptionListGroup>
+                <DescriptionListTerm>ISO size</DescriptionListTerm>
+                <DescriptionListDescription>approx. 43.5GB</DescriptionListDescription>
+              </DescriptionListGroup>
+            </DescriptionList>
+          </Grid>
+        </WithErrorBoundary>
+      </ClusterWizardStep>
+    </Formik>
+  );
+};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Switch, Tooltip } from '@patternfly/react-core';
+import { useTranslation } from '../../../../../common';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+
+export const InstallDisconnectedSwitch = ({ isDisabled }: { isDisabled?: boolean }) => {
+  const { t } = useTranslation();
+  const { installDisconnected, setInstallDisconnected } = useClusterWizardContext();
+
+  const switchBtn = (
+    <Switch
+      id="disconnected-install-switch"
+      isChecked={installDisconnected}
+      onChange={(_, checked) => setInstallDisconnected(checked)}
+      ouiaId="DisconnectedInstall"
+      isDisabled={isDisabled}
+    />
+  );
+
+  return isDisabled ? (
+    <Tooltip
+      content={<div>{t('ai:This option is not editable after the draft cluster is created')}</div>}
+    >
+      {switchBtn}
+    </Tooltip>
+  ) : (
+    switchBtn
+  );
+};

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

@@ -0,0 +1,173 @@
+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 {
+  ClusterWizardStep,
+  WithErrorBoundary,
+  UploadSSH,
+  isInOcm,
+  PullSecret,
+  useAlerts,
+  sshPublicKeyValidationSchema,
+  pullSecretValidationSchema,
+  InfraEnvsAPI,
+  ClustersAPI,
+  handleApiError,
+  getApiErrorMessage,
+  useTranslation,
+} 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';
+
+type OptionalConfigurationsValues = {
+  sshPublicKey: string;
+  pullSecret: string;
+};
+
+type OptionalConfigurationsFormProps = {
+  defaultPullSecret?: string;
+  isSubmitting: boolean;
+};
+
+const OptionalConfigurationsForm: React.FC<OptionalConfigurationsFormProps> = ({
+  defaultPullSecret,
+  isSubmitting,
+}) => {
+  const { moveBack } = useClusterWizardContext();
+  const { isValid, submitForm } = useFormikContext<OptionalConfigurationsValues>();
+
+  return (
+    <ClusterWizardStep
+      navigation={<ClusterWizardNavigation />}
+      footer={
+        <ClusterWizardFooter
+          onNext={() => void submitForm()}
+          onBack={moveBack}
+          isSubmitting={isSubmitting}
+          isNextDisabled={!isValid}
+        />
+      }
+    >
+      <WithErrorBoundary title="Failed to load Optional configurations step">
+        <Grid hasGutter>
+          <GridItem>
+            <Content component="h2">Optional configurations</Content>
+          </GridItem>
+          <GridItem>
+            <Form id="wizard-cluster-optional-config__form">
+              <UploadSSH />
+              {!isInOcm && <PullSecret isOcm={false} defaultPullSecret={defaultPullSecret} />}
+            </Form>
+          </GridItem>
+        </Grid>
+      </WithErrorBoundary>
+    </ClusterWizardStep>
+  );
+};
+
+export const OptionalConfigurationsStep = () => {
+  const { t } = useTranslation();
+  const {
+    moveNext,
+    disconnectedCluster,
+    setDisconnectedCluster,
+    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),
+      }),
+    [t],
+  );
+
+  const initialValues: OptionalConfigurationsValues = {
+    sshPublicKey: disconnectedInfraEnv?.sshAuthorizedKey ?? '',
+    pullSecret: defaultPullSecret ?? '',
+  };
+
+  const handleNext = React.useCallback(
+    async (values: OptionalConfigurationsValues) => {
+      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);
+        }
+
+        moveNext();
+      } catch (error) {
+        handleApiError(error, () => {
+          addAlert({
+            title: 'Failed to save optional configurations',
+            message: getApiErrorMessage(error),
+            variant: AlertVariant.danger,
+          });
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [
+      clearAlerts,
+      defaultPullSecret,
+      disconnectedCluster,
+      disconnectedInfraEnv,
+      setDisconnectedCluster,
+      setDisconnectedInfraEnv,
+      addAlert,
+      moveNext,
+    ],
+  );
+
+  return (
+    <Formik<OptionalConfigurationsValues>
+      initialValues={initialValues}
+      enableReinitialize
+      validationSchema={validationSchema}
+      onSubmit={(values) => void handleNext(values)}
+    >
+      <OptionalConfigurationsForm
+        defaultPullSecret={defaultPullSecret}
+        isSubmitting={isSubmitting}
+      />
+    </Formik>
+  );
+};
+
+export default OptionalConfigurationsStep;

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

@@ -0,0 +1,4 @@
+export * from './InstallDisconnectedSwitch';
+export * from './BasicStep';
+export * from './OptionalConfigurationsStep';
+export * from './DisconnectedReviewStep';

package/lib/ocm/components/wizard/steps/hostDiscovery/HostDiscovery.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Formik, FormikConfig, useFormikContext } from 'formik';
+import {
+  Cluster,
+  V2ClusterUpdateParams,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  getFormikErrorFields,
+  ClusterWizardStep,
+  HostDiscoveryValues,
+  useAlerts,
+  getHostDiscoveryInitialValues,
+  useFormikAutoSave,
+  getApiErrorMessage,
+  handleApiError,
+  isUnknownServerError,
+} from '../../../../../common';
+import { ClustersService, HostDiscoveryService } from '../../../../services';
+import {
+  setServerUpdateError,
+  updateCluster,
+  selectCurrentClusterPermissionsState,
+} from '../../../../store';
+import { useLateBinding } from '../../../../hooks';
+import { canNextHostDiscovery } from '../../utils';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { ClusterWizardFooter, ClusterWizardNavigation } from '../../wizardComponents';
+import { HostInventory } from './HostInventory';
+
+const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
+  const { alerts } = useAlerts();
+  const { errors, touched, isSubmitting, isValid } = useFormikContext<HostDiscoveryValues>();
+  const clusterWizardContext = useClusterWizardContext();
+  const isAutoSaveRunning = useFormikAutoSave();
+  const errorFields = getFormikErrorFields(errors, touched);
+  const isBinding = useLateBinding(cluster);
+
+  const isNextDisabled =
+    !isValid ||
+    !!alerts.length ||
+    isAutoSaveRunning ||
+    isSubmitting ||
+    isBinding ||
+    !canNextHostDiscovery({ cluster });
+
+  const footer = (
+    <ClusterWizardFooter
+      cluster={cluster}
+      errorFields={errorFields}
+      isSubmitting={isSubmitting}
+      isNextDisabled={isNextDisabled}
+      onNext={() => clusterWizardContext.moveNext()}
+      onBack={() => clusterWizardContext.moveBack()}
+      isBackDisabled={isSubmitting || isAutoSaveRunning}
+    />
+  );
+
+  return (
+    <ClusterWizardStep navigation={<ClusterWizardNavigation cluster={cluster} />} footer={footer}>
+      <HostInventory cluster={cluster} />
+    </ClusterWizardStep>
+  );
+};
+
+export const HostDiscovery = ({ cluster }: { cluster: Cluster }) => {
+  const dispatch = useDispatch();
+  const { addAlert, clearAlerts } = useAlerts();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const initialValues = React.useMemo(
+    () => getHostDiscoveryInitialValues(cluster),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [], // just once, Formik does not reinitialize
+  );
+
+  const onSubmit: FormikConfig<HostDiscoveryValues>['onSubmit'] = async (values) => {
+    clearAlerts();
+
+    const params: V2ClusterUpdateParams = {};
+
+    HostDiscoveryService.setSchedulableMasters(params, values, cluster);
+
+    try {
+      const { data } = await ClustersService.update(cluster.id, cluster.tags, params);
+      dispatch(updateCluster(data));
+    } catch (e) {
+      handleApiError(e, () =>
+        addAlert({ title: 'Failed to update the cluster', message: getApiErrorMessage(e) }),
+      );
+      if (isUnknownServerError(e as Error)) {
+        dispatch(setServerUpdateError());
+      }
+    }
+  };
+
+  const handleSubmit = isViewerMode ? () => Promise.resolve() : onSubmit;
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      <HostDiscoveryForm cluster={cluster} />
+    </Formik>
+  );
+};

package/lib/ocm/components/wizard/steps/hostDiscovery/HostInventory.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Content, Button, Stack, StackItem, Split, SplitItem } from '@patternfly/react-core';
+import { useFormikContext } from 'formik';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  HostDiscoveryValues,
+  PopoverIcon,
+  ClusterWizardStepHeader,
+  selectMastersMustRunWorkloads,
+  selectSchedulableMasters,
+} from '../../../../../common';
+import { useFeature } from '../../../../hooks';
+import { selectCurrentClusterPermissionsState } from '../../../../store';
+import { OcmSwitchField } from '../../../ui';
+import { InformationAndAlerts } from '../../../information';
+import { DiscoveryImageModalButton } from '../../../discoveryImage';
+import { HostsDiscoveryTable } from './HostsDiscoveryTable';
+
+const schedulableMastersTooltip =
+  'Workloads must be run on control plane nodes when less than 5 hosts are discovered';
+
+export const HostInventory = ({ cluster }: { cluster: Cluster }) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const mastersMustRunWorkloads = selectMastersMustRunWorkloads(cluster);
+  const { setFieldValue } = useFormikContext<HostDiscoveryValues>();
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+
+  React.useEffect(() => {
+    setFieldValue('schedulableMasters', selectSchedulableMasters(cluster));
+  }, [cluster, mastersMustRunWorkloads, setFieldValue]); // Schedulable masters need to be recalculated only when forced status changes
+
+  return (
+    <Stack hasGutter data-testid="host-inventory">
+      <StackItem data-testid="host-discovery-header">
+        <ClusterWizardStepHeader>Host discovery</ClusterWizardStepHeader>
+      </StackItem>
+      <StackItem data-testid="discovery-image-modal-section">
+        {!isViewerMode && !isSingleClusterFeatureEnabled && (
+          <Content component="p">
+            <DiscoveryImageModalButton
+              ButtonComponent={Button}
+              cluster={cluster}
+              idPrefix="host-inventory"
+            />
+          </Content>
+        )}
+      </StackItem>
+      <StackItem data-testid="schedulable-masters-section">
+        <Split>
+          <SplitItem>
+            <OcmSwitchField
+              tooltipProps={{
+                hidden: !mastersMustRunWorkloads,
+                content: schedulableMastersTooltip,
+              }}
+              isDisabled={mastersMustRunWorkloads}
+              name={'schedulableMasters'}
+              label="Run workloads on control plane nodes&nbsp;"
+              data-testid="schedulable-masters-switch"
+            />
+          </SplitItem>
+          <SplitItem>
+            <PopoverIcon
+              bodyContent={
+                <p>Enables your control plane nodes to be used for running applications.</p>
+              }
+              buttonStyle={{ marginTop: '4px' }}
+              data-testid="schedulable-masters-popover"
+            />
+          </SplitItem>
+        </Split>
+      </StackItem>
+      <StackItem data-testid="information-and-alerts">
+        <InformationAndAlerts cluster={cluster} />
+      </StackItem>
+      <StackItem data-testid="host-inventory-title">
+        <Content component="h3">Host Inventory</Content>
+      </StackItem>
+      <StackItem data-testid="hosts-discovery-table-wrapper">
+        <HostsDiscoveryTable cluster={cluster} hosts={cluster.hosts || []} />
+      </StackItem>
+    </Stack>
+  );
+};

package/lib/ocm/components/wizard/steps/hostDiscovery/HostsDiscoveryTable.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Stack, StackItem } from '@patternfly/react-core';
+import { Cluster, Host } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  ChangeHostnameAction,
+  selectSchedulableMasters,
+  isSNO,
+  DeleteHostAction,
+  TableToolbar,
+  countColumn,
+  cpuCoresColumn,
+  discoveredAtColumn,
+  disksColumn,
+  hostnameColumn,
+  memoryColumn,
+  roleColumn,
+  HostsTable,
+  HostDetail,
+  ExpandComponentProps,
+  usePagination,
+  useTranslation,
+  HostsTableEmptyState,
+} from '../../../../../common';
+import { selectCurrentClusterPermissionsState } from '../../../../store';
+import {
+  HostsTableModals,
+  useHostsTable,
+  AdditionalNTPSourcesDialogToggle,
+  hardwareStatusColumn,
+  HostsDiscoveryTroubleshootingInfoLinkWithModal,
+} from '../../../hostsTable';
+import { useClusterWizardContext } from '../../clusterWizardContext';
+import { NtpSyncFailureMessage } from '../../../hostsTable/components/NtpSyncFailureMessage';
+
+const HostRowDetailExpand = ({ obj: host }: ExpandComponentProps<Host>) => (
+  <HostDetail
+    key={host.id}
+    host={host}
+    AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
+    NtpSyncFailureMessageComponent={NtpSyncFailureMessage}
+  />
+);
+
+type HostsDiscoveryTableProps = {
+  cluster: Cluster;
+  hosts: Host[];
+};
+
+export const HostsDiscoveryTable = ({ cluster, hosts }: HostsDiscoveryTableProps) => {
+  const {
+    onEditHost,
+    actionChecks,
+    onEditRole,
+    actionResolver,
+    onSelect,
+    selectedHostIDs,
+    setSelectedHostIDs,
+    onMassChangeHostname,
+    onMassDeleteHost,
+    ...modalProps
+  } = useHostsTable(cluster);
+
+  const { wizardPerPage, setWizardPerPage } = useClusterWizardContext();
+
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const isSNOCluster = isSNO(cluster);
+  const { t } = useTranslation();
+  const content = React.useMemo(
+    () => [
+      hostnameColumn(t, onEditHost, undefined, actionChecks.canEditHostname),
+      roleColumn(
+        t,
+        actionChecks.canEditRole,
+        onEditRole,
+        selectSchedulableMasters(cluster),
+        cluster.kind,
+      ),
+      hardwareStatusColumn({
+        onEditHostname: onEditHost,
+        openshiftVersion: cluster.openshiftVersion,
+      }),
+      discoveredAtColumn(t),
+      cpuCoresColumn(t),
+      memoryColumn(t),
+      disksColumn(t),
+      countColumn(cluster),
+    ],
+    [t, onEditHost, actionChecks.canEditHostname, actionChecks.canEditRole, onEditRole, cluster],
+  );
+
+  const paginationProps = usePagination(hosts.length, wizardPerPage, setWizardPerPage);
+  const itemIDs = hosts.map((h) => h.id);
+  const showBulkActions = !(isViewerMode || isSNOCluster);
+
+  return (
+    <>
+      <Stack hasGutter>
+        {showBulkActions && (
+          <StackItem>
+            <TableToolbar
+              selectedIDs={selectedHostIDs || []}
+              itemIDs={itemIDs}
+              setSelectedIDs={setSelectedHostIDs}
+              actions={[
+                <ChangeHostnameAction key="hostname" onChangeHostname={onMassChangeHostname} />,
+                <DeleteHostAction key="delete" onDeleteHost={onMassDeleteHost} />,
+              ]}
+              {...paginationProps}
+            />
+          </StackItem>
+        )}
+        <StackItem>
+          <HostsTable
+            testId="hosts-discovery-table"
+            hosts={hosts}
+            content={content}
+            actionResolver={actionResolver}
+            ExpandComponent={HostRowDetailExpand}
+            onSelect={showBulkActions ? onSelect : undefined}
+            selectedIDs={selectedHostIDs}
+            setSelectedIDs={setSelectedHostIDs}
+            {...paginationProps}
+          >
+            <HostsTableEmptyState
+              isSNO={isSNOCluster}
+              secondaryActions={[
+                <HostsDiscoveryTroubleshootingInfoLinkWithModal key={'hosts-not-showing'} />,
+              ]}
+            />
+          </HostsTable>
+        </StackItem>
+      </Stack>
+      <HostsTableModals cluster={cluster} {...modalProps} />
+    </>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './HostDiscovery';

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

@@ -0,0 +1,10 @@
+export * from './disconnected';
+export * from './clusterDetails';
+export * from './staticIp';
+export * from './operators';
+export * from './hostDiscovery';
+export * from './customManifests';
+export * from './storage';
+export * from './networking';
+export * from './credentials';
+export * from './review';