@openshift-assisted/ui-lib 2.15.2-cim → 2.16.0-cim

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

@@ -80,6 +80,7 @@ export type AITableProps<R> = ReturnType<typeof usePagination> & {
   actionResolver?: ActionsResolver<R>;
   canSelectAll?: boolean;
   variant?: TableProps['variant'];
+  alreadySorted?: boolean;
 };
 
 // eslint-disable-next-line
@@ -103,8 +104,21 @@ const AITable = <R extends any>({
   perPageOptions,
   canSelectAll,
   variant,
+  alreadySorted,
 }: WithTestID & AITableProps<R>) => {
   const itemIDs = React.useMemo(() => data.map(getDataId), [data, getDataId]);
+  const [openRows, setOpenRows] = React.useState<OpenRows>({});
+
+  const sortByRef = React.useRef<ISortBy>();
+  const [sortBy, setSortBy] = React.useState<ISortBy>({
+    index: onSelect ? 1 : 0,
+    direction: SortByDirection.asc,
+  });
+
+  const dataRef = React.useRef(data);
+  if (dataRef.current !== data) {
+    dataRef.current = data;
+  }
 
   React.useEffect(() => {
     if (selectedIDs && setSelectedIDs) {
@@ -121,16 +135,29 @@ const AITable = <R extends any>({
     }
   }, [data, setSelectedIDs, selectedIDs, getDataId]);
 
-  const [openRows, setOpenRows] = React.useState<OpenRows>({});
-  const [sortBy, setSortBy] = React.useState<ISortBy>({
-    index: onSelect ? 1 : 0,
-    direction: SortByDirection.asc,
-  });
+  React.useEffect(() => {
+    if (alreadySorted) {
+      sortByRef.current = sortBy;
+      setSortBy({
+        index: -1,
+        direction: SortByDirection.asc,
+      });
+    } else {
+      if (sortBy.index === -1 && sortByRef.current) {
+        setSortBy(sortByRef.current);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [alreadySorted]);
+
+  React.useEffect(() => {
+    if (!alreadySorted) {
+      sortByRef.current = sortBy;
+    } else if (alreadySorted && sortBy.index !== -1) {
+      sortByRef.current = sortBy;
+    }
+  }, [sortBy, alreadySorted]);
 
-  const dataRef = React.useRef(data);
-  if (dataRef.current !== data) {
-    dataRef.current = data;
-  }
   const onSelectAll = React.useCallback(
     (isChecked: boolean) => {
       setSelectedIDs?.(isChecked ? dataRef.current.map(getDataId) : []);
@@ -169,33 +196,27 @@ const AITable = <R extends any>({
     return [newContent, columns];
   }, [canSelectAll, content, getDataId, onSelect, onSelectAll]);
 
-  const hostRows = React.useMemo(() => {
-    const rows = (data || [])
-      .map<IRow>((obj) => {
-        const id = getDataId(obj);
-        const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
-        const isOpen = !!openRows[id];
-        return {
-          isOpen,
-          cells,
-          key: `${id}-master`,
-          id,
-          actions: actionResolver ? actionResolver(obj) : undefined,
-          nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
-        };
-      })
-      .slice((page - 1) * perPage, page * perPage);
-    return rows;
-  }, [
-    data,
-    page,
-    perPage,
-    ExpandComponent,
-    getDataId,
-    contentWithAdditions,
-    openRows,
-    actionResolver,
-  ]);
+  const getRows = React.useCallback(
+    (data: R[]) =>
+      (data || [])
+        .map<IRow>((obj) => {
+          const id = getDataId(obj);
+          const cells = contentWithAdditions.filter((c) => !!c.cell).map((c) => c.cell?.(obj));
+          const isOpen = !!openRows[id];
+          return {
+            isOpen,
+            cells,
+            key: `${id}-master`,
+            id,
+            actions: actionResolver ? actionResolver(obj) : undefined,
+            nestedComponent: ExpandComponent ? <ExpandComponent obj={obj} /> : undefined,
+          };
+        })
+        .slice((page - 1) * perPage, page * perPage),
+    [page, perPage, getDataId, contentWithAdditions, openRows, actionResolver, ExpandComponent],
+  );
+
+  const hostRows = React.useMemo(() => getRows(data), [data, getRows]);
 
   const rows = React.useMemo(() => {
     if (hostRows.length) {
@@ -223,10 +244,13 @@ const AITable = <R extends any>({
   }, []);
 
   const sortedRows = React.useMemo(() => {
+    if (alreadySorted && sortBy.index === -1) {
+      return getRows(data);
+    }
     return rows.sort(
       rowSorter(sortBy, (row: IRow, index = 0) => row.cells?.[index] as string | HumanizedSortable),
     );
-  }, [rows, sortBy]);
+  }, [alreadySorted, sortBy, rows, getRows, data]);
 
   return (
     <>

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

@@ -122,7 +122,6 @@ const DiskRoleDropdown: React.FC<DiskRoleDropdownProps> = ({
       onSelect={onSelect}
       toggle={toggle}
       isOpen={isOpen}
-      isPlain
     >
       <DropdownList>{dropdownItems}</DropdownList>
     </Dropdown>

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

@@ -60,20 +60,32 @@ type HostsTableProps = ReturnType<typeof usePagination> &
     | 'variant'
   > & {
     hosts: Host[];
+    alreadySorted?: boolean;
     skipDisabled?: boolean;
     children: React.ReactNode;
   };
 
-const HostsTable = ({ hosts, skipDisabled, ...rest }: HostsTableProps & WithTestID) => {
-  const data = React.useMemo(
-    () =>
-      (hosts || [])
-        .filter((host) => !skipDisabled || host.status !== 'disabled')
-        .sort((a, b) => (a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1)),
-    [hosts, skipDisabled],
-  );
+const HostsTable = ({
+  hosts,
+  skipDisabled,
+  alreadySorted,
+  ...rest
+}: HostsTableProps & WithTestID) => {
+  const data = React.useMemo(() => {
+    const filteredHosts = (hosts || []).filter(
+      (host) => !skipDisabled || host.status !== 'disabled',
+    );
+
+    return alreadySorted
+      ? filteredHosts
+      : filteredHosts.sort((a, b) =>
+          a.createdAt && b.createdAt && a.createdAt < b.createdAt ? -1 : 1,
+        );
+  }, [hosts, skipDisabled, alreadySorted]);
 
-  return <AITable<Host> getDataId={getHostId} data={data} {...rest} />;
+  return (
+    <AITable<Host> getDataId={getHostId} data={data} alreadySorted={alreadySorted} {...rest} />
+  );
 };
 
 export default HostsTable;

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

@@ -10,7 +10,6 @@ import {
   ToolbarContent,
   ToolbarItem,
   ToolbarProps,
-  Tooltip,
   Dropdown,
   DropdownItem,
   MenuToggle,
@@ -68,14 +67,20 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
         : null;
   }
 
-  const isDisabled = isChecked === false;
+  const isActionsDisabled = isChecked === false;
 
   const actionsDropdown = (
     <Dropdown
       onSelect={onActionsToggle}
       onOpenChange={onActionsToggle}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle ref={toggleRef} isFullWidth onClick={onActionsToggle} isExpanded={actionsOpen}>
+        <MenuToggle
+          ref={toggleRef}
+          isFullWidth
+          onClick={onActionsToggle}
+          isExpanded={actionsOpen}
+          isDisabled={isActionsDisabled}
+        >
           {t('ai:Actions')}
         </MenuToggle>
       )}
@@ -130,13 +135,7 @@ const TableToolbar: React.FC<TableToolbarProps> = ({
           <ToolbarContent className="table-toolbar__content">
             <ToolbarItem>{SelectDropdown}</ToolbarItem>
             {children}
-            <ToolbarItem>
-              {isDisabled ? (
-                <Tooltip content={t('ai:Select one or more hosts')}>{actionsDropdown}</Tooltip>
-              ) : (
-                actionsDropdown
-              )}
-            </ToolbarItem>
+            <ToolbarItem>{actionsDropdown}</ToolbarItem>
           </ToolbarContent>
         </Toolbar>
       </SplitItem>

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

@@ -80,7 +80,7 @@ export const hostnameColumn = (
             inventory={inventory}
             onEditHostname={editHostname}
             hosts={hosts}
-            readonly={canEditHostname ? !canEditHostname() : false}
+            readonly={canEditHostname ? !canEditHostname(host) : false}
           />
         ),
         props: { 'data-testid': 'host-name' },

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

@@ -47,7 +47,7 @@ export type HostsTableActions = {
   onEditBMH?: (host: Host) => void;
   canEditBMH?: (host: Host) => ActionCheck;
   onSelect?: (host: Host, selected: boolean) => void;
-  canEditHostname?: () => boolean;
+  canEditHostname?: (host?: Host) => boolean;
   canUnbindHost?: (host: Host) => ActionCheck;
   onUnbindHost?: (host: Host) => void;
   onExcludedODF?: (

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

@@ -80,8 +80,19 @@ export const canEditRole = (
   isSNO?: boolean,
 ) => canEditHost(clusterStatus, status) && !isSNO;
 
-export const canEditHostname = (clusterStatus: Cluster['status']) =>
-  ['insufficient', 'adding-hosts', 'ready', 'pending-for-input'].includes(clusterStatus);
+export const canEditHostname = (clusterStatus: Cluster['status'], host?: Host) => {
+  // First check if the cluster status allows hostname editing
+  if (!['insufficient', 'adding-hosts', 'ready', 'pending-for-input'].includes(clusterStatus)) {
+    return false;
+  }
+
+  // For Day2 hosts, also check the host status
+  if (host && host.kind === 'AddToExistingClusterHost') {
+    return canHostnameBeChanged(host.status);
+  }
+
+  return true;
+};
 
 export const canEditDisks = canEditHost;
 
@@ -196,7 +207,7 @@ export const getInventory = (host: Host) => {
 
 export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefined) => {
   if (!hostnameFilter) {
-    return hosts;
+    return { hosts, sorted: false };
   }
   const hostsWithHostname = hosts.map((host) => {
     const { inventory: inventoryString = '' } = host;
@@ -209,12 +220,28 @@ export const filterByHostname = (hosts: Host[], hostnameFilter: string | undefin
   });
 
   const fuse = new Fuse(hostsWithHostname, {
+    includeScore: true,
     ignoreLocation: true,
     threshold: 0.3,
     keys: ['hostname'],
   });
 
-  return fuse.search(hostnameFilter).map(({ item }) => item.host);
+  const filteredHosts = fuse.search(hostnameFilter);
+
+  const sortedHosts = filteredHosts
+    .sort((a, b) => (a.score || 0) - (b.score || 0))
+    .map(({ item }) => item.host);
+
+  const sorted =
+    filteredHosts.length > 1 &&
+    filteredHosts.some(
+      (result, index) => index > 0 && (result.score || 0) !== (filteredHosts[0].score || 0),
+    );
+
+  return {
+    hosts: sortedHosts,
+    sorted,
+  };
 };
 
 export const getFailingHostValidations = (validationsInfo: HostValidationsInfo) =>

package/lib/common/components/newFeatureSupportLevels/types.ts

@@ -19,6 +19,7 @@ export type GetFeatureDisabledReason = (
   supportLevelData?: NewFeatureSupportLevelMap,
   cpuArchitecture?: SupportedCpuArchitecture,
   platformType?: PlatformType,
+  title?: string,
 ) => string | undefined;
 
 export type GetFeatureSupportLevel = (

package/lib/common/components/operators/operatorDescriptions.tsx

@@ -0,0 +1,70 @@
+export const DESCRIPTION_MTV =
+  'This Toolkit (MTV) enables you to migrate virtual machines from VMware vSphere, Red Hat Virtualization, or OpenStack to OpenShift Virtualization running on Red Hat OpenShift.';
+
+export const DESCRIPTION_AMD_GPU =
+  'Automate the management of AMD software components needed to provision and monitor GPUs.';
+
+export const DESCRIPTION_LSO = 'Allows provisioning of persistent storage by using local volumes.';
+
+export const DESCRIPTION_AUTHORINO =
+  'Lightweight external authorization service for tailor-made Zero Trust API security.';
+
+export const DESCRIPTION_CNV = 'Run virtual machines alongside containers on one platform.';
+
+export const DESCRIPTION_FENCE_AGENTS_REMEDIATION =
+  'Externally fences failed nodes using power controllers.';
+
+export const DESCRIPTION_KMM = 'Management of kernel modules.';
+
+export const DESCRIPTION_KUBE_DESCHEDULER =
+  'Evicts pods to reschedule them onto more suitable nodes.';
+
+export const DESCRIPTION_MCE = 'Create, import, and manage multiple clusters from this cluster.';
+
+export const DESCRIPTION_NMSTATE =
+  'Provides users with functionality to configure various network interface types, DNS, and routing on cluster nodes.';
+
+export const DESCRIPTION_NODE_FEATURE_DISCOVERY =
+  'Manage the detection of hardware features and configuration by labeling nodes with hardware-specific information.';
+
+export const DESCRIPTION_NODE_HEALTHCHECK = 'Identify Unhealthy Nodes.';
+
+export const DESCRIPTION_NODE_MAINTENANCE = 'Place nodes in maintenance mode.';
+
+export const DESCRIPTION_NVIDIA_GPU =
+  'Automate the management of NVIDIA software components needed to provision and monitor GPUs.';
+
+export const DESCRIPTION_ODF = 'Persistent software-defined storage for hybrid applications.';
+
+export const DESCRIPTION_OPENSHIFT_AI =
+  'Train, serve, monitor and manage AI/ML models and applications.';
+
+export const DESCRIPTION_OSC =
+  'OpenShift sandboxed containers support for OpenShift Container Platform provides users with built-in support for running Kata Containers as an additional optional runtime. It provides an additional virtualization machine(VM) isolation layer for pods.';
+
+export const DESCRIPTION_PIPELINES =
+  'Cloud-native continuous integration and delivery (CI/CD) solution for building pipelines using Tekton.';
+
+export const DESCRIPTION_SELF_NODE_REMEDIATION =
+  'Allows nodes to reboot themselves when they become unhealthy.';
+
+export const DESCRIPTION_SERVERLESS =
+  'Deploy workflow applications based on the CNCF Serverless Workflow specification.';
+
+export const DESCRIPTION_SERVICEMESH =
+  'Platform that provides behavioral insight and operational control over a service mesh.';
+
+export const DESCRIPTION_LVM =
+  'Storage virtualization that offers a more flexible approach for disk space management.';
+
+export const DESCRIPTION_CLUSTER_OBSERVABILITY =
+  'Provides observability and monitoring capabilities for your OpenShift cluster.';
+
+export const DESCRIPTION_NUMA_RESOURCES =
+  'Provides NUMA-aware scheduling to improve workload performance on NUMA systems.';
+
+export const DESCRIPTION_OADP =
+  'Backup and restore OpenShift cluster resources and persistent volumes.';
+
+export const DESCRIPTION_METALLB =
+  'Provides load balancer services for bare metal OpenShift clusters.';