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

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

@@ -4,8 +4,9 @@ import {
   Button,
   ButtonVariant,
   Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -27,7 +28,7 @@ type ApproveTableRowProps = {
 };
 
 const ApproveTableRow: React.FC<ApproveTableRowProps> = ({ agent, children }) => (
-  <div className={agent?.spec.approved ? 'pf-v5-u-color-200' : undefined}>{children}</div>
+  <div className={agent?.spec.approved ? 'pf-v6-u-color-200' : undefined}>{children}</div>
 );
 
 const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
@@ -139,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
@@ -166,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')}
@@ -175,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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Flex, FlexItem, 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 { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
 import {
   getHostname,
   getInventory,
@@ -43,7 +43,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
         ?.clusterDeploymentName?.name;
       return {
         title: (
-          <div className={assignedToCluster ? 'pf-v5-u-color-200' : undefined}>
+          <div className={assignedToCluster ? 'pf-v6-u-color-200' : undefined}>
             {computedHostname}
           </div>
         ),
@@ -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

@@ -1,9 +1,6 @@
 import React from 'react';
 import * as Yup from 'yup';
 import {
-  Modal,
-  ModalBoxBody,
-  ModalBoxFooter,
   Button,
   ButtonVariant,
   Alert,
@@ -11,6 +8,10 @@ import {
   AlertActionCloseButton,
   Stack,
   StackItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
 } from '@patternfly/react-core';
 import { Formik, FormikConfig, FormikProps } from 'formik';
 import { AgentK8sResource } from '../../types/k8s/agent';
@@ -126,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}
@@ -141,7 +141,7 @@ const ScaleUpModal: React.FC<ScaleUpModalProps> = ({
           {({ isSubmitting, isValid, submitForm }: FormikProps<ScaleUpFormValues>) => {
             return (
               <>
-                <ModalBoxBody>
+                <ModalBody>
                   <Stack hasGutter>
                     <StackItem>
                       <ScaleUpForm
@@ -167,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')}
@@ -176,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 +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/useAgentServiceConfig.tsx

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

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/index.ts

@@ -1,5 +1,4 @@
 export * from './fromOCP';
 export * from './k8s';
 export * from './metal3';
-export * from './resources';
 export * from './models';

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/cim/types/models.tsx

@@ -1,12 +1,56 @@
 import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
 
 export const AgentClusterInstallModel: K8sModel = {
+  kind: 'AgentClusterInstall',
   label: 'AgentClusterInstall',
-  apiVersion: 'v1beta1',
+  labelPlural: 'AgentClusterInstalls',
   plural: 'agentclusterinstalls',
+  apiVersion: 'v1beta1',
+  apiGroup: 'extensions.hive.openshift.io',
+  namespaced: true,
   abbr: 'ACI',
+};
+
+export const AgentServiceConfigModel: K8sModel = {
+  kind: 'AgentServiceConfig',
+  label: 'AgentServiceConfig',
+  labelPlural: 'AgentServiceConfigs',
+  plural: 'agentserviceconfigs',
+  apiVersion: 'v1beta1',
+  apiGroup: 'agent-install.openshift.io',
+  namespaced: false,
+  abbr: 'asc',
+};
+
+export const IngressControllerModel: K8sModel = {
+  kind: 'IngressController',
+  label: 'IngressController',
+  labelPlural: 'IngressControllers',
+  plural: 'ingresscontrollers',
+  apiVersion: 'v1',
+  apiGroup: 'operator.openshift.io',
   namespaced: true,
-  kind: 'AgentClusterInstall',
-  labelPlural: 'AgentClusterInstalls',
-  apiGroup: 'extensions.hive.openshift.io',
+  abbr: 'ic',
+};
+
+export const RouteModel: K8sModel = {
+  kind: 'Route',
+  label: 'Route',
+  labelPlural: 'Routes',
+  plural: 'routes',
+  apiVersion: 'v1',
+  apiGroup: 'route.openshift.io',
+  namespaced: true,
+  abbr: 'rt',
+};
+
+export const ProvisioningModel: K8sModel = {
+  kind: 'Provisioning',
+  label: 'Provisioning',
+  labelPlural: 'Provisionings',
+  plural: 'provisionings',
+  apiVersion: 'v1alpha1',
+  apiGroup: 'metal3.io',
+  namespaced: false,
+  abbr: 'p',
 };

package/lib/common/api/assisted-service/BundleAPI.ts

@@ -6,8 +6,21 @@ const BundleAPI = {
     return `/v2/operators/bundles`;
   },
 
-  list() {
-    return client.get<Bundle[]>(`${BundleAPI.makeBaseURI()}`);
+  list(
+    openshiftVersion?: string,
+    cpuArchitecture?: string,
+    platformType?: string,
+    featureIds?: string,
+  ) {
+    return client.get<Bundle[]>(`${BundleAPI.makeBaseURI()}`, {
+      params: {
+        openshift_version: openshiftVersion,
+        cpu_architecture: cpuArchitecture,
+        platform_type: platformType,
+        feature_ids: featureIds,
+        ...(platformType === 'external' ? { external_platform_name: 'oci' } : {}),
+      },
+    });
   },
 
   listOperatorsForBundle(bundleName: string) {

package/lib/common/api/assisted-service/ClustersAPI.ts

@@ -245,6 +245,12 @@ const ClustersAPI = {
       headers: { 'Content-Type': 'application/json' },
     });
   },
+  registerDisconnected(params: { name: string; openshiftVersion: string }) {
+    return client.post<Cluster, AxiosResponse<Cluster>, { name: string; openshiftVersion: string }>(
+      `${ClustersAPI.makeBaseURI()}disconnected`,
+      params,
+    );
+  },
 };
 
 export default ClustersAPI;

package/lib/common/api/assisted-service/HostsAPI.ts

@@ -1,4 +1,5 @@
 import {
+  Cluster,
   Host,
   HostUpdateParams,
   InfraEnv,
@@ -62,6 +63,18 @@ const HostsAPI = {
       `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/install`,
     );
   },
+  bindHost(infraEnvId: InfraEnv['id'], hostId: Host['id'], clusterId: Cluster['id']) {
+    return client.post<Host, AxiosResponse<Host>, { cluster_id: string }>(
+      `${HostsAPI.makeActionsBaseURI(infraEnvId, hostId)}/bind`,
+      { cluster_id: clusterId },
+      {
+        headers: {
+          accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  },
 };
 
 export default HostsAPI;

package/lib/common/api/assisted-service/InfraEnvsAPI.ts

@@ -4,6 +4,7 @@ import {
   InfraEnvCreateParams,
   PresignedUrl,
   InfraEnvUpdateParams,
+  Host,
 } from '@openshift-assisted/types/assisted-installer-service';
 import { AxiosResponse } from 'axios';
 
@@ -67,6 +68,11 @@ const InfraEnvsAPI = {
       `${InfraEnvsAPI.makeBaseURI(infraEnvId)}/downloads/files-presigned?file_name=ipxe-script`,
     );
   },
+  getHosts(infraEnvId: InfraEnv['id']) {
+    return client.get<Host[]>(`${InfraEnvsAPI.makeBaseURI(infraEnvId)}/hosts`, {
+      signal: _getRequestAbortController.signal,
+    });
+  },
 };
 
 export default InfraEnvsAPI;

package/lib/common/components/clusterConfiguration/CertificateFields.css

@@ -1,3 +1,3 @@
-.ai-certificate-fields .pf-v5-c-check__body {
+.ai-certificate-fields .pf-v6-c-check__body {
   width: 100%;
 }

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

@@ -22,7 +22,7 @@ export const CertificateFieldsHelperText = ({ fieldId = FIELD_NAME }) => {
     <FormGroup>
       <FormHelperText>
         <HelperText id={fieldId}>
-          <HelperTextItem>
+          <HelperTextItem data-testid="certificate-fields-helper-text">
             {t(
               'ai:Paste in 1 or more PEM formatted certificates that you want the cluster to trust.',
             )}

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

@@ -3,12 +3,12 @@ import * as Yup from 'yup';
 import {
   Button,
   Form,
-  ModalBoxBody,
-  ModalBoxFooter,
   AlertVariant,
   Alert,
   Stack,
   StackItem,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { Formik, FormikHelpers } from 'formik';
@@ -114,7 +114,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
       {({ submitForm, isSubmitting, status }) => {
         return (
           <>
-            <ModalBoxBody>
+            <ModalBody>
               <Stack hasGutter>
                 {hasDHCP === false && (
                   <StackItem>
@@ -139,8 +139,8 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
                   </Form>
                 </StackItem>
               </Stack>
-            </ModalBoxBody>
-            <ModalBoxFooter>
+            </ModalBody>
+            <ModalFooter>
               <Button
                 // eslint-disable-next-line @typescript-eslint/no-misused-promises
                 onClick={submitForm}
@@ -156,7 +156,7 @@ export const DiscoveryImageConfigForm: React.FC<DiscoveryImageConfigFormProps> =
               <Button key="cancel" variant="link" onClick={onCancel}>
                 {t('ai:Cancel')}
               </Button>
-            </ModalBoxFooter>
+            </ModalFooter>
           </>
         );
       }}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Trans } from 'react-i18next';
 
@@ -14,35 +14,35 @@ const DiscoveryInstructions = ({
 }: DiscoveryInstructionsProps) => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem hidden={!showAllInstructions}>
+    <>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Click the Add host button.', { count: +isSNO })}
-        </TextListItem>
-        <TextListItem hidden={!showAllInstructions}>
+        </Content>
+        <Content component="li" hidden={!showAllInstructions}>
           {t('ai:Configure the SSH key and proxy settings after the modal appears (optional).')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Download the Discovery ISO (onto a USB drive, attach it to a virtual media, etc.) and use it to boot your hosts.',
           )}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           <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. "
           />
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Booted hosts should appear in the host inventory table. This may take a few minutes.',
           )}
-        </TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+      </Content>
+    </>
   );
 };
 

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

@@ -1,25 +1,25 @@
 import React from 'react';
-import { TextListItem, OrderType, Text, TextContent, TextList } from '@patternfly/react-core';
+import { Content, OrderType } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 
 const DiscoveryIpxeInstructions = () => {
   const { t } = useTranslation();
   return (
-    <TextContent>
-      <Text component="h3">{t('ai:Adding hosts instructions')}</Text>
-      <TextList component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
-        <TextListItem>{t('ai:Download the example iPXE script file')}</TextListItem>
-        <TextListItem>
+    <>
+      <Content component="h3">{t('ai:Adding hosts instructions')}</Content>
+      <Content component="ol" type={OrderType.number} style={{ marginLeft: 0 }}>
+        <Content component="li">{t('ai:Download the example iPXE script file')}</Content>
+        <Content component="li">
           {t('ai:Download the assets in the script file to your iPXE server')}
-        </TextListItem>
-        <TextListItem>
+        </Content>
+        <Content component="li">
           {t(
             'ai:Inside the example script file, customize the asset URLs to your local server address',
           )}
-        </TextListItem>
-        <TextListItem>{t('ai:Set all the hosts to boot using iPXE script file')}</TextListItem>
-      </TextList>
-    </TextContent>
+        </Content>
+        <Content component="li">{t('ai:Set all the hosts to boot using iPXE script file')}</Content>
+      </Content>
+    </>
   );
 };