@openshift-assisted/ui-lib 2.12.1-cim → 2.13.0-cim

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

@@ -11,9 +11,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');
@@ -26,8 +52,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">
@@ -37,35 +79,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/ui/formik/LabelField.css

@@ -6,6 +6,11 @@
   border: 1px solid transparent;
   outline: none;
   width: 100%;
+  background-color: initial;
+}
+
+.label-field__input::placeholder {
+  color: var(--pf-c-form-control--placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.12.1-cim",
-    "@openshift-assisted/types": "2.12.1-cim",
+    "@openshift-assisted/locales": "2.13.0-cim",
+    "@openshift-assisted/types": "2.13.0-cim",
     "@openshift-console/dynamic-plugin-sdk": "0.0.3",
     "@patternfly/patternfly": "^4.222.4",
     "@patternfly/react-code-editor": "^4.82.113",
@@ -141,5 +141,5 @@
       ]
     }
   },
-  "version": "2.12.1-cim"
+  "version": "2.13.0-cim"
 }