@openshift-assisted/ui-lib 2.49.0 → 2.50.1

package/lib/cim/components/Hypershift/HostedClusterWizard/HostsStep/HostsStep.tsx

@@ -6,8 +6,6 @@ import { Stack, StackItem } from '@patternfly/react-core';
 import HostsForm from './HostsForm';
 import { HostsStepProps, HostsFormValues, NodePoolFormValue } from './types';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
-import { getAgentsForSelection } from '../../../helpers';
-import { INFRAENV_AGENTINSTALL_LABEL_KEY } from '../../../common';
 import { TFunction } from 'i18next';
 import { NodePoolK8sResource } from '../../types';
 
@@ -61,16 +59,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
   olmCatalogPlacement,
 }) => {
   const { t } = useTranslation();
-  const availableAgents = getAgentsForSelection(agents);
 
-  const infraEnvsWithAgents = infraEnvs.filter((ie) =>
-    availableAgents.some(
-      (a) =>
-        a.metadata?.labels?.[INFRAENV_AGENTINSTALL_LABEL_KEY] === ie.metadata?.name &&
-        a.metadata?.namespace === ie.metadata?.namespace &&
-        !a.spec.clusterDeploymentName,
-    ),
-  );
   return (
     <Stack hasGutter>
       <StackItem>
@@ -84,7 +73,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
             controllerAvailabilityPolicy: controllerAvailabilityPolicy || 'HighlyAvailable',
             infrastructureAvailabilityPolicy: infrastructureAvailabilityPolicy || 'HighlyAvailable',
             olmCatalogPlacement: olmCatalogPlacement || 'management',
-            agentNamespace: initInfraEnv || infraEnvsWithAgents[0]?.metadata?.namespace || '',
+            agentNamespace: initInfraEnv || infraEnvs[0]?.metadata?.namespace || '',
             nodePools: initNodePools || [
               {
                 nodePoolName: `nodepool-${clusterName}-1`,
@@ -106,7 +95,7 @@ const HostsStep: React.FC<HostsStepProps> = ({
         >
           <HostsForm
             onValuesChanged={onValuesChanged}
-            infraEnvs={infraEnvsWithAgents}
+            infraEnvs={infraEnvs}
             agents={agents}
             clusterName={clusterName}
             initReleaseImage={initReleaseImage}

package/lib/{common/components/clusterConfiguration → cim/components/Hypershift/HostedClusterWizard/NetworkStep}/AdvancedNetworkFields.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Grid, TextInputTypes } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
-import { InputField } from '../../components/ui';
-import { NetworkConfigurationValues } from '../../types/clusters';
-import { PREFIX_MAX_RESTRICTION } from '../../config/constants';
-import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { InputField } from '../../../../../common/components/ui';
+import { NetworkConfigurationValues } from '../../../../../common/types/clusters';
+import { PREFIX_MAX_RESTRICTION } from '../../../../../common/config/constants';
+import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 type AdvancedNetworkFieldsProps = {
   isClusterCIDRIPv6: boolean;

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkForm.tsx

@@ -16,7 +16,7 @@ import { useTemptiflySync } from '../../hooks/useTemptiflySync';
 import { useTranslation } from '../../../../../common/hooks/use-translation-wrapper';
 
 import './NetworkForm.css';
-import AdvancedNetworkFields from '../../../../../common/components/clusterConfiguration/AdvancedNetworkFields';
+import AdvancedNetworkFields from './AdvancedNetworkFields';
 
 const NetworkForm: React.FC<NetworkFormProps> = ({ onValuesChanged }) => {
   const { values } = useFormikContext<NetworkFormValues>();

package/lib/cim/components/Hypershift/HostedClusterWizard/NetworkStep/NetworkStep.tsx

@@ -18,22 +18,22 @@ import { useTranslation } from '../../../../../common/hooks/use-translation-wrap
 const getValidationSchema = (t: TFunction) =>
   Yup.lazy((values: NetworkFormValues) =>
     Yup.object<NetworkFormValues>().shape({
-      sshPublicKey: sshPublicKeyValidationSchema.required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t).required(t('ai:Required field')),
       clusterNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.serviceNetworkCidr)
+        ? ipBlockValidationSchema(values.serviceNetworkCidr, t)
         : Yup.string(),
       serviceNetworkCidr: values.isAdvanced
-        ? ipBlockValidationSchema(values.clusterNetworkCidr)
+        ? ipBlockValidationSchema(values.clusterNetworkCidr, t)
         : Yup.string(),
       clusterNetworkHostPrefix: values.isAdvanced
-        ? hostPrefixValidationSchema(values.clusterNetworkCidr)
+        ? hostPrefixValidationSchema(values.clusterNetworkCidr, t)
         : Yup.number(),
-      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy' }),
-      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy' }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      httpProxy: httpProxyValidationSchema({ values, pairValueName: 'httpsProxy', t }),
+      httpsProxy: httpProxyValidationSchema({ values, pairValueName: 'httpProxy', t }), // share the schema, httpS is currently not supported
+      noProxy: noProxyValidationSchema(t),
       nodePortAddress:
         values.apiPublishingStrategy === 'NodePort'
-          ? day2ApiVipValidationSchema.required(t('ai:Required field'))
+          ? day2ApiVipValidationSchema(t).required(t('ai:Required field'))
           : Yup.string(),
     }),
   );

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

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   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';
@@ -72,14 +77,8 @@ const AddNodePoolModal = ({
   };
 
   return (
-    <Modal
-      aria-label="add node pool dialog"
-      title={t('ai:Add Nodepool')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="add node pool dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Add nodepool')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: `nodepool-${hostedCluster.metadata?.name || ''}-${Math.floor(
@@ -97,7 +96,7 @@ const AddNodePoolModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm agents={namespaceAgents} hostedCluster={hostedCluster} />
@@ -108,8 +107,8 @@ const AddNodePoolModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -121,7 +120,7 @@ const AddNodePoolModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

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

@@ -1,10 +1,15 @@
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   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';
@@ -109,14 +114,8 @@ const ManageHostsModal = ({
   };
 
   return (
-    <Modal
-      aria-label="Manage hosts dialog"
-      title={t('ai:Manage hosts')}
-      isOpen
-      onClose={onClose}
-      variant={ModalVariant.medium}
-      hasNoBodyWrapper
-    >
+    <Modal aria-label="Manage hosts dialog" isOpen onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Manage hosts')} />
       <Formik<NodePoolFormValues>
         initialValues={{
           nodePoolName: nodePool.metadata?.name || '',
@@ -135,7 +134,7 @@ const ManageHostsModal = ({
       >
         {({ isSubmitting, isValid, submitForm }) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <NodePoolForm
@@ -151,8 +150,8 @@ const ManageHostsModal = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -164,7 +163,7 @@ const ManageHostsModal = ({
               <Button variant="link" onClick={onClose}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

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

@@ -94,7 +94,7 @@ const NodePoolForm = ({ agents, nodePool, hostedCluster, agentMachines }: NodePo
           />
         </GridItem>
         <GridItem>
-          <DescriptionList isHorizontal>
+          <DescriptionList isHorizontal horizontalTermWidthModifier={{ default: '17ch' }}>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('ai:OpenShift version')}</DescriptionListTerm>
               <DescriptionListDescription>

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

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { Alert, Button, Spinner, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   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';
@@ -23,14 +28,12 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
   return (
     <Modal
       aria-label="remove node pool dialog"
-      title={t('ai:Remove nodepool')}
       isOpen
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
-      titleIconVariant="warning"
     >
-      <ModalBoxBody>
+      <ModalHeader titleIconVariant="warning" title={t('ai:Remove nodepool')} />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             {t(
@@ -44,8 +47,8 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
             </StackItem>
           )}
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           onClick={() => {
             const remove = async () => {
@@ -71,7 +74,7 @@ const RemoveNodePoolModal = ({ onClose, onRemove, nodePool }: RemoveNodePoolModa
         <Button variant="link" onClick={onClose}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -12,6 +12,7 @@ import {
   ContentVariants,
   Title,
   TitleSizes,
+  Label,
 } 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';
@@ -19,7 +20,7 @@ import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-
 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 { architectureData, LabelValue } from '../../../common';
+import { architectureData } from '../../../common';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { AGENT_LOCATION_LABEL_KEY } from '../common';
 import EditPullSecretModal, { EditPullSecretModalProps } from '../modals/EditPullSecretModal';
@@ -173,7 +174,9 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
               <DescriptionListTerm>{t('ai:Labels')}</DescriptionListTerm>
               <DescriptionListDescription>
                 {Object.keys(infraEnv.metadata?.labels || {}).map((k) => (
-                  <LabelValue key={k} value={`${k}=${infraEnv.metadata?.labels?.[k] || ''}`} />
+                  <Label key={k}>
+                    {k}={infraEnv.metadata?.labels?.[k] || ''}
+                  </Label>
                 ))}
               </DescriptionListDescription>
             </DescriptionListGroup>
@@ -209,7 +212,7 @@ const EnvironmentDetails: React.FC<EnvironmentDetailsProps> = ({
                   <DescriptionListDescription>
                     {infraEnv.spec?.proxy?.noProxy
                       ?.split(',')
-                      .map((k) => <LabelValue key={k} value={`${k}`} />) || <NotConfigured />}
+                      .map((k) => <Label key={k}>{k}</Label>) || <NotConfigured />}
                   </DescriptionListDescription>
                 </>
               )}

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

@@ -3,14 +3,12 @@ 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 { getInfraEnvDocs } from '../common/constants';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 export type EnvironmentErrorsProps = {
   infraEnv: InfraEnvK8sResource;
   docVersion: string;
-  inModal?: boolean;
   children?: React.ReactNode;
 };
 
@@ -18,7 +16,6 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
   infraEnv,
   docVersion,
   children,
-  inModal,
 }) => {
   const infraEnvAlerts = getFailingResourceConditions(infraEnv, ['ImageCreated']);
   const { t } = useTranslation();
@@ -27,7 +24,7 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
     return <>{children}</>;
   }
 
-  const errors = (
+  return (
     <>
       {!infraEnv.status && (
         <Alert
@@ -52,6 +49,4 @@ export const EnvironmentErrors: React.FC<EnvironmentErrorsProps> = ({
       />
     </>
   );
-
-  return inModal ? <ModalBoxBody>{errors}</ModalBoxBody> : errors;
 };

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

@@ -4,16 +4,18 @@ import { DropdownItem } from '@patternfly/react-core';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
-  clusterColumn,
   useAgentsTable,
   useAgentsFilter,
-  agentHostnameColumn,
   canEditBMH,
   canEditAgent,
   canChangeHostname,
 } from '../Agent/tableUtils';
+import {
+  discoveryTypeColumn,
+  agentStatusColumn,
+  clusterColumn,
+  agentHostnameColumn,
+} from '../Agent/tableColumns';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
@@ -25,8 +27,6 @@ import {
   gpusColumn,
   memoryColumn,
   labelsColumn,
-} from '../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   MassChangeHostnameModal,
   DeleteHostAction,

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

@@ -76,32 +76,34 @@ const validationSchema = (usedNames: string[], t: TFunction) =>
   Yup.lazy((values: EnvironmentStepFormValues) =>
     Yup.object<EnvironmentStepFormValues>().shape({
       name: richNameValidationSchema(t, usedNames),
-      location: locationValidationSchema(t).required(t('ai:Location is a required field.')),
-      pullSecret: pullSecretValidationSchema.required(t('ai:Pull secret is a required field.')),
-      sshPublicKey: sshPublicKeyValidationSchema,
+      location: locationValidationSchema(t),
+      pullSecret: pullSecretValidationSchema(t).required(t('ai:Required field')),
+      sshPublicKey: sshPublicKeyValidationSchema(t),
       httpProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpsProxy',
         allowEmpty: true,
+        t,
       }),
       httpsProxy: httpProxyValidationSchema({
         values,
         pairValueName: 'httpProxy',
         allowEmpty: true,
+        t,
       }), // share the schema, httpS is currently not supported
-      noProxy: noProxyValidationSchema,
+      noProxy: noProxyValidationSchema(t),
       labels: Yup.array()
         .of(Yup.string())
         .test(
           'label-equals-validation',
-          'Label selector needs to be in a `key=value` form',
+          t('ai:Label needs to be in a `key=value` form'),
           (values) =>
             (values as string[]).every((value) => {
               const parts = value.split('=');
               return parts.length === 2;
             }),
         ),
-      additionalNtpSources: ntpSourceValidationSchema,
+      additionalNtpSources: ntpSourceValidationSchema(t),
     }),
   );
 
@@ -130,7 +132,7 @@ type InfraEnvFormProps = {
   osImages?: OsImage[];
 };
 
-const InfraEnvForm: React.FC<InfraEnvFormProps> = ({
+const InfraEnvForm: React.FC<React.PropsWithChildren<InfraEnvFormProps>> = ({
   onValuesChanged,
   children,
   pullSecret,
@@ -286,7 +288,7 @@ type InfraEnvFormPageProps = InfraEnvFormProps & {
   osImages?: OsImage[];
 };
 
-export const InfraEnvFormPage: React.FC<InfraEnvFormPageProps> = ({
+export const InfraEnvFormPage: React.FC<React.PropsWithChildren<InfraEnvFormPageProps>> = ({
   usedNames,
   onSubmit,
   onClose,

package/lib/cim/components/YamlPreview/YamlPreview.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import MonacoEditor from 'react-monaco-editor';
-import Measure from 'react-measure';
+import MonacoEditor, { EditorDidMount, EditorWillMount } from 'react-monaco-editor';
+import { editor } from 'monaco-editor';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   Alert,
   AlertActionCloseButton,
@@ -13,11 +14,11 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 
 const options = { readOnly: true, scrollBeyondLastLine: false };
 
-const theme = {
+const theme: editor.IStandaloneThemeData = {
   base: 'vs',
   inherit: true,
   rules: [
-    { background: 'e0e0e0' },
+    { token: '', background: 'e0e0e0' },
     { token: 'number', foreground: '000000' },
     { token: 'type', foreground: '000000' },
     { token: 'string', foreground: '000000' },
@@ -37,19 +38,27 @@ type YamlPreviewProps = {
   loading: boolean;
 };
 
-const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpen, loading }) => {
-  const editorDidMount = React.useCallback((editor) => {
-    /* eslint-disable */
+const YamlPreview: React.FC<React.PropsWithChildren<YamlPreviewProps>> = ({
+  children,
+  code,
+  setPreviewOpen,
+  loading,
+}) => {
+  const editorDidMount = React.useCallback<EditorDidMount>((editor) => {
     editor.layout();
     editor.focus();
-    /* eslint-enable */
   }, []);
 
-  const editorWillMount = React.useCallback((monaco) => {
-    // eslint-disable-next-line
+  const editorWillMount = React.useCallback<EditorWillMount>((monaco) => {
     monaco.editor.defineTheme('acm-console', theme);
   }, []);
   const { t } = useTranslation();
+  const editorRef = React.useRef<HTMLDivElement>(null);
+  const [editorHeight, setEditorHeight] = React.useState<number>();
+  useResizeObserver(editorRef, (entry) => {
+    setEditorHeight(entry.contentRect.height);
+  });
+
   return loading ? (
     <LoadingState content="Loading resources" />
   ) : (
@@ -76,23 +85,19 @@ const YamlPreview: React.FC<YamlPreviewProps> = ({ children, code, setPreviewOpe
         </div>
       </StackItem>
       <StackItem isFilled>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef} style={{ height: '100%' }}>
-              {!!contentRect.bounds?.height && (
-                <MonacoEditor
-                  language="yaml"
-                  theme="acm-console"
-                  height={contentRect.bounds?.height}
-                  value={code}
-                  options={options}
-                  editorDidMount={editorDidMount}
-                  editorWillMount={editorWillMount}
-                />
-              )}
-            </div>
+        <div ref={editorRef} style={{ height: '100%' }}>
+          {!!editorHeight && (
+            <MonacoEditor
+              language="yaml"
+              theme="acm-console"
+              height={editorHeight}
+              value={code}
+              options={options}
+              editorDidMount={editorDidMount}
+              editorWillMount={editorWillMount}
+            />
           )}
-        </Measure>
+        </div>
       </StackItem>
     </Stack>
   );

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

@@ -25,8 +25,8 @@ export const SingleResourceAlerts: React.FC<{
             const [title, ...messages] = c.message.split(/:|\.,/);
             return (
               <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{title}</strong>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {title}
                 </Content>
                 {messages.map((m) => (
                   <Content key={m} component={ContentVariants.li}>
@@ -38,8 +38,8 @@ export const SingleResourceAlerts: React.FC<{
           } else {
             return (
               <React.Fragment key={c.type}>
-                <Content component={ContentVariants.li}>
-                  <strong>{c.type}</strong>
+                <Content component={ContentVariants.li} className="pf-v6-u-font-weight-bold">
+                  {c.type}
                 </Content>
                 <Content component={ContentVariants.li}>{c.reason || ''}</Content>
               </React.Fragment>

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

@@ -22,6 +22,11 @@ export const bmhStatus = (t: TFunction): HostStatus<string> => ({
     title: t('ai:Provisioning'),
     category: 'Bare Metal Host related',
   },
+  deleting: {
+    key: 'deleting',
+    title: t('ai:Deleting'),
+    category: 'Bare Metal Host related',
+  },
   provisioned: {
     key: 'provisioned',
     title: t('ai:Provisioned'),

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

@@ -156,18 +156,16 @@ export const getAICluster = ({
     name: clusterDeployment.spec?.clusterName,
     baseDnsDomain: clusterDeployment.spec?.baseDomain,
     openshiftVersion: installVersion,
-    apiVips:
-      agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP
-        ? [
-            {
-              ip: agentClusterInstall?.status?.apiVIP || agentClusterInstall?.spec?.apiVIP,
-            },
-          ]
-        : [],
-    ingressVips:
-      agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP
-        ? [{ ip: agentClusterInstall?.status?.ingressVIP || agentClusterInstall?.spec?.ingressVIP }]
-        : [],
+    apiVips: agentClusterInstall?.spec?.apiVIPs?.length
+      ? (agentClusterInstall?.spec?.apiVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.apiVIP
+      ? [{ ip: agentClusterInstall?.spec?.apiVIP }]
+      : [],
+    ingressVips: agentClusterInstall?.spec?.ingressVIPs?.length
+      ? (agentClusterInstall?.spec?.ingressVIPs || []).map((ip) => ({ ip }))
+      : agentClusterInstall?.spec?.ingressVIP
+      ? [{ ip: agentClusterInstall?.spec?.ingressVIP }]
+      : [],
     highAvailabilityMode:
       agentClusterInstall?.spec?.provisionRequirements?.controlPlaneAgents === 1 ? 'None' : 'Full',
     status,
@@ -178,9 +176,11 @@ export const getAICluster = ({
     sshPublicKey: agentClusterInstall?.spec?.sshPublicKey,
     clusterNetworkHostPrefix:
       agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.hostPrefix,
-    clusterNetworkCidr: agentClusterInstall?.spec?.networking?.clusterNetwork?.[0]?.cidr,
-    serviceNetworkCidr: agentClusterInstall?.spec?.networking?.serviceNetwork?.[0],
-    machineNetworkCidr: agentClusterInstall?.spec?.networking?.machineNetwork?.[0]?.cidr,
+    clusterNetworks: agentClusterInstall?.spec?.networking?.clusterNetwork,
+    serviceNetworks: agentClusterInstall?.spec?.networking?.serviceNetwork?.map((cidr) => ({
+      cidr,
+    })),
+    machineNetworks: agentClusterInstall?.spec?.networking?.machineNetwork,
     monitoredOperators: [],
     vipDhcpAllocation: false,
     userManagedNetworking: Boolean(