feat(dashboard): add a live timing bar to canary pause steps by apellex · Pull Request #4836 · argoproj/argo-rollouts

apellex · 2026-07-11T01:53:23Z

Adds a live "time remaining" indicator for timed canary pauses — in both the dashboard and the kubectl argo rollouts CLI — so you can see at a glance how long until a paused rollout proceeds.

Fixes #1183 — a request open since 2022 to surface pause time remaining. Neither the dashboard nor the CLI surfaced it before this PR.

Dashboard

The current pause step's card fills left-to-right as the pause elapses. Indefinite (manual) pauses are unchanged.

CLI

kubectl argo rollouts get rollout gains a Pause: line in the canary summary showing the time left on the current timed pause (e.g. Pause: 15s remaining). Indefinite pauses and non-paused steps are unaffected.

How it works

The controller already records the pause start time in status.pauseConditions[reason=CanaryPauseStep].startTime. This PR surfaces it on RolloutInfo as a new pauseStartTime field (populated in the info builder; proto/swagger/TS artifacts regenerated).
Dashboard: derives progress from that server-provided start time, so it stays accurate across page reloads rather than counting from page-load. The fill runs as a single CSS transition over the remaining time — smooth, with no per-second re-rendering.
CLI: computes the remaining time at print from the same field plus the step's duration.

Design choices

Timed pauses (e.g. pause: {duration: 40s}) → dashboard card fills (no countdown text, keeping the panel minimal); CLI shows Pause: Ns remaining.
Indefinite pauses (pause: {}) → unchanged in both.
Server-sourced timing over a client-only heuristic, so remaining time is correct after a refresh. This is the main difference from the stalled client-only attempt in UI/feat UI timeleft #4617, which counted from page-load and reset on reload.

Demo

UI

CLI

Checklist:

github-actions · 2026-07-11T02:27:51Z

Published E2E Test Results

4 files 4 suites 4h 8m 44s ⏱️
149 tests 137 ✅ 7 💤 5 ❌
606 runs 569 ✅ 28 💤 9 ❌

For more details on these failures, see this check.

Results for commit f78cf21.

♻️ This comment has been updated with latest results.

codecov · 2026-07-11T02:27:58Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.23%. Comparing base (f2c5c2b) to head (f78cf21).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4836      +/-   ##
==========================================
+ Coverage   85.17%   85.23%   +0.05%     
==========================================
  Files         166      166              
  Lines       19453    19475      +22     
==========================================
+ Hits        16570    16600      +30     
+ Misses       2030     2020      -10     
- Partials      853      855       +2

