Page analytics tables with Previous and Next controls
What does this MR do and why?
The "Group and project comparison" panel on the DAP Impact dashboard scrolled inside its tile. GLQL tables load 20 rows and show "Load more", and the table is taller than the tile. The designer asked for Previous/Next paging, like the other panels.
This adds a paged pagination strategy in resolver.vue and constants.js. It applies to display: table in analytics mode. The resolver keeps every page it has fetched. Next fetches the following page with the aggregation cursor (after). Previous returns to a cached page without a request. The page size is the query limit (default 20). Controls are GlKeysetPagination, disabled while a page loads. A failed page turn keeps the current page and reports the error like a failed Load more.
Standard mode (issues, epics, wikis) keeps Load more. Charts and stats keep automatic fetching.
I did not reuse the bar list approach (fetch all rows, page on the client). The bar list needs every row because shares are percentages of the grand total. A table does not. For a large group the table would wait on up to ten sequential requests before rendering.
In dap_impact.yaml, the comparison panel gets limit: 8 and its tile grows from 41 to 61 grid cells (10 px each). I measured on a local GDK with Playwright: with every row wrapping to two lines, the controls keep an 8 px margin below them on full pages and on a short last page. Previous/Next stay pinned to the bottom left of the tile, so a shorter page does not move them. It is the last panel on the Adoption tab, so nothing below it moves.
Docs and specs are updated. The resolver spec has a new "paged pagination for analytics tables" group.
References
- Closes #633584 (closed)
- Source: #632902 (closed)
- Related: #631399, #630429, !257546 (merged)
Screenshots or screen recordings
Not attached, because they contain gitlab.com data. I rendered the panel on a local GDK with GLQL queries proxied to gitlab.com. Both pages fit the tile without scrolling. Next fetched one page and Previous returned without a request. On the GDK master build, the first rows are cut off in a scrolling tile and Load more is out of view.
How to set up and validate locally
- Open the DAP Impact dashboard, Adoption tab, for a group with more than ten projects that have Duo sessions.
- Confirm the comparison panel shows eight rows and Previous/Next.
- Click Next and confirm the next eight rows show. Click Previous and confirm it returns.
- In an issue description, add a GLQL
display: tableblock withmode: analytics. Confirm it pages. - Confirm a standard-mode table block still shows Load more.
MR acceptance checklist
This MR follows the MR acceptance checklist.
Review follow-ups
- A failed page turn now clears on the next turn, a result with
hasNextPagebut no cursor is not refetched, an empty page keeps the current page and marks it last, and a second click while a page loads is ignored. Each has a spec inresolver_spec.js. - Known limit: sorting by a column header sorts the current page, and the sort indicator stays on after a page turn while the new page arrives in server order. Follow-up candidate, pre-existing with Load more.
- Confirmed: the "vs previous period" comparison ignores the table's
limit:and fetches the backend's default page ofaggregatedPageSizerows, so rows on page 2 and later still pair with it. The comparison is dropped only when the table has more rows than that page, and a spec pins this.