@openshift-assisted/ui-lib 2.16.4-cim → 2.16.5-cim

package/lib/cim/components/Hypershift/forms/NodePoolAgentsForm.tsx

@@ -1,4 +1,4 @@
-import { Alert, AlertVariant, Grid, GridItem, Content } from '@patternfly/react-core';
+import { Alert, AlertVariant, Grid, GridItem, Text } from '@patternfly/react-core';
 import * as React from 'react';
 import { CheckboxField, NumberInputField, PopoverIcon } from '../../../../common';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
@@ -95,7 +95,7 @@ const NodePoolAgentsForm = ({
             variant={AlertVariant.warning}
             title={t('ai:Host count exceeds the current number of available hosts.')}
           >
-            <Content>{t('ai:Scale down the nodepool or make more hosts available.')}</Content>
+            <Text>{t('ai:Scale down the nodepool or make more hosts available.')}</Text>
           </Alert>
         </GridItem>
       )}

package/lib/cim/components/Hypershift/modals/AddNodePoolModal.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik } from 'formik';
 
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/Hypershift/modals/ManageHostsModal.tsx

@@ -1,10 +1,14 @@
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikConfig } from 'formik';
 import * as React from 'react';
 import { AgentK8sResource } from '../../../types';
@@ -62,7 +66,7 @@ const getPatches = (values: NodePoolFormValues, nodePool: NodePoolK8sResource) =
       );
     }
   } else {
-    if (!!nodePool.spec.replicas) {
+    if (nodePool.spec.replicas !== undefined) {
       patches.push({
         op: 'replace',
         value: values.count,
@@ -123,7 +127,7 @@ const ManageHostsModal = ({
           agentLabels: labelsToFormikValue(
             nodePool.spec.platform?.agent?.agentLabelSelector?.matchLabels || {},
           ),
-          count: nodePool.spec.replicas || 1,
+          count: nodePool.spec.replicas || 0,
           useAutoscaling: !!nodePool.spec.autoScaling,
           autoscaling: {
             minReplicas: nodePool.spec.autoScaling?.min || 1,

package/lib/cim/components/Hypershift/modals/RemoveNodePoolModal.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
   ModalBoxBody,
   ModalBoxFooter,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Spinner,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { NodePoolK8sResource } from '../types';
 import { getErrorMessage } from '../../../../common/utils';
 import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/Hypershift/utils/status.tsx

@@ -2,9 +2,9 @@ import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-cir
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InProgressIcon } from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
 import React from 'react';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { AgentK8sResource } from '../../../types';
 import { getAgentStatus } from '../../helpers';
 import { NodePoolK8sResource } from '../types';

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

@@ -103,7 +103,7 @@ const AddHostDropdown = ({
             {!provisioningConfig && (
               <DropdownItem
                 isAriaDisabled
-                className="pf-v6-u-color-200" // visually muted
+                className="pf-v5-u-color-200" // visually muted
                 component="div"
               >
                 <Flex

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

@@ -8,16 +8,17 @@ import {
   Grid,
   GridItem,
   Spinner,
-  Content,
-  ContentVariants,
+  Text,
+  TextContent,
+  TextVariants,
   Title,
   TitleSizes,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 
 import { architectureData, LabelValue } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
@@ -47,7 +48,9 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
   const btn = (
     <>
       {title}&nbsp;
-      <Button icon={<PencilAltIcon />} variant="plain" onClick={onEdit} />
+      <Button variant="plain" onClick={onEdit}>
+        <PencilAltIcon />
+      </Button>
     </>
   );
   return noIcon ? (
@@ -63,7 +66,11 @@ const EditItem: React.FC<EditItemProps> = ({ title, onEdit, isLoading, isWarning
 
 const NotConfigured = () => {
   const { t } = useTranslation();
-  return <Content component={ContentVariants.small}>{t('ai:Not configured')}</Content>;
+  return (
+    <TextContent>
+      <Text component={TextVariants.small}>{t('ai:Not configured')}</Text>
+    </TextContent>
+  );
 };
 
 type EnvironmentDetailsProps = {

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { getFailingResourceConditions } from '../helpers';
 import { InfraEnvK8sResource } from '../../types';
 import { SingleResourceAlerts } from '../common/ResourceAlerts';
-import { Alert, AlertVariant } from '@patternfly/react-core';
-import { ModalBoxBody } from '@patternfly/react-core/deprecated';
+import { Alert, AlertVariant, ModalBoxBody } from '@patternfly/react-core';
 import { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 

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

@@ -22,7 +22,9 @@ import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
+  gpusColumn,
   memoryColumn,
+  labelsColumn,
 } from '../../../common/components/hosts/tableUtils';
 import {
   DiscoveryTroubleshootingModal,
@@ -122,6 +124,9 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     setHostnameFilter,
     setStatusFilter,
     statusFilter,
+    labelFilter,
+    setLabelFilter,
+    hostLabels,
     filteredHosts: hosts,
     sorted,
   } = useAgentsFilter({
@@ -157,8 +162,10 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
         clusterColumn(agents, agentMachines, getClusterDeploymentLink, t),
         discoveredAtColumn(t),
         cpuCoresColumn(t),
+        gpusColumn(t),
         memoryColumn(t),
         disksColumn(t),
+        labelsColumn(t),
       ].filter(Boolean),
     [
       t,
@@ -219,6 +226,9 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
             hostnameFilter={hostnameFilter}
             statusFilter={statusFilter}
             setStatusFilter={setStatusFilter}
+            hostLabels={hostLabels}
+            labelFilter={labelFilter}
+            setLabelFilter={setLabelFilter}
             selectedHostIDs={selectedHostIDs}
             setHostnameFilter={setHostnameFilter}
             {...paginationProps}
@@ -241,6 +251,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
                 onClearFilters={() => {
                   setHostnameFilter(undefined);
                   setStatusFilter([]);
+                  setLabelFilter([]);
                 }}
               />
             ) : (

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

@@ -166,7 +166,7 @@ const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
           <FormGroup
             fieldId="network-type"
             label={t('ai:Network type')}
-            labelHelp={
+            labelIcon={
               <PopoverIcon
                 noVerticalAlign
                 bodyContent={

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as warningColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { getAgentStatus, getBMHStatus } from '../helpers';
 import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
 import { AGENT_BMH_NAME_LABEL_KEY } from '../common';

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

@@ -66,11 +66,14 @@ type InfraTableToolbarProps = ReturnType<typeof usePagination> & {
   setSelectedHostIDs: (items: string[]) => void;
   massActions: React.ReactNode[];
   hosts: Host[];
+  hostLabels: { [key in string]: number };
   statusFilter: string[];
+  labelFilter: string[];
   statusCount: StatusCount;
   hostnameFilter: string | undefined;
   setHostnameFilter: (hostname: string | undefined) => void;
   setStatusFilter: (status: string[]) => void;
+  setLabelFilter: (label: string[]) => void;
   selectedHostIDs: string[];
 };
 
@@ -78,17 +81,22 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   setSelectedHostIDs,
   massActions,
   hosts,
+  hostLabels,
   statusFilter,
+  labelFilter,
   statusCount,
   hostnameFilter,
   setHostnameFilter,
   setStatusFilter,
+  setLabelFilter,
   selectedHostIDs,
   ...paginationProps
 }) => {
   const { t } = useTranslation();
   const agentStatuses = agentStatus(t);
   const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
+  const [labelFilterOpen, setLabelFilterOpen] = React.useState(false);
+
   const itemIDs = React.useMemo(() => hosts.map((h) => h.id), [hosts]);
   const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
   const categoryLabels = getCategoryLabels(t);
@@ -106,13 +114,29 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
     }
   };
 
+  const onLabelFilterToggle = () => setLabelFilterOpen(!labelFilterOpen);
+  const onLabelFilterSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    if (!labelFilter?.includes(value as string)) {
+      const newItems = (labelFilter ? [...labelFilter, value] : [value]) as string[];
+      setLabelFilter(newItems);
+    } else {
+      setLabelFilter(labelFilter?.filter((f) => f !== value));
+    }
+  };
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
       itemIDs={itemIDs}
       setSelectedIDs={setSelectedHostIDs}
       actions={massActions}
-      clearAllFilters={() => setStatusFilter([])}
+      clearAllFilters={() => {
+        setStatusFilter([]);
+        setLabelFilter([]);
+      }}
       {...paginationProps}
     >
       <ToolbarItem>
@@ -123,11 +147,12 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           onClear={() => setHostnameFilter(undefined)}
         />
       </ToolbarItem>
+
       <ToolbarItem>
         <ToolbarFilter
-          labels={statusFilter}
-          deleteLabel={(_, label) => setStatusFilter(statusFilter?.filter((f) => f !== label))}
-          deleteLabelGroup={() => setStatusFilter([])}
+          chips={statusFilter}
+          deleteChip={(_, chip) => setStatusFilter(statusFilter?.filter((f) => f !== chip))}
+          deleteChipGroup={() => setStatusFilter([])}
           categoryName="Status"
         >
           <Dropdown
@@ -175,6 +200,51 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           </Dropdown>
         </ToolbarFilter>
       </ToolbarItem>
+
+      <ToolbarItem>
+        <ToolbarFilter
+          chips={labelFilter}
+          deleteChip={(_, chip) => setLabelFilter(labelFilter.filter((f) => f !== chip))}
+          deleteChipGroup={() => setLabelFilter([])}
+          categoryName={'Labels'}
+        >
+          <Dropdown
+            isOpen={labelFilterOpen}
+            onSelect={onLabelFilterSelect}
+            onOpenChange={onLabelFilterToggle}
+            shouldFocusToggleOnSelect
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isFullWidth
+                onClick={onLabelFilterToggle}
+                isExpanded={labelFilterOpen}
+                icon={<FilterIcon />}
+              >
+                {t('ai:Labels')}
+              </MenuToggle>
+            )}
+          >
+            <DropdownGroup label={t('ai:Labels')}>
+              {Object.entries(hostLabels).map(([label, count]) => (
+                <DropdownItem
+                  hasCheckbox
+                  key={`host-label-${label}`}
+                  value={label}
+                  isSelected={labelFilter?.includes(label)}
+                >
+                  <Split hasGutter>
+                    <SplitItem>{label}</SplitItem>
+                    <SplitItem>
+                      <Badge isRead>{count || 0}</Badge>
+                    </SplitItem>
+                  </Split>
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </Dropdown>
+        </ToolbarFilter>
+      </ToolbarItem>
     </TableToolbar>
   );
 };

package/lib/cim/components/InfraEnv/infra-env.css

@@ -1,7 +1,7 @@
 .infra-env__form {
-  padding-right: var(--pf-v6-c-wizard__main-body--PaddingRight);
+  padding-right: var(--pf-v5-c-wizard__main-body--PaddingRight);
 }
 
 .infra-env-hosts-tab-title__icon {
-  margin-left: var(--pf-v6-global--spacer--xs);
+  margin-left: var(--pf-v5-global--spacer--xs);
 }

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

@@ -86,7 +86,7 @@ const CpuArchitectureDropdown = ({
             id={fieldId}
             ref={toggleRef}
             onClick={() => setCpuArchOpen(!cpuArchOpen)}
-            className="pf-v6-u-w-100"
+            className="pf-v5-u-w-100"
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>

package/lib/cim/components/common/ResourceAlerts.css

@@ -1,5 +1,5 @@
 .cim-resource-alerts {
-  margin-bottom: var(--pf-v6-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
 
 .cim-resource-alerts--noul ul {

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

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Alert, AlertVariant, Content, ContentVariants } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  TextContent,
+  TextList,
+  TextListItem,
+  TextListItemVariants,
+  TextListVariants,
+} from '@patternfly/react-core';
 import { StatusCondition } from '../../types';
 
 import './ResourceAlerts.css';
@@ -19,34 +27,36 @@ export const SingleResourceAlerts: React.FC<{
       isInline
       className="cim-resource-alerts cim-resource-alerts--noul"
     >
-      <Content component={ContentVariants.ul}>
-        {conditions.map((c) => {
-          if (c.message) {
-            const [title, ...messages] = c.message.split(/:|\.,/);
-            return (
-              <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{title}</strong>
-                </Content>
-                {messages.map((m) => (
-                  <Content key={m} component={ContentVariants.li}>
-                    {m}
-                  </Content>
-                ))}
-              </React.Fragment>
-            );
-          } else {
-            return (
-              <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{c.type}</strong>
-                </Content>
-                <Content component={ContentVariants.li}>{c.reason || ''}</Content>
-              </React.Fragment>
-            );
-          }
-        })}
-      </Content>
+      <TextContent>
+        <TextList component={TextListVariants.ul}>
+          {conditions.map((c) => {
+            if (c.message) {
+              const [title, ...messages] = c.message.split(/:|\.,/);
+              return (
+                <React.Fragment key={c.type}>
+                  <TextListItem component={TextListItemVariants.li}>
+                    <strong>{title}</strong>
+                  </TextListItem>
+                  {messages.map((m) => (
+                    <TextListItem key={m} component={TextListItemVariants.li}>
+                      {m}
+                    </TextListItem>
+                  ))}
+                </React.Fragment>
+              );
+            } else {
+              return (
+                <React.Fragment key={c.type}>
+                  <TextListItem component={TextListItemVariants.li}>
+                    <strong>{c.type}</strong>
+                  </TextListItem>
+                  <TextListItem component={TextListItemVariants.li}>{c.reason || ''}</TextListItem>
+                </React.Fragment>
+              );
+            }
+          })}
+        </TextList>
+      </TextContent>
     </Alert>
   );
 };

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

@@ -4,6 +4,10 @@ import { getClusterNameOfAgent } from './agents';
 export const getIsSNOCluster = (agentClusterInstall?: AgentClusterInstallK8sResource) =>
   agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1;
 
+export const getIsTNACluster = (agentClusterInstall?: AgentClusterInstallK8sResource) =>
+  agentClusterInstall?.spec?.provisionRequirements.arbiterAgents === 1 &&
+  agentClusterInstall.spec.provisionRequirements.controlPlaneAgents === 2;
+
 export const getAgentClusterInstallOfAgent = (
   agentClusterInstalls: AgentClusterInstallK8sResource[],
   agent?: AgentK8sResource,

package/lib/cim/components/helpers/agentStatus.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { hostStatus } from '../../../common';
 import { HostStatus } from '../../../common/components/hosts/types';
 import { TFunction } from 'i18next';

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

@@ -18,9 +18,13 @@ const AGENT_FOR_SELECTION_STATUSES: AgentStatus[] = [
 export const hostToAgent = (agents: AgentK8sResource[] = [], host: Host) =>
   agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
 
-export const getAgentsForSelection = (agents: AgentK8sResource[]) =>
+export const getAgentsForSelection = (agents: AgentK8sResource[], isSubmitting?: boolean) =>
   agents.filter((agent) => {
     const key = getAgentStatusKey(agent);
+    if (isSubmitting) {
+      return [...AGENT_FOR_SELECTION_STATUSES, 'specSyncErr'].includes(key as AgentStatus);
+    }
+
     return AGENT_FOR_SELECTION_STATUSES.includes(key as AgentStatus);
   });
 

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

@@ -1,6 +1,11 @@
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import { AgentK8sResource } from '../../types/k8s/agent';
-import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  Host,
+  Inventory,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { getAgentStatusKey, getClusterStatus } from './status';
@@ -70,6 +75,7 @@ export const getAIHosts = (
       infraEnvId: `${agent.metadata?.namespace || ''}/${
         agent.metadata?.labels?.['infraenvs.agent-install.openshift.io'] || ''
       }`,
+      nodeLabels: JSON.stringify(agent.metadata?.labels || {}),
     };
   });
 
@@ -112,6 +118,18 @@ export const getAIHosts = (
   return [...hosts, ...restBmhs];
 };
 
+const extractVersionFromImageSetRef = (imageSetRefName?: string): string | undefined => {
+  if (!imageSetRefName) {
+    return undefined;
+  }
+  // Match pattern like "4.19.18" or "4.19" in strings like "img4.19.18-multi-appsub"
+  const versionMatch = imageSetRefName.match(/(\d+\.\d+)(?:\.\d+)?/);
+  if (versionMatch && versionMatch[1]) {
+    return versionMatch[1];
+  }
+  return undefined;
+};
+
 export const getAICluster = ({
   clusterDeployment,
   agentClusterInstall,
@@ -123,9 +141,13 @@ export const getAICluster = ({
   agents?: AgentK8sResource[];
   infraEnv?: InfraEnvK8sResource;
 }): Cluster => {
+  const imageSetRefName = agentClusterInstall?.spec?.imageSetRef?.name;
+  const extractedVersion = extractVersionFromImageSetRef(imageSetRefName);
+
   const installVersion =
     clusterDeployment.status?.installVersion ||
-    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR];
+    clusterDeployment.metadata?.labels?.[OCP_VERSION_MAJOR_MINOR] ||
+    extractedVersion;
   const [status, statusInfo] = getClusterStatus(agentClusterInstall);
   const aiCluster: Cluster = {
     id: clusterDeployment.metadata?.uid || '',
@@ -174,6 +196,9 @@ export const getAICluster = ({
     cpuArchitecture: getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv),
     networkType: agentClusterInstall?.spec?.networking.networkType,
     controlPlaneCount: agentClusterInstall?.spec?.provisionRequirements.controlPlaneAgents || 3,
+    platform: {
+      type: (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'baremetal') as PlatformType,
+    },
   };
   /*
   aiCluster.agentSelectorMasterLabels =

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

@@ -8,7 +8,7 @@ import {
 } from '../../types';
 import { CpuArchitecture, OpenshiftVersionOptionType } from '../../../common';
 import { OpenshiftVersion } from '@openshift-assisted/types/assisted-installer-service';
-import { isMajorMinorVersionEqualOrGreater } from '../../../common/utils';
+import { getComparableVersionInt } from '../../../common/utils';
 
 export const getVersionFromReleaseImage = (releaseImage = '') => {
   const match = /.+:(\d+\.\d+(?:\.\d+)?(?:-\w+)?)/gm.exec(releaseImage);
@@ -123,5 +123,9 @@ export const getCurrentClusterVersion = (cv?: ClusterVersionK8sResource): string
 
 export const getNetworkType = (
   ocpVersion: OpenshiftVersionOptionType | undefined,
-): 'OVNKubernetes' | 'OpenShiftSDN' =>
-  isMajorMinorVersionEqualOrGreater(ocpVersion?.version, '4.12') ? 'OVNKubernetes' : 'OpenShiftSDN';
+): 'OVNKubernetes' | 'OpenShiftSDN' => {
+  const checkVersionNum = getComparableVersionInt(ocpVersion?.version || '');
+  const toVersionNum = getComparableVersionInt('4.12');
+
+  return !checkVersionNum || checkVersionNum >= toVersionNum ? 'OVNKubernetes' : 'OpenShiftSDN';
+};

package/lib/cim/components/modals/AddBmcHostModal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import { Modal, ModalVariant } from '@patternfly/react-core';
 import BMCForm from '../Agent/BMCForm';
 import { AddBmcHostModalProps } from './types';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/modals/AddBmcHostYamlForm.css

@@ -1,5 +1,5 @@
 .ai-bmc-yaml__error {
   display: block;
-  font-size: var(--pf-v6-global--FontSize--md);
+  font-size: var(--pf-v5-global--FontSize--md);
   color: red;
 }