@flightctl/ui-components 0.0.5 → 0.0.10

package/src/components/Device/DevicesPage/DevicesPage.tsx

@@ -8,7 +8,7 @@ import {
   PageSectionVariants,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Tbody } from '@patternfly/react-table';
+import { Tbody, ThProps } from '@patternfly/react-table';
 import { MicrochipIcon } from '@patternfly/react-icons/dist/js/icons/microchip-icon';
 import { Trans } from 'react-i18next';
 import { TFunction } from 'i18next';
@@ -20,16 +20,12 @@ import ListPage from '../../ListPage/ListPage';
 import ListPageBody from '../../ListPage/ListPageBody';
 import { useDeleteListAction } from '../../ListPage/ListPageActions';
 import AddDeviceModal from '../AddDeviceModal/AddDeviceModal';
-import { sortByAlias, sortByLastSeenDate, sortByName } from '../../../utils/sort/generic';
-import { sortDeviceStatus, sortDevicesByFleet } from '../../../utils/sort/device';
-import Table, { TableColumn } from '../../Table/Table';
+import Table, { ApiSortTableColumn } from '../../Table/Table';
 import DeviceTableToolbar from './DeviceTableToolbar';
-import { useDeviceFilters } from './useDeviceFilters';
 import DeviceTableRow from './DeviceTableRow';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
 import ResourceListEmptyState from '../../common/ResourceListEmptyState';
-import { useTableSort } from '../../../hooks/useTableSort';
 import { useTableSelect } from '../../../hooks/useTableSelect';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { Link, ROUTE } from '../../../hooks/useNavigate';
@@ -40,9 +36,10 @@ import {
   getDeviceStatusHelperText,
   getUpdateStatusHelperText,
 } from '../../Status/utils';
+import EnrollmentRequestList from './EnrollmentRequestList';
 import { FilterStatusMap } from './types';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
-import EnrollmentRequestList from './EnrollmentRequestList';
+import { useApiTableSort } from '../../../hooks/useApiTableSort';
 
 type DeviceEmptyStateProps = {
   onAddDevice: VoidFunction;
@@ -67,38 +64,39 @@ const DeviceEmptyState: React.FC<DeviceEmptyStateProps> = ({ onAddDevice }) => {
   );
 };
 
-const getDeviceColumns = (t: TFunction): TableColumn<Device>[] => [
+const getDeviceColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Alias'),
-    onSort: sortByAlias,
+    // Sorting works on this field even though "alias" is actually a label
+    sortableField: 'metadata.alias',
   },
   {
     name: t('Name'),
-    onSort: sortByName,
+    sortableField: 'metadata.name',
   },
   {
     name: t('Fleet'),
-    onSort: sortDevicesByFleet,
+    sortableField: 'metadata.owner',
   },
   {
     name: t('Application status'),
     helperText: getApplicationStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'ApplicationStatus'),
+    sortableField: 'status.applicationsSummary.status',
   },
   {
     name: t('Device status'),
     helperText: getDeviceStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'DeviceStatus'),
+    sortableField: 'status.summary.status',
     defaultSort: true,
   },
   {
     name: t('Update status'),
     helperText: getUpdateStatusHelperText(t),
-    onSort: (devices: Array<Device>) => sortDeviceStatus(devices, 'SystemUpdateStatus'),
+    sortableField: 'status.updated.status',
   },
   {
     name: t('Last seen'),
-    onSort: sortByLastSeenDate,
+    sortableField: 'status.lastSeen',
   },
 ];
 
