Implement pagination and sorting method

[a-roberts]

Expected Behavior

As a Tekton Dashboard user I should be able to sort/view records without suffering from poor performance (in terms of animations and rendering) so that I don't have a dreadful and frustrating experience

Actual Behavior

No such sorting or pagination exists

Steps to Reproduce the Problem

1. Deploy the dashboard and create many PipelineRuns
2. There's no pagination
3. If sorting were to be enabled we're confident performance would be dreadful

Additional Info

To be investigated before #833

[a-roberts]

Here's a good test case with over 3,000 PipelineResources:

From https://dashboard.dogfooding.tekton.dev/#/pipelineruns (@afrittoli the contact who's set this up 🎈 ) so it's definitely something to look into

[AlanGreene]

https://kubernetes.io/docs/reference/using-api/api-concepts/#retrieving-large-results-sets-in-chunks

The Kubernetes API supports chunking, which would allow us to limit the number of resources loaded in a single request.

If we just load the first (large, size TBD) chunk for each type, we could ensure a more responsive UI for these cases with many resources. Obviously this means the user doesn't have access to all resources in the UI unless the resources are labelled and the user knows the correct labels to filter on. I think we need to do some more brainstorming around this, both from a technical and design perspective.

[Megan-Wright]

/assign

[Megan-Wright]

I've had a look into this as well - chunking with the KubeAPI seems perfectly possible however carbon doesn't currently support easy integration between pagination and data tables using react, so not sure how easy this would be to do.

[AlanGreene]

This should also include ensuring the strings for the sorting headers are extracted for translation, see https://github.com/carbon-design-system/carbon/blob/master/packages/react/src/components/DataTable/TableHeader.js and

dashboard/packages/components/src/components/Table/Table.js

Line 43 in 0fc671e

function getTranslateWithId(intl) {

for reference.

[ebaek]

/assign

[dankraemer]

Hi, just adding my two cents here.
My team is migrating the CI/CD infrastructure to Tekton and the number of PipelineRuns is increasing fast.
We have noticed that the PipelineRuns page is getting slower, the main problem seems to be because it is retrieving all pipelineruns:

The Pagination feature would improve UX a lot.

[tekton-robot]

Stale issues rot after 30d of inactivity.
Mark the issue as fresh with /remove-lifecycle rotten.
Rotten issues close after an additional 30d of inactivity.
If this issue is safe to close now please do so with /close.

/lifecycle rotten

Send feedback to tektoncd/plumbing.

[tekton-robot]

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

/close

Send feedback to tektoncd/plumbing.

[tekton-robot]

@tekton-robot: Closing this issue.

In response to this:

Rotten issues close after 30d of inactivity.
Reopen the issue with /reopen.
Mark the issue as fresh with /remove-lifecycle rotten.

/close

Send feedback to tektoncd/plumbing.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.