argoproj / argoproj/argo-workflows

fix(ui): ListWatch watch stream ignores pagination limit, causing workflow list to grow beyond "results per page" setting

Open
#16,013 2 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.