@@ -108,6 +106,8 @@ interface DeviceTableProps {
   ownerFleets: string[];
   activeStatuses: FilterStatusMap;
   hasFiltersEnabled: boolean;
+  nameOrAlias: string | undefined;
+  setNameOrAlias: (text: string) => void;
   setOwnerFleets: (ownerFleets: string[]) => void;
   setActiveStatuses: (activeStatuses: FilterStatusMap) => void;
   allLabels: FlightCtlLabel[];
@@ -115,11 +115,15 @@ interface DeviceTableProps {
   setSelectedLabels: (labels: FlightCtlLabel[]) => void;
   fleets: Fleet[];
   isFilterUpdating: boolean;
+  deviceColumns: ApiSortTableColumn[];
+  getSortParams: (columnIndex: number) => ThProps['sort'];
 }
 
 export const DeviceTable = ({
   devices,
   refetch,
+  nameOrAlias,
+  setNameOrAlias,
   ownerFleets,
   setOwnerFleets,
   activeStatuses,
@@ -130,17 +134,14 @@ export const DeviceTable = ({
   hasFiltersEnabled,
   fleets,
   isFilterUpdating,
+  deviceColumns,
+  getSortParams,
 }: DeviceTableProps) => {
   const { t } = useTranslation();
   const [addDeviceModal, setAddDeviceModal] = React.useState(false);
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const { remove } = useFetch();
 
-  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
-
-  const { filteredData, hasFiltersEnabled: hasUIFiltersEnabled, ...rest } = useDeviceFilters(devices);
-  const { getSortParams, sortedData } = useTableSort(filteredData, deviceColumns);
-
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
   const { deleteAction: deleteDeviceAction, deleteModal: deleteDeviceModal } = useDeleteListAction({
@@ -154,7 +155,8 @@ export const DeviceTable = ({
   return (
     <>
       <DeviceTableToolbar
-        {...rest}
+        nameOrAlias={nameOrAlias}
+        setNameOrAlias={setNameOrAlias}
         ownerFleets={ownerFleets}
         setOwnerFleets={setOwnerFleets}
         activeStatuses={activeStatuses}
@@ -176,15 +178,16 @@ export const DeviceTable = ({
       </DeviceTableToolbar>
       <Table
         aria-label={t('Devices table')}
+        loading={isFilterUpdating}
         columns={deviceColumns}
-        emptyFilters={filteredData.length === 0 && (hasFiltersEnabled || hasUIFiltersEnabled)}
+        emptyFilters={!hasFiltersEnabled}
         emptyData={devices.length === 0}
         getSortParams={getSortParams}
         isAllSelected={isAllSelected}
         onSelectAll={setAllSelected}
       >
         <Tbody>
-          {sortedData.map((device, index) => (
+          {devices.map((device, index) => (
             <DeviceTableRow
               key={device.metadata.name || ''}
               device={device}
@@ -196,15 +199,13 @@ export const DeviceTable = ({
           ))}
         </Tbody>
       </Table>
-      {!hasFiltersEnabled && !hasUIFiltersEnabled && devices.length === 0 && (
-        <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />
-      )}
+      {!hasFiltersEnabled && devices.length === 0 && <DeviceEmptyState onAddDevice={() => setAddDeviceModal(true)} />}
       {deleteDeviceModal}
       {addDeviceModal && <AddDeviceModal onClose={() => setAddDeviceModal(false)} />}
       {isMassDeleteModalOpen && (
         <MassDeleteDeviceModal
           onClose={() => setIsMassDeleteModalOpen(false)}
-          resources={sortedData.filter(isRowSelected)}
+          resources={devices.filter(isRowSelected)}
           onDeleteSuccess={() => {
             setIsMassDeleteModalOpen(false);
             refetch();
@@ -217,7 +218,11 @@ export const DeviceTable = ({
 
 const DevicesPage = () => {
   const { t } = useTranslation();
+  const deviceColumns = React.useMemo(() => getDeviceColumns(t), [t]);
+
   const {
+    nameOrAlias,
+    setNameOrAlias,
     ownerFleets,
     activeStatuses,
     hasFiltersEnabled,
@@ -226,10 +231,15 @@ const DevicesPage = () => {
     selectedLabels,
     setSelectedLabels,
   } = useDeviceBackendFilters();
+  const { getSortParams, sortField, direction } = useApiTableSort(deviceColumns);
+
   const [data, loading, error, updating, refetch, allLabels] = useDevices({
+    nameOrAlias,
     ownerFleets,
     activeStatuses,
     labels: selectedLabels,
+    sortField,
+    direction,
   });
 
   const [fleetsList, flLoading, flError] = useFetchPeriodically<FleetList>({
@@ -246,6 +256,8 @@ const DevicesPage = () => {
             devices={data}
             allLabels={allLabels}
             refetch={refetch}
+            nameOrAlias={nameOrAlias}
+            setNameOrAlias={setNameOrAlias}
             hasFiltersEnabled={hasFiltersEnabled || updating}
             ownerFleets={ownerFleets}
             activeStatuses={activeStatuses}
@@ -255,6 +267,8 @@ const DevicesPage = () => {
             setSelectedLabels={setSelectedLabels}
             fleets={fleetsList?.items || []}
             isFilterUpdating={updating}
+            deviceColumns={deviceColumns}
+            getSortParams={getSortParams}
           />
         </ListPageBody>
       </ListPage>

package/src/components/Device/DevicesPage/EnrollmentRequestList.tsx

@@ -5,7 +5,7 @@ import { SelectList, SelectOption, Spinner, ToolbarItem } from '@patternfly/reac
 
 import { EnrollmentRequest, EnrollmentRequestList as EnrollmentRequestListType } from '@flightctl/types';
 
-import Table, { TableColumn } from '../../Table/Table';
+import Table, { ApiSortTableColumn } from '../../Table/Table';
 import TableActions from '../../Table/TableActions';
 import ListPage from '../../ListPage/ListPage';
 import ListPageBody from '../../ListPage/ListPageBody';
@@ -14,9 +14,8 @@ import { useFetch } from '../../../hooks/useFetch';
 import { useTranslation } from '../../../hooks/useTranslation';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { useTableSelect } from '../../../hooks/useTableSelect';
-import { useTableSort } from '../../../hooks/useTableSort';
+import { useApiTableSort } from '../../../hooks/useApiTableSort';
 import { useTableTextSearch } from '../../../hooks/useTableTextSearch';
-import { sortByCreationDate, sortByName } from '../../../utils/sort/generic';
 
 import ApproveDeviceModal from '../../modals/ApproveDeviceModal/ApproveDeviceModal';
 import MassDeleteDeviceModal from '../../modals/massModals/MassDeleteDeviceModal/MassDeleteDeviceModal';
@@ -24,41 +23,41 @@ import MassApproveDeviceModal from '../../modals/massModals/MassApproveDeviceMod
 import EnrollmentRequestTableRow from '../../EnrollmentRequest/EnrollmentRequestTableRow';
 import EnrollmentRequestTableToolbar from './EnrollmentRequestTableToolbar';
 
-const getEnrollmentColumns = (t: TFunction): TableColumn<EnrollmentRequest>[] => [
+const getEnrollmentColumns = (t: TFunction): ApiSortTableColumn[] => [
   {
     name: t('Name'),
-    onSort: sortByName,
+    sortableField: 'metadata.name',
+    defaultSort: true,
   },
   {
     name: t('Created'),
-    onSort: sortByCreationDate,
+    sortableField: 'metadata.creationTimestamp',
   },
 ];
 
-interface EnrollmentRequestTableProps {
-  pendingEnrollments: Array<EnrollmentRequest>;
-  approveRefetch: VoidFunction;
-  deleteRefetch: VoidFunction;
-}
-
 const getSearchText = (er: EnrollmentRequest) => [er.metadata.name];
 
-export const EnrollmentRequestTable = ({
-  pendingEnrollments,
-  approveRefetch,
-  deleteRefetch,
-}: EnrollmentRequestTableProps) => {
+const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunction }) => {
   const { t } = useTranslation();
   const { remove } = useFetch();
+  const enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
+  const { getSortParams, sortField, direction } = useApiTableSort(enrollmentColumns);
+
+  const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestListType>({
+    endpoint: `enrollmentrequests?fieldSelector=!status.approval.approved${sortField ? `&sortBy=${sortField}&sortOrder=${direction}` : ''}`,
+  });
+  const pendingEnrollments = erList?.items || [];
+
+  const refetchWithDevices = () => {
+    refetch();
+    refetchDevices();
+  };
 
   const [approvingErId, setApprovingErId] = React.useState<string>();
   const [isMassDeleteModalOpen, setIsMassDeleteModalOpen] = React.useState(false);
   const [isMassApproveModalOpen, setIsMassApproveModalOpen] = React.useState(false);
 
-  const enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
-
   const { search, setSearch, filteredData } = useTableTextSearch(pendingEnrollments, getSearchText);
-  const { getSortParams, sortedData } = useTableSort(filteredData, enrollmentColumns);
 
   const { onRowSelect, hasSelectedRows, isAllSelected, isRowSelected, setAllSelected } = useTableSelect();
 
@@ -66,115 +65,91 @@ export const EnrollmentRequestTable = ({
     resourceType: 'EnrollmentRequest',
     onDelete: async (enrollmentId: string) => {
       await remove(`enrollmentrequests/${enrollmentId}`);
-      deleteRefetch();
+      refetch();
     },
   });
 
-  const currentEnrollmentRequest = pendingEnrollments.find((er) => er.metadata.name === approvingErId);
-
-  return (
-    <>
-      <EnrollmentRequestTableToolbar search={search} setSearch={setSearch} enrollments={pendingEnrollments}>
-        <ToolbarItem>
-          <TableActions isDisabled={!hasSelectedRows}>
-            <SelectList>
-              <SelectOption onClick={() => setIsMassApproveModalOpen(true)}>{t('Approve')}</SelectOption>
-              <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
-            </SelectList>
-          </TableActions>
-        </ToolbarItem>
-      </EnrollmentRequestTableToolbar>
-      <Table
-        aria-label={t('Table for devices pending approval')}
-        columns={enrollmentColumns}
-        emptyFilters={filteredData.length === 0}
-        emptyData={false}
-        getSortParams={getSortParams}
-        isAllSelected={isAllSelected}
-        onSelectAll={setAllSelected}
-      >
-        <Tbody>
-          {sortedData.map((er, index) => (
-            <EnrollmentRequestTableRow
-              key={er.metadata.name || ''}
-              er={er}
-              deleteAction={deleteAction}
-              onRowSelect={onRowSelect}
-              isRowSelected={isRowSelected}
-              rowIndex={index}
-              onApprove={() => {
-                setApprovingErId(er.metadata.name as string);
-              }}
-            />
-          ))}
-        </Tbody>
-      </Table>
-
-      {deleteModal}
-      {currentEnrollmentRequest && (
-        <ApproveDeviceModal
-          enrollmentRequest={currentEnrollmentRequest}
-          onClose={(updateList) => {
-            setApprovingErId(undefined);
-            updateList && approveRefetch();
-          }}
-        />
-      )}
-      {isMassDeleteModalOpen && (
-        <MassDeleteDeviceModal
-          onClose={() => setIsMassDeleteModalOpen(false)}
-          resources={filteredData.filter(isRowSelected)}
-          onDeleteSuccess={() => {
-            setIsMassDeleteModalOpen(false);
-            deleteRefetch();
-          }}
-        />
-      )}
-      {isMassApproveModalOpen && (
-        <MassApproveDeviceModal
-          onClose={() => setIsMassApproveModalOpen(false)}
-          pendingEnrollments={filteredData.filter(isRowSelected)}
-          onApproveSuccess={() => {
-            setAllSelected(false);
-            setIsMassApproveModalOpen(false);
-            approveRefetch();
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-const EnrollmentRequestList = ({ refetchDevices }: { refetchDevices: VoidFunction }) => {
-  const { t } = useTranslation();
-  const [erList, isLoading, error, refetch] = useFetchPeriodically<EnrollmentRequestListType>({
-    endpoint: 'enrollmentrequests',
-  });
-
   if (isLoading) {
     return <Spinner size="md" />;
   }
 
-  // The content only appears if there are pending enrollment requests
-  // TODO move the filter as part of the query once it's available via the API
-  const pendingEnrollments = (erList?.items || []).filter((er) => er.status?.approval?.approved !== true);
-
   if (pendingEnrollments.length === 0) {
     return null;
   }
 
-  const approveRefetch = () => {
-    refetch();
-    refetchDevices();
-  };
+  const currentEnrollmentRequest = pendingEnrollments.find((er) => er.metadata.name === approvingErId);
+
   return (
     <ListPage title={t('Devices pending approval')} headingLevel="h2">
-      <ListPageBody error={error} loading={false}>
-        <EnrollmentRequestTable
-          pendingEnrollments={pendingEnrollments}
-          approveRefetch={approveRefetch}
-          deleteRefetch={refetch}
-        />
+      <ListPageBody error={error} loading={isLoading}>
+        <EnrollmentRequestTableToolbar search={search} setSearch={setSearch} enrollments={pendingEnrollments}>
+          <ToolbarItem>
+            <TableActions isDisabled={!hasSelectedRows}>
+              <SelectList>
+                <SelectOption onClick={() => setIsMassApproveModalOpen(true)}>{t('Approve')}</SelectOption>
+                <SelectOption onClick={() => setIsMassDeleteModalOpen(true)}>{t('Delete')}</SelectOption>
+              </SelectList>
+            </TableActions>
+          </ToolbarItem>
+        </EnrollmentRequestTableToolbar>
+        <Table
+          aria-label={t('Table for devices pending approval')}
+          loading={isLoading}
+          columns={enrollmentColumns}
+          emptyFilters={filteredData.length === 0}
+          emptyData={false}
+          getSortParams={getSortParams}
+          isAllSelected={isAllSelected}
+          onSelectAll={setAllSelected}
+        >
+          <Tbody>
+            {pendingEnrollments.map((er, index) => (
+              <EnrollmentRequestTableRow
+                key={er.metadata.name || ''}
+                er={er}
+                deleteAction={deleteAction}
+                onRowSelect={onRowSelect}
+                isRowSelected={isRowSelected}
+                rowIndex={index}
+                onApprove={() => {
+                  setApprovingErId(er.metadata.name as string);
+                }}
+              />
+            ))}
+          </Tbody>
+        </Table>
+
+        {deleteModal}
+        {currentEnrollmentRequest && (
+          <ApproveDeviceModal
+            enrollmentRequest={currentEnrollmentRequest}
+            onClose={(updateList) => {
+              setApprovingErId(undefined);
+              updateList && refetchWithDevices();
+            }}
+          />
+        )}
+        {isMassDeleteModalOpen && (
+          <MassDeleteDeviceModal
+            onClose={() => setIsMassDeleteModalOpen(false)}
+            resources={filteredData.filter(isRowSelected)}
+            onDeleteSuccess={() => {
+              setIsMassDeleteModalOpen(false);
+              refetch();
+            }}
+          />
+        )}
+        {isMassApproveModalOpen && (
+          <MassApproveDeviceModal
+            onClose={() => setIsMassApproveModalOpen(false)}
+            pendingEnrollments={filteredData.filter(isRowSelected)}
+            onApproveSuccess={() => {
+              setAllSelected(false);
+              setIsMassApproveModalOpen(false);
+              refetchWithDevices();
+            }}
+          />
+        )}
       </ListPageBody>
     </ListPage>
   );

package/src/components/Device/DevicesPage/useDeviceBackendFilters.ts

@@ -3,7 +3,6 @@ import { ApplicationsSummaryStatusType, DeviceSummaryStatusType, DeviceUpdatedSt
 
 import { FilterSearchParams } from '../../../utils/status/devices';
 import { useAppContext } from '../../../hooks/useAppContext';
-import { EnrollmentRequestStatus } from '../../../utils/status/enrollmentRequest';
 import { FilterStatusMap } from './types';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { labelToString } from '../../../utils/labels';
@@ -11,7 +10,6 @@ import { labelToString } from '../../../utils/labels';
 const validAppStatuses = Object.values(ApplicationsSummaryStatusType) as string[];
 const validUpdatedStatuses = Object.values(DeviceUpdatedStatusType) as string[];
 const validDeviceStatuses = Object.values(DeviceSummaryStatusType) as string[];
-validDeviceStatuses.push(EnrollmentRequestStatus.Pending);
 
 const getNewParams = (currentParams: URLSearchParams, newValues: { [key: string]: string[] }) => {
   let newParams = [...currentParams.entries()];
@@ -30,6 +28,7 @@ export const useDeviceBackendFilters = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const paramsRef = React.useRef(searchParams);
   const ownerFleets = searchParams.getAll(FilterSearchParams.Fleet) || undefined;
+  const nameOrAlias = searchParams.get(FilterSearchParams.NameOrAlias) || undefined;
 
   const updateSearchParams = React.useCallback(
     (params: [string, string][]) => {
@@ -104,10 +103,22 @@ export const useDeviceBackendFilters = () => {
     [updateSearchParams],
   );
 
+  const setNameOrAlias = React.useCallback(
+    (nameOrAlias: string) => {
+      updateSearchParams(getNewParams(paramsRef.current, { [FilterSearchParams.NameOrAlias]: [nameOrAlias] }));
+    },
+    [updateSearchParams],
+  );
+
   const hasFiltersEnabled =
-    !!selectedLabels.length || !!ownerFleets.length || Object.values(activeStatuses).some((s) => !!s.length);
+    !!nameOrAlias ||
+    !!selectedLabels.length ||
+    !!ownerFleets.length ||
+    Object.values(activeStatuses).some((s) => !!s.length);
 
   return {
+    nameOrAlias,
+    setNameOrAlias,
     activeStatuses,
     setActiveStatuses,
     ownerFleets,

package/src/components/Device/DevicesPage/useDevices.ts

@@ -1,53 +1,65 @@
-import React from 'react';
+import * as React from 'react';
 import { useDebounce } from 'use-debounce';
 
-import { Device, DeviceList, DevicesSummary } from '@flightctl/types';
+import { Device, DeviceList, DevicesSummary, SortOrder } from '@flightctl/types';
 import { FilterSearchParams } from '../../../utils/status/devices';
+import * as queryUtils from '../../../utils/query';
+import { fromAPILabel } from '../../../utils/labels';
 import { useFetchPeriodically } from '../../../hooks/useFetchPeriodically';
 import { FlightCtlLabel } from '../../../types/extraTypes';
 import { FilterStatusMap } from './types';
 
-import { fromAPILabel } from '../../../utils/labels';
-
-const setLabelParams = (params: URLSearchParams, labels?: FlightCtlLabel[]) => {
-  if (labels?.length) {
-    const labelSelector = labels.reduce((acc, curr) => {
-      if (!acc) {
-        acc = `${curr.key}=${curr.value || ''}`;
-      } else {
-        acc += `,${curr.key}=${curr.value || ''}`;
-      }
-      return acc;
-    }, '');
-    params.append('labelSelector', labelSelector);
-  }
-};
-
 type DevicesEndpointArgs = {
+  nameOrAlias?: string;
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
+  sortField?: string;
+  direction?: string;
   summaryOnly?: boolean;
 };
 
-const getDevicesEndpoint = ({ ownerFleets, activeStatuses, labels, summaryOnly }: DevicesEndpointArgs) => {
+const getDevicesEndpoint = ({
+  nameOrAlias,
+  ownerFleets,
+  activeStatuses,
+  labels,
+  sortField,
+  direction,
+  summaryOnly,
+}: DevicesEndpointArgs) => {
   const filterByAppStatus = activeStatuses?.[FilterSearchParams.AppStatus];
   const filterByDevStatus = activeStatuses?.[FilterSearchParams.DeviceStatus];
   const filterByUpdateStatus = activeStatuses?.[FilterSearchParams.UpdatedStatus];
 
-  const params = new URLSearchParams();
+  const fieldSelectors: string[] = [];
+  queryUtils.addQueryConditions(fieldSelectors, 'status.applicationsSummary.status', filterByAppStatus);
+  queryUtils.addQueryConditions(fieldSelectors, 'status.summary.status', filterByDevStatus);
+  queryUtils.addQueryConditions(fieldSelectors, 'status.updated.status', filterByUpdateStatus);
+
+  if (nameOrAlias) {
+    queryUtils.addTextContainsCondition(fieldSelectors, 'metadata.nameoralias', nameOrAlias);
+  }
   if (ownerFleets?.length) {
-    params.set('owner', ownerFleets.map((fleet) => `Fleet/${fleet}`).join(','));
+    queryUtils.addQueryConditions(
+      fieldSelectors,
+      'metadata.owner',
+      ownerFleets.map((fleet) => `Fleet/${fleet}`),
+    );
   }
-  filterByAppStatus?.forEach((appSt) => params.append('statusFilter', `applications.summary.status=${appSt}`));
-  filterByDevStatus?.forEach((devSt) => params.append('statusFilter', `summary.status=${devSt}`));
-  filterByUpdateStatus?.forEach((updSt) => params.append('statusFilter', `updated.status=${updSt}`));
-
-  setLabelParams(params, labels);
 
+  const params = new URLSearchParams();
+  if (fieldSelectors.length > 0) {
+    params.set('fieldSelector', fieldSelectors.join(','));
+  }
+  queryUtils.setLabelParams(params, labels);
   if (summaryOnly) {
     params.set('summaryOnly', 'true');
   }
+  if (sortField) {
+    params.set('sortBy', sortField);
+    params.set('sortOrder', direction || SortOrder.ASC);
+  }
   return params.size ? `devices?${params.toString()}` : 'devices';
 };
 
@@ -72,19 +84,18 @@ export const useDevicesSummary = ({
   return [deviceList?.summary, listLoading];
 };
 
-export const useDevices = ({
-  ownerFleets,
-  activeStatuses,
-  labels,
-}: {
+export const useDevices = (args: {
+  nameOrAlias?: string;
   ownerFleets?: string[];
   activeStatuses?: FilterStatusMap;
   labels?: FlightCtlLabel[];
+  sortField?: string;
+  direction?: string;
 }): [Device[], boolean, unknown, boolean, VoidFunction, FlightCtlLabel[]] => {
   const [deviceLabelList] = useFetchPeriodically<DeviceList>({
     endpoint: 'devices',
   });
-  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint({ ownerFleets, activeStatuses, labels });
+  const [devicesEndpoint, devicesDebouncing] = useDevicesEndpoint(args);
   const [devicesList, devicesLoading, devicesError, devicesRefetch, updating] = useFetchPeriodically<DeviceList>({
     endpoint: devicesEndpoint,
   });

package/src/components/EnrollmentRequest/PendingEnrollmentRequestsBadge.css

@@ -0,0 +1,10 @@
+
+/* The default color is too light */
+.fctl-pendingdevices-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--active-color--100)
+}
+
+/* For the dark theme, we need to put it back to the correct value */
+.pf-v5-theme-dark .fctl-pendingdevices-badge {
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--active-color--300)
+}