fix(edge/devices): search waiting room devices [EE-5895] (#10014)

app/react/components/datatables/Datatable.tsx

@@ -54,6 +54,7 @@ export interface Props<
   description?: ReactNode;
   pageCount?: number;
   highlightedItemId?: string;
+  page?: number;
   onPageChange?(page: number): void;
 
   settingsManager: GlobalTableState<BasicTableSettings>;
@@ -82,6 +83,7 @@ export function Datatable<
   totalCount = dataset.length,
   description,
   pageCount,
+  page,
   onPageChange = () => null,
   settingsManager: settings,
   renderRow = defaultRenderRow,
@@ -108,6 +110,7 @@ export function Datatable<
     initialState: {
       pagination: {
         pageSize: settings.pageSize,
+        pageIndex: page,
       },
       sorting: settings.sortBy ? [settings.sortBy] : [],
       globalFilter: settings.search,
@@ -172,7 +175,7 @@ export function Datatable<
       <DatatableFooter
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-        page={tableState.pagination.pageIndex}
+        page={typeof page === 'number' ? page : tableState.pagination.pageIndex}
         pageSize={tableState.pagination.pageSize}
         totalCount={totalCount}
         totalSelected={selectedItems.length}

app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx

@@ -9,11 +9,22 @@ import { useEnvironments } from './useEnvironments';
 
 const storageKey = 'edge-devices-waiting-room';
 
-const settingsStore = createPersistedStore(storageKey, 'Name');
+const settingsStore = createPersistedStore(storageKey);
 
 export function Datatable() {
   const tableState = useTableState(settingsStore, storageKey);
-  const { data: environments, totalCount, isLoading } = useEnvironments();
+  const {
+    data: environments,
+    totalCount,
+    isLoading,
+    page,
+    setPage,
+  } = useEnvironments({
+    pageLimit: tableState.pageSize,
+    search: tableState.search,
+  });
+
+  const pageCount = Math.ceil(totalCount / tableState.pageSize);
 
   return (
     <GenericDatatable
@@ -27,6 +38,9 @@ export function Datatable() {
       )}
       isLoading={isLoading}
       totalCount={totalCount}
+      pageCount={pageCount}
+      page={page}
+      onPageChange={setPage}
       description={<Filter />}
     />
   );

app/react/edge/edge-devices/WaitingRoomView/Datatable/useEnvironments.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useTags } from '@/portainer/tags/queries';
 import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
@@ -10,20 +11,33 @@ import { WaitingRoomEnvironment } from '../types';
 
 import { useFilterStore } from './filter-store';
 
-export function useEnvironments() {
+export function useEnvironments({
+  pageLimit = 10,
+  search,
+}: {
+  pageLimit: number;
+  search: string;
+}) {
+  const [page, setPage] = useState(0);
   const filterStore = useFilterStore();
   const edgeGroupsQuery = useEdgeGroups();
 
-  const filterByEnvironmentsIds = filterStore.edgeGroups.length
+  const filterByEnvironmentsIds = useMemo(
+    () =>
+      filterStore.edgeGroups.length
         ? _.compact(
             filterStore.edgeGroups.flatMap(
               (groupId) =>
                 edgeGroupsQuery.data?.find((g) => g.Id === groupId)?.Endpoints
             )
           )
-    : undefined;
+        : undefined,
+    [edgeGroupsQuery.data, filterStore.edgeGroups]
+  );
 
-  const environmentsQuery = useEnvironmentList({
+  const query = useMemo(
+    () => ({
+      pageLimit,
       edgeDeviceUntrusted: true,
       excludeSnapshots: true,
       types: EdgeTypes,
@@ -31,6 +45,25 @@ export function useEnvironments() {
       groupIds: filterStore.groups.length ? filterStore.groups : undefined,
       endpointIds: filterByEnvironmentsIds,
       edgeCheckInPassedSeconds: filterStore.checkIn,
+      search,
+    }),
+    [
+      filterByEnvironmentsIds,
+      filterStore.checkIn,
+      filterStore.groups,
+      filterStore.tags,
+      pageLimit,
+      search,
+    ]
+  );
+
+  useEffect(() => {
+    setPage(0);
+  }, [query]);
+
+  const environmentsQuery = useEnvironmentList({
+    page: page + 1,
+    ...query,
   });
 
   const groupsQuery = useGroups({
@@ -52,7 +85,8 @@ export function useEnvironments() {
       Object.fromEntries(tags.map((tag) => [tag.ID, tag.Name] as const)),
   });
 
-  const envs: Array<WaitingRoomEnvironment> =
+  const envs: Array<WaitingRoomEnvironment> = useMemo(
+    () =>
       environmentsQuery.environments.map((env) => ({
         ...env,
         Group: (env.GroupId !== 1 && groupsQuery.data?.[env.GroupId]) || '',
@@ -61,9 +95,17 @@ export function useEnvironments() {
           [],
         Tags:
           _.compact(env.TagIds?.map((tagId) => tagsQuery.data?.[tagId])) || [],
-    }));
+      })),
+    [
+      environmentEdgeGroupsQuery.data,
+      environmentsQuery.environments,
+      groupsQuery.data,
+      tagsQuery.data,
+    ]
+  );
 
-  return {
+  return useMemo(
+    () => ({
       data: envs,
       isLoading:
         environmentsQuery.isLoading ||
@@ -71,5 +113,17 @@ export function useEnvironments() {
         environmentEdgeGroupsQuery.isLoading ||
         tagsQuery.isLoading,
       totalCount: environmentsQuery.totalCount,
-  };
+      page,
+      setPage,
+    }),
+    [
+      environmentEdgeGroupsQuery.isLoading,
+      environmentsQuery.isLoading,
+      environmentsQuery.totalCount,
+      envs,
+      groupsQuery.isLoading,
+      page,
+      tagsQuery.isLoading,
+    ]
+  );
 }