@openshift-assisted/ui-lib 2.17.0-cim → 2.17.3-cim

package/lib/common/components/clusterWizard/networkingSteps/VirtualIPControlGroup.tsx

@@ -1,31 +1,48 @@
 import React from 'react';
-import { useFormikContext } from 'formik';
-import { Spinner, Alert, AlertVariant } from '@patternfly/react-core';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { HostSubnets, NetworkConfigurationValues } from '../../../types';
-import { CheckboxField, FormikStaticField, InputField } from '../../ui';
-import { NO_SUBNET_SET } from '../../../config';
-import { FeatureSupportLevelBadge } from '../../featureSupportLevels';
-import { useTranslation } from '../../../hooks/use-translation-wrapper';
-import { TFunction } from 'i18next';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Spinner,
+  Alert,
+  AlertVariant,
+  Tooltip,
+  FormGroup,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { NetworkConfigurationValues, HostSubnets } from '../../../types';
+import { NETWORK_TYPE_SDN, DUAL_STACK } from '../../../config';
+import { selectMachineNetworkCIDR, selectApiVip, selectIngressVip } from '../../../selectors';
 import { getVipValidationsById } from '../../clusterConfiguration';
-import { selectApiVip, selectIngressVip } from '../../../selectors';
+import { FormikStaticField, PopoverIcon } from '../../ui';
+import { CheckboxField, InputField } from '../../ui/formik';
+import { useTranslation } from '../../../hooks/use-translation-wrapper';
+import NewFeatureSupportLevelBadge from '../../newFeatureSupportLevels/NewFeatureSupportLevelBadge';
+import { Cluster, Ip, SupportLevel } from '@openshift-assisted/types/assisted-installer-service';
 
 interface VipStaticValueProps {
-  vipName: 'apiVips' | 'ingressVips';
+  id?: string;
+  vipValue: Ip;
   cluster: Cluster;
   validationErrorMessage?: string;
 }
 
-const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticValueProps) => {
-  const { vipDhcpAllocation, machineNetworkCidr } = cluster;
+const VipStaticValue = ({
+  vipValue,
+  cluster,
+  validationErrorMessage,
+  id = 'vip-static',
+}: VipStaticValueProps) => {
+  const { vipDhcpAllocation } = cluster;
+  const machineNetworkCidr = selectMachineNetworkCIDR(cluster);
   const { t } = useTranslation();
-  if (vipDhcpAllocation && cluster[vipName]) {
-    return <>{cluster[vipName]}</>;
+
+  if (vipDhcpAllocation && !!vipValue) {
+    return <span id={`${id}-allocated`}>{vipValue}</span>;
   }
   if (vipDhcpAllocation && validationErrorMessage) {
     return (
       <Alert
+        id={`${id}-alert-allocation-failed`}
         variant={AlertVariant.danger}
         title={t('ai:The DHCP server failed to allocate the IP')}
         isInline
@@ -37,61 +54,37 @@ const VipStaticValue = ({ vipName, cluster, validationErrorMessage }: VipStaticV
   if (vipDhcpAllocation && machineNetworkCidr) {
     return (
       <>
-        <Spinner size="md" data-testid="vip-static-value-spinner" />
+        <Spinner size="md" id={`${id}-allocating`} data-testid={`vip-static-${id}-value-spinner`} />
         <i>{t('ai:This IP is being allocated by the DHCP server')}</i>
       </>
     );
   }
-  return <>{t('ai:<i>This IP will be allocated by the DHCP server</i>')}</>;
-};
-
-const getVipHelperSuffix = (
-  t: TFunction,
-  vip?: string,
-  vipDhcpAllocation?: boolean,
-  vipDhcpAllocationFormValue?: boolean,
-): string => {
-  if (!vipDhcpAllocationFormValue) {
-    return t(
-      'ai:Make sure that the VIP is unique and not used by any other device on your network.',
-    );
-  }
-  if (vipDhcpAllocation && vip) {
-    return t('ai:This IP was allocated by the DHCP server.');
-  }
-  return '';
+  return <i>{t('ai:This IP will be allocated by the DHCP server')}</i>;
 };
 
 export type VirtualIPControlGroupProps = {
   cluster: Cluster;
   hostSubnets: HostSubnets;
   isVipDhcpAllocationDisabled?: boolean;
+  supportLevel?: SupportLevel;
+  isViewerMode?: boolean;
 };
 
 export const VirtualIPControlGroup = ({
   cluster,
   hostSubnets,
   isVipDhcpAllocationDisabled,
+  supportLevel,
+  isViewerMode = false,
 }: VirtualIPControlGroupProps) => {
-  const { values } = useFormikContext<NetworkConfigurationValues>();
+  const { values, setFieldValue } = useFormikContext<NetworkConfigurationValues>();
   const { t } = useTranslation();
-  const vipHelperSuffix = getVipHelperSuffix(
-    t,
-    selectApiVip(cluster),
-    cluster.vipDhcpAllocation,
-    values.vipDhcpAllocation,
-  );
-  const apiVipHelperText = t(
-    'ai:Provide an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+
+  const apiVipPopoverContent = t(
+    'ai:Provides an endpoint for users, both human and machine, to interact with and configure the platform. If needed, contact your IT manager for more information.',
   );
-  const ingressVipHelperText = t(
-    'ai:Provide an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information. {{vipHelperSuffix}}',
-    {
-      vipHelperSuffix: vipHelperSuffix,
-    },
+  const ingressVipPopoverContent = t(
+    'ai:Provides an endpoint for application traffic flowing in from outside the cluster. If needed, contact your IT manager for more information.',
   );
 
   const {
@@ -102,70 +95,196 @@ export const VirtualIPControlGroup = ({
     [t, cluster.validationsInfo],
   );
 
+  const enableAllocation = values.networkType === NETWORK_TYPE_SDN;
+  const isDualStack = values.stackType === DUAL_STACK;
+  const isVipInputDisabled = !hostSubnets.length || !values.machineNetworks?.[0]?.cidr;
+
+  React.useEffect(() => {
+    if (!isViewerMode && !enableAllocation) {
+      setFieldValue('vipDhcpAllocation', false);
+    }
+  }, [enableAllocation, isViewerMode, setFieldValue]);
+
+  // Ensure VIP arrays exist when (re-)entering cluster-managed networking.
+  React.useEffect(() => {
+    if (
+      isViewerMode ||
+      values.managedNetworkingType !== 'clusterManaged' ||
+      values.vipDhcpAllocation
+    ) {
+      return;
+    }
+
+    const vipCount = values.stackType === DUAL_STACK ? 2 : 1;
+    const blankVipEntriesArray = Array.from({ length: vipCount }, () => ({
+      ip: '',
+      clusterId: cluster.id,
+    }));
+
+    const apiVipsEmpty = !values.apiVips || values.apiVips.length === 0;
+    const ingressVipsEmpty = !values.ingressVips || values.ingressVips.length === 0;
+
+    if (apiVipsEmpty) {
+      setFieldValue('apiVips', blankVipEntriesArray, false);
+    }
+    if (ingressVipsEmpty) {
+      setFieldValue('ingressVips', blankVipEntriesArray, false);
+    }
+  }, [
+    cluster.id,
+    isViewerMode,
+    setFieldValue,
+    values.apiVips,
+    values.ingressVips,
+    values.managedNetworkingType,
+    values.stackType,
+    values.vipDhcpAllocation,
+  ]);
+
+  const onChangeDhcp = React.useCallback(
+    (hasDhcp: boolean) => {
+      // We need to sync the values back to the form
+      setFieldValue('apiVips', hasDhcp ? [] : cluster.apiVips, true);
+      setFieldValue('ingressVips', hasDhcp ? [] : cluster.ingressVips, true);
+    },
+    [cluster.apiVips, cluster.ingressVips, setFieldValue],
+  );
+
   return (
     <>
       {!isVipDhcpAllocationDisabled && (
         <CheckboxField
+          onChange={onChangeDhcp}
           label={
             <>
-              {t('ai:Allocate IPs via DHCP server')}
-              <FeatureSupportLevelBadge
-                featureId="VIP_AUTO_ALLOC"
-                openshiftVersion={cluster.openshiftVersion}
-              />
+              <Tooltip
+                hidden={enableAllocation}
+                content={t(
+                  "ai:A cluster with OVN networking type cannot use 'allocate IPs via DHCP server'",
+                )}
+              >
+                <span>{t('ai:Allocate IPs via DHCP server')}</span>
+              </Tooltip>
+              <NewFeatureSupportLevelBadge featureId="VIP_AUTO_ALLOC" supportLevel={supportLevel} />
             </>
           }
           name="vipDhcpAllocation"
+          isDisabled={!enableAllocation || isViewerMode}
         />
       )}
       {values.vipDhcpAllocation ? (
         <>
           <FormikStaticField
-            label={t('ai:API IP')}
+            label={
+              <>
+                <span>{t('ai:API IP')}</span> <PopoverIcon bodyContent={apiVipPopoverContent} />
+              </>
+            }
             name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            value={selectApiVip(cluster)}
+            value={selectApiVip(values)}
             isValid={!apiVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="apiVips"
+              id="vip-api"
+              vipValue={selectApiVip(cluster)}
               cluster={cluster}
               validationErrorMessage={apiVipFailedValidationMessage}
             />
           </FormikStaticField>
           <FormikStaticField
-            label={t('ai:Ingress IP')}
+            label={
+              <>
+                <span>{t('ai:Ingress IP')}</span>{' '}
+                <PopoverIcon bodyContent={ingressVipPopoverContent} />
+              </>
+            }
             name="ingressVips.0.ip"
-            helperText={ingressVipHelperText}
-            value={selectIngressVip(cluster)}
+            value={selectIngressVip(values)}
             isValid={!ingressVipFailedValidationMessage}
             isRequired
           >
             <VipStaticValue
-              vipName="ingressVips"
+              id="vip-ingress"
+              vipValue={selectIngressVip(cluster)}
               cluster={cluster}
               validationErrorMessage={ingressVipFailedValidationMessage}
             />
           </FormikStaticField>
         </>
       ) : (
-        <>
-          <InputField
-            label={t('ai:API IP')}
-            name="apiVips.0.ip"
-            helperText={apiVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-          <InputField
-            name="ingressVips.0.ip"
-            label={t('ai:Ingress IP')}
-            helperText={ingressVipHelperText}
-            isRequired
-            isDisabled={!hostSubnets.length || values.hostSubnet === NO_SUBNET_SET}
-          />
-        </>
+        <FormGroup>
+          <FieldArray name="vips">
+            {() => (
+              <Stack>
+                <StackItem>
+                  <InputField
+                    label={
+                      <>
+                        <span>{t('ai:API IP')}</span>{' '}
+                        <PopoverIcon bodyContent={apiVipPopoverContent} />
+                      </>
+                    }
+                    name="apiVips.0.ip"
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      label={
+                        <>
+                          <span>{t('ai:API IP')}</span>{' '}
+                          <PopoverIcon bodyContent={apiVipPopoverContent} />
+                        </>
+                      }
+                      name="apiVips.1.ip"
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+                <StackItem>
+                  <InputField
+                    name="ingressVips.0.ip"
+                    label={
+                      <>
+                        <span>{t('ai:Ingress IP')}</span>{' '}
+                        <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                      </>
+                    }
+                    isRequired
+                    maxLength={45}
+                    isDisabled={isVipInputDisabled || isViewerMode}
+                    labelInfo={isDualStack ? t('ai:Primary') : undefined}
+                  />
+                </StackItem>
+                {isDualStack && (
+                  <StackItem>
+                    <InputField
+                      name="ingressVips.1.ip"
+                      label={
+                        <>
+                          <span>{t('ai:Ingress IP')}</span>{' '}
+                          <PopoverIcon bodyContent={ingressVipPopoverContent} />
+                        </>
+                      }
+                      maxLength={45}
+                      isRequired
+                      isDisabled={isVipInputDisabled || isViewerMode}
+                      labelInfo={t('ai:Secondary')}
+                    />
+                  </StackItem>
+                )}
+              </Stack>
+            )}
+          </FieldArray>
+        </FormGroup>
       )}
     </>
   );

package/lib/common/components/clusterWizard/networkingSteps/index.ts

@@ -1,8 +1,16 @@
-export { AvailableSubnetsControl } from './AvailableSubnetsControl';
-export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { UserManagedNetworkingTextContent } from './UserManagedNetworkingTextContent';
 export type { UserManagedNetworkingTextContentProps } from './UserManagedNetworkingTextContent';
 export { ManagedNetworkingControlGroup } from './ManagedNetworkingControlGroup';
 export type { ManagedNetworkingControlGroupProps } from './ManagedNetworkingControlGroup';
+export { StackTypeControlGroup } from './StackTypeControlGroup';
+export type {
+  StackTypeControlGroupProps,
+  StackTypeDefaultNetworkValues,
+} from './StackTypeControlGroup';
+export { reorderNetworksForPrimary, reorderNetworksByCurrentPrimary } from './reorderNetworks';
+export { AvailableSubnetsControl } from './AvailableSubnetsControl';
+export type { AvailableSubnetsControlProps } from './AvailableSubnetsControl';
 export { VirtualIPControlGroup } from './VirtualIPControlGroup';
 export type { VirtualIPControlGroupProps } from './VirtualIPControlGroup';
+export { default as AdvancedNetworkFields } from './AdvancedNetworkFields';
+export type { AdvancedNetworkFieldsProps } from './AdvancedNetworkFields';

package/lib/{ocm/components/clusterConfiguration/networkConfiguration → common/components/clusterWizard/networkingSteps}/reorderNetworks.ts

@@ -1,5 +1,6 @@
 import { Address6 } from 'ip-address';
-import { DUAL_STACK, NetworkConfigurationValues } from '../../../../common';
+import { DUAL_STACK } from '../../../config';
+import { NetworkConfigurationValues } from '../../../types';
 import type { FormikHelpers } from 'formik';
 
 const reorderByPrimaryCidr = (

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

@@ -11,11 +11,8 @@ import {
   ModalVariant,
   ModalHeader,
 } from '@patternfly/react-core';
-import {
-  ntpSourceValidationSchema,
-  AdditionalNTPSourcesField,
-  StatusErrorType,
-} from '../../../common';
+import { AdditionalNTPSourcesField, StatusErrorType } from '../../../common';
+import { ntpSourceValidationSchema } from '../../validationSchemas/ntpValidation';
 import { AlertFormikError } from '../../../common/components/ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import {
@@ -43,7 +40,7 @@ const AdditionalNTPSourcesForm = ({
 
   const getValidationSchema = (t: TFunction) =>
     Yup.object().shape({
-      additionalNtpSource: ntpSourceValidationSchema.required(t('ai:Required field')),
+      additionalNtpSource: ntpSourceValidationSchema(t).required(t('ai:Required field')),
     });
 
   const { t } = useTranslation();

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

@@ -14,14 +14,8 @@ import {
 import { Formik } from 'formik';
 import { TFunction } from 'i18next';
 import { Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
-import {
-  richHostnameValidationSchema,
-  RichInputField,
-  StaticTextField,
-  hostnameValidationMessages,
-  getRichTextValidation,
-  AlertFormikError,
-} from '../ui';
+import { RichInputField, StaticTextField, getRichTextValidation, AlertFormikError } from '../ui';
+import { richHostnameValidationSchema, hostnameValidationMessages } from '../../validationSchemas';
 import { canHostnameBeChanged } from './utils';
 import GridGap from '../ui/GridGap';
 import { EditHostFormValues } from './types';

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Popover, Button, Content, FlexItem, Flex, Stack, StackItem } from '@patternfly/react-core';
 import { PopoverProps } from '@patternfly/react-core/dist/js/components/Popover/Popover';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
+
 import hdate from 'human-date';
 
 import { Host, HostProgressInfo } from '@openshift-assisted/types/assisted-installer-service';
@@ -18,11 +21,9 @@ import OcpConsoleNodesSectionLink from './OcpConsoleNodesSectionLink';
 import { toSentence } from '../ui/table/utils';
 import { HostStatusProps } from './types';
 import { UpdateDay2ApiVipPropsType } from './HostValidationGroups';
-import { UnknownIcon } from '@patternfly/react-icons/dist/js/icons/unknown-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { hostStatus } from './status';
 import { getApproveNodesInClLink } from '../../config';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 
 const getTitleWithProgress = (host: Host, status: HostStatusProps['status']) => {
   const stages = getHostProgressStages(host);
@@ -35,6 +36,7 @@ type HostStatusPopoverContentProps = ValidationInfoActionProps & {
   validationsInfo: ValidationsInfo;
   autoCSR?: boolean;
   additionalPopoverContent?: React.ReactNode;
+  additionalBMHInfo?: React.ReactNode;
   openshiftVersion?: string;
 };
 
@@ -42,6 +44,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
   details,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
   ...props
 }) => {
@@ -132,6 +135,7 @@ const HostStatusPopoverContent: React.FC<HostStatusPopoverContentProps> = ({
       )}
       <StackItem>
         <HostValidationGroups openshiftVersion={openshiftVersion} {...props} />
+        {additionalBMHInfo}
       </StackItem>
     </Stack>
   );
@@ -180,6 +184,7 @@ type WithHostStatusPopoverProps = AdditionNtpSourcePropsType &
     zIndex?: number;
     autoCSR?: boolean;
     additionalPopoverContent?: React.ReactNode;
+    additionalBMHInfo?: React.ReactNode;
     openshiftVersion?: string;
   };
 
@@ -237,6 +242,7 @@ const HostStatus: React.FC<HostStatusProps> = ({
   zIndex,
   autoCSR,
   additionalPopoverContent,
+  additionalBMHInfo,
   openshiftVersion,
 }) => {
   const [keepOnOutsideClick, onValidationActionToggle] = React.useState(false);
@@ -262,12 +268,17 @@ const HostStatus: React.FC<HostStatusProps> = ({
     zIndex,
     autoCSR,
     additionalPopoverContent,
+    additionalBMHInfo,
     openshiftVersion,
   };
 
   const hostIcon = getHostStatusIcon(icon, host.progress, status);
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsXs' }}>
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      spaceItems={{ default: 'spaceItemsXs' }}
+      flexWrap={{ default: 'nowrap' }}
+    >
       {
         <FlexItem>
           {(autoCSR && status.key === 'added-to-existing-cluster'

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

@@ -67,7 +67,10 @@ const ValidationsAlert = ({
       <ul>
         {validations.map((v) => (
           <li key={v.id}>
-            <strong>{hostValidationLabels(t)[v.id] || v.id}:</strong>&nbsp;
+            <span className="pf-v6-u-font-weight-bold">
+              {hostValidationLabels(t)[v.id] || v.id}:
+            </span>
+            &nbsp;
             {toSentence(v.message.replace(/\\n/, ' '))}{' '}
             {v.status === 'failure' && hostValidationFailureHints(t)[v.id]}
           </li>
@@ -310,9 +313,7 @@ export const HostValidationGroups = ({
         return (
           <Fragment key={groupName}>
             <Level className="host-validation-groups__validation-group">
-              <LevelItem>
-                <strong>{groupLabel}</strong>
-              </LevelItem>
+              <LevelItem className="pf-v6-u-font-weight-bold">{groupLabel}</LevelItem>
               <LevelItem>{getValidationGroupState()}</LevelItem>
             </Level>
             {

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

@@ -3,6 +3,7 @@ import {
   Button,
   ButtonType,
   ButtonVariant,
+  Content,
   Form,
   HelperText,
   HelperTextItem,
@@ -22,14 +23,12 @@ import { t_global_icon_color_status_info_default as blueInfoColor } from '@patte
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TFunction } from 'i18next';
 
+import { RichInputField, getRichTextValidation, ModalProgress } from '../ui';
 import {
-  RichInputField,
-  getRichTextValidation,
-  richHostnameValidationSchema,
-  hostnameValidationMessages,
-  ModalProgress,
   FORBIDDEN_HOSTNAMES,
-} from '../ui';
+  hostnameValidationMessages,
+  richHostnameValidationSchema,
+} from '../../validationSchemas';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { getHostname as getHostnameUtils, getInventory } from './utils';
 import { ActionCheck } from './types';
@@ -57,6 +56,7 @@ const getNewHostnames = (
     const hostnameRes = {
       newHostname: changeEnabled ? templateToHostname(index, values) : undefined,
       reason: changeEnabled ? undefined : reason,
+      oldHostname: h.requestedHostname,
     };
     if (changeEnabled) {
       index++;
@@ -183,7 +183,7 @@ const MassChangeHostnameForm = ({
           <StackItem>
             <div>{t('ai:Rename hostnames using the custom template:')}</div>
             <div>
-              <strong>{`{{n}}`}</strong> {t('ai:to add a number.')}
+              <span className="pf-v6-u-font-weight-bold">{`{{n}}`}</span> {t('ai:to add a number.')}
             </div>
           </StackItem>
           <StackItem>
@@ -206,44 +206,48 @@ const MassChangeHostnameForm = ({
           </StackItem>
           <StackItem>
             {t('ai:Preview')}
-            <div className="hostname-preview">
-              {selectedHosts.map((h, index) => {
-                const { newHostname, reason } = newHostnames[index];
-                return (
-                  <Split key={h.id || index} hasGutter>
-                    <SplitItem className="hostname-column">
-                      <div className="hostname-column__text">
-                        <strong>{getHostname(h)}</strong>
-                      </div>
-                    </SplitItem>
-                    <SplitItem>
-                      <div>
-                        <strong>{'>'}</strong>
-                      </div>
-                    </SplitItem>
-                    <SplitItem isFilled>
-                      {reason ? (
-                        <Popover
-                          aria-label={t('ai:Cannot change hostname popover')}
-                          headerContent={<div>{t('ai:Hostname cannot be changed')}</div>}
-                          bodyContent={<div>{reason}</div>}
+            <Split className="hostname-preview" hasGutter>
+              <SplitItem className="hostname-column">
+                {newHostnames.map((host, i) => (
+                  <Content
+                    className="hostname-column__text pf-v6-u-font-weight-bold"
+                    key={`old-hostname-${i}`}
+                  >
+                    {host.oldHostname}
+                  </Content>
+                ))}
+              </SplitItem>
+              <SplitItem>
+                {newHostnames.map((_, i) => (
+                  <Content key={`divider-${i}`} className="pf-v6-u-font-weight-bold">
+                    {'>'}
+                  </Content>
+                ))}
+              </SplitItem>
+              <SplitItem>
+                {newHostnames.map((host, i) => (
+                  <div key={`new-hostname-${i}`}>
+                    {host.reason ? (
+                      <Popover
+                        aria-label={t('ai:Cannot change hostname popover')}
+                        headerContent={<div>{t('ai:Hostname cannot be changed')}</div>}
+                        bodyContent={<div>{host.reason}</div>}
+                      >
+                        <Button
+                          variant="link"
+                          icon={<InfoCircleIcon color={blueInfoColor.value} />}
+                          isInline
                         >
-                          <Button
-                            variant="link"
-                            icon={<InfoCircleIcon color={blueInfoColor.value} />}
-                            isInline
-                          >
-                            {t('ai:Not changeable')}
-                          </Button>
-                        </Popover>
-                      ) : (
-                        newHostname || t('ai:New hostname will appear here...')
-                      )}
-                    </SplitItem>
-                  </Split>
-                );
-              })}
-            </div>
+                          {t('ai:Not changeable')}
+                        </Button>
+                      </Popover>
+                    ) : (
+                      host.newHostname || t('ai:New hostname will appear here...')
+                    )}
+                  </div>
+                ))}
+              </SplitItem>
+            </Split>
           </StackItem>
           <StackItem>
             <ModalProgress