@openshift-assisted/ui-lib 2.36.5 → 2.37.0

package/lib/cim/components/ClusterDeployment/ACMClusterDeploymentDetailsStep.tsx

@@ -7,11 +7,14 @@ import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
 import { useDetailsFormik } from './ClusterDeploymentDetailsStep';
 import { ClusterDetailsFormFieldsProps } from './ClusterDetailsFormFields';
+import { OsImage } from '../../types';
+import { getOCPVersions } from '../helpers';
 
 type DetailsFormBodyProps = {
   clusterImages: ClusterImageSetK8sResource[];
   onValuesChanged: (values: ClusterDetailsValues, initRender: boolean) => void;
   extensionAfter: ClusterDetailsFormFieldsProps['extensionAfter'];
+  osImages?: OsImage[];
   isNutanix?: boolean;
 };
 
@@ -20,6 +23,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
   const { values } = useFormikContext<ClusterDetailsValues>();
   const initRenderRef = React.useRef(true);
@@ -33,6 +37,7 @@ const DetailsFormBody: React.FC<DetailsFormBodyProps> = ({
       clusterImages={clusterImages}
       extensionAfter={extensionAfter}
       isNutanix={isNutanix}
+      osImages={osImages}
     />
   );
 };
@@ -46,13 +51,17 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
   clusterImages,
   formRef,
   usedClusterNames,
+  osImages,
+  isNutanix,
   ...rest
 }) => {
+  const ocpVersions = getOCPVersions(clusterImages, !!isNutanix, osImages);
+
   const [initialValues, validationSchema] = useDetailsFormik({
-    clusterImages,
+    ocpVersions,
     usedClusterNames,
-    isNutanix: !!rest.isNutanix,
   });
+
   return (
     <Formik
       initialValues={initialValues}
@@ -60,7 +69,12 @@ const ACMClusterDeploymentDetailsStep: React.FC<ACMClusterDeploymentDetailsStepP
       innerRef={formRef}
       onSubmit={noop}
     >
-      <DetailsFormBody clusterImages={clusterImages} {...rest} />
+      <DetailsFormBody
+        clusterImages={clusterImages}
+        osImages={osImages}
+        isNutanix={isNutanix}
+        {...rest}
+      />
     </Formik>
   );
 };

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Alert, Stack, StackItem } from '@patternfly/react-core';
-import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource } from '../../types';
+import { AgentClusterInstallK8sResource, ClusterDeploymentK8sResource, OsImage } from '../../types';
 import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { getOCPVersions, getSelectedVersion } from '../helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
@@ -8,6 +8,8 @@ import {
   ClusterDetailsFormFields,
   ClusterDetailsFormFieldsProps,
 } from './ClusterDetailsFormFields';
