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

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom-v5-compat';
+import countBy from 'lodash-es/countBy';
 
 import {
   HostsTableActions,
@@ -25,7 +26,7 @@ import {
   getBMHStatusKey,
   getWizardStepAgentStatus,
 } from '../helpers/status';
-import { filterByHostname } from '../../../common/components/hosts/utils';
+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';
@@ -401,6 +402,7 @@ export const useAgentsTable = (
   } = tableActions || {};
   const { t } = useTranslation();
   const agentStatuses = agentStatus(t);
+
   const [hosts, actions] = React.useMemo(
     (): [Host[], HostsTableActions] => [
       getAIHosts(agents, bmhs, infraEnv),
@@ -548,6 +550,22 @@ const filterByStatus = (
   });
 };
 
+const filterByLabels = (hosts: Host[], labelFilter: string[]) => {
+  if (!labelFilter.length) {
+    return hosts;
+  }
+
+  return hosts.filter((h) => {
+    const labels = getHostLabels(h);
+
+    return labelFilter.some((l) =>
+      Object.entries(labels)
+        .map(([key, value]) => `${key} = ${value}`)
+        .includes(l),
+    );
+  });
+};
+
 export const filterHosts = (
   hosts: Host[],
   agents: AgentK8sResource[],
@@ -555,11 +573,26 @@ export const filterHosts = (
   bareMetalHosts: BareMetalHostK8sResource[],
   hostnameFilter: string | undefined,
   statusFilter: string[],
+  labelFilter: string[],
 ) => {
   const { hosts: byHostname, sorted } = filterByHostname(hosts, hostnameFilter);
   const byStatus = filterByStatus(byHostname, agents, agentStatuses, bareMetalHosts, statusFilter);
+  const byLabels = filterByLabels(byStatus, labelFilter);
 
-  return { hosts: byStatus, sorted };
+  return { hosts: byLabels, sorted };
+};
+
+const getAllLabels = (hosts: Host[]) => {
+  const labelArray = hosts
+    .map((host) => {
+      const labels = getHostLabels(host);
+
+      return Object.entries(labels).map(([key, val]) => `${key} = ${val}`);
+    })
+    .flat()
+    .sort();
+
+  return countBy(labelArray);
 };
 
 type UseAgentsFilterArgs = {
@@ -581,10 +614,12 @@ export const useAgentsFilter = ({
 }: UseAgentsFilterArgs) => {
   const [hostnameFilter, setHostnameFilter] = React.useState<string>();
   const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const [labelFilter, setLabelFilter] = React.useState<string[]>([]);
   const statusCount = Object.keys(agentStatuses).reduce((acc, curr) => {
     acc[agentStatuses[curr].title] = 0;
     return acc;
   }, {} as StatusCount);
+
   hosts.forEach((host) => {
     const agent = agents.find((a) => a.metadata?.uid === host.id);
     const bmh = bmhs.find((bmh) => bmh.metadata?.uid === host.id);
@@ -597,6 +632,8 @@ export const useAgentsFilter = ({
     }
   });
 
+  const hostLabels = getAllLabels(hosts);
+
   const { hosts: filteredHosts, sorted } = filterHosts(
     hosts,
     agents,
@@ -604,6 +641,7 @@ export const useAgentsFilter = ({
     bmhs,
     hostnameFilter,
     statusFilter,
+    labelFilter,
   );
 
   return {
@@ -612,6 +650,9 @@ export const useAgentsFilter = ({
     setHostnameFilter,
     statusFilter,
     setStatusFilter,
+    hostLabels,
+    labelFilter,
+    setLabelFilter,
     filteredHosts,
     sorted,
   };

package/lib/cim/components/ClusterDeployment/hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx

@@ -15,7 +15,9 @@ import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
+  gpusColumn,
   hostnameColumn,
+  labelsColumn,
   memoryColumn,
   roleColumn,
 } from '../../../../common/components/hosts/tableUtils';
@@ -93,7 +95,14 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
       }),
       roleColumn(t, hostActions.canEditRole, hostActions.onEditRole),
       ...(addAll
-        ? [discoveredAtColumn(t), cpuCoresColumn(t), memoryColumn(t), disksColumn(t)]
+        ? [
+            discoveredAtColumn(t),
+            cpuCoresColumn(t),
+            gpusColumn(t),
+            memoryColumn(t),
+            disksColumn(t),
+            labelsColumn(t),
+          ]
         : []),
     ],
     [

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostSelectionStep.tsx

@@ -313,6 +313,7 @@ const HostSelectionForm: React.FC<HostSelectionFormProps> = ({
           onAutoSelectChange={onAutoSelectChange}
           onHostSelect={onHostSelect}
           isNutanix={isNutanix}
+          hostsBinding={nextRequested && !showClusterErrors}
         />
       </GridItem>
       {(showClusterErrors || showFormErrors) && !!alerts.length && (

package/lib/cim/components/ClusterDeployment/hostSelection/ClusterDeploymentHostsSelection.tsx

@@ -42,6 +42,7 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   onHostSelect,
   onSetInstallationDiskId,
   isNutanix,
+  hostsBinding,
 }) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
@@ -54,7 +55,7 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
   const cpuArchitecture = getClusterDeploymentCpuArchitecture(clusterDeployment);
 
   const availableAgents = React.useMemo(() => {
-    const filtered = getAgentsForSelection(agents).filter(
+    const filtered = getAgentsForSelection(agents, hostsBinding).filter(
       (agent) =>
         (agent.spec.clusterDeploymentName?.name === cdName &&
           agent.spec.clusterDeploymentName?.namespace === cdNamespace) ||
@@ -66,7 +67,7 @@ const ClusterDeploymentHostsSelection: React.FC<ClusterDeploymentHostsSelectionP
     return isNutanix
       ? filtered.filter((a) => a.status?.inventory?.systemVendor?.manufacturer === 'Nutanix')
       : filtered;
-  }, [agents, cdNamespace, cdName, cpuArchitecture, isNutanix]);
+  }, [agents, hostsBinding, isNutanix, cdName, cdNamespace, cpuArchitecture]);
 
   const hostRequirementText = getHostRequirementText(isSNOCluster, isTNA, t);
 

package/lib/cim/components/ClusterDeployment/types.ts

@@ -178,6 +178,7 @@ export type ClusterDeploymentHostsSelectionProps = {
   onAutoSelectChange: VoidFunction;
   onHostSelect: VoidFunction;
   isNutanix: boolean;
+  hostsBinding?: boolean;
 };
 
 export type InfraEnvAgentTableProps = Pick<

package/lib/cim/components/InfraEnv/InfraEnvAgentTable.tsx

@@ -22,7 +22,9 @@ import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
+  gpusColumn,
   memoryColumn,
+  labelsColumn,
 } from '../../../common/components/hosts/tableUtils';
 import {
   DiscoveryTroubleshootingModal,
@@ -122,6 +124,9 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
     setHostnameFilter,
     setStatusFilter,
     statusFilter,
+    labelFilter,
+    setLabelFilter,
+    hostLabels,
     filteredHosts: hosts,
     sorted,
   } = useAgentsFilter({
@@ -157,8 +162,10 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
         clusterColumn(agents, agentMachines, getClusterDeploymentLink, t),
         discoveredAtColumn(t),
         cpuCoresColumn(t),
+        gpusColumn(t),
         memoryColumn(t),
         disksColumn(t),
+        labelsColumn(t),
       ].filter(Boolean),
     [
       t,
@@ -219,6 +226,9 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
             hostnameFilter={hostnameFilter}
             statusFilter={statusFilter}
             setStatusFilter={setStatusFilter}
+            hostLabels={hostLabels}
+            labelFilter={labelFilter}
+            setLabelFilter={setLabelFilter}
             selectedHostIDs={selectedHostIDs}
             setHostnameFilter={setHostnameFilter}
             {...paginationProps}
@@ -241,6 +251,7 @@ const InfraEnvAgentTable: React.FC<InfraEnvAgentTableProps> = ({
                 onClearFilters={() => {
                   setHostnameFilter(undefined);
                   setStatusFilter([]);
+                  setLabelFilter([]);
                 }}
               />
             ) : (

package/lib/cim/components/InfraEnv/InfraEnvOpenShiftVersionDropdown.tsx

@@ -65,15 +65,17 @@ const InfraEnvOpenShiftVersionDropdown = ({ osImages }: { osImages: OsImage[] })
           onOpenChange={() => setOsImageOpen(!osImageOpen)}
         >
           <DropdownList>
-            {filteredImages.map((image) => (
-              <DropdownItem
-                key={image.openshiftVersion}
-                id={image.openshiftVersion}
-                value={image.openshiftVersion}
-              >
-                {`OpenShift ${image.openshiftVersion}`}
-              </DropdownItem>
-            ))}
+            {filteredImages
+              .sort((a, b) => b.openshiftVersion.localeCompare(a.openshiftVersion))
+              .map((image) => (
+                <DropdownItem
+                  key={image.openshiftVersion}
+                  id={image.openshiftVersion}
+                  value={image.openshiftVersion}
+                >
+                  {`OpenShift ${image.openshiftVersion}`}
+                </DropdownItem>
+              ))}
           </DropdownList>
         </Dropdown>
       </Tooltip>

package/lib/cim/components/InfraEnv/InfraTableToolbar.tsx

@@ -66,11 +66,14 @@ type InfraTableToolbarProps = ReturnType<typeof usePagination> & {
   setSelectedHostIDs: (items: string[]) => void;
   massActions: React.ReactNode[];
   hosts: Host[];
+  hostLabels: { [key in string]: number };
   statusFilter: string[];
+  labelFilter: string[];
   statusCount: StatusCount;
   hostnameFilter: string | undefined;
   setHostnameFilter: (hostname: string | undefined) => void;
   setStatusFilter: (status: string[]) => void;
+  setLabelFilter: (label: string[]) => void;
   selectedHostIDs: string[];
 };
 
@@ -78,17 +81,22 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
   setSelectedHostIDs,
   massActions,
   hosts,
+  hostLabels,
   statusFilter,
+  labelFilter,
   statusCount,
   hostnameFilter,
   setHostnameFilter,
   setStatusFilter,
+  setLabelFilter,
   selectedHostIDs,
   ...paginationProps
 }) => {
   const { t } = useTranslation();
   const agentStatuses = agentStatus(t);
   const [statusFilterOpen, setStatusFilterOpen] = React.useState(false);
+  const [labelFilterOpen, setLabelFilterOpen] = React.useState(false);
+
   const itemIDs = React.useMemo(() => hosts.map((h) => h.id), [hosts]);
   const filterStatuses = React.useMemo(() => getStatusesForFilter(agentStatuses), [agentStatuses]);
   const categoryLabels = getCategoryLabels(t);
@@ -106,13 +114,29 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
     }
   };
 
+  const onLabelFilterToggle = () => setLabelFilterOpen(!labelFilterOpen);
+  const onLabelFilterSelect = (
+    e?: React.MouseEvent<Element, MouseEvent>,
+    value?: string | number,
+  ) => {
+    if (!labelFilter?.includes(value as string)) {
+      const newItems = (labelFilter ? [...labelFilter, value] : [value]) as string[];
+      setLabelFilter(newItems);
+    } else {
+      setLabelFilter(labelFilter?.filter((f) => f !== value));
+    }
+  };
+
   return (
     <TableToolbar
       selectedIDs={selectedHostIDs || []}
       itemIDs={itemIDs}
       setSelectedIDs={setSelectedHostIDs}
       actions={massActions}
-      clearAllFilters={() => setStatusFilter([])}
+      clearAllFilters={() => {
+        setStatusFilter([]);
+        setLabelFilter([]);
+      }}
       {...paginationProps}
     >
       <ToolbarItem>
@@ -123,6 +147,7 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           onClear={() => setHostnameFilter(undefined)}
         />
       </ToolbarItem>
+
       <ToolbarItem>
         <ToolbarFilter
           chips={statusFilter}
@@ -175,6 +200,51 @@ const InfraTableToolbar: React.FC<InfraTableToolbarProps> = ({
           </Dropdown>
         </ToolbarFilter>
       </ToolbarItem>
+
+      <ToolbarItem>
+        <ToolbarFilter
+          chips={labelFilter}
+          deleteChip={(_, chip) => setLabelFilter(labelFilter.filter((f) => f !== chip))}
+          deleteChipGroup={() => setLabelFilter([])}
+          categoryName={'Labels'}
+        >
+          <Dropdown
+            isOpen={labelFilterOpen}
+            onSelect={onLabelFilterSelect}
+            onOpenChange={onLabelFilterToggle}
+            shouldFocusToggleOnSelect
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isFullWidth
+                onClick={onLabelFilterToggle}
+                isExpanded={labelFilterOpen}
+                icon={<FilterIcon />}
+              >
+                {t('ai:Labels')}
+              </MenuToggle>
+            )}
+          >
+            <DropdownGroup label={t('ai:Labels')}>
+              {Object.entries(hostLabels).map(([label, count]) => (
+                <DropdownItem
+                  hasCheckbox
+                  key={`host-label-${label}`}
+                  value={label}
+                  isSelected={labelFilter?.includes(label)}
+                >
+                  <Split hasGutter>
+                    <SplitItem>{label}</SplitItem>
+                    <SplitItem>
+                      <Badge isRead>{count || 0}</Badge>
+                    </SplitItem>
+                  </Split>
+                </DropdownItem>
+              ))}
+            </DropdownGroup>
+          </Dropdown>
+        </ToolbarFilter>
+      </ToolbarItem>
     </TableToolbar>
   );
 };

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

@@ -18,9 +18,13 @@ const AGENT_FOR_SELECTION_STATUSES: AgentStatus[] = [
 export const hostToAgent = (agents: AgentK8sResource[] = [], host: Host) =>
   agents.find((a) => a.metadata?.uid === host.id) as AgentK8sResource;
 
-export const getAgentsForSelection = (agents: AgentK8sResource[]) =>
+export const getAgentsForSelection = (agents: AgentK8sResource[], isSubmitting?: boolean) =>
   agents.filter((agent) => {
     const key = getAgentStatusKey(agent);
+    if (isSubmitting) {
+      return [...AGENT_FOR_SELECTION_STATUSES, 'specSyncErr'].includes(key as AgentStatus);
+    }
+
     return AGENT_FOR_SELECTION_STATUSES.includes(key as AgentStatus);
   });
 

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

@@ -75,6 +75,7 @@ export const getAIHosts = (
       infraEnvId: `${agent.metadata?.namespace || ''}/${
         agent.metadata?.labels?.['infraenvs.agent-install.openshift.io'] || ''
       }`,
+      nodeLabels: JSON.stringify(agent.metadata?.labels || {}),
     };
   });
 

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

@@ -41,7 +41,7 @@ const hostnameColumn = (agents: AgentK8sResource[], t: TFunction): TableRow<Host
     },
     cell: (host) => {
       const agent = agents.find((a) => a.metadata?.uid === host.id);
-      const hostname = agent?.spec.hostname || agent?.status?.inventory.hostname;
+      const hostname = agent?.spec?.hostname || agent?.status?.inventory?.hostname;
       return {
         title: <ApproveTableRow agent={agent}>{hostname}</ApproveTableRow>,
         props: { 'data-testid': 'hostname' },

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

@@ -104,16 +104,16 @@ export const getClusterDetailsValidationSchema = ({
       return Yup.object({
         name: validateName(),
         baseDnsDomain: isOcm
-          ? baseDomainValidationSchema.required('Required')
-          : dnsNameValidationSchema.required('Required'),
+          ? baseDomainValidationSchema.required(t('ai:Required field'))
+          : dnsNameValidationSchema.required(t('ai:Required field')),
       });
     }
     return Yup.object({
       name: validateName(),
       baseDnsDomain: isOcm
-        ? baseDomainValidationSchema.required('Required')
-        : dnsNameValidationSchema.required('Required'),
-      pullSecret: pullSecretValidationSchema.required('Required.'),
+        ? baseDomainValidationSchema.required(t('ai:Required field'))
+        : dnsNameValidationSchema.required(t('ai:Required field')),
+      pullSecret: pullSecretValidationSchema.required(t('ai:Required field')),
       diskEncryptionTangServers: Yup.array().when('diskEncryptionMode', {
         is: (diskEncryptionMode: DiskEncryption['mode']) => {
           return diskEncryptionMode === 'tang';
@@ -125,8 +125,8 @@ export const getClusterDetailsValidationSchema = ({
                 .url(
                   t('ai:Tang Server URL must be a valid URL starting with "http://" or "https://"'),
                 )
-                .required(t('ai:Required.')),
-              thumbprint: Yup.string().required(t('ai:Required.')),
+                .required(t('ai:Required field')),
+              thumbprint: Yup.string().required(t('ai:Required field')),
             }),
           ),
       }),

package/lib/common/components/hosts/tableUtils.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
 import { Address4, Address6 } from 'ip-address';
 import type {
   Cluster,
@@ -20,6 +21,7 @@ import HostStatus from './HostStatus';
 import RoleCell from './RoleCell';
 import {
   areOnlySoftValidationsFailing,
+  getHostLabels,
   getHostname,
   getHostRole,
   getHostStatus,
@@ -280,6 +282,24 @@ export const disksColumn = (t: TFunction): TableRow<Host> => ({
   },
 });
 
+export const gpusColumn = (t: TFunction): TableRow<Host> => ({
+  header: {
+    title: t('ai:GPUs'),
+    props: {
+      id: 'col-header-gpus',
+    },
+    sort: true,
+  },
+  cell: (host) => {
+    const { gpus } = getInventory(host);
+    return {
+      title: <>{gpus?.length ?? '--'}</>,
+      props: { 'data-testid': 'host-gpus' },
+      sortableValue: gpus?.length ?? 0,
+    };
+  },
+});
+
 export const countColumn = (cluster: Cluster): TableRow<Host> => ({
   header: { title: <HostsCount cluster={cluster} inParenthesis /> },
 });
@@ -363,6 +383,31 @@ export const macAddressColumn = (cluster: Cluster): TableRow<Host> => ({
   },
 });
 
+export const labelsColumn = (t: TFunction): TableRow<Host> => ({
+  header: {
+    title: t('ai:Labels'),
+    props: {
+      id: 'col-header-labels',
+    },
+    sort: false,
+  },
+  cell: (host) => {
+    const labels = getHostLabels(host);
+    return {
+      title: (
+        <LabelGroup>
+          {Object.entries(labels).map(([key, value], index) => (
+            <Label key={`${host.id}-host-label-${index}`} isCompact>
+              {key} = {value}
+            </Label>
+          ))}
+        </LabelGroup>
+      ),
+      props: { 'data-testid': 'host-labels' },
+    };
+  },
+});
+
 const ActionTitle: React.FC<{ disabled: boolean; description?: string; title: string }> = ({
   title,
   description,

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

@@ -205,6 +205,10 @@ export const getInventory = (host: Host) => {
   return stringToJSON<Inventory>(inventoryString) || {};
 };
 
+export const getHostLabels = (host: Host) => {
+  return host.nodeLabels ? (JSON.parse(host.nodeLabels) as { [key: string]: string }) : {};
+};
+
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
     return { hosts, sorted: false };

package/lib/common/components/ui/formik/validationSchemas.ts

@@ -57,7 +57,7 @@ export const nameValidationSchema = (
 ) => {
   const clusterNameValidationMessagesList = clusterNameValidationMessages(t);
   return Yup.string()
-    .required('Required')
+    .required(t('ai:Required field'))
     .matches(CLUSTER_NAME_VALID_CHARS_REGEX, {
       message: clusterNameValidationMessagesList.INVALID_VALUE,
       excludeEmptyString: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@openshift-assisted/locales": "2.16.3-cim",
-    "@openshift-assisted/types": "2.16.3-cim",
+    "@openshift-assisted/locales": "2.16.5-cim",
+    "@openshift-assisted/types": "2.16.5-cim",
     "@openshift-console/dynamic-plugin-sdk": "1.0.0",
     "@patternfly/patternfly": "5.2.0",
     "@patternfly/react-code-editor": "5.2.0",
@@ -140,5 +140,5 @@
       ]
     }
   },
-  "version": "2.16.3-cim"
+  "version": "2.16.5-cim"
 }