@openshift-assisted/ui-lib 5.0.0-cim → 5.0.1-cim

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"
+            isFullWidth
           >
             {value ? architectureData[value].label : t('ai:CPU architecture')}
           </MenuToggle>
@@ -94,6 +94,7 @@ const CpuArchitectureDropdown = ({
         isOpen={cpuArchOpen}
         onSelect={onCpuArchSelect}
         onOpenChange={() => setCpuArchOpen(!cpuArchOpen)}
+        shouldFocusToggleOnSelect
       >
         {dropdownItems}
       </Dropdown>

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

@@ -172,6 +172,11 @@ export const getClusterProperties = (
   const serviceNetworks = agentClusterInstall.spec?.networking?.serviceNetwork;
   const clusterNetworks = agentClusterInstall.spec?.networking?.clusterNetwork;
 
+  const apiIPs = agentClusterInstall.spec?.apiVIPs || [agentClusterInstall.spec?.apiVIP];
+  const ingressIPs = agentClusterInstall.spec?.ingressVIPs || [
+    agentClusterInstall.spec?.ingressVIP,
+  ];
+
   return {
     // TODO: we should translate following keys since they are used "as it is" in AcmDescriptionList.tsx / List component of the stolostron project
     name: {
@@ -191,12 +196,12 @@ export const getClusterProperties = (
       value: clusterDeployment.spec?.baseDomain,
     },
     apiVip: {
-      key: 'API IP',
-      value: agentClusterInstall?.spec?.apiVIP,
+      key: apiIPs.length > 1 ? 'API IPs' : 'API IP',
+      value: apiIPs.join(', '),
     },
     ingressVip: {
-      key: 'Ingress IP',
-      value: agentClusterInstall?.spec?.ingressVIP,
+      key: ingressIPs.length > 1 ? 'Ingress IPs' : 'Ingress IP',
+      value: ingressIPs.join(', '),
     },
     clusterNetworkCidr: {
       key: (clusterNetworks?.length || 0) > 1 ? 'Cluster network CIDRs' : 'Cluster network CIDR',

package/lib/cim/components/modals/CimConfiguration/CimConfigProgressAlert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import {
   Alert,
   AlertVariant,
@@ -69,7 +69,7 @@ export const CimConfigProgressAlert: React.FC<CimConfigProgressAlertProps> = ({
       variant={ButtonVariant.link}
       isInline
       key="assisted-service-deployment"
-      onClick={() => navigate(assistedServiceDeploymentUrl)}
+      onClick={() => void navigate(assistedServiceDeploymentUrl)}
     >
       {t('ai:Troubleshoot in the assisted service deployment')}
     </Button>

package/lib/cim/components/modals/CimConfiguration/CimConfigurationFormFields.tsx

@@ -161,7 +161,7 @@ export const CimConfigurationFormFields = ({
               <PopoverIcon
                 noVerticalAlign
                 bodyContent={t(
-                  'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 50Gi or more. The value can not be updated later.',
+                  'ai:Specify how much storage to allocate for the images of the clusters. There must be 1G of image storage for each instance of Red Hat Enterprise Linux CoreOS that is running. Recommended is 100Gi or more. The value can not be updated later.',
                 )}
                 aria-label={t('ai:More info for image storage')}
               >

package/lib/cim/components/modals/CimConfiguration/CimConfigurationModal.tsx

@@ -118,7 +118,7 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       agentServiceConfig?.spec?.filesystemStorage?.resources?.requests?.storage,
     ),
     imgVolSize: getStorageSizeGiB(
-      50,
+      100,
       agentServiceConfig?.spec?.imageStorage?.resources?.requests?.storage,
     ),
     configureLoadBalancer: platform === 'AWS',
@@ -134,7 +134,7 @@ export const CimConfigurationModal: React.FC<CimConfigurationModalProps> = ({
       .min(MIN_FS_VOL_SIZE, t('ai:Minimal value is 1Gi'))
       .required(t('ai:Required field')),
     imgVolSize: Yup.number()
-      .min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 10Gi'))
+      .min(MIN_IMG_VOL_SIZE, t('ai:Minimal value is 50Gi'))
       .required(t('ai:Required field')),
     configureLoadBalancer: Yup.boolean(),
     addCiscoIntersightURL: Yup.boolean(),

package/lib/cim/components/modals/CimConfiguration/CimStorageMissingAlert.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router';
 import { Alert, AlertActionLink, AlertVariant } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
@@ -20,7 +20,10 @@ export const CimStorageMissingAlert: React.FC<{
   );
 
   const actionLinks: React.ReactNode[] = [
-    <AlertActionLink key="install-storage-operator" onClick={() => navigate(storageOperatorUrl)}>
+    <AlertActionLink
+      key="install-storage-operator"
+      onClick={() => void navigate(storageOperatorUrl)}
+    >
       {t('ai:Install storage operator')}
     </AlertActionLink>,
     <AlertActionLink key="storage-class" onClick={() => window.open(docStorageUrl, '_blank')}>

package/lib/cim/components/modals/CimConfiguration/constants.ts

@@ -1,5 +1,5 @@
 export const MIN_DB_VOL_SIZE = 1; // In Gi
 export const MIN_FS_VOL_SIZE = 1;
-export const MIN_IMG_VOL_SIZE = 10;
+export const MIN_IMG_VOL_SIZE = 50;
 
 export const CIM_CONFIG_TIMEOUT = 5 * 60 * 1000; // in ms

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TFunction } from 'i18next';
 import { Button, Flex, FlexItem, Icon, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { Link } from 'react-router-dom-v5-compat';
+import { Link } from 'react-router';
 
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {

package/lib/cim/hooks/index.tsx

@@ -1,3 +1,4 @@
 export * from './useConfigMaps';
 export * from './useAgentServiceConfig';
 export * from './useEvents';
+export * from './useAgents';

package/lib/cim/hooks/useAgents.tsx

@@ -0,0 +1,15 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { AgentK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useAgents = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<AgentK8sResource[]>(
+    {
+      groupVersionKind: {
+        group: 'agent-install.openshift.io',
+        kind: 'Agent',
+        version: 'v1beta1',
+      },
+    },
+    props,
+  );

package/lib/common/components/clusterConfiguration/DiskEncryptionFields/DiskEncryptionControlGroup.tsx

@@ -29,6 +29,7 @@ const hasFilledTangServers = (tangServers: TangServer[]): boolean => {
 export interface DiskEncryptionControlGroupProps {
   values: DiskEncryptionValues;
   isSNO: boolean;
+  isArbiterEncryptionAvailable?: boolean;
   isDisabled?: boolean;
   docVersion?: string;
 }
@@ -36,6 +37,7 @@ export interface DiskEncryptionControlGroupProps {
 const DiskEncryptionControlGroup = ({
   values,
   isSNO = false,
+  isArbiterEncryptionAvailable = true,
   isDisabled = false,
   docVersion,
 }: DiskEncryptionControlGroupProps) => {
@@ -77,6 +79,12 @@ const DiskEncryptionControlGroup = ({
       setFieldValue('enableDiskEncryptionOnWorkers', false);
     }
   }, [isSNO, setFieldValue]);
+
+  React.useEffect(() => {
+    if (!isArbiterEncryptionAvailable) {
+      setFieldValue('enableDiskEncryptionOnArbiters', false);
+    }
+  }, [isArbiterEncryptionAvailable, setFieldValue]);
   const { t } = useTranslation();
   const disableMessage = t('ai:This option is not editable after the draft cluster is created');
   const tooltipProps = {
@@ -105,14 +113,16 @@ const DiskEncryptionControlGroup = ({
             />
           </StackItem>
         </RenderIf>
-        <StackItem>
-          <SwitchField
-            tooltipProps={tooltipProps}
-            name="enableDiskEncryptionOnArbiters"
-            label={t('ai:Arbiter')}
-            isDisabled={isDisabled}
-          />
-        </StackItem>
+        <RenderIf condition={isArbiterEncryptionAvailable}>
+          <StackItem>
+            <SwitchField
+              tooltipProps={tooltipProps}
+              name="enableDiskEncryptionOnArbiters"
+              label={t('ai:Arbiter')}
+              isDisabled={isDisabled}
+            />
+          </StackItem>
+        </RenderIf>
         <RenderIf
           condition={
             enableDiskEncryptionOnMasters ||

package/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx

@@ -75,11 +75,13 @@ export const ExternalPlatformsDropdown = ({ isDisabled }: { isDisabled: boolean
       <Dropdown
         isOpen={isOpen}
         toggle={(toggleRef) => (
-          <MenuToggle ref={toggleRef} className="pf-v5-u-w-100" onClick={() => setIsOpen(!isOpen)}>
+          <MenuToggle ref={toggleRef} onClick={() => setIsOpen(!isOpen)} isFullWidth>
             {value ? platforms[value] : t('ai:Integrate with external partner platforms')}
           </MenuToggle>
         )}
         onSelect={onSelect}
+        onOpenChange={() => setIsOpen(!isOpen)}
+        shouldFocusToggleOnSelect
       >
         {options}
       </Dropdown>

package/lib/common/components/clusterConfiguration/utils.test.ts

@@ -1,5 +1,5 @@
 import { test, describe, expect } from 'vitest';
-import { isDualStack } from './utils';
+import { isDualStack, getIPv6FromDualstack } from './utils';
 import {
   MachineNetwork,
   ClusterNetwork,
@@ -273,3 +273,45 @@ describe('isDualStack', () => {
     });
   });
 });
+
+describe('getIPv6FromDualstack', () => {
+  test('returns the IPv6 entry from a dualstack array', () => {
+    const networks = [
+      { cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' },
+      { cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' });
+  });
+
+  test('returns the IPv6 entry when IPv6 is first', () => {
+    const networks = [
+      { cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' },
+      { cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd01::/48', hostPrefix: 64, clusterId: 'test' });
+  });
+
+  test('returns undefined when no IPv6 entry is present', () => {
+    const networks = [{ cidr: '10.128.0.0/14', hostPrefix: 23, clusterId: 'test' }];
+    expect(getIPv6FromDualstack(networks)).toBeUndefined();
+  });
+
+  test('returns undefined for an empty array', () => {
+    expect(getIPv6FromDualstack([])).toBeUndefined();
+  });
+
+  test('returns undefined for undefined input', () => {
+    expect(getIPv6FromDualstack(undefined)).toBeUndefined();
+  });
+
+  test('works with service networks (no hostPrefix)', () => {
+    const networks = [
+      { cidr: '172.30.0.0/16', clusterId: 'test' },
+      { cidr: 'fd02::/112', clusterId: 'test' },
+    ];
+    const result = getIPv6FromDualstack(networks);
+    expect(result).toEqual({ cidr: 'fd02::/112', clusterId: 'test' });
+  });
+});

package/lib/common/components/clusterConfiguration/utils.ts

@@ -188,6 +188,19 @@ export const canBeDualStack = (subnets: HostSubnets) =>
   subnets.some((subnet) => Address4.isValid(subnet.subnet)) &&
   subnets.some((subnet) => Address6.isValid(subnet.subnet));
 
+export const isPrimaryIPv6 = (machineNetworks: MachineNetwork[] | undefined): boolean => {
+  const cidr = machineNetworks?.[0]?.cidr;
+  return !!cidr && Address6.isValid(cidr);
+};
+
+/**
+ * Find the IPv6 entry in a dualstack network array.
+ * Dualstack arrays contain one IPv4 and one IPv6 entry; this helper returns the IPv6 one.
+ */
+export const getIPv6FromDualstack = <T extends { cidr?: string }>(
+  networks: T[] | undefined,
+): T | undefined => networks?.find((n) => n.cidr && Address6.isValid(n.cidr));
+
 const areNetworksDualStack = (
   networks: (MachineNetwork | ClusterNetwork | ServiceNetwork)[] | undefined,
   openshiftVersion?: string,

package/lib/common/components/clusterDetail/ClusterCredentials.tsx

@@ -1,17 +1,9 @@
 import React from 'react';
-import {
-  GridItem,
-  ClipboardCopy,
-  clipboardCopyFunc,
-  Button,
-  Alert,
-  TextInput,
-} from '@patternfly/react-core';
+import { GridItem, ClipboardCopy, clipboardCopyFunc, Alert } from '@patternfly/react-core';
 import { Credentials, Cluster } from '@openshift-assisted/types/assisted-installer-service';
 import { LoadingState, ErrorState } from '../../components/ui/uiState';
 import { DetailList, DetailItem } from '../../components/ui/DetailList';
 import { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 type ClusterCredentialsProps = {
@@ -74,55 +66,59 @@ const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
     const consoleUrl = credentials.consoleUrl
       ? getConsoleUrl(credentials.consoleUrl, isMceEnabled)
       : '';
+    const hasVips = Boolean(cluster.apiVips?.length && cluster.ingressVips?.length);
     credentialsBody = (
-      <DetailList>
-        {credentials.consoleUrl && (
-          <DetailItem
-            title={t('ai:Web Console URL')}
-            value={
-              <>
-                <Button
-                  variant="link"
-                  icon={<ExternalLinkAltIcon />}
-                  iconPosition="right"
-                  isInline
-                  onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
-                  data-testid={`${idPrefix}-link-console-url`}
-                >
-                  {consoleUrl}
-                </Button>
-                <br />
-                {!!cluster.apiVips && !!cluster.ingressVips && (
-                  <TroubleshootingOpenshiftConsoleButton
-                    consoleUrl={consoleUrl}
-                    cluster={cluster}
-                    idPrefix={idPrefix}
-                  />
-                )}
-              </>
-            }
-          />
-        )}
-        {credentials.username && (
-          <>
+      <>
+        <DetailList>
+          {credentials.consoleUrl && (
             <DetailItem
-              title={t('ai:Username')}
-              value={<TextInput value={credentials.username} readOnlyVariant="default" />}
-            />
-            <DetailItem
-              title={t('ai:Password')}
+              title={t('ai:Web Console URL')}
               value={
-                <ClipboardCopy
-                  isReadOnly
-                  onCopy={(event) => clipboardCopyFunc(event, credentials.password)}
-                >
-                  &bull;&bull;&bull;&bull;&bull;
-                </ClipboardCopy>
+                <>
+                  <ClipboardCopy
+                    isReadOnly
+                    className="pf-v6-u-my-sm"
+                    data-testid={`${idPrefix}-link-console-url`}
+                  >
+                    {consoleUrl}
+                  </ClipboardCopy>
+                  {hasVips && (
+                    <TroubleshootingOpenshiftConsoleButton
+                      consoleUrl={consoleUrl}
+                      cluster={cluster}
+                      idPrefix={idPrefix}
+                    />
+                  )}
+                </>
               }
             />
-          </>
-        )}
-      </DetailList>
+          )}
+          {credentials.username && (
+            <>
+              <DetailItem
+                title={t('ai:Username')}
+                value={
+                  <ClipboardCopy isReadOnly className="pf-v6-u-my-sm">
+                    {credentials.username}
+                  </ClipboardCopy>
+                }
+              />
+              <DetailItem
+                title={t('ai:Password')}
+                value={
+                  <ClipboardCopy
+                    isReadOnly
+                    className="pf-v6-u-my-sm"
+                    onCopy={(event) => clipboardCopyFunc(event, credentials.password)}
+                  >
+                    &bull;&bull;&bull;&bull;&bull;
+                  </ClipboardCopy>
+                }
+              />
+            </>
+          )}
+        </DetailList>
+      </>
     );
   }
 

package/lib/common/components/clusterDetail/ConsoleModal.tsx

@@ -12,7 +12,6 @@ import {
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { removeProtocolFromURL } from '../../api';
-import { ToolbarButton } from '../ui/Toolbar';
 import PrismCode from '../ui/PrismCode';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { selectApiVip, selectIngressVip } from '../../selectors';
@@ -24,11 +23,6 @@ type WebConsoleHintProps = {
   idPrefix?: string;
 };
 
-type LaunchOpenshiftConsoleButtonProps = WebConsoleHintProps & {
-  isDisabled: boolean;
-  id?: string;
-};
-
 type ConsoleModalProps = WebConsoleHintProps & {
   closeModal: () => void;
   isOpen: boolean;
@@ -103,35 +97,6 @@ export const WebConsoleHint: React.FC<WebConsoleHintProps> = ({ cluster, console
   );
 };
 
-export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButtonProps> = ({
-  cluster,
-  consoleUrl,
-  isDisabled,
-  id,
-}) => {
-  const [isOpen, setOpen] = React.useState(false);
-  const { t } = useTranslation();
-  return (
-    <>
-      <ToolbarButton
-        type="button"
-        variant={ButtonVariant.primary}
-        isDisabled={isDisabled}
-        onClick={() => setOpen(true)}
-        data-testid={id}
-      >
-        {t('ai:Launch OpenShift Console')}
-      </ToolbarButton>
-      <ConsoleModal
-        closeModal={() => setOpen(false)}
-        consoleUrl={consoleUrl}
-        cluster={cluster}
-        isOpen={isOpen}
-      />
-    </>
-  );
-};
-
 export const TroubleshootingOpenshiftConsoleButton: React.FC<WebConsoleHintProps> = ({
   cluster,
   consoleUrl,

package/lib/common/components/clusterWizard/ReviewValidations.tsx

@@ -47,6 +47,20 @@ const PendingValidations = ({ id, count }: { id: string; count: number }) => {
   return <div id={id}>{t('ai:There is still {{count}} pending check', { count: count })}</div>;
 };
 
+const InformationalValidation = ({ validation }: { validation: ClusterValidation }) => {
+  const { t } = useTranslation();
+  const label = clusterValidationLabels(t)[validation.id] || validation.id || '';
+
+  return (
+    <div id={`info-validation-${validation.id}`}>
+      <Icon status="success">
+        <CheckCircleIcon />
+      </Icon>{' '}
+      {label}. {validation.message}
+    </div>
+  );
+};
+
 const ValidationActionLink = <S extends string>({
   step,
   setCurrentStepId,
@@ -173,6 +187,16 @@ export const ClusterValidations = <S extends string>({
           />,
         );
       }
+
+      if (
+        validation.status === 'success' &&
+        validation.id === 'openshift-ai-gpu-requirements-satisfied' &&
+        validation.message
+      ) {
+        failingValidations.push(
+          <InformationalValidation key={`info-${validation.id}`} validation={validation} />,
+        );
+      }
     };
 
     validationsInfo[group]?.forEach(addFailingValidation);

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

@@ -38,6 +38,38 @@ export const parseTangServers = (tangServersString?: string): TangServer[] => {
   return emptyTangServers();
 };
 
+const parseDiskEncryption = (diskEncryption: Cluster['diskEncryption']) => {
+  const enableOn = {
+    enableDiskEncryptionOnMasters: false,
+    enableDiskEncryptionOnWorkers: false,
+    enableDiskEncryptionOnArbiters: false,
+  };
+
+  if (diskEncryption?.enableOn === 'all') {
+    enableOn.enableDiskEncryptionOnMasters = true;
+    enableOn.enableDiskEncryptionOnWorkers = true;
+    enableOn.enableDiskEncryptionOnArbiters = true;
+  } else {
+    const types = diskEncryption?.enableOn?.split(',');
+
+    types?.forEach((type) => {
+      switch (type) {
+        case 'masters':
+          enableOn.enableDiskEncryptionOnMasters = true;
+          break;
+        case 'workers':
+          enableOn.enableDiskEncryptionOnWorkers = true;
+          break;
+        case 'arbiters':
+          enableOn.enableDiskEncryptionOnArbiters = true;
+          break;
+      }
+    });
+  }
+
+  return enableOn;
+};
+
 export const getClusterDetailsInitialValues = ({
   cluster,
   pullSecret,
@@ -57,6 +89,7 @@ export const getClusterDetailsInitialValues = ({
     openshiftVersion = getDefaultOpenShiftVersion(ocpVersions),
     controlPlaneCount = 3,
   } = cluster || {};
+
   return {
     name,
     openshiftVersion,
@@ -65,22 +98,15 @@ export const getClusterDetailsInitialValues = ({
     controlPlaneCount,
     useRedHatDnsService:
       !!baseDnsDomain && managedDomains.map((d) => d.domain).includes(baseDnsDomain),
-    enableDiskEncryptionOnMasters: ['all', 'masters'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
-    enableDiskEncryptionOnWorkers: ['all', 'workers'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
-    diskEncryptionMode: cluster?.diskEncryption?.mode ?? 'tpmv2',
-    diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
-    diskEncryption: cluster?.diskEncryption ?? {},
     cpuArchitecture: cluster?.cpuArchitecture || getDefaultCpuArchitecture(),
     platform: cluster?.platform?.type || 'baremetal',
     customOpenshiftSelect: null,
     userManagedNetworking: cluster?.userManagedNetworking || false,
-    enableDiskEncryptionOnArbiters: ['all', 'arbiters'].includes(
-      cluster?.diskEncryption?.enableOn ?? 'none',
-    ),
+
+    diskEncryptionMode: cluster?.diskEncryption?.mode ?? 'tpmv2',
+    diskEncryptionTangServers: parseTangServers(cluster?.diskEncryption?.tangServers),
+    diskEncryption: cluster?.diskEncryption ?? {},
+    ...parseDiskEncryption(cluster?.diskEncryption),
   };
 };