woodpecker-ci/woodpecker

Add pagination on repo pipelines view

Open

#2,976 opened on Dec 20, 2023

View on GitHub
 (2 comments) (11 reactions) (1 assignee)Go (7,124 stars) (571 forks)user submission
featuregood first issueui

Description

Clear and concise description of the problem

It is not possible to see list of older pipelines for a repo

Suggested solution

Add pagination on https://ci.woodpecker-ci.org/repos/3780

Alternative

Add a load more button. Although, I prefer pagination, because then you can share a link to the page and you will see the same view.

Additional context

Relevant code

Backend does have support for pagination https://github.com/woodpecker-ci/woodpecker/blob/6432109daf7e7a466c25dcc1a4f540b3dd766d94/server/api/pipeline.go#L104 The frontend store needs to support it https://github.com/woodpecker-ci/woodpecker/blob/6432109daf7e7a466c25dcc1a4f540b3dd766d94/web/src/store/pipelines.ts#L50 The frontend component needs to have a button, etc. https://github.com/woodpecker-ci/woodpecker/blob/6432109daf7e7a466c25dcc1a4f540b3dd766d94/web/src/components/repo/pipeline/PipelineList.vue

Validations

Contributor guide

Tech stack
gotypescriptvue
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue.jsTypeScriptWoodpecker frontend structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
First, examine the existing backend pagination support in `server/api/pipeline.go` to understand the API parameters. Then, modify the frontend store at `web/src/store/pipelines.ts` to accept pagination parameters (page, perPage) and fetch paginated data. Finally, update the `PipelineList.vue` component in `web/src/components/repo/pipeline/` to add a pagination UI (e.g., page numbers or load more button) that uses the store's pagination functionality. Review the existing comments and assignee activity to ensure alignment.