@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/Agent/BMCForm.tsx

@@ -13,8 +13,9 @@ import {
   Content,
   TextInputTypes,
   ContentVariants,
+  ModalBody,
+  ModalFooter,
 } from '@patternfly/react-core';
-import { ModalBoxBody, ModalBoxFooter } from '@patternfly/react-core/deprecated';
 import {
   Formik,
   FormikProps,
@@ -150,14 +151,14 @@ const getValidationSchema = (usedHostnames: string[], origHostname: string, t: T
     bmcAddress: bmcAddressValidationSchema(t),
     username: Yup.string().required(t('ai:Required field')),
     password: Yup.string().required(t('ai:Required field')),
-    bootMACAddress: macAddressValidationSchema,
+    bootMACAddress: macAddressValidationSchema(t),
     nmState: Yup.string(),
     macMapping: Yup.array().of(
       Yup.object().shape(
         {
-          macAddress: macAddressValidationSchema.when('name', {
+          macAddress: macAddressValidationSchema(t).when('name', {
             is: (name: string) => !!name,
-            then: () => macAddressValidationSchema.required(t('ai:MAC has to be specified')),
+            then: (schema) => schema.required(t('ai:MAC has to be specified')),
           }),
           name: Yup.string().when('macAddress', {
             is: (name: string) => !!name,
@@ -274,7 +275,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
     >
       {({ isSubmitting, isValid, submitForm }: FormikProps<AddBmcValues>) => (
         <>
-          <ModalBoxBody>
+          <ModalBody>
             <Form id="add-bmc-form">
               <InputField
                 label={t('ai:Name')}
@@ -300,7 +301,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
                 label={t('ai:Boot NIC MAC Address')}
                 name="bootMACAddress"
                 placeholder={t('ai:Enter an address')}
-                description={t(
+                helperText={t(
                   "ai:The MAC address of the host's network connected NIC that will be used to provision the host.",
                 )}
                 isRequired
@@ -324,7 +325,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
                     label={t('ai:NMState')}
                     name="nmState"
                     language={Language.yaml}
-                    description={t(
+                    helperText={t(
                       'ai:Upload a YAML file in NMstate format (not the entire NMstate config CR) that includes your network configuration (static IPs, bonds, etc.).',
                     )}
                   />
@@ -342,8 +343,8 @@ const BMCForm: React.FC<BMCFormProps> = ({
                 {error}
               </Alert>
             )}
-          </ModalBoxBody>
-          <ModalBoxFooter>
+          </ModalBody>
+          <ModalFooter>
             {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
             <Button onClick={submitForm} isDisabled={isSubmitting || !isValid}>
               {isEdit ? t('ai:Submit') : t('ai:Create')}
@@ -351,7 +352,7 @@ const BMCForm: React.FC<BMCFormProps> = ({
             <Button onClick={onClose} variant={ButtonVariant.secondary}>
               {t('ai:Cancel')}
             </Button>
-          </ModalBoxFooter>
+          </ModalFooter>
         </>
       )}
     </Formik>

package/lib/cim/components/Agent/BMHEventsModal.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  Content,
+  ContentVariants,
+} from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
+import { getHumanizedDateTime, LoadingState, useTranslation } from '../../../common';
+import { useEvents } from '../../hooks';
+
+export const BMHEventsModal = ({
+  isOpen,
+  onClose,
+  namespace,
+  bmhName,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  namespace: string;
+  bmhName: string;
+}) => {
+  const { t } = useTranslation();
+  const [events, loaded, error] = useEvents({
+    namespace: namespace,
+    isList: true,
+    fieldSelector: `involvedObject.name=${bmhName}`,
+  });
+
+  let modalBody: React.ReactNode;
+  if (!loaded) {
+    modalBody = <LoadingState />;
+  } else if (error) {
+    modalBody = <Content component={ContentVariants.p}>{error as string}</Content>;
+  } else if (!events.length) {
+    modalBody = <Content component={ContentVariants.p}>{t('ai:No BMH events found.')}</Content>;
+  } else {
+    modalBody = (
+      <div style={{ height: '400px' }}>
+        <InnerScrollContainer>
+          <Table
+            variant="compact"
+            borders={false}
+            className="pf-v6-u-mb-sm"
+            gridBreakPoint=""
+            isStickyHeader
+          >
+            <Thead>
+              <Tr>
+                <Th width={25}>{t('ai:Time')}</Th>
+                <Th>{t('ai:Type')}</Th>
+                <Th>{t('ai:Message')}</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {events
+                .sort(
+                  (a, b) =>
+                    b.metadata?.creationTimestamp?.localeCompare(
+                      a.metadata?.creationTimestamp || '',
+                    ) || 0,
+                )
+                .map((e, i) => (
+                  <Tr key={`bmc-event-${i}`}>
+                    <Td className="pf-v6-u-font-weight-bold">
+                      {getHumanizedDateTime(e.metadata?.creationTimestamp)}
+                    </Td>
+                    <Td>{e.type}</Td>
+                    <Td>{e.message}</Td>
+                  </Tr>
+                ))}
+            </Tbody>
+          </Table>
+        </InnerScrollContainer>
+      </div>
+    );
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Bare metal host events')} />
+      <ModalBody>{modalBody}</ModalBody>
+    </Modal>
+  );
+};

package/lib/cim/components/Agent/BMHStatus.tsx

@@ -1,27 +1,27 @@
 import { Button, Popover } from '@patternfly/react-core';
 import * as React from 'react';
 import { getBMHStatus } from '../helpers/status';
+import { BareMetalHostK8sResource } from '../../types';
+import { BMHStatusInfo } from './BMHStatusInfo';
 
 type BMHStatusProps = {
   bmhStatus: ReturnType<typeof getBMHStatus>;
+  bmh: BareMetalHostK8sResource;
 };
 
-const BMHStatus: React.FC<BMHStatusProps> = ({ bmhStatus }) =>
-  bmhStatus.errorMessage ? (
-    <Popover
-      headerContent="Error"
-      bodyContent={bmhStatus.errorMessage}
-      minWidth="30rem"
-      maxWidth="50rem"
-      hideOnOutsideClick
-      zIndex={300}
-    >
-      <Button variant="link" isInline>
-        {bmhStatus.state.title}
-      </Button>
-    </Popover>
-  ) : (
-    <>{bmhStatus.state.title}</>
-  );
+const BMHStatus: React.FC<BMHStatusProps> = ({ bmhStatus, bmh }) => (
+  <Popover
+    aria-label="Bare metal host status details"
+    bodyContent={<BMHStatusInfo bmhStatus={bmhStatus} bmh={bmh} />}
+    minWidth="30rem"
+    maxWidth="50rem"
+    hideOnOutsideClick
+    zIndex={300}
+  >
+    <Button variant="link" isInline>
+      {bmhStatus.state.title}
+    </Button>
+  </Popover>
+);
 
 export default BMHStatus;

package/lib/cim/components/Agent/BMHStatusInfo.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  Level,
+  LevelItem,
+  Alert,
+  AlertVariant,
+  Content,
+  ContentVariants,
+  Button,
+  ButtonVariant,
+} from '@patternfly/react-core';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import { PendingIcon } from '@patternfly/react-icons/dist/js/icons/pending-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+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 { getHumanizedDateTime, useTranslation } from '../../../common';
+import { BareMetalHostK8sResource } from '../../types';
+import { getBMHStatus } from '../helpers';
+import { BMHEventsModal } from './BMHEventsModal';
+
+export const BMHStatusInfo = ({
+  bmhStatus,
+  bmh,
+}: {
+  bmhStatus: ReturnType<typeof getBMHStatus>;
+  bmh: BareMetalHostK8sResource;
+}) => {
+  const { t } = useTranslation();
+  const [isModalOpen, setModalOpen] = React.useState(false);
+
+  let alertVariant = AlertVariant.warning;
+  if (!!bmh.status?.errorMessage) {
+    alertVariant = AlertVariant.danger;
+  } else if (
+    bmh.status?.provisioning?.state === 'provisioned' ||
+    bmh.status?.provisioning?.state === 'externally provisioned'
+  ) {
+    alertVariant = AlertVariant.success;
+  }
+
+  let icon: React.ReactNode;
+  switch (bmh.status?.operationalStatus) {
+    case 'OK':
+    case 'discovered':
+      icon = <CheckCircleIcon color={okColor.value} />;
+      break;
+    case 'error':
+      icon = <ExclamationTriangleIcon color={warningColor.value} />;
+      break;
+    default:
+      icon = <PendingIcon />;
+      break;
+  }
+
+  return (
+    <>
+      <Level>
+        <LevelItem className="pf-v6-u-font-weight-bold">{t('ai:Bare metal host')}</LevelItem>
+        <LevelItem>
+          {bmh.status?.operationalStatus} {icon}
+        </LevelItem>
+      </Level>
+      <Alert title={bmhStatus.state.title} variant={alertVariant} isInline>
+        {!!bmh.status?.errorMessage && (
+          <Content component={ContentVariants.p}>{bmh.status?.errorMessage}</Content>
+        )}
+
+        <Level hasGutter>
+          <LevelItem>
+            <Button variant={ButtonVariant.link} isInline onClick={() => setModalOpen(true)}>
+              {t('ai:View BMH events')}
+            </Button>
+          </LevelItem>
+          <LevelItem>
+            <Content component={ContentVariants.small}>
+              {t('ai:Last updated:')} {getHumanizedDateTime(bmh.status?.lastUpdated)}
+            </Content>
+          </LevelItem>
+        </Level>
+      </Alert>
+
+      {isModalOpen && (
+        <BMHEventsModal
+          isOpen={isModalOpen}
+          onClose={() => setModalOpen(false)}
+          namespace={bmh.metadata?.namespace || ''}
+          bmhName={bmh.metadata?.name || ''}
+        />
+      )}
+    </>
+  );
+};

package/lib/cim/components/Agent/MinimalHWRequirements.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
-import { Button, ButtonVariant } from '@patternfly/react-core';
-import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
+import {
+  Button,
+  ButtonVariant,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ConfigMapK8sResource } from '../../types';
@@ -100,18 +107,16 @@ export const MinimalHWRequirementsModal = ({
 }: MinimalHWRequirementsModalProps) => {
   const { t } = useTranslation();
   return (
-    <Modal
-      title={t('ai:Minimum hardware requirements')}
-      isOpen={isOpen}
-      actions={[
+    <Modal isOpen={isOpen} onClose={onClose} variant={ModalVariant.medium}>
+      <ModalHeader title={t('ai:Minimum hardware requirements')} />
+      <ModalBody>
+        <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+      </ModalBody>
+      <ModalFooter>
         <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
           {t('ai:Close')}
-        </Button>,
-      ]}
-      onClose={onClose}
-      variant={ModalVariant.medium}
-    >
-      <HostRequirements {...getHWRequirements(aiConfigMap)} isSNOCluster={isSNOCluster} />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/lib/cim/components/Agent/index.ts

@@ -1,3 +1,5 @@
 export { default as AgentTable } from './AgentTable';
 export { default as BMCForm } from './BMCForm';
 export * from './types';
+export * from './tableColumns';
+export * from './tableUtils';

package/lib/cim/components/Agent/tableColumns.tsx

@@ -0,0 +1,257 @@
+import * as React from 'react';
+import { TFunction } from 'i18next';
+import { Link } from 'react-router-dom-v5-compat';
+import { Host } from '@openshift-assisted/types/assisted-installer-service';
+import { HostsTableActions, getInventory, getHostname, Hostname } from '../../../common';
+import { TableRow } from '../../../common/components/hosts/AITable';
+import { HostStatus } from '../../../common/components/hosts/types';
+import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
+import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment';
+import { AGENT_BMH_NAME_LABEL_KEY } from '../common';
+import {
+  getBMHStatus,
+  getWizardStepAgentStatus,
+  getAgentStatus,
+  getInfraEnvNameOfAgent,
+} from '../helpers';
+import { AgentMachineK8sResource } from '../Hypershift';
+import AgentStatus from './AgentStatus';
+import BMHStatus from './BMHStatus';
+import { BMHStatusInfo } from './BMHStatusInfo';
+
+export const agentHostnameColumn = (
+  t: TFunction,
+  hosts: Host[],
+  agents: AgentK8sResource[],
+  bareMetalHosts: BareMetalHostK8sResource[],
+  onEditHostname?: HostsTableActions['onEditHost'],
+  canEditHostname?: HostsTableActions['canEditHostname'],
+  canEditBMH?: HostsTableActions['canEditBMH'],
+): TableRow<Host> => ({
+  header: {
+    title: t<string>('ai:Hostname'),
+    props: {
+      id: 'col-header-hostname', // ACM jest tests require id over testId
+      modifier: 'breakWord',
+    },
+    sort: true,
+  },
+  cell: (host) => {
+    const inventory = getInventory(host);
+    const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
+    const computedHostname = getHostname(host, inventory);
+
+    let readonly = true;
+
+    const agent = agents.find((a) => a.metadata?.uid === host.id);
+    if (agent) {
+      readonly = canEditHostname ? !canEditHostname(host) : false;
+    } else {
+      const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
+      if (bmh && canEditBMH) {
+        readonly = !canEditBMH(host);
+      }
+    }
+
+    return {
+      title: (
+        <Hostname
+          host={host}
+          inventory={inventory}
+          onEditHostname={editHostname}
+          hosts={hosts}
+          readonly={readonly}
+        />
+      ),
+      props: { 'data-testid': 'host-name' },
+      sortableValue: computedHostname || '',
+    };
+  },
+});
+
+export const discoveryTypeColumn = (
+  agents: AgentK8sResource[],
+  bareMetalHosts: BareMetalHostK8sResource[],
+  t: TFunction,
+): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Discovery type'),
+      props: {
+        id: 'col-header-discovery-type',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      let discoveryType = t<string>('ai:Unknown');
+      if (agent) {
+        // eslint-disable-next-line no-prototype-builtins
+        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
+          ? t<string>('ai:BMC')
+          : t<string>('ai:Discovery ISO');
+      } else {
+        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
+        if (bmh) {
+          discoveryType = t<string>('ai:BMC');
+        }
+      }
+      return {
+        title: discoveryType,
+        props: { 'data-testid': 'discovery-type' },
+        sortableValue: discoveryType,
+      };
+    },
+  };
+};
+
+type AgentStatusColumnProps = {
+  agents: AgentK8sResource[];
+  agentStatuses: HostStatus<string>;
+  bareMetalHosts?: BareMetalHostK8sResource[];
+  bmhStatuses?: HostStatus<string>;
+  onEditHostname?: AgentTableActions['onEditHost'];
+  onApprove?: AgentTableActions['onApprove'];
+  wizardStepId?: ClusterDeploymentWizardStepsType;
+  t: TFunction;
+  isDay2?: boolean;
+};
+
+export const agentStatusColumn = ({
+  agents,
+  agentStatuses,
+  bareMetalHosts,
+  bmhStatuses,
+  onEditHostname,
+  onApprove,
+  wizardStepId,
+  t,
+  isDay2,
+}: AgentStatusColumnProps): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Status'),
+      props: {
+        id: 'col-header-infraenvstatus',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      const bmh = bareMetalHosts?.find(
+        (b) =>
+          b.metadata?.annotations?.['bmac.agent-install.openshift.io/hostname'] ===
+          host.requestedHostname,
+      );
+
+      let bmhStatus;
+      let title: React.ReactNode = '--';
+      if (agent) {
+        const editHostname = onEditHostname ? () => onEditHostname(agent) : undefined;
+        title = (
+          <AgentStatus
+            agent={agent}
+            onApprove={onApprove}
+            onEditHostname={editHostname}
+            wizardStepId={wizardStepId}
+            isDay2={isDay2}
+            additionalBMHInfo={
+              bmh &&
+              bmhStatuses && <BMHStatusInfo bmhStatus={getBMHStatus(bmh, bmhStatuses)} bmh={bmh} />
+            }
+          />
+        );
+      } else if (bmh && bmhStatuses) {
+        bmhStatus = getBMHStatus(bmh, bmhStatuses);
+        title = <BMHStatus bmhStatus={bmhStatus} bmh={bmh} />;
+      }
+
+      return {
+        title,
+        props: { 'data-testid': 'host-status' },
+        sortableValue: agent
+          ? wizardStepId
+            ? getWizardStepAgentStatus(agent, wizardStepId, t).status.title
+            : getAgentStatus(agent, agentStatuses).status.title
+          : bmhStatus?.state.title || '',
+      };
+    },
+  };
+};
+
+export const clusterColumn = (
+  agents: AgentK8sResource[],
+  agentMachines: AgentMachineK8sResource[],
+  getClusterDeploymentLink: (cd: { name: string; namespace: string }) => string,
+  t: TFunction,
+): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Cluster'),
+      props: {
+        id: 'col-header-cluster',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      let cdLink: string | undefined = undefined;
+      if (agent?.spec?.clusterDeploymentName) {
+        //hypershift
+        const amNamespace = agent.metadata?.annotations?.['agentMachineRefNamespace'];
+        if (amNamespace) {
+          const am = agentMachines.find(
+            (am) =>
+              am.status?.agentRef?.name === agent.metadata?.name &&
+              am.status?.agentRef?.namespace === agent.metadata?.namespace,
+          );
+          const nodePool = am?.metadata?.annotations?.['hypershift.openshift.io/nodePool'];
+          if (nodePool) {
+            const hcNamespace = nodePool.split('/')[0];
+            const hcName = agent.spec.clusterDeploymentName.name;
+            cdLink = getClusterDeploymentLink({ name: hcName, namespace: hcNamespace });
+          }
+        } else {
+          cdLink = getClusterDeploymentLink(agent.spec.clusterDeploymentName);
+        }
+      }
+      return {
+        title: cdLink ? <Link to={cdLink}>{agent?.spec?.clusterDeploymentName?.name}</Link> : '--',
+        props: { 'data-testid': 'cluster' },
+        sortableValue: agent?.spec?.clusterDeploymentName?.name ?? '--',
+      };
+    },
+  };
+};
+
+export const infraEnvColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host> => {
+  return {
+    header: {
+      title: t<string>('ai:Infrastructure env'),
+      props: {
+        id: 'col-header-infraenv',
+      },
+      sort: true,
+    },
+    cell: (host) => {
+      const agent = agents.find((a) => a.metadata?.uid === host.id);
+      const infraEnvName = getInfraEnvNameOfAgent(agent);
+      const title = infraEnvName ? (
+        <Link
+          to={`/multicloud/infrastructure/environments/details/${
+            agent?.metadata?.namespace || ''
+          }/${infraEnvName}/overview`}
+        >
+          {infraEnvName}
+        </Link>
+      ) : (
+        '--'
+      );
+      return {
+        title,
+        props: { 'data-testid': 'infra-env' },
+        sortableValue: infraEnvName,
+      };
+    },
+  };
+};