Skip to content

HDDS-12643. Fix ContainerTable pagination in Recon UI v2#9986

Merged
adoroszlai merged 2 commits intoapache:masterfrom
arunsarin85:HDDS-12643
Apr 16, 2026
Merged

HDDS-12643. Fix ContainerTable pagination in Recon UI v2#9986
adoroszlai merged 2 commits intoapache:masterfrom
arunsarin85:HDDS-12643

Conversation

@arunsarin85
Copy link
Copy Markdown
Contributor

@arunsarin85 arunsarin85 commented Mar 27, 2026

What changes were proposed in this pull request?

The Recon UI v2 ContainerTable had three pagination bugs reported in HDDS-12643:

  1. All data was fetched in a single request and paginated client-side; lastKey was never used as a cursor.
  2. Users could jump directly to any page number.
  3. The row limit was not configurable.

Please describe your PR in detail:

This PR fixes all three issues:

  1. Server-side pagination (containers.tsx): Replaced the single bulk-fetch + client-side slice approach with true server-side pagination. Each page fetch sends limit (page size + 1) and minContainerId to /api/v1/containers/unhealthy/{STATE}. Fetching one extra item is used solely to detect whether a next page exists (hasNextPage = response.length > pageSize), and only pageSize rows are ever displayed. Each tab maintains independent pagination state so switching tabs does not reset other tabs.
  2. No direct page-skip (containersTable.tsx): Replaced Ant Design's built-in numbered pagination with a custom footer containing only Previous and Next buttons. Direct page number access is no longer possible.
  3. Configurable page size (containersTable.tsx, containers.tsx): Added a Rows per page dropdown (options: 10, 25, 50, 100) in the footer. Changing the page size resets all tab states and re-fetches the first page with the new limit, and is reflected across all tabs.

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-12643

How was this patch tested?

  1. Mock API (manual): Ran npm run dev with the updated mock:api script (which now includes --middlewares api/pagination.js). Verified via browser DevTools that:
  • Each page click issues a new GET request with the correct minContainerId cursor and returns a 200 (not 304) with a different set of container IDs.
  • Next is disabled on the last page; Previous is disabled on the first page.
  • Changing the Rows per page dropdown resets to page 1 and issues a new fetch with the updated limit.
  • All 5 tabs (Missing, Under-Replicated, Over-Replicated, Mis-Replicated, Mismatched Replicas) paginate independently.
  1. Random-ID validation: Container IDs in db.json are stored in shuffled (non-sorted) order with non-sequential values. All 5 tabs returned correctly sorted, correctly paginated results, confirming the middleware's Array.sort step handles arbitrary ordering in the source data.
image image

Did some additional validation

  1. Created the missing and under-replicated containers and validated the below scenarios :
    1.a. The Highlights tab values are populated from the initial missing_container API call .
    1.b By clicking on the other tabs - Under_Replicated, Over-Replicated, Mis-replicated the values in the highlight tab is not getting cleared out
image image image

@arunsarin85 arunsarin85 changed the title HDDS-12643. Fix ContainerTable server-side pagination in Recon UI v2 HDDS-12643. Fix ContainerTable pagination in Recon UI v2 Mar 28, 2026
@adoroszlai adoroszlai added the UI label Mar 28, 2026
@adoroszlai adoroszlai requested a review from spacemonkd March 28, 2026 07:16
@arunsarin85 arunsarin85 marked this pull request as draft April 9, 2026 05:41
@arunsarin85 arunsarin85 marked this pull request as ready for review April 13, 2026 13:27
Copy link
Copy Markdown
Contributor

@spacemonkd spacemonkd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the continuous effort on this patch @arunsarin85.
This looks good to me now, +2

@adoroszlai adoroszlai merged commit 29c78e7 into apache:master Apr 16, 2026
74 of 75 checks passed
@adoroszlai
Copy link
Copy Markdown
Contributor

Thanks @arunsarin85 for the patch, @spacemonkd for the review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants