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

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

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, useFormikContext } from 'formik';
 import { InfraEnvK8sResource, SecretK8sResource } from '../../types';
 import { LoadingState, PullSecretField, pullSecretValidationSchema } from '../../../common';
@@ -72,7 +77,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
   }
   return (
     <>
-      <ModalBoxBody>
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>{body}</StackItem>
         </Stack>
@@ -81,8 +86,8 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
             <Alert title={submitError} variant="danger" isInline />
           </StackItem>
         )}
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         <Button
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={submitForm}
@@ -93,7 +98,7 @@ const EditPullSecretForm: React.FC<EditPullSecretFormProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </>
   );
 };
@@ -119,13 +124,12 @@ const EditPullSecretModal: React.FC<EditPullSecretModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit pull secret dialog')}
-      title={t('ai:Edit pull secret')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-pull-secret-modal"
     >
+      <ModalHeader title={t('ai:Edit pull secret')} />
       <Formik<EditPullSecretFormikValues>
         initialValues={{
           pullSecret: undefined,

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

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import * as Yup from 'yup';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
 import {
+  Alert,
+  Button,
+  ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   ModalVariant,
-} from '@patternfly/react-core/deprecated';
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { Formik, FormikProps } from 'formik';
 
 import { InfraEnvK8sResource } from '../../types';
@@ -46,13 +51,12 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Edit SSH public key dialog')}
-      title={t('ai:Edit SSH public key')}
       isOpen={isOpen}
       onClose={onClose}
       variant={ModalVariant.small}
-      hasNoBodyWrapper
       id="edit-ssh-key-modal"
     >
+      <ModalHeader title={t('ai:Edit SSH public key')} />
       <Formik<EditSSHKeyFormikValues>
         initialValues={{
           sshPublicKey: infraEnv.spec?.sshAuthorizedKey || '',
@@ -69,9 +73,9 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
         }}
         validateOnMount
       >
-        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyModalProps>) => (
+        {({ isSubmitting, isValid, submitForm }: FormikProps<EditSSHKeyFormikValues>) => (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 <StackItem>
                   <Alert isInline variant="warning" title={warningMsg} />
@@ -85,16 +89,15 @@ const EditSSHKeyModal: React.FC<EditSSHKeyModalProps> = ({
                   </StackItem>
                 )}
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
-              {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
-              <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
+            </ModalBody>
+            <ModalFooter>
+              <Button onClick={() => void submitForm()} isDisabled={isSubmitting || !isValid}>
                 {t('ai:Save')}
               </Button>
               <Button onClick={onClose} variant={ButtonVariant.secondary}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         )}
       </Formik>

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

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { Alert, Button, ButtonVariant, Stack, StackItem } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
+import {
+  Alert,
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
 import { getAIHosts } from '../helpers';
 import { AgentK8sResource } from '../../types';
 import HostsTable from '../../../common/components/hosts/HostsTable';
@@ -131,14 +140,13 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
   return (
     <Modal
       aria-label={t('ai:Approve hosts dialog')}
-      title={t('ai:Approve hosts to join infrastructure environment')}
       isOpen={isOpen}
       onClose={onClose}
-      hasNoBodyWrapper
       id="mass-approve-modal"
       variant="medium"
     >
-      <ModalBoxBody>
+      <ModalHeader title={t('ai:Approve hosts to join infrastructure environment')} />
+      <ModalBody>
         <Stack hasGutter>
           <StackItem>
             <Alert
@@ -158,8 +166,8 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
             <ModalProgress error={error} progress={progress} />
           </StackItem>
         </Stack>
-      </ModalBoxBody>
-      <ModalBoxFooter>
+      </ModalBody>
+      <ModalFooter>
         {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
         <Button onClick={onClick} isDisabled={progress !== null}>
           {t('ai:Approve all hosts')}
@@ -167,7 +175,7 @@ const MassApproveAgentModal: React.FC<MassApproveAgentModalProps> = ({
         <Button onClick={onClose} variant={ButtonVariant.secondary} isDisabled={progress !== null}>
           {t('ai:Cancel')}
         </Button>
-      </ModalBoxFooter>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -110,7 +110,7 @@ const statusColumn = (
         );
       } else if (bmh) {
         bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
+        title = <BMHStatus bmhStatus={bmhStatus} bmh={bmh} />;
       }
 
       return {

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

@@ -8,8 +8,11 @@ import {
   AlertActionCloseButton,
   Stack,
   StackItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@patternfly/react-core';
-import { Modal, ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
@@ -124,12 +127,11 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
     <>
       <Modal
         aria-label={t('ai:Add host dialog')}
-        title={t('ai:Add hosts')}
         isOpen={isOpen}
         onClose={onClose}
-        hasNoBodyWrapper
         id="scale-up-modal"
       >
+        <ModalHeader title={t('ai:Add hosts')} />
         <Formik
           initialValues={getInitialValues()}
           validationSchema={validationSchema}
@@ -139,7 +141,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
           {({ isSubmitting, isValid, submitForm }: FormikProps<ScaleUpFormValues>) => {
             return (
               <>
-                <ModalBoxBody>
+                <ModalBody>
                   <Stack hasGutter>
                     <StackItem>
                       <ScaleUpForm
@@ -165,8 +167,8 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                       </StackItem>
                     )}
                   </Stack>
-                </ModalBoxBody>
-                <ModalBoxFooter>
+                </ModalBody>
+                <ModalFooter>
                   {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
                   <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
                     {t('ai:Submit')}
@@ -174,7 +176,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
                   <Button onClick={onClose} variant={ButtonVariant.secondary}>
                     {t('ai:Cancel')}
                   </Button>
-                </ModalBoxFooter>
+                </ModalFooter>
               </>
             );
           }}

package/lib/cim/hooks/index.tsx

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

package/lib/cim/hooks/types.tsx

@@ -5,4 +5,7 @@ export type K8sWatchHookListProps = Omit<
   'groupVersionKind' | 'name' | 'isList'
 > | null;
 
-export type K8sWatchHookProps = Pick<WatchK8sResource, 'name' | 'namespace' | 'isList'> | null;
+export type K8sWatchHookProps = Pick<
+  WatchK8sResource,
+  'name' | 'namespace' | 'isList' | 'fieldSelector'
+> | null;

package/lib/cim/hooks/useEvents.tsx

@@ -0,0 +1,14 @@
+import { useK8sWatchResource } from './useK8sWatchResource';
+import { EventK8sResource } from '../types';
+import { K8sWatchHookProps } from './types';
+
+export const useEvents = (props: K8sWatchHookProps) =>
+  useK8sWatchResource<EventK8sResource[]>(
+    {
+      groupVersionKind: {
+        kind: 'Event',
+        version: 'v1',
+      },
+    },
+    props,
+  );

package/lib/cim/types/fromOCP/k8sTypes.ts

@@ -43,3 +43,16 @@ export type RouteK8sResource = {
     wildcardPolicy?: string;
   };
 } & K8sResourceCommon;
+
+export type EventK8sResource = {
+  type?: string;
+  message?: string;
+  eventTime?: string;
+  involvedObject?: {
+    apiVersion?: string;
+    kind?: string;
+    name?: string;
+    namespace?: string;
+    uid?: string;
+  };
+} & K8sResourceCommon;

package/lib/cim/types/k8s/agent-cluster-install.ts

@@ -30,6 +30,8 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
     };
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     sshPublicKey?: string;
     imageSetRef?: {
       name?: string;
@@ -63,6 +65,8 @@ export type AgentClusterInstallK8sResource = K8sResourceCommon & {
   status?: {
     apiVIP?: string;
     ingressVIP?: string;
+    apiVIPs?: string[];
+    ingressVIPs?: string[];
     connectivityMajorityGroups?: string;
     conditions?: AgentClusterInstallStatusCondition[];
     progress?: {

package/lib/cim/types/k8s/bare-metal-host.ts

@@ -28,5 +28,25 @@ export type BareMetalHostK8sResource = K8sResourceCommon & {
     };
     errorMessage?: string;
     errorType?: string;
+    operationalStatus?: 'OK' | 'discovered' | 'error' | 'delayed' | 'detached';
+    operationHistory?: {
+      register?: {
+        start?: string;
+        end?: string;
+      };
+      provision?: {
+        start?: string;
+        end?: string;
+      };
+      inspect?: {
+        start?: string;
+        end?: string;
+      };
+      deprovision?: {
+        start?: string;
+        end?: string;
+      };
+    };
+    lastUpdated?: string;
   };
 };

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

@@ -32,7 +32,7 @@ const DiscoveryInstructions = ({
           <Trans
             t={t}
             count={+isSNO}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the Discovery ISO media connected to the device throughout the installation process and set each host to boot <bold>only one time</bold> from this device. "
           />
         </Content>

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

@@ -16,7 +16,7 @@ import {
   ModalBody,
 } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { PrismCode, SimpleAIPrismTheme, UiIcon } from '../ui';
+import { PrismCode, UiIcon } from '../ui';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 import { saveAs } from 'file-saver';
@@ -70,7 +70,7 @@ export const DiscoveryTroubleshootingModalContent = () => {
             )}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="ssh -i <identity_file> core@<machine-ip>" />
+        <PrismCode code="ssh -i <identity_file> core@<machine-ip>" />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-ssh-auth-helper">
             {t(
@@ -106,7 +106,6 @@ export const DiscoveryTroubleshootingModalContent = () => {
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`chmod +x ./change-iso-password.sh
 ./change-iso-password.sh <path_to_your_iso_file>`}
         />
@@ -115,14 +114,13 @@ export const DiscoveryTroubleshootingModalContent = () => {
         <Content component="p">
           {t('ai:The discovery agent is running with the correct parameters')}
         </Content>
-        <PrismCode theme={SimpleAIPrismTheme} code={`ps -ef | grep agent`} />
+        <PrismCode code={`ps -ef | grep agent`} />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-agent-output-helper">
             {t('ai:The output displays the following:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`root        1786       1  0 08:03 ?        00:00:00 /usr/local/bin/agent --url https://api.openshift.com --cluster-id e4c85fbe-77c7-411e-b107-5120f615c4fb --agent-version registry.redhat.io/openshift4/assisted-installer-agent-rhel8:v4.6.0-17 --insecure=false
 core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
         />
@@ -134,14 +132,14 @@ core        2362    2311  0 08:04 pts/0    00:00:00 grep --color=auto agent`}
             {t('ai:To verify that the agent ran successfully, check the logs:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl -u agent.service" />
+        <PrismCode code="sudo journalctl -u agent.service" />
         <HelperText>
           <HelperTextItem data-testid="discovery-troubleshooting-network-error-helper">
             {t('ai:In the following example, the errors indicate there is a network issue:')}
           </HelperTextItem>
         </HelperText>
         <PrismCode
-          theme={{ ...SimpleAIPrismTheme, styles: [] }}
+          styles={[]}
           code={`Oct 15 11:26:35 localhost systemd[1]: agent.service: Service RestartSec=3s expired, scheduling restart.
 Oct 15 11:26:35 localhost systemd[1]: agent.service: Scheduled restart job, restart counter is at 9.
 Oct 15 11:26:35 localhost systemd[1]: Stopped agent.service.
@@ -170,12 +168,11 @@ Oct 15 11:26:35 localhost systemd[1]: Failed to start agent.service.`}
             {t('ai:To view detailed agent logs and communication use following command:')}
           </HelperTextItem>
         </HelperText>
-        <PrismCode theme={SimpleAIPrismTheme} code="sudo journalctl TAG=agent | less" />
+        <PrismCode code="sudo journalctl TAG=agent | less" />
       </ListItem>
       <ListItem>
         <Content component="p">{t('ai:Check assisted-installer logs')}</Content>
         <PrismCode
-          theme={SimpleAIPrismTheme}
           code={`sudo su
 podman ps -a | grep assisted-installer
 podman logs <container id>`}
@@ -183,7 +180,7 @@ podman logs <container id>`}
       </ListItem>
       <ListItem>
         <Content component="p">{t('ai:Check bootkube logs')}</Content>
-        <PrismCode theme={SimpleAIPrismTheme} code={`sudo journalctl -u bootkube`} />
+        <PrismCode code={`sudo journalctl -u bootkube`} />
       </ListItem>
     </List>
   );

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

@@ -35,7 +35,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold>."
             />
           </div>
@@ -58,7 +58,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:URL must start with <bold>http</bold> (https schemes are not currently supported)."
             />
           </div>
@@ -81,7 +81,7 @@ export const ProxyInputFields = () => {
           <div>
             <Trans
               t={t}
-              components={{ bold: <strong /> }}
+              components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
               i18nKey="ai:Use a comma to separate each listed domain. Preface a domain with <bold>.</bold> to include its subdomains. Use <bold>*</bold> to bypass the proxy for all destinations."
             />
           </div>

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

@@ -11,13 +11,7 @@ import {
 } from '@openshift-assisted/types/assisted-installer-service';
 import { NO_SUBNET_SET } from '../../config';
 import { isMajorMinorVersionEqualOrGreater } from '../../utils';
-import {
-  selectClusterNetworkCIDR,
-  selectClusterNetworkHostPrefix,
-  selectServiceNetworkCIDR,
-  selectSchedulableMasters,
-  isClusterPlatformTypeVM,
-} from '../../selectors';
+import { selectSchedulableMasters, isClusterPlatformTypeVM } from '../../selectors';
 import {
   ClusterCpuArchitecture,
   CpuArchitecture,
@@ -165,12 +159,28 @@ export const clusterNetworksEqual = (array1: ClusterNetwork[], array2: ClusterNe
     ),
   );
 
-export const isAdvNetworkConf = (cluster: Cluster, defaultNetworkSettings: ClusterDefaultConfig) =>
-  selectClusterNetworkCIDR(cluster) !== defaultNetworkSettings.clusterNetworkCidr ||
-  selectClusterNetworkHostPrefix(cluster) !== defaultNetworkSettings.clusterNetworkHostPrefix ||
-  selectServiceNetworkCIDR(cluster) !== defaultNetworkSettings.serviceNetworkCidr;
+export const isAdvNetworkConf = (
+  cluster: Cluster,
+  defaultNetworkValues: Pick<
+    ClusterDefaultConfig,
+    | 'clusterNetworksIpv4'
+    | 'clusterNetworksDualstack'
+    | 'serviceNetworksIpv4'
+    | 'serviceNetworksDualstack'
+  >,
+) =>
+  !(
+    serviceNetworksEqual(
+      cluster.serviceNetworks || [],
+      defaultNetworkValues.serviceNetworksIpv4 || [],
+    ) &&
+    clusterNetworksEqual(
+      cluster.clusterNetworks || [],
+      defaultNetworkValues.clusterNetworksIpv4 || [],
+    )
+  );
 
-export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6 = false) => {
+export const canSelectNetworkTypeSDN = (isSNO: boolean, isIPv6: boolean) => {
   return !(isSNO || isIPv6);
 };