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

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,
+      };
+    },
+  };
+};

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

@@ -1,268 +1,29 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom-v5-compat';
 import countBy from 'lodash-es/countBy';
 
-import {
-  HostsTableActions,
-  getInventory,
-  getHostname,
-  Hostname,
-  ActionCheck,
-} from '../../../common';
+import { HostsTableActions, ActionCheck } from '../../../common';
 import { AgentClusterInstallK8sResource, AgentK8sResource, InfraEnvK8sResource } from '../../types';
-import AgentStatus from './AgentStatus';
-import { ActionsResolver, TableRow } from '../../../common/components/hosts/AITable';
-import { AgentTableActions, ClusterDeploymentWizardStepsType } from '../ClusterDeployment/types';
+import { ActionsResolver } from '../../../common/components/hosts/AITable';
+import { AgentTableActions } from '../ClusterDeployment/types';
 import { hostActionResolver } from '../../../common/components/hosts/tableUtils';
-import { getAgentClusterInstallOfAgent, getAIHosts, getInfraEnvNameOfAgent } from '../helpers';
+import { getAgentClusterInstallOfAgent, getAIHosts } from '../helpers';
 import { isInstallationInProgress } from '../ClusterDeployment/helpers';
 import { AGENT_BMH_NAME_LABEL_KEY, INFRAENV_GENERATED_AI_FLOW } from '../common';
 import { BareMetalHostK8sResource } from '../../types/k8s/bare-metal-host';
-import BMHStatus from './BMHStatus';
 import {
   getAgentStatus,
   getAgentStatusKey,
   getBMHStatus,
   getBMHStatusKey,
-  getWizardStepAgentStatus,
 } from '../helpers/status';
 import { filterByHostname, getHostLabels } from '../../../common/components/hosts/utils';
 import { agentStatus } from '../helpers/agentStatus';
 import noop from 'lodash-es/noop.js';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import { TFunction } from 'i18next';
-import { AgentMachineK8sResource } from '../Hypershift/types';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import { HostStatus } from '../../../common/components/hosts/types';
 
-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('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('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('ai:Unknown');
-      if (agent) {
-        // eslint-disable-next-line no-prototype-builtins
-        discoveryType = agent?.metadata?.labels?.hasOwnProperty(AGENT_BMH_NAME_LABEL_KEY)
-          ? t('ai:BMC')
-          : t('ai:Discovery ISO');
-      } else {
-        const bmh = bareMetalHosts.find((bmh) => bmh.metadata?.uid === host.id);
-        if (bmh) {
-          discoveryType = t('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('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?.uid === host.id);
-      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}
-          />
-        );
-      } else if (bmh && bmhStatuses) {
-        bmhStatus = getBMHStatus(bmh, bmhStatuses);
-        title = <BMHStatus bmhStatus={bmhStatus} />;
-      }
-
-      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('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('ai:Infrastructure env'),
-      props: {
-        id: 'col-header-infraenv',
-      },
-      sort: true,
-    },
-    cell: (host) => {
-      const agent = agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
-      const infraEnvName = getInfraEnvNameOfAgent(agent);
-      const title = infraEnvName ? (
-        <Link
-          to={`/multicloud/infrastructure/environments/details/${
-            agent.metadata?.namespace || ''
-          }/${infraEnvName}/overview`}
-        >
-          {infraEnvName}
-        </Link>
-      ) : (
-        'N/A'
-      );
-      return {
-        title,
-        props: { 'data-testid': 'infra-env' },
-        sortableValue: infraEnvName,
-      };
-    },
-  };
-};
-
 export const canEditBMH = (bmh: BareMetalHostK8sResource, t: TFunction): ActionCheck => {
   const canEdit = ['deprovisioning', 'pending', 'registering'].includes(getBMHStatusKey(bmh) || '');
 
@@ -319,17 +80,6 @@ export const canUnbindAgent = (
   }
 
   const statusKey = getAgentStatusKey(agent);
-  if (
-    [
-      'preparing-for-installation',
-      'installing',
-      'installing-in-progress',
-      'installing-pending-user-action',
-      'resetting-pending-user-action',
-    ].includes(statusKey)
-  ) {
-    return [false, t('ai:It is not possible to remove a host which is being installed.')];
-  }
 
   if (
     ['installed', 'error', 'cancelled'].includes(statusKey) &&

package/lib/cim/components/ClusterDeployment/ClusterDeploymentDetailsTable.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { AgentClusterInstallK8sResource, AgentK8sResource } from '../../types';
 import DefaultEmptyState from '../../../common/components/ui/uiState/EmptyState';
 import { ConnectedIcon } from '@patternfly/react-icons/dist/js/icons/connected-icon';
-import { infraEnvColumn, agentStatusColumn, useAgentsTable } from '../Agent/tableUtils';
+import { useAgentsTable, infraEnvColumn, agentStatusColumn } from '../Agent';
 import {
   cpuCoresColumn,
   disksColumn,
   hostnameColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
+} from '../../../common';
 import HostsTable, { DefaultExpandComponent } from '../../../common/components/hosts/HostsTable';
 import { usePagination } from '../../../common/components/hosts/usePagination';
 import { useTranslation } from '../../../common/hooks/use-translation-wrapper';

package/lib/cim/components/ClusterDeployment/LabelSelector.css

@@ -3,7 +3,7 @@
   border: none !important;
 }
 
-.ai-split-filter-hosts .pf-v5-c-label-group__label {
+.ai-split-filter-hosts .pf-v6-c-label-group__label {
   overflow: unset !important;
   max-width: unset !important;
 }

package/lib/cim/components/ClusterDeployment/LabelsSelector.tsx

@@ -112,7 +112,7 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
   const categoryName = label || t('ai:Filter hosts by existing labels');
 
   return (
-    <Split hasGutter className="pf-v5-c-label-group pf-m-category ai-split-filter-hosts">
+    <Split hasGutter className="pf-v6-c-label-group pf-m-category ai-split-filter-hosts">
       <SplitItem>
         {field.value.length ? (
           <LabelGroup categoryName={categoryName} className="ai-group-label-selector">
@@ -126,7 +126,7 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
             ))}
           </LabelGroup>
         ) : (
-          <span className="pf-v5-c-label-group__label">{categoryName}</span>
+          <span className="pf-v6-c-label-group__label">{categoryName}</span>
         )}
       </SplitItem>
       <SplitItem>
@@ -137,7 +137,7 @@ export const LabelSelectorGroup: React.FC<LabelsSelectorProps> = ({
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               variant="plain"
-              className="pf-v5-u-w-100"
+              className="pf-v6-u-w-100"
               ref={toggleRef}
               isFullWidth
               onClick={() => setAddLabelOpen(!addLabelOpen)}

package/lib/cim/components/ClusterDeployment/LocationsSelector.tsx

@@ -19,14 +19,14 @@ const LocationsLabelIcon: React.FC = () => {
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Keep the field empty to match <bold>any</bold> location."
           />
 
           <br />
           <Trans
             t={t}
-            components={{ bold: <strong /> }}
+            components={{ bold: <span className="pf-v6-u-font-weight-bold" /> }}
             i18nKey="ai:Set <bold>{{agent_location_label_key}}</bold> label in Agent resource to specify its location."
             values={{ agent_location_label_key: AGENT_LOCATION_LABEL_KEY }}
           />