Display information based off the previous run by lewisbirks · Pull Request #626 · jenkinsci/pipeline-graph-view-plugin

lewisbirks · 2025-04-15T15:48:40Z

This PR revamps the graph view to:

Show a skeleton of the last run, inspired by Stage View, this reduces how jarring the graph moving on node addition can be, and also improves predicability of whats coming next
Display an estimation of how long left is on the run
Adds playful animations between states

We'd like to extend this to the console view eventually - but that'll require more work in an already big PR

Testing done

Skeleton appears when a run has a prior run
Doesn't when it doesn't
Estimations appear as expected
Icons animate nicely between states

Fixes #619

Submitter checklist

Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
Ensure that the pull request title represents the desired changelog entry
Please describe what you did
Link to relevant issues in GitHub or Jira
Link to relevant pull requests, esp. upstream and downstream changes
Ensure you have provided tests - that demonstrates feature works or fixes the issue

janfaracik · 2025-04-15T18:01:47Z

Added a very rough progress ring icon - will refine later.

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

timja

Some minor feedback, looks great though

src/main/frontend/common/RestClient.tsx

src/main/frontend/common/components/status-icon.scss

timja · 2025-04-17T14:31:13Z

src/main/frontend/common/tree-api.ts

+          );
+        };
+
+        const onPipelineComplete = () => undefined;


this could be defined before the if statement so you don't repeat it on L#57

makes sense for now as they are the same, eventually they might differ, but we can deal with that then

src/main/frontend/common/utils/run-estimator.ts

timja · 2025-04-17T14:42:20Z

src/main/frontend/common/utils/timings.ts

+const ONE_MONTH_MS: number = 30 * ONE_DAY_MS;
+const ONE_YEAR_MS: number = 365 * ONE_DAY_MS;
+
+// TODO: 16/04/2025 How to support i18n like the methods this was copied from


does this need resolving (or a follow up)?

Still thinking how to do this, potentially a follow up unless you have any ideas. though this PR is getting rather large

There's this function: https://github.com/jenkinsci/jenkins/blob/4d2698f254b039bedd7b8f5af89e0c25b3b88b1e/src/main/js/util/i18n.js#L1

I've never used it but I think it was introduced for the setup wizard.

The normal pattern that a bunch of places use is to copy the messages from java / jelly using data- attributes on an element and then JavaScript just reading the data attributes.

Follow up would be fine if we create an issue

Define complete action once Use braces on throws Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

timja · 2025-04-18T09:45:03Z

good to go @janfaracik?

janfaracik · 2025-04-18T09:53:30Z

Just fixing a small animation issue, will be good once thats fixed

janfaracik · 2025-04-18T09:58:41Z

Good to go 🚀

* Calculate the percentage complete based off the previous run * Add very rough progress ring icon * Add animations for icons * Init * Move the timing string generation to the frontend * Rough skeletons * Spooky scary skeletons * Align makeTimeSpanString with what is in core * Mostly remove completePercent from the API (defaults to 0) Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Tidy * Update status-icon.tsx * Cleanup Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Restore match * Estimate stage completion percentage Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Linting Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Pull out API polling * Tidy up * Update merger.spec.ts * Timings -> timings + tsx -> ts Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Tidy up * Undo unneeded java changes Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Pull URL from element * More reversions Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Update nodes.tsx * Rename stuff * Move files * Add test for run-estimator * Trigger Build * Rename complete * Update ConsoleLogCard.spec.tsx * Populate map at initialisation Define complete action once Use braces on throws Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Add click state to status symbols * Add guard for previous build url Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> * Drop skeletons if stages differ, simplify * Fix animation when switching between clickable and not clickable --------- Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com> Co-authored-by: Jan Faracik <43062514+janfaracik@users.noreply.github.com>

lewisbirks and others added 3 commits April 15, 2025 16:47

Calculate the percentage complete based off the previous run

f23148b

Add very rough progress ring icon

7a7c18d

Merge branch 'main' into complete-percentage

cf1654d

janfaracik and others added 26 commits April 15, 2025 20:42

Add animations for icons

ed93e2e

Init

a1ec0e6

Move the timing string generation to the frontend

a0c269c

Rough skeletons

c53dc18

Merge branch 'refine-graph' into pr/626

0fddc41

Spooky scary skeletons

5b37c66

Align makeTimeSpanString with what is in core

e50e69c

Mostly remove completePercent from the API (defaults to 0)

a826ed5

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Tidy

13cfed2

Update status-icon.tsx

a32b099

Cleanup

5f4cd0a

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Restore match

969c83a

Estimate stage completion percentage

e9df704

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Linting

c2345d1

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Pull out API polling

ada21af

Tidy up

b299320

Update merger.spec.ts

ba1e639

Timings -> timings + tsx -> ts

ec24614

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Tidy up

dcb8fdc

Undo unneeded java changes

5ca5b38

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Pull URL from element

1d7b234

More reversions

78ad78f

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Update nodes.tsx

d370cfa

Rename stuff

38fff35

Move files

df7f2e7

Add test for run-estimator

a0e02ca

lewisbirks changed the title ~~Calculate the percentage complete based off the previous run~~ Display information based off the previous run Apr 17, 2025

Trigger Build

af5df92

janfaracik added the enhancement New feature or request label Apr 17, 2025

janfaracik marked this pull request as ready for review April 17, 2025 13:38

janfaracik requested a review from a team as a code owner April 17, 2025 13:38

janfaracik added 2 commits April 17, 2025 14:41

Rename complete

79e2b9d

Update ConsoleLogCard.spec.tsx

f794af6

timja approved these changes Apr 17, 2025

View reviewed changes

lewisbirks and others added 5 commits April 17, 2025 16:18

Populate map at initialisation

b86137c

Define complete action once Use braces on throws Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Add click state to status symbols

f6870db

Add guard for previous build url

b7db0ee

Signed-off-by: lewisbirks <22620804+lewisbirks@users.noreply.github.com>

Merge branch 'main' into complete-percentage

4febd0b

Drop skeletons if stages differ, simplify

5dc93f8

timja approved these changes Apr 18, 2025

View reviewed changes

Fix animation when switching between clickable and not clickable

0420490

timja merged commit 5dcb592 into jenkinsci:main Apr 18, 2025
17 checks passed

janfaracik mentioned this pull request Apr 19, 2025

Revamp the Pipeline Console view #615

Merged

6 tasks

lewisbirks mentioned this pull request Apr 19, 2025

Regression in internationalised timings #630

Closed

timja mentioned this pull request Apr 22, 2025

Full graph is not rendered when first stage is running #238

Closed

timja linked an issue Apr 22, 2025 that may be closed by this pull request

Full graph is not rendered when first stage is running #238

Closed

Uh oh!

Conversation

lewisbirks commented Apr 15, 2025 • edited by timja Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Testing done

Submitter checklist

Uh oh!

janfaracik commented Apr 15, 2025

Uh oh!

timja left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

timja Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

lewisbirks Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

timja Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

lewisbirks Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

timja Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

timja Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

timja commented Apr 18, 2025

Uh oh!

janfaracik commented Apr 18, 2025

Uh oh!

janfaracik commented Apr 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lewisbirks commented Apr 15, 2025 •

edited by timja

Loading