Skip to content

Show elapsed time on the workflow job output toolbar#393

Open
blaipr wants to merge 1 commit into
ctrliq:mainfrom
blaipr:feature/workflow-elapsed-timer
Open

Show elapsed time on the workflow job output toolbar#393
blaipr wants to merge 1 commit into
ctrliq:mainfrom
blaipr:feature/workflow-elapsed-timer

Conversation

@blaipr

@blaipr blaipr commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

SUMMARY

Regular job output pages show a live hh:mm:ss elapsed badge — ticking every second while the job runs, switching to the API's final elapsed value on completion. Workflow job output pages showed no elapsed time at all, live or final.

The workflow output toolbar now renders the same badge next to Total Nodes:

  • a one-second interval recomputes elapsed from job.started while the workflow runs
  • the existing websocket-driven refetch (useWsJob refetches on terminal statuses) delivers finished/elapsed, so the badge settles on the authoritative final value without a reload
  • calculateElapsed moves from a private helper inside OutputToolbar to util/dates alongside secondsToHHMMSS, and OutputToolbar now uses both shared helpers (no behavior change there)

No locale-catalog changes needed — both strings (Elapsed, Elapsed time that the job ran) already exist in the catalogs.

Independent of every other open PR — verified conflict-free via pairwise git merge-tree (the elapsed-state hooks are deliberately placed clear of the hunks #392 touches in the same file).

ISSUE TYPE

  • New or Enhanced Feature

COMPONENT NAME

  • UI

ASCENDER VERSION

awx: 25.4.1.dev6+g9b44420

ADDITIONAL INFORMATION

Tests: unit coverage for calculateElapsed (zero/unstarted cases, fake-timer arithmetic) and two toolbar tests (badge ticks under fake timers while running; shows the formatted final elapsed and stops ticking once finished).

npm --prefix awx/ui run lint     # clean
npm --prefix awx/ui run test     # 544 suites, 2859 passed (incl. 6 new)
npm --prefix awx/ui run build    # succeeds

Regular job output pages show a live hh:mm:ss elapsed badge that ticks
every second while the job runs and switches to the API's final elapsed
value on completion. Workflow job output pages showed no elapsed time
at all, live or final.

The workflow output toolbar now renders the same badge next to Total
Nodes: a one-second interval recomputes elapsed from job.started while
the workflow runs, and the websocket-driven job refetch (useWsJob
refetches on terminal statuses) delivers finished/elapsed so the badge
settles on the authoritative value without a reload.

calculateElapsed moves from a private helper inside OutputToolbar to
util/dates alongside secondsToHHMMSS, and OutputToolbar now uses both
shared helpers; no behavior change there.

Both strings already exist in the locale catalogs, so no catalog
changes are needed.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds a live hh:mm:ss elapsed-time badge to the Workflow Job Output toolbar (matching the behavior of regular job output), and centralizes the elapsed-time calculation into shared date utilities.

Changes:

  • Render an “Elapsed” badge in WorkflowOutputToolbar, updating every second while the workflow job is running and switching to the API-provided final elapsed after completion.
  • Promote calculateElapsed into awx/ui/src/util/dates.js and update JobOutput’s OutputToolbar to use shared secondsToHHMMSS.
  • Add unit tests for calculateElapsed plus workflow toolbar tests validating ticking behavior and final-value behavior.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
awx/ui/src/util/dates.js Adds exported calculateElapsed helper alongside existing duration formatting helpers.
awx/ui/src/util/dates.test.js Adds unit tests covering calculateElapsed behavior under fake timers.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.js Adds the elapsed-time badge and timer state/effect to the workflow output toolbar.
awx/ui/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.js Extends toolbar tests to cover elapsed badge ticking and final elapsed display.
awx/ui/src/screens/Job/JobOutput/shared/OutputToolbar.js Switches elapsed formatting to shared secondsToHHMMSS and imports shared helpers.
awx/ui/package-lock.json Contains a small lockfile metadata change unrelated to the feature.
Files not reviewed (1)
  • awx/ui/package-lock.json: Generated file

Comment on lines +129 to +133
<Badge isRead id="workflow-elapsed-badge">
{job.finished
? secondsToHHMMSS(job.elapsed)
: activeJobElapsedTime}
</Badge>
shouldFind(`Button[ouiaId="edit-workflow"]`);
shouldFind('Button#workflow-output-toggle-legend');
shouldFind('Badge');
expect(wrapper.find('Badge')).toHaveLength(2);
test('Shows correct number of nodes', () => {
// The start node (id=1) and deleted nodes (isDeleted=true) should be ignored
expect(wrapper.find('Badge').text()).toBe('1');
expect(wrapper.find('Badge').last().text()).toBe('1');
Comment thread awx/ui/package-lock.json
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"dev": true,
"devOptional": true,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants