Add pagination docs

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

docs/README.md

@@ -27,6 +27,7 @@ You can use these pages to:
 * Create resources by using YAML templates
 * Edit labels and annotations
 * Filter resources by status, where applicable
+* Paginate large filtered lists and details tables (10, 20, 50, or 100 items per page; default 50)
 * Access related resources and events
 
 The GitOps Console plugin integrates with the console navigation, allowing you to navigate between related resources and access contextual actions for each resource type.
@@ -46,7 +47,7 @@ The GitOps Console plugin provides search and template capabilities:
 * [AppProjects in the GitOps Console](appprojects-rbac.md)
 * [ImageUpdaters in the GitOps Console](image-updaters.md)
 * [Rollouts in the GitOps Console](rollouts.md)
-* [Filter resources](filter-resources.md)
+* [Filter and paginate resources](filter-resources.md)
 * [Getting started](getting-started.md)
 * [Troubleshooting](troubleshooting.md)
 

docs/_sidebar.md

@@ -6,6 +6,6 @@
 - [AppProjects in the GitOps Console](appprojects-rbac.md)
 - [ImageUpdaters in the GitOps Console](image-updaters.md)
 - [Rollouts in the GitOps Console](rollouts.md)
-- [Filter resources](filter-resources.md)
+- [Filter and paginate resources](filter-resources.md)
 - [Troubleshooting](troubleshooting.md)
 - [1.22 GA release notes](release-notes-ga.md)

docs/applications.md

@@ -13,6 +13,7 @@ The Applications list page displays all Applications with the following features
 * **Table columns**: name, namespace, sync status, health, revision, AppProject, and actions
 * **Filtering**: Filter Applications by health status (Healthy, Progressing, Degraded, Missing) and sync status (Synced, OutOfSync, Unknown)
 * **Sorting and search**: Sort columns and search by name
+* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). Page and page size are stored in the URL. See [Filter and paginate resources](filter-resources.md).
 * **Create action**: Click **Create Application** to open the YAML editor with a starter template that includes repository URL, destination, and sync policy placeholders
 * **Namespace view**: From the GitOps Operator namespace path, an optional control can list operands in all namespaces for operator-focused workflows
 
@@ -22,15 +23,16 @@ The Application details page provides the following tabs:
 
 * **Details tab**: Displays summary information, health and sync indicators, revision links, destination and project information, conditions, toggles for automated sync, self-heal, and prune (when you have update permission), and detection of an Argo CD Route so you can open the Argo CD UI for the same application when routing is configured.
 * **YAML tab**: Provides a live manifest editor for the Application resource.
-* **Sources tab**: Displays repository sources with icons and metadata for Helm, Git, and OCI sources.
+* **Sources tab**: Displays repository sources with icons and metadata for Helm, Git, and OCI sources. The sources table supports pagination.
 * **Resources tab**: Combines a resource table with an interactive topology graph:
   * The graph shows immediate managed resources for the Application, not the full Argo CD resource tree.
   * Use the Argo CD link on the tab to open the complete resource hierarchy in the Argo CD UI.
   * Pan, zoom, and select resources in the graph; status filters apply to both table and graph.
+  * In list view, the resources table supports filtering, sorting, and pagination like other GitOps tables. See [Filter and paginate resources](filter-resources.md).
   * Context-menu actions on graph nodes include viewing details, editing labels and annotations, deleting resources, and viewing resources in Argo CD.
   * Related resources of the same kind can be grouped or ungrouped in the graph.
-* **Sync Status tab**: Provides fine-grained sync and operation status information for the Application.
-* **History tab**: Displays the deployment and sync history for the Application.
+* **Sync Status tab**: Provides fine-grained sync and operation status information for the Application, including a paginated table of resources last synced.
+* **History tab**: Displays the deployment and sync history for the Application in a paginated table (newest first by default; column sort keeps the selected direction).
 * **Events tab**: Shows Kubernetes events for the Application object.
 
 ## Additional features

docs/applicationsets.md

@@ -8,6 +8,7 @@ The ApplicationSets list page follows the same list patterns as other custom res
 
 * **Table columns**: Standard columns for custom resources
 * **Filtering**: Filter ApplicationSets by health status (Healthy, Error, Unknown)
+* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). See [Filter and paginate resources](filter-resources.md).
 * **Create action**: Click **Create ApplicationSet** to open the YAML editor with a default ApplicationSet template
 
 > **NOTE**
