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,27 +11,59 @@ 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(
-    ? _.compact(
+    () =>
-        filterStore.edgeGroups.flatMap(
+      filterStore.edgeGroups.length
-          (groupId) =>
+        ? _.compact(
-            edgeGroupsQuery.data?.find((g) => g.Id === groupId)?.Endpoints
+            filterStore.edgeGroups.flatMap(
-        )
+              (groupId) =>
-      )
+                edgeGroupsQuery.data?.find((g) => g.Id === groupId)?.Endpoints
-    : undefined;
+            )
+          )
+        : undefined,
+    [edgeGroupsQuery.data, filterStore.edgeGroups]
+  );
+
+  const query = useMemo(
+    () => ({
+      pageLimit,
+      edgeDeviceUntrusted: true,
+      excludeSnapshots: true,
+      types: EdgeTypes,
+      tagIds: filterStore.tags.length ? filterStore.tags : undefined,
+      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({
-    edgeDeviceUntrusted: true,
+    page: page + 1,
-    excludeSnapshots: true,
+    ...query,
-    types: EdgeTypes,
-    tagIds: filterStore.tags.length ? filterStore.tags : undefined,
-    groupIds: filterStore.groups.length ? filterStore.groups : undefined,
-    endpointIds: filterByEnvironmentsIds,
-    edgeCheckInPassedSeconds: filterStore.checkIn,
   });
 
   const groupsQuery = useGroups({
@@ -52,24 +85,45 @@ 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,
+      environmentsQuery.environments.map((env) => ({
-      Group: (env.GroupId !== 1 && groupsQuery.data?.[env.GroupId]) || '',
+        ...env,
-      EdgeGroups:
+        Group: (env.GroupId !== 1 && groupsQuery.data?.[env.GroupId]) || '',
-        environmentEdgeGroupsQuery.data?.[env.Id]?.map((env) => env.group) ||
+        EdgeGroups:
-        [],
+          environmentEdgeGroupsQuery.data?.[env.Id]?.map((env) => env.group) ||
-      Tags:
+          [],
-        _.compact(env.TagIds?.map((tagId) => tagsQuery.data?.[tagId])) || [],
+        Tags:
-    }));
+          _.compact(env.TagIds?.map((tagId) => tagsQuery.data?.[tagId])) || [],
+      })),
+    [
+      environmentEdgeGroupsQuery.data,
+      environmentsQuery.environments,
+      groupsQuery.data,
+      tagsQuery.data,
+    ]
+  );
 
-  return {
+  return useMemo(
-    data: envs,
+    () => ({
-    isLoading:
+      data: envs,
-      environmentsQuery.isLoading ||
+      isLoading:
-      groupsQuery.isLoading ||
+        environmentsQuery.isLoading ||
-      environmentEdgeGroupsQuery.isLoading ||
+        groupsQuery.isLoading ||
+        environmentEdgeGroupsQuery.isLoading ||
+        tagsQuery.isLoading,
+      totalCount: environmentsQuery.totalCount,
+      page,
+      setPage,
+    }),
+    [
+      environmentEdgeGroupsQuery.isLoading,
+      environmentsQuery.isLoading,
+      environmentsQuery.totalCount,
+      envs,
+      groupsQuery.isLoading,
+      page,
       tagsQuery.isLoading,
-    totalCount: environmentsQuery.totalCount,
+    ]
-  };
+  );
 }