argoproj / argoproj/argo-workflows
fix(ui): ListWatch watch stream ignores pagination limit, causing workflow list to grow beyond "results per page" setting
- Dominant language
- Go
- Stars
- 17k
- Forks
- 3.7k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 138
Description
### Pre-requisites
- [x] I have double-checked my configuration
- [x] I have tested with the `:latest` image tag (i.e. `quay.io/argoproj/workflow-controller:latest`) and can confirm the issue still exists on `:latest`. If not, I have explained why, **in detail**, in my description below.
- [x] I have searched existing issues and could not find a match for this bug
- [ ] I'd like to contribute the fix myself (see [contributing guide](https://github.com/argoproj/argo-workflows/blob/main/docs/CONTRIBUTING.md))
### What happened? What did you expect to happen?
This is a UI issue
Open Argo UI → Workflow List
Set "Results per page" to 5
## Environment
- Argo Workflows version: v3.7.10 (also verified on `main` branch — code is identical)
- Kubernetes: AKS 1.30+
### Expected behavior
Setting "results per page" to 5 should always show at most 5 workflows.
### Actual behavior
The list starts at 5 but grows to 12, 30, 50+ as new workflows are created/completed in the namespace.
### Root Cause
In `ui/src/shared/list-watch.ts`, the `list()` call respects the pagination `limit`, but the `watch()` SSE stream receives ALL workflow events. The `mergeItem()` function pushes ADDED items without trimming to the limit:
```ts
// mergeItem — pushes without limit enforcement
} else {
items.push(item); // ← grows unbounded
}
The watchFields() in workflows-service.ts doesn't accept or pass a limit parameter — it watches all events regardless of pagination
Proposed fix
Add a limit parameter to ListWatch and trim this.items after each mergeItem() + sort():
// In the watch callback (list-watch.ts)
e => {
this.items = mergeItem(e.object, e.type, this.items).sort(sorter);
if (this.limit > 0 && this.items.length > this.limit) {
this.items = this.items.slice(0, this.limit);
}
onChange(this.items, e.object, e.type);
}
Pass pagination.limit from workflows-list.tsx to the ListWatch constructor.
### Version(s)
Argo workflows v3.7.10 - Kubernetes: AKS 1.30+
### Paste a minimal workflow that reproduces the issue. We must be able to run the workflow; don't enter a workflow that uses private images.
```YAML
Steps to reproduce
Open Argo UI → Workflow List
Set "Results per page" to 5
Submit or wait for new workflows to appear
Observe the list growing past 5
```
### Logs from the workflow controller
```text
kubectl logs -n argo deploy/workflow-controller | grep ${workflow}
```
### Logs from in your workflow's wait container
```text
kubectl logs -n argo -c wait -l workflows.argoproj.io/workflow=${workflow},workflow.argoproj.io/phase!=Succeeded
```
Contributor guide
Research direction
Start in ui/src/shared/list-watch.ts and trace how list() and the watch callback update items, then inspect workflows-list.tsx and workflows-service.ts for pagination.limit handling. Reproduce the issue with Results per page set to 5 and observe new workflow events; done means the list remains at five items while watching continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100