+import { useFormikContext } from 'formik';
+import { ClusterDetailsValues, CpuArchitecture, SupportedCpuArchitecture } from '../../../common';
 
 type ClusterDeploymentDetailsFormProps = {
   clusterImages: ClusterImageSetK8sResource[];
@@ -15,6 +17,7 @@ type ClusterDeploymentDetailsFormProps = {
   agentClusterInstall?: AgentClusterInstallK8sResource;
   extensionAfter?: ClusterDetailsFormFieldsProps['extensionAfter'];
   isNutanix?: boolean;
+  osImages?: OsImage[];
 };
 
 const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps> = ({
@@ -23,16 +26,38 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
   clusterImages,
   extensionAfter,
   isNutanix,
+  osImages,
 }) => {
+  const { t } = useTranslation();
   const ocpVersions = React.useMemo(
-    () => getOCPVersions(clusterImages, isNutanix),
-    [clusterImages, isNutanix],
+    () => getOCPVersions(clusterImages, isNutanix, osImages),
+    [clusterImages, isNutanix, osImages],
   );
+
   const forceOpenshiftVersion = agentClusterInstall
     ? getSelectedVersion(clusterImages, agentClusterInstall)
     : undefined;
   const isEditFlow = !!clusterDeployment;
-  const { t } = useTranslation();
+
+  const { values } = useFormikContext<ClusterDetailsValues>();
+
+  const cpuArchitectures = React.useMemo(() => {
+    const cpuArchitectures = [CpuArchitecture.x86, CpuArchitecture.ARM, CpuArchitecture.s390x];
+    if (!osImages) {
+      return cpuArchitectures;
+    }
+
+    const openshiftVersion = ocpVersions
+      .find((ver) => ver.value === values.openshiftVersion)
+      ?.version.split('.')
+      .slice(0, 2)
+      .join('.');
+
+    return osImages
+      .filter((osImage) => osImage.openshiftVersion === openshiftVersion)
+      .map((osImage) => osImage.cpuArchitecture as SupportedCpuArchitecture);
+  }, [osImages, ocpVersions, values.openshiftVersion]);
+
   return (
     <Stack hasGutter>
       {isEditFlow && (
@@ -51,6 +76,7 @@ const ClusterDeploymentDetailsForm: React.FC<ClusterDeploymentDetailsFormProps>
           forceOpenshiftVersion={forceOpenshiftVersion}
           extensionAfter={extensionAfter}
           isNutanix={isNutanix}
+          cpuArchitectures={cpuArchitectures}
         />
       </StackItem>
     </Stack>

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsStep.tsx

@@ -11,6 +11,7 @@ import {
   ClusterDetailsValues,
   useFeatureSupportLevel,
   getRichTextValidation,
+  OpenshiftVersionOptionType,
 } from '../../../common';
 
 import { ClusterDeploymentDetailsStepProps, ClusterDeploymentDetailsValues } from './types';
@@ -25,35 +26,33 @@ import {
   InfraEnvK8sResource,
 } from '../../types';
 import ClusterDeploymentDetailsForm from './ClusterDeploymentDetailsForm';
-import { ClusterImageSetK8sResource } from '../../types/k8s/cluster-image-set';
 import { isCIMFlow, getGridSpans } from './helpers';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 type UseDetailsFormikArgs = {
-  clusterImages: ClusterImageSetK8sResource[];
   usedClusterNames: string[];
+  ocpVersions: OpenshiftVersionOptionType[];
   clusterDeployment?: ClusterDeploymentK8sResource;
   agentClusterInstall?: AgentClusterInstallK8sResource;
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
-  isNutanix: boolean;
 };
 
 export const useDetailsFormik = ({
   clusterDeployment,
   agentClusterInstall,
   agents,
-  clusterImages,
   usedClusterNames,
   infraEnv,
-  isNutanix,
+  ocpVersions,
 }: UseDetailsFormikArgs): [
   ClusterDetailsValues & { networkType: 'OpenShiftSDN' | 'OVNKubernetes' },
   Lazy<{ baseDnsDomain: string }>,
 ] => {
   const { t } = useTranslation();
   const featureSupportLevels = useFeatureSupportLevel();
-  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+  const isEdit = !!clusterDeployment || !!agentClusterInstall;
+
   const cluster = React.useMemo(
     () =>
       clusterDeployment && agentClusterInstall
@@ -66,6 +65,7 @@ export const useDetailsFormik = ({
         : undefined,
     [agentClusterInstall, clusterDeployment, agents, infraEnv],
   );
+
   const initialValues = React.useMemo(
     () => {
       const initValues = getClusterDetailsInitialValues({
@@ -85,7 +85,6 @@ export const useDetailsFormik = ({
     [], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const isEdit = !!clusterDeployment || !!agentClusterInstall;
   const validationSchema = React.useMemo(
     () =>
       getClusterDetailsValidationSchema({
@@ -117,14 +116,15 @@ const ClusterDeploymentDetailsStep: React.FC<ClusterDeploymentDetailsStepProps>
   const { addAlert } = useAlerts();
   const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
   const { t } = useTranslation();
+  const ocpVersions = getOCPVersions(clusterImages, isNutanix);
+
   const [initialValues, validationSchema] = useDetailsFormik({
     clusterDeployment,
+    ocpVersions,
     agentClusterInstall,
     agents,
-    clusterImages,
     usedClusterNames,
     infraEnv,
-    isNutanix,
   });
   const next = () =>
     isCIMFlow(clusterDeployment)

package/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -16,13 +16,13 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 import { SNOControlGroup } from '../../../common';
 import { getNetworkType } from '../helpers';
-
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
   extensionAfter?: { [key: string]: React.ReactElement };
   versions: OpenshiftVersionOptionType[];
   isNutanix?: boolean;
+  cpuArchitectures?: string[];
 };
 
 export const BaseDnsHelperText: React.FC<{ name?: string; baseDnsDomain?: string }> = ({
@@ -49,6 +49,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
   forceOpenshiftVersion,
   extensionAfter,
   isNutanix,
+  cpuArchitectures,
 }) => {
   const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
   const { name, baseDnsDomain, highAvailabilityMode } = values;
@@ -112,7 +113,7 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
       {!isNutanix && (
         <>
           <SNOControlGroup versions={versions} highAvailabilityMode={highAvailabilityMode} />
-          <CpuArchitectureDropdown isDisabled={isEditFlow} />
+          <CpuArchitectureDropdown isDisabled={isEditFlow} cpuArchitectures={cpuArchitectures} />
         </>
       )}
       {extensionAfter?.['openshiftVersion'] && extensionAfter['openshiftVersion']}

package/lib/cim/components/InfraEnv/EnvironmentDetails.tsx

@@ -169,6 +169,16 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   .label ?? CpuArchitecture.x86}
               </DescriptionListDescription>
             </DescriptionListGroup>
+
+            {infraEnv.spec?.osImageVersion && (
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
+                <DescriptionListDescription>
+                  {`OpenShift ${infraEnv.spec?.osImageVersion}`}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            )}
+
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>

package/lib/cim/components/InfraEnv/InfraEnvFormPage.tsx

@@ -49,6 +49,8 @@ import { getErrorMessage } from '../../../common/utils';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
+import OpenshiftVersionDropdown from './OpenshiftVersionDropdown';
+import { OsImage } from '../../types';
 
 export type EnvironmentStepFormValues = {
   name: string;
@@ -67,6 +69,7 @@ export type EnvironmentStepFormValues = {
   >;
   enableNtpSources: boolean;
   additionalNtpSources: string;
+  osImageVersion?: string;
 };
 
 const validationSchema = (usedNames: string[], t: TFunction) =>
@@ -116,6 +119,7 @@ const initialValues: EnvironmentStepFormValues = {
   cpuArchitecture: CpuArchitecture.x86,
   enableNtpSources: false,
   additionalNtpSources: '',
+  osImageVersion: '',
 };
 
 type InfraEnvFormProps = {
@@ -123,6 +127,7 @@ type InfraEnvFormProps = {
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
@@ -131,6 +136,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
   pullSecret,
   sshPublicKey,
   docVersion,
+  osImages,
 }) => {
   const { values, setFieldValue } = useFormikContext<EnvironmentStepFormValues>();
   const { t } = useTranslation();
@@ -222,6 +228,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
             </Flex>
           </FormGroup>
           <CpuArchitectureDropdown />
+          {!!osImages && <OpenshiftVersionDropdown osImages={osImages} />}
           <RichInputField
             label={t('ai:Location')}
             name="location"
@@ -276,6 +283,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   pullSecret?: string;
   sshPublicKey?: string;
   docVersion: string;
+  osImages?: OsImage[];
 };
 
 export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({

package/lib/cim/components/InfraEnv/OpenshiftVersionDropdown.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core/deprecated';
+import { FormGroup, Tooltip } from '@patternfly/react-core';
+import { useField } from 'formik';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { architectureData, getFieldId, SupportedCpuArchitecture } from '../../../common';
+import { OsImage } from '../../types';
+
+const OpenshiftVersionDropdown = ({ osImages }: { osImages: OsImage[] }) => {
+  const { t } = useTranslation();
+  const [{ name, value }, , { setValue }] = useField<string>('osImageVersion');
+  const [{ value: cpuArchitecture }] = useField<string>('cpuArchitecture');
+  const [osImageOpen, setOsImageOpen] = React.useState(false);
+  const fieldId = getFieldId(name, 'input');
+
+  const onOsImageSelect = (e?: React.SyntheticEvent<HTMLDivElement>) => {
+    const val = e?.currentTarget.id || '';
+    setValue(val);
+    setOsImageOpen(false);
+  };
+
+  const filteredImages = React.useMemo(
+    () => osImages.filter((image) => image.cpuArchitecture === cpuArchitecture),
+    [osImages, cpuArchitecture],
+  );
+
+  React.useEffect(() => {
+    if (filteredImages.length === 0 && value !== '') {
+      setValue('');
+    }
+  }, [filteredImages.length, setValue, t, value]);
+
+  return (
+    <FormGroup isInline fieldId={fieldId} label={t('ai:OpenShift version')}>
+      <Tooltip
+        content={t(
+          'ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.',
+          architectureData[cpuArchitecture as SupportedCpuArchitecture].label,
+        )}
+        hidden={!!filteredImages.length}
+      >
+        <Dropdown
+          toggle={
+            <DropdownToggle
+              onToggle={() => setOsImageOpen(!osImageOpen)}
+              className="pf-u-w-100"
+              isDisabled={!filteredImages.length}
+            >
+              {value ? `OpenShift ${value}` : t('ai:No version selected')}
+            </DropdownToggle>
+          }
+          name="osImageVersion"
+          isOpen={osImageOpen}
+          onSelect={onOsImageSelect}
+          dropdownItems={[
+            <DropdownItem key={'NO_VALUE'} value={''}>
+              {t('ai:No version selected')}
+            </DropdownItem>,
+            ...filteredImages.map((image) => (
+              <DropdownItem key={image.openshiftVersion} id={image.openshiftVersion}>
+                {`OpenShift ${image.openshiftVersion}`}
+              </DropdownItem>
+            )),
+          ]}
+          className="pf-u-w-100"
+        />
+      </Tooltip>
+    </FormGroup>
+  );
+};
+
+export default OpenshiftVersionDropdown;

package/lib/cim/components/common/CpuArchitectureDropdown.tsx

@@ -12,9 +12,35 @@ import {
 import { useField } from 'formik';
 import { useFormikHelpers } from '../../../common/hooks/useFormikHelpers';
 
-const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean }) => {
+const allDropdownItems = {
+  [CpuArchitecture.x86]: (
+    <DropdownItem key={'x86_64'} id="x86_64" description={architectureData['x86_64'].description}>
+      {architectureData['x86_64'].label}
+    </DropdownItem>
+  ),
+  [CpuArchitecture.ARM]: (
+    <DropdownItem key={'arm64'} id="arm64" description={architectureData['arm64'].description}>
+      {architectureData['arm64'].label}
+    </DropdownItem>
+  ),
+  [CpuArchitecture.s390x]: (
+    <DropdownItem key={'s390x'} id="s390x" description={architectureData['s390x'].description}>
+      {architectureData['s390x'].label}
+    </DropdownItem>
+  ),
+};
+
+const CpuArchitectureDropdown = ({
+  isDisabled = false,
+  cpuArchitectures,
+}: {
+  isDisabled?: boolean;
+  cpuArchitectures?: string[];
+}) => {
   const { t } = useTranslation();
-  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture>('cpuArchitecture');
+  const [{ name, value }, , { setValue }] = useField<SupportedCpuArchitecture | ''>(
+    'cpuArchitecture',
+  );
   const [cpuArchOpen, setCpuArchOpen] = React.useState(false);
   const fieldId = getFieldId(name, 'input');
   const { setValue: setUserManagedNetworking } = useFormikHelpers<boolean>('userManagedNetworking');
@@ -27,8 +53,24 @@ const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean
     setCpuArchOpen(false);
   };
 
+  const dropdownItems = React.useMemo(() => {
+    if (!cpuArchitectures) {
+      return Object.values(allDropdownItems);
+    } else {
+      return Object.entries(allDropdownItems)
+        .filter(([key, _]) => cpuArchitectures.includes(key))
+        .map(([_, val]) => val);
+    }
+  }, [cpuArchitectures]);
+
+  React.useEffect(() => {
+    if (!isDisabled && value !== '' && cpuArchitectures && !cpuArchitectures?.includes(value)) {
+      setValue('');
+    }
+  }, [cpuArchitectures, isDisabled, setValue, value]);
+
   return !isDisabled ? (
-    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} required>
+    <FormGroup isInline fieldId={fieldId} label={t('ai:CPU architecture')} isRequired>
       <Dropdown
         toggle={
           <DropdownToggle onToggle={() => setCpuArchOpen(!cpuArchOpen)} className="pf-u-w-100">
@@ -38,35 +80,13 @@ const CpuArchitectureDropdown = ({ isDisabled = false }: { isDisabled?: boolean
         name="cpuArchitecture"
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
-        dropdownItems={[
-          <DropdownItem
-            key={'x86_64'}
-            id="x86_64"
-            description={architectureData['x86_64'].description}
-          >
-            {architectureData['x86_64'].label}
-          </DropdownItem>,
-          <DropdownItem
-            key={'arm64'}
-            id="arm64"
-            description={architectureData['arm64'].description}
-          >
-            {architectureData['arm64'].label}
-          </DropdownItem>,
-          <DropdownItem
-            key={'s390x'}
-            id="s390x"
-            description={architectureData['s390x'].description}
-          >
-            {architectureData['s390x'].label}
-          </DropdownItem>,
-        ]}
+        dropdownItems={dropdownItems}
         className="pf-u-w-100"
       />
     </FormGroup>
   ) : (
     <StaticField name={'cpuArchitecture'} label={t('ai:CPU architecture')} isRequired>
-      {architectureData[value].label}
+      {architectureData[value as SupportedCpuArchitecture].label}
     </StaticField>
   );
 };

package/lib/cim/components/helpers/versions.ts

@@ -4,6 +4,7 @@ import {
   AgentClusterInstallK8sResource,
   ClusterImageSetK8sResource,
   ClusterVersionK8sResource,
+  OsImage,
 } from '../../types';
 import { OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
@@ -51,7 +52,12 @@ export const isValidImageSet = (cis: ClusterImageSetK8sResource, architectures?:
 export const getOCPVersions = (
   clusterImageSets: ClusterImageSetK8sResource[],
   isNutanix?: boolean | undefined,
+  osImages?: OsImage[],
 ): OpenshiftVersionOptionType[] => {
+  const ocpImageVersions = Array.from(
+    new Set(osImages?.map((osImage) => osImage.openshiftVersion)),
+  );
+
   const versions = clusterImageSets
     .filter((clusterImageSet) =>
       isValidImageSet(clusterImageSet, isNutanix ? supportedNutanixPlatforms : undefined),
@@ -67,6 +73,10 @@ export const getOCPVersions = (
         supportLevel: 'production', // getSupportLevelFromChannel(clusterImageSet.metadata?.labels?.channel),
       };
     })
+    .filter((ocpVersion) => {
+      const ver = ocpVersion.version.split('.').slice(0, 2).join('.');
+      return !!ocpImageVersions.length ? ocpImageVersions.includes(ver) : true;
+    })
     .sort(
       (versionA, versionB) => /* descending */ -1 * versionA.label.localeCompare(versionB.label),
     );
@@ -75,6 +85,7 @@ export const getOCPVersions = (
     // make sure that the pre-selected one is the first-one after sorting
     versions[0].default = true;
   }
+
   const deduped = uniqBy(versions, (v) => v.version);
   return deduped;
 };
@@ -86,6 +97,7 @@ export const getSelectedVersion = (
   const selectedClusterImage = clusterImages.find(
     (ci) => ci.metadata?.name === agentClusterInstall?.spec?.imageSetRef?.name,
   );
+
   return selectedClusterImage
     ? getOCPVersions([selectedClusterImage])?.[0]?.version
     : agentClusterInstall?.spec?.imageSetRef?.name;

package/lib/cim/types/k8s/agent-service-config.ts

@@ -11,6 +11,13 @@ type StorageConfig = {
   };
 };
 
+export type OsImage = {
+  cpuArchitecture: string;
+  openshiftVersion: string;
+  url: string;
+  version: string;
+};
+
 export type AgentServiceConfigConditionType = 'DeploymentsHealthy' | 'ReconcileCompleted';
 
 export type AgentServiceConfigK8sResource = K8sResourceCommon & {
@@ -18,6 +25,7 @@ export type AgentServiceConfigK8sResource = K8sResourceCommon & {
     databaseStorage: StorageConfig;
     filesystemStorage: StorageConfig;
     imageStorage: StorageConfig;
+    osImages?: OsImage[];
   };
   status?: {
     conditions?: StatusCondition<AgentServiceConfigConditionType>[];

package/lib/cim/types/k8s/infra-env-k8s-resource.ts

@@ -24,6 +24,7 @@ export type InfraEnvK8sResource = K8sResourceCommon & {
     nmStateConfigLabelSelector?: Selector;
     additionalNTPSources?: string[];
     cpuArchitecture?: 'x86_64' | 'arm64' | 's390x';
+    osImageVersion?: string;
   };
   status?: {
     agentLabelSelector?: Selector;

package/lib/common/components/clusterWizard/clusterDetailsValidation.ts

@@ -81,6 +81,7 @@ export const getClusterDetailsInitialValues = ({
     platform: cluster?.platform?.type || 'none',
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
+    controlPlaneCount: cluster?.controlPlaneCount?.toString() || '3',
   };
 };
 

package/lib/common/components/clusterWizard/types.ts

@@ -34,6 +34,7 @@ export type ClusterDetailsValues = {
   platform: PlatformType;
   customOpenshiftSelect: OpenshiftVersionOptionType | null;
   userManagedNetworking: boolean;
+  controlPlaneCount: string;
 };
 
 export type HostsValidationsProps<S extends string, V extends string[]> = {

package/lib/common/components/hosts/HostStatus.tsx

@@ -57,7 +57,6 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   const { host } = props;
   const { status, statusInfo } = host;
   const { t } = useTranslation();
-
   if (['installing-in-progress'].includes(status)) {
     return (
       <TextContent>
@@ -141,7 +140,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
             <Text>{details}</Text>
           </TextContent>
         )}
-        <HostValidationGroups {...props} />
+        <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
       </StackItem>
     </Stack>
   );