@openshift-assisted/ui-lib 2.47.5 → 2.48.0

package/lib/common/components/operators/operatorDescriptions.tsx

@@ -60,6 +60,12 @@ export const DESCRIPTION_LVM =
 export const DESCRIPTION_CLUSTER_OBSERVABILITY =
   'Provides observability and monitoring capabilities for your OpenShift cluster.';
 
+export const DESCRIPTION_LOKI =
+  'Provides a log aggregation system designed to store and query logs from all applications and infrastructure components.';
+
+export const DESCRIPTION_OPENSHIFT_LOGGING =
+  'Collects, stores, and visualizes logs from OpenShift Container Platform components and applications.';
+
 export const DESCRIPTION_NUMA_RESOURCES =
   'Provides NUMA-aware scheduling to improve workload performance on NUMA systems.';
 

package/lib/common/components/operators/operatorSpecs.tsx

@@ -24,6 +24,8 @@ import {
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_KUBE_DESCHEDULER,
   OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
   OPERATOR_NAME_NUMA_RESOURCES,
   OPERATOR_NAME_OADP,
   OPERATOR_NAME_METALLB,
@@ -36,6 +38,7 @@ import {
   getClusterObservabilityLink,
   getKmmDocsLink,
   getKubeDeschedulerLink,
+  getLokiLink,
   getLsoLink,
   getLvmsDocsLink,
   getMceDocsLink,
@@ -45,6 +48,7 @@ import {
   getNumaResourcesLink,
   getNvidiaGpuLink,
   getOadpLink,
+  getOpenShiftLoggingLink,
   MTV_LINK,
   NODE_HEALTHCHECK_LINK,
   NODE_MAINTENANCE_LINK,
@@ -83,6 +87,8 @@ import {
   DESCRIPTION_SERVICEMESH,
   DESCRIPTION_LVM,
   DESCRIPTION_CLUSTER_OBSERVABILITY,
+  DESCRIPTION_LOKI,
+  DESCRIPTION_OPENSHIFT_LOGGING,
   DESCRIPTION_NUMA_RESOURCES,
   DESCRIPTION_OADP,
   DESCRIPTION_METALLB,
@@ -473,9 +479,36 @@ export const getOperatorSpecs = (
             </ExternalLink>
           </>
         ),
-        notStandalone: true,
         supportLevel: getFeatureSupportLevel('CLUSTER_OBSERVABILITY'),
       },
+      {
+        operatorKey: OPERATOR_NAME_LOKI,
+        title: 'Loki Operator',
+        featureId: 'CLUSTER_OBSERVABILITY',
+        descriptionText: DESCRIPTION_LOKI,
+        Description: ({ openshiftVersion, searchTerm }) => (
+          <>
+            <HighlightedText text={DESCRIPTION_LOKI} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={getLokiLink(openshiftVersion)}>Learn more</ExternalLink>
+          </>
+        ),
+        notStandalone: true,
+        supportLevel: getFeatureSupportLevel('LOKI'),
+      },
+      {
+        operatorKey: OPERATOR_NAME_OPENSHIFT_LOGGING,
+        title: 'OpenShift Logging',
+        featureId: 'CLUSTER_OBSERVABILITY',
+        descriptionText: DESCRIPTION_OPENSHIFT_LOGGING,
+        Description: ({ openshiftVersion, searchTerm }) => (
+          <>
+            <HighlightedText text={DESCRIPTION_OPENSHIFT_LOGGING} searchTerm={searchTerm} />{' '}
+            <ExternalLink href={getOpenShiftLoggingLink(openshiftVersion)}>Learn more</ExternalLink>
+          </>
+        ),
+        notStandalone: true,
+        supportLevel: getFeatureSupportLevel('OPENSHIFT_LOGGING'),
+      },
     ],
     [categories[Category.SCHEDULING]]: [
       {

package/lib/common/components/ui/WizardFooter.tsx

@@ -69,7 +69,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 variant={ButtonVariant.primary}
                 name="next"
                 onClick={onNext}
-                isDisabled={isNextDisabled}
+                isDisabled={isNextDisabled || isSubmitting}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}

package/lib/common/components/ui/formik/PullSecretField.tsx

@@ -67,6 +67,7 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
+
   return (
     <TextAreaField
       name="pullSecret"

package/lib/common/config/constants.ts

@@ -145,6 +145,8 @@ export const hostValidationLabels = (t: TFunction): { [key in HostValidationId]:
   'node-maintenance-requirements-satisfied': t('ai:Node Maintenance requirements'),
   'kube-descheduler-requirements-satisfied': t('ai:Kube Descheduler requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -216,6 +218,8 @@ export const hostValidationFailureHints = (
   'node-maintenance-requirements-satisfied': '',
   'kube-descheduler-requirements-satisfied': '',
   'cluster-observability-requirements-satisfied': '',
+  'loki-requirements-satisfied': '',
+  'openshift-logging-requirements-satisfied': '',
   'numa-resources-requirements-satisfied': '',
   'oadp-requirements-satisfied': '',
   'metallb-requirements-satisfied': '',
@@ -247,8 +251,11 @@ export const clusterValidationLabels = (
   'lvm-requirements-satisfied': t('ai:Logical Volume Manager requirements'),
   'cnv-requirements-satisfied': t('ai:CNV requirements'),
   'mce-requirements-satisfied': t('ai:MCE requirements'),
+  'openshift-ai-gpu-requirements-satisfied': t('ai:OpenShift AI GPU requirements'),
   'platform-requirements-satisfied': t('ai:Platform requirements'),
   'cluster-observability-requirements-satisfied': t('ai:Cluster Observability requirements'),
+  'loki-requirements-satisfied': t('ai:Loki Operator requirements'),
+  'openshift-logging-requirements-satisfied': t('ai:OpenShift Logging Operator requirements'),
   'numa-resources-requirements-satisfied': t('ai:NUMA Resources requirements'),
   'oadp-requirements-satisfied': t('ai:OADP requirements'),
   'metallb-requirements-satisfied': t('ai:MetalLB requirements'),
@@ -333,6 +340,8 @@ export const OPERATOR_NAME_FENCE_AGENTS_REMEDIATION = 'fence-agents-remediation'
 export const OPERATOR_NAME_NODE_MAINTENANCE = 'node-maintenance';
 export const OPERATOR_NAME_KUBE_DESCHEDULER = 'kube-descheduler';
 export const OPERATOR_NAME_CLUSTER_OBSERVABILITY = 'cluster-observability';
+export const OPERATOR_NAME_LOKI = 'loki';
+export const OPERATOR_NAME_OPENSHIFT_LOGGING = 'openshift-logging';
 export const OPERATOR_NAME_NUMA_RESOURCES = 'numaresources';
 export const OPERATOR_NAME_OADP = 'oadp';
 export const OPERATOR_NAME_METALLB = 'metallb';
@@ -345,6 +354,9 @@ export const singleClusterOperators = [
   OPERATOR_NAME_NODE_MAINTENANCE,
   OPERATOR_NAME_FENCE_AGENTS_REMEDIATION,
   OPERATOR_NAME_KUBE_DESCHEDULER,
+  OPERATOR_NAME_CLUSTER_OBSERVABILITY,
+  OPERATOR_NAME_LOKI,
+  OPERATOR_NAME_OPENSHIFT_LOGGING,
 ];
 
 export const singleClusterBundles = ['virtualization'];

package/lib/common/config/docs_links.ts

@@ -220,6 +220,16 @@ export const getClusterObservabilityLink = (ocpVersion?: string) =>
     ocpVersion,
   )}/html/cluster_observability_operator/cluster-observability-operator-overview`;
 
+export const getLokiLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/network_observability/network-observability-overview`;
+
+export const getOpenShiftLoggingLink = (ocpVersion?: string) =>
+  `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
+    ocpVersion,
+  )}/html/logging`;
+
 export const getNumaResourcesLink = (ocpVersion?: string) =>
   `https://docs.redhat.com/en/documentation/openshift_container_platform/${getDocsOpenshiftVersion(
     ocpVersion,

package/lib/common/reducers/alertsSlice.ts

@@ -6,6 +6,7 @@ export type AlertPayload = {
   title: string;
   message?: string;
   variant?: AlertVariant;
+  key?: string;
 };
 
 export type AlertProps = {
@@ -22,7 +23,7 @@ export const alertsSlice = createSlice({
   name: 'alerts',
   reducers: {
     addAlert: (state, action: PayloadAction<AlertPayload>) => [
-      { key: uuidv4(), variant: AlertVariant.danger, ...action.payload },
+      { key: action.payload.key || uuidv4(), variant: AlertVariant.danger, ...action.payload },
       ...state,
     ],
     removeAlert: (state, action: PayloadAction<string>) =>

package/lib/ocm/components/Routes.tsx

@@ -34,7 +34,9 @@ export const UILibRoutes = ({
     <>
       <Routes>
         <Route path="assisted-installer/clusters" element={<Outlet />}>
-          <Route path="~new" element={<NewClusterPage />} />
+          <Route path="~new" element={<NewClusterPage />}>
+            <Route path=":clusterId" element={<NewClusterPage />} />
+          </Route>
           <Route path=":clusterId" element={<ClusterPage />} />
           <Route index element={<Clusters />} />
         </Route>

package/lib/ocm/components/clusterConfiguration/HostInventory.tsx

@@ -78,7 +78,7 @@ const HostInventory = ({ cluster }: { cluster: Cluster }) => {
         <Content component="h3">Host Inventory</Content>
       </StackItem>
       <StackItem data-testid="hosts-discovery-table-wrapper">
-        <HostsDiscoveryTable cluster={cluster} />
+        <HostsDiscoveryTable cluster={cluster} hosts={cluster.hosts || []} />
       </StackItem>
     </Stack>
   );

package/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfigurationForm.tsx

@@ -92,7 +92,7 @@ const NetworkConfigurationForm: React.FC<{
           JSON.stringify(
             JSON.stringify({
               featureSet: 'CustomNoUpgrade',
-              featureGates: ['NoRegistryClusterOperations=true'],
+              featureGates: ['NoRegistryClusterInstall=true'],
             }),
           ),
         );

package/lib/ocm/components/clusterConfiguration/operators/utils.tsx

@@ -40,13 +40,17 @@ export const getNewOperators = (
   }
 
   const newOperators = currentOperators.filter((op) => op !== operatorId);
-  // uncheck unneeded not-standalone dependencies too
   const notStandaloneDeps = dependencies
     .filter((dep) => opSpecs[dep]?.notStandalone)
-    .filter((dep) =>
-      // some other operator may still depend on the not-standalone operator
-      newOperators.every((op) => !getOperatorDependencies(op, preflightRequirements).includes(dep)),
-    );
+    .filter((dep) => {
+      const hasDependency = newOperators.some((op) =>
+        getOperatorDependencies(op, preflightRequirements).includes(dep),
+      );
+      if (!hasDependency) {
+        newOperators.splice(newOperators.indexOf(dep), 1);
+      }
+      return !hasDependency;
+    });
 
   return currentOperators.filter((op) => op !== operatorId && !notStandaloneDeps.includes(op));
 };

package/lib/ocm/components/clusterWizard/ClusterDetails.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../services';
 import { Cluster, InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 import BundleService from '../../services/BundleService';
+import { useFeature } from '../../hooks/use-feature';
 
 type ClusterDetailsProps = {
   cluster?: Cluster;
@@ -45,6 +46,7 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
     latestVersions: versions,
   } = useOpenShiftVersionsContext();
   const location = useLocation();
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
 
   const handleClusterUpdate = React.useCallback(
     async (
@@ -94,7 +96,11 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
             ...(virtOperators ? virtOperators.map((op) => ({ name: op })) : []),
           ];
         }
-        const cluster = await ClustersService.create(params, isAssistedMigration);
+        const cluster = await ClustersService.create(
+          params,
+          isAssistedMigration,
+          isSingleClusterFeatureEnabled,
+        );
         navigate(`../${cluster.id}`, { state: ClusterWizardFlowStateNew });
 
         const uiPatch: UISettingsValues = { addCustomManifests };
@@ -114,7 +120,15 @@ const ClusterDetails = ({ cluster, infraEnv }: ClusterDetailsProps) => {
         }
       }
     },
-    [clearAlerts, location.search, navigate, clusterWizardContext, addAlert, dispatch],
+    [
+      clearAlerts,
+      location.search,
+      isSingleClusterFeatureEnabled,
+      navigate,
+      clusterWizardContext,
+      addAlert,
+      dispatch,
+    ],
   );
 
   const navigation = <ClusterWizardNavigation cluster={cluster} />;

package/lib/ocm/components/clusterWizard/ClusterWizardContext.tsx

@@ -3,6 +3,7 @@ import { HostsNetworkConfigurationType } from '../../services';
 import { StaticIpView } from '../clusterConfiguration/staticIp/data/dataTypes';
 import { ClusterWizardStepsType } from './wizardTransition';
 import { UISettingsValues } from '../../../common';
+import { InfraEnv } from '@openshift-assisted/types/assisted-installer-service';
 
 export type ClusterWizardContextType = {
   currentStepId: ClusterWizardStepsType;
@@ -20,6 +21,8 @@ export type ClusterWizardContextType = {
   uiSettings?: UISettingsValues;
   installDisconnected: boolean;
   setInstallDisconnected: (enabled: boolean) => void;
+  disconnectedInfraEnv?: InfraEnv;
+  setDisconnectedInfraEnv: (infraEnv: InfraEnv | undefined) => void;
 };
 
 export const ClusterWizardContext = React.createContext<ClusterWizardContextType | null>(null);

package/lib/ocm/components/clusterWizard/ClusterWizardContextProvider.tsx

@@ -92,6 +92,9 @@ const ClusterWizardContextProvider = ({
   const [wizardPerPage, setWizardPerPage] = React.useState(10);
   const [customManifestsStep, setCustomManifestsStep] = React.useState<boolean>(false);
   const [installDisconnected, setInstallDisconnected] = React.useState(false);
+  const [disconnectedInfraEnv, setDisconnectedInfraEnv] = React.useState<InfraEnv | undefined>(
+    infraEnv,
+  );
   const location = useLocation();
   const locationState = location.state as ClusterWizardFlowStateType | undefined;
   const {
@@ -259,6 +262,8 @@ const ClusterWizardContextProvider = ({
           connectedWizardStepIds?.length && onSetCurrentStepId(connectedWizardStepIds[0]);
         }
       },
+      disconnectedInfraEnv,
+      setDisconnectedInfraEnv,
     };
   }, [
     wizardStepIds,
@@ -273,6 +278,7 @@ const ClusterWizardContextProvider = ({
     installDisconnected,
     setInstallDisconnected,
     connectedWizardStepIds,
+    disconnectedInfraEnv,
   ]);
 
   if (!contextValue) {

package/lib/ocm/components/clusterWizard/ClusterWizardFooter.tsx

@@ -17,6 +17,8 @@ import { onFetchEvents } from '../fetching/fetchEvents';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { useFeature } from '../../hooks/use-feature';
 import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
+import ClustersService from '../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../common/api';
 
 type ClusterValidationSectionProps = {
   cluster?: Cluster;
@@ -71,6 +73,7 @@ type ClusterWizardFooterProps = WizardFooterGenericProps & {
   errorFields?: string[];
   alertTitle?: string;
   alertContent?: string | null;
+  disconnectedClusterId?: string;
 };
 
 const ClusterWizardFooter = ({
@@ -80,19 +83,37 @@ const ClusterWizardFooter = ({
   alertTitle,
   alertContent,
   onCancel,
+  disconnectedClusterId,
   ...rest
 }: ClusterWizardFooterProps) => {
-  const { alerts } = useAlerts();
+  const { alerts, addAlert } = useAlerts();
   const navigate = useNavigate();
   const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
   const { currentStepId } = useClusterWizardContext();
   const { resetSingleClusterDialog } = useModalDialogsContext();
+  const { setDisconnectedInfraEnv } = useClusterWizardContext();
 
-  const handleCancel = React.useCallback(() => navigate('/cluster-list'), [navigate]);
+  const handleCancel = React.useCallback(async () => {
+    if (disconnectedClusterId) {
+      try {
+        await ClustersService.remove(disconnectedClusterId);
+      } catch (e) {
+        handleApiError(e, () =>
+          addAlert({
+            title: 'Failed to remove cluster',
+            message: getApiErrorMessage(e),
+          }),
+        );
+      }
+    }
+    setDisconnectedInfraEnv(undefined);
+    navigate('/cluster-list');
+  }, [navigate, setDisconnectedInfraEnv, addAlert, disconnectedClusterId]);
 
-  const handleReset = React.useCallback(() => {
-    resetSingleClusterDialog.open({ cluster });
-  }, [resetSingleClusterDialog, cluster]);
+  const handleReset = React.useCallback(
+    () => resetSingleClusterDialog.open({ cluster }),
+    [resetSingleClusterDialog, cluster],
+  );
 
   const alertsSection = alerts.length ? <Alerts /> : undefined;
 

package/lib/ocm/components/clusterWizard/HostDiscovery.tsx

@@ -22,6 +22,7 @@ import {
   Cluster,
   V2ClusterUpdateParams,
 } from '@openshift-assisted/types/assisted-installer-service';
+import useLateBinding from '../../hooks/useLateBinding';
 
 const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   const { alerts } = useAlerts();
@@ -29,12 +30,14 @@ const HostDiscoveryForm = ({ cluster }: { cluster: Cluster }) => {
   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 = (

package/lib/ocm/components/clusterWizard/NewClusterWizard.tsx

@@ -4,6 +4,7 @@ import ClusterDetails from './ClusterDetails';
 import { useClusterWizardContext } from './ClusterWizardContext';
 import ReviewStep from './disconnected/ReviewStep';
 import BasicStep from './disconnected/BasicStep';
+import OptionalConfigurationsStep from './disconnected/OptionalConfigurationsStep';
 import { ClusterWizardStepsType } from './wizardTransition';
 
 const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
@@ -12,6 +13,8 @@ const getCurrentStep = (currentStepId: ClusterWizardStepsType) => {
       return <ReviewStep />;
     case 'disconnected-basic':
       return <BasicStep />;
+    case 'disconnected-optional-configurations':
+      return <OptionalConfigurationsStep />;
     default:
       return <ClusterDetails />;
   }

package/lib/ocm/components/clusterWizard/constants.ts

@@ -14,6 +14,7 @@ export const wizardStepNames: { [key in ClusterWizardStepsType]: string } = {
   'credentials-download': 'Download credentials',
   'disconnected-review': 'Review and download ISO',
   'disconnected-basic': 'Basic information',
+  'disconnected-optional-configurations': 'Optional configurations',
 };
 
 export const defaultWizardSteps: ClusterWizardStepsType[] = [

package/lib/ocm/components/clusterWizard/disconnected/BasicStep.tsx

@@ -15,10 +15,53 @@ import ClusterWizardNavigation from '../ClusterWizardNavigation';
 import { WithErrorBoundary } from '../../../../common/components/ErrorHandling/WithErrorBoundary';
 import InstallDisconnectedSwitch from './InstallDisconnectedSwitch';
 import { Formik } from 'formik';
+import ClustersService from '../../../services/ClustersService';
+import { handleApiError, getApiErrorMessage } from '../../../../common/api';
+import { useAlerts } from '../../../../common/components/AlertsContextProvider';
+import { AlertVariant } from '@patternfly/react-core';
+import { ClusterWizardFlowStateNew } from '../wizardTransition';
+import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { AxiosResponse } from 'axios';
+import { Cluster } from '@openshift-assisted/types//assisted-installer-service';
 
 const BasicStep = () => {
   const { t } = useTranslation();
   const { moveNext } = useClusterWizardContext();
+  const { addAlert } = useAlerts();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentPath = location.pathname;
+  let disconnectedClusterId: string | undefined;
+
+  const onNext = async () => {
+    try {
+      setIsSubmitting(true);
+      // Create cluster only - infraEnv will be created in OptionalConfigurationsStep
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { data: disconnectedCluster }: AxiosResponse<Cluster> =
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        await ClustersService.registerDisconnected({
+          name: 'disconnected-cluster',
+          openshiftVersion: '4.19',
+        });
+      disconnectedClusterId = disconnectedCluster.id;
+      navigate(`${currentPath}/${disconnectedClusterId}`, {
+        state: ClusterWizardFlowStateNew,
+      });
+      moveNext();
+    } catch (error: unknown) {
+      handleApiError(error, () => {
+        addAlert({
+          title: 'Failed to create disconnected cluster',
+          message: getApiErrorMessage(error),
+          variant: AlertVariant.danger,
+        });
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   return (
     <Formik
@@ -29,7 +72,15 @@ const BasicStep = () => {
     >
       <ClusterWizardStep
         navigation={<ClusterWizardNavigation />}
-        footer={<ClusterWizardFooter onNext={moveNext} />}
+        footer={
+          <ClusterWizardFooter
+            onNext={() => {
+              void onNext();
+            }}
+            isSubmitting={isSubmitting}
+            disconnectedClusterId={disconnectedClusterId}
+          />
+        }
       >
         <WithErrorBoundary title="Failed to load Basic step">
           <Grid hasGutter>