Flag	Coverage Δ
e2e	`53.05% <ø> (+0.02%)`	⬆️
unit-tests	`81.70% <100.00%> (+0.05%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2026-07-11T02:27:58Z

Published Unit Test Results

2 629 tests 2 629 ✅ 3m 30s ⏱️
131 suites 0 💤
1 files 0 ❌

Results for commit f78cf21.

♻️ This comment has been updated with latest results.

Add a pauseStartTime field to the RolloutInfo API message, populated from the CanaryPauseStep pause condition (RFC3339 UTC), so the UI can tell how far a timed pause has progressed. Regenerates proto, swagger, and TS artifacts, and covers the builder with a unit test. Signed-off-by: Vũ (Alex) Nguyễn <vu@apella.io>

Fill the current pause step's card left-to-right as a timed pause elapses, giving an at-a-glance sense of time remaining; indefinite pauses are unchanged. Timing is derived client-side from the server-provided pauseStartTime, so it stays accurate across reloads. The fill runs as a single CSS transition over the remaining time (no per-second ticking), so it sweeps smoothly from mount to completion. Adds pure, unit-tested helpers (durationToSeconds, computePauseProgress) and a PauseProgressBar component. Signed-off-by: Vũ (Alex) Nguyễn <vu@apella.io>

watchOptions is no longer valid under devServer; move it to the top-level webpack config so `pnpm --dir ui start` runs. Signed-off-by: Vũ (Alex) Nguyễn <vu@apella.io>

kostis-codefresh · 2026-07-15T11:31:33Z

Related? #4617

apellex · 2026-07-15T13:46:00Z

Related? #4617

@kostis-codefresh yes it is related, however:

UI/feat UI timeleft #4617 is a front-end only implementation that doesn't survive hard refresh
(props.step.pause as any).startTime) is problematic too because GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1RolloutPause carries no startTime
Performance-wise CSS transition is superior to full Step re-render
My change is minimalistic (indefinite pause stays the same, only the fill bar animates for timed pause)
has no activity since February

kostis-codefresh · 2026-07-21T14:34:06Z

Hey. I took a quick look, and this seems to address only the UI. But the original issue says "In both the CLI and the UI".

Was the CLI side intentionally left out for another PR, or was it out of scope for now? I am asking because if this PR gets merged then the original issue will be autoclosed.

apellex · 2026-07-21T14:48:45Z

Hey. I took a quick look, and this seems to address only the UI. But the original issue says "In both the CLI and the UI".

Was the CLI side intentionally left out for another PR, or was it out of scope for now? I am asking because if this PR gets merged then the original issue will be autoclosed.

@kostis-codefresh Thanks for the review. Honestly it was left out because I personally don't use the CLI. ~~I'm leaning scoping down to covering just UI for now. I can remove the issue tag.~~ On second thought, the CLI change is minimal I will implement it as well so this PR can close #1183 completely.

apellex · 2026-07-21T15:26:26Z

Hey. I took a quick look, and this seems to address only the UI. But the original issue says "In both the CLI and the UI".

Was the CLI side intentionally left out for another PR, or was it out of scope for now? I am asking because if this PR gets merged then the original issue will be autoclosed.

@kostis-codefresh PR description updated to include clip showing the "Pause: Xs remaining" in the CLI get --watch

Add a PauseRemaining line to the canary summary of `kubectl argo rollouts get rollout` when the rollout is paused on a timed pause step, computed from the pause condition start time (now on RolloutInfo) and the step duration. Indefinite pauses and non-paused steps are unaffected. This brings the CLI to parity with the dashboard so argoproj#1183 is fully addressed. Signed-off-by: Vũ (Alex) Nguyễn <vu@apella.io>

sonarqubecloud · 2026-08-07T15:10:39Z

Quality Gate passed

Issues
8 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

apellex requested a review from a team as a code owner July 11, 2026 01:53

apellex added 3 commits July 15, 2026 14:02

chore(ui): fix dev server for webpack-dev-server v4

a20b1fb

watchOptions is no longer valid under devServer; move it to the top-level webpack config so `pnpm --dir ui start` runs. Signed-off-by: Vũ (Alex) Nguyễn <vu@apella.io>

kostis-codefresh force-pushed the apellex/pause-timing-bar branch from e9dc2a3 to a20b1fb Compare July 15, 2026 11:02

apellex added 3 commits July 15, 2026 10:16

Merge branch 'master' into apellex/pause-timing-bar

b40ca0c

Merge branch 'master' into apellex/pause-timing-bar

72ca72b

Merge branch 'master' into apellex/pause-timing-bar

63fa79b

Merge branch 'master' into apellex/pause-timing-bar

14c13b7

apellex force-pushed the apellex/pause-timing-bar branch from 5596a84 to 742a1dd Compare July 21, 2026 15:15

apellex force-pushed the apellex/pause-timing-bar branch from 742a1dd to cc22d06 Compare July 21, 2026 16:21

apellex added 9 commits July 22, 2026 15:07

Merge branch 'master' into apellex/pause-timing-bar

a5c1164

Merge branch 'master' into apellex/pause-timing-bar

619a1d5

Merge branch 'master' into apellex/pause-timing-bar

922dae1

Merge branch 'master' into apellex/pause-timing-bar

cf7b827

Merge branch 'master' into apellex/pause-timing-bar

d6fe1fe

Merge branch 'master' into apellex/pause-timing-bar

c185ed0

Merge branch 'master' into apellex/pause-timing-bar

dd8a145

Merge branch 'master' into apellex/pause-timing-bar

2fb3127

Merge branch 'master' into apellex/pause-timing-bar

f78cf21

Navigation Menu

Uh oh!

feat(dashboard): add a live timing bar to canary pause steps - #4836

feat(dashboard): add a live timing bar to canary pause steps#4836
apellex wants to merge 17 commits into
argoproj:masterfrom
apellex:apellex/pause-timing-bar

apellex commented Jul 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 11, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jul 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 11, 2026 •

edited

Loading

Uh oh!

kostis-codefresh commented Jul 15, 2026

Uh oh!

apellex commented Jul 15, 2026

Uh oh!

kostis-codefresh commented Jul 21, 2026

Uh oh!

apellex commented Jul 21, 2026 •

edited

Loading

Uh oh!

apellex commented Jul 21, 2026

Uh oh!

sonarqubecloud Bot commented Aug 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

apellex commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dashboard

CLI

How it works

Design choices

Demo

Uh oh!

github-actions Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Published E2E Test Results

Uh oh!

codecov Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Published Unit Test Results

Uh oh!

kostis-codefresh commented Jul 15, 2026

Uh oh!

apellex commented Jul 15, 2026

Uh oh!

kostis-codefresh commented Jul 21, 2026

Uh oh!

apellex commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apellex commented Jul 21, 2026

Uh oh!

sonarqubecloud Bot commented Aug 7, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

apellex commented Jul 11, 2026 •

edited

Loading

github-actions Bot commented Jul 11, 2026 •

edited

Loading

codecov Bot commented Jul 11, 2026 •

edited

Loading

github-actions Bot commented Jul 11, 2026 •

edited

Loading

apellex commented Jul 21, 2026 •

edited

Loading