@@ -21,5 +22,5 @@ The ApplicationSet details page provides the following tabs:
 * **Details tab**: Displays status information, generator counts, conditions, links to the Generators and Applications tabs, and shows the number of generated applications of related Applications.
 * **YAML tab**: Provides a live manifest editor for the ApplicationSet resource.
 * **Generators tab**: Provides a structured view of generator configuration, including list, merge, and union generators.
-* **Applications tab**: Displays the list of applications generated by the ApplicationSet with a Graphical View showing visual representation of the generated applications, progressive sync visualization that shows the progressive sync flow from step to step when progressive sync is enabled, a filter widget to filter by health and sync status, and an applications table with the same rich columns as the main Application list page.
+* **Applications tab**: Displays the list of applications generated by the ApplicationSet with a Graphical View showing visual representation of the generated applications, progressive sync visualization that shows the progressive sync flow from step to step when progressive sync is enabled, a filter widget to filter by health and sync status, and an applications table with the same rich columns, filtering, and pagination as the main Application list page.
 * **Events tab**: Shows Kubernetes events for the ApplicationSet object.

docs/appprojects-rbac.md

@@ -8,6 +8,7 @@ The AppProjects list page displays all project-scoped AppProjects with the follo
 
 * **Table columns**: Standard columns for custom resources
 * **Filtering**: Filter projects by Description, Applications, Project Type, Source Repositories, and Destinations
+* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). See [Filter and paginate resources](filter-resources.md).
 * **Create action**: Click **Create AppProject** to open the YAML editor with a default AppProject template
 
 ## Details page
@@ -17,9 +18,9 @@ The AppProject details page provides the following tabs:
 * **Details tab**: Displays project summary, destinations, policies, and related metadata.
 * **YAML tab**: Provides a live manifest editor for the AppProject resource.
 * **Allow/Deny tab**: Displays resource allow and deny lists for cluster-scoped and namespace-scoped kinds.
-* **Applications tab**: Shows Applications that belong to this project. The table provides the same experience as the main Application list, filtered by project.
-* **Roles tab**: Displays Argo CD project roles and bindings.
-* **Sync Windows tab**: Shows configured sync windows for the project.
+* **Applications tab**: Shows Applications that belong to this project. The table provides the same experience as the main Application list, including filtering and pagination, scoped to this project.
+* **Roles tab**: Displays Argo CD project roles and bindings in a paginated table. See [Filter and paginate resources](filter-resources.md).
+* **Sync Windows tab**: Shows configured sync windows for the project in a paginated table.
 * **Events tab**: Shows Kubernetes events for the AppProject object.
 
 ## Mapping OpenShift RBAC to AppProject permissions

docs/filter-resources.md

@@ -1,13 +1,13 @@
-# Filter resources
+# Filter and paginate resources
 
-The GitOps Console plugin provides filters to narrow the resource list based on specific properties. The available filter options vary by resource type.
+The GitOps Console plugin provides filters to narrow the resource list based on specific properties. Large filtered lists use client-side pagination that matches the OpenShift web console list experience. The available filter options vary by resource type.
 
 ## Prerequisites
 
 * You have access to the OpenShift web console.
 * The GitOps Console plugin is enabled.
 
-## Procedure
+## Filtering
 
 1. In the OpenShift web console, navigate to **GitOps** and select a resource type.
 
@@ -25,6 +25,28 @@ The GitOps Console plugin provides filters to narrow the resource list based on
 
 4. To clear filters, click the **Clear all filters** link or remove individual filter selections.
 
+## Pagination
+
+List pages for Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts paginate rows after filters and search are applied.
+
+Pagination also applies to nested and details tables that use the same shared table:
+
+* The **Applications** tab on an ApplicationSet details page
+* The **Applications** tab on an AppProject details page
+* Application details: **Resources** (list view), **Sources**, **Sync Status** (resources last synced), and **History**
+* AppProject details: **Roles** and **Sync Windows**
+* ImageUpdater details: **Recent Updates**
+* Rollout details: **Pods**
+
+### Behavior
+
+* **Page size**: Choose **10**, **20**, **50**, or **100** items per page. The default is **50**. There is no **All** option.
+* **Controls**: Pagination appears above and below the table when the filtered list contains at least one row.
+* **URL state**: The current page and page size are stored in the URL (`page` and `perPage`) so you can refresh or share the view.
+* **Reset**: Changing filters, name or label search, or the selected namespace returns you to page 1. Changing the page size or sorting does not reset the page by itself; if the list shrinks, the page is clamped to the last valid page.
+* **Client-side only**: Pagination runs in the browser on the already loaded and filtered list. It does not use Kubernetes API `limit` or `continue` tokens.
+
 ## Verification
 
 * Verify that the resource list displays only items matching your selected filter criteria.
+* Verify that the pagination controls show the correct total for the filtered list and that changing the page size updates the table.

docs/getting-started.md

@@ -50,3 +50,4 @@ ImageUpdaters and Rollouts appear when those CRDs are installed on the cluster.
 
 * [Enable the GitOps Console plugin](admin-enable-plugin.md)
 * [Applications](applications.md)
+* [Filter and paginate resources](filter-resources.md)

docs/image-updaters.md

@@ -8,12 +8,13 @@ The ImageUpdaters list page displays ImageUpdater resources with the following f
 
 * **Table columns**: name, namespace, applications matched, images managed, last checked, ready, labels, and actions
 * **Filtering**: Filter by applications (Has Apps, No Apps) and ready status (Ready, Not Ready)
+* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). See [Filter and paginate resources](filter-resources.md).
 * **Create action**: Click **Create ImageUpdater** to open the YAML editor with a starter template
 
 ## Details page
 
 The ImageUpdater details page provides the following tabs:
 
 * **Details tab**: Displays ready status, applications matched, images managed, last checked and last updated times, observed generation, and conditions.
-* **Recent Updates tab**: Displays updates from the last reconciliation cycle, including alias, image, new version, applications updated, time, and message.
+* **Recent Updates tab**: Displays updates from the last reconciliation cycle, including alias, image, new version, applications updated, time, and message, in a paginated table. See [Filter and paginate resources](filter-resources.md).
 * **YAML tab**: Provides a live manifest editor for the ImageUpdater resource.

docs/release-notes-ga.md

@@ -9,11 +9,12 @@ This feature includes:
 +
 * List and details pages for Applications, ApplicationSets, AppProjects, ImageUpdaters, and Rollouts
 * Filters for health, sync, and resource-specific status
+* Client-side pagination for list pages and details tables (10, 20, 50, or 100 items per page; default 50) after filters and search, with page state in the URL
 * Graphical views for Applications and ApplicationSets
 * Rollout topology in the OpenShift Console Topology view, including revision rollback
 * YAML templates for creating resources
 * Links between the OpenShift Console and the Argo CD UI
 +
-Known limitations: The Application kebab does not include Sync or Rollback actions. ApplicationSet creation uses YAML, not a form. The Application resource graph shows immediate managed resources, not the full Argo CD tree.
+Known limitations: The Application kebab does not include Sync or Rollback actions. ApplicationSet creation uses YAML, not a form. The Application resource graph shows immediate managed resources, not the full Argo CD tree. Pagination is client-side on the loaded result set and does not use Kubernetes API `limit` or `continue` tokens.
 
 Support matrix: Technology Preview in 1.21.0. General Availability in 1.22.0.

docs/rollouts.md

@@ -8,6 +8,7 @@ The Rollouts list page displays all Argo Rollout resources with the following fe
 
 * **Table columns**: Standard columns for Rollout resources
 * **Filtering**: Filter Rollouts by rollout status (Healthy, Paused, Progressing, Degraded)
+* **Pagination**: After filters and search, browse results in pages of 10, 20, 50, or 100 items (default 50). See [Filter and paginate resources](filter-resources.md).
 * **Create action**: Click **Create Rollout** to open the YAML editor with a default Rollout template
 
 ## Topology integration
@@ -30,5 +31,5 @@ The Rollout details page provides the following tabs:
   * Pod status and health
 
   This view provides the same information as the `oc argo rollouts get rollout` CLI command, including the functionality of the `--watch` option, allowing you to monitor rollout progress directly from the console. **Rollback** is available on a non-current revision when you have patch permission.
-* **Pods tab**: Shows pods for the rollout with pod-level actions.
+* **Pods tab**: Shows pods for the rollout with pod-level actions. The pods table supports filtering, sorting, and pagination. See [Filter and paginate resources](filter-resources.md).
 * **Events tab**: Shows Kubernetes events for the Rollout object.