Improve stage view by timja · Pull Request #632 · jenkinsci/pipeline-graph-view-plugin

timja · 2025-04-20T13:48:43Z

What's changed:

Show up to 13 stages in the job view
Add date build ran and time taken
Remove table header
Remove stage name from job view and add tooltip instead
Compressed spacing on job view

TODO:

Add node showing how many are hidden
Possibly adjust collapsed nodes based on screen size - created Adjust collapsed nodes based on screen size on stage view #650
Improve look of date and time elapsed
Use relative date for when build ran
Improve table layout / spacing with longer build display names (maybe use card / grid)
See if I can improve tooltip hit window
Reduce vertical spacing of job
Don't use full width if unneeded - leave this for now
Timing of stage (via settings flag maybe) - thinking to put it underneath stage icon - see Add changes, durations, time & status information on graph view #343

Fixes #349
Fixes #449
Closes #140
Related #317

Example pipeline:

for (i = 0; i < 20; i++) {
    stage("${i}"){
        echo "HI ${i}"    
    }
}

Before

After

Testing done

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

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

timja · 2025-04-20T13:50:38Z

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

-        </a>
+        <div>
+          <a
+            // style={{textOverflow: "ellipsis"}}


Suggested change

// style={{textOverflow: "ellipsis"}}

timja · 2025-04-20T13:51:06Z

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

-        >
-          {run.displayName}
-        </a>
+        <div>


TODO may remove this wrapper

timja · 2025-04-20T13:51:15Z

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

+          <span>{new Date(run.timestamp).toLocaleDateString()}</span>
+        </div>
+        <div>
+          <span className={"jenkins-subtitle"}>{total(run.duration)}</span>


jenkins-subtitle doesn't exist although I think there is something, ref jenkinsci/design-library-plugin#410

timja · 2025-04-20T13:51:32Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx

-      percentage={node.stage.completePercent}
-      skeleton={node.stage.skeleton}
-    />,
+    <Tooltip


for some reason only appears at the very bottom of the stage

timja · 2025-04-20T13:52:26Z

@janfaracik let me know any feedback please

timja · 2025-04-23T15:47:55Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx

+    tooltip = (
+      <div className="pgv-node-tooltip">
+        <div>{title}</div>
+        <div>{total(node.stage.totalDurationMillis)}</div>


Why only show this when collapsed? this could be useful on other graphs

…graph-view-plugin into pr/632

janfaracik · 2025-04-24T10:48:38Z

Current counter UI (not 100% happy with it yet):

If we want to adjust how many are visible based on screen width I'd encourage moving this out to its own component, the existing one is already very complicated/confusing.

lewisbirks · 2025-04-24T15:20:57Z

src/main/frontend/multi-pipeline-graph-view/app.tsx

    <div>
-      <MultiPipelineGraph />
+      <I18NProvider bundles={[ResourceBundleName.messages]}>
+        <MultiPipelineGraph />


Just had a thought, you might need to update how the I18NProvider gets the locale, it might just be updating the jelly but it might also be a little more involved (maybe lifting locale evaluation outside the I18NProvider and passing it as a prop)

done in 803d0fc

lewisbirks · 2025-04-24T15:21:05Z

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx

+
+  const groupedRuns: Record<string, RunInfo[]> = runs.reduce(
+    (acc: Record<string, RunInfo[]>, run) => {
+      const date = new Date(run.timestamp).toLocaleDateString("en-US", {


do we want this based on the users locale?

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

timja commented Apr 20, 2025

View reviewed changes

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/MultiPipelineGraph.tsx Outdated Show resolved Hide resolved

timja commented Apr 20, 2025

View reviewed changes

timja added the enhancement New feature or request label Apr 20, 2025

Improve Job view

1ce2fb5

timja force-pushed the smaller-job-view branch from 851009d to 1ce2fb5 Compare April 20, 2025 19:04

janfaracik and others added 21 commits April 22, 2025 10:07

Merge branch 'main' into smaller-job-view

220dac7

Update design

01e8b14

Add timestamp

2ab1c47

Update status-icon.tsx

7a2e321

Update status-icon.tsx

8e10458

Fix prettier

abbd699

Use ===

d5e64cb

Remove unused class

c6ebb88

Merge branch 'main' into pr/632

18992c9

Fix status

6a21095

Fix overflowing

363119f

Update single-run.scss

2e13fda

Increase shown stages

e2d9310

Check if run is in progress before returning unknown

df69467

Naaaaative toooltipssssss

27b6382

Fix tooltip

4dc0e59

Move to Tippy

46b9f14

Update nodes.tsx

25841ae

Fixes

6d305ef

Update tooltip.tsx

6b856b0

Update tooltip to include duration

084aa2c

janfaracik added 2 commits April 23, 2025 16:42

Merge branch 'main' into pr/632

c63d89b

Update package-lock.json

7928b3e

timja commented Apr 23, 2025

View reviewed changes

janfaracik and others added 10 commits April 23, 2025 17:07

Add counter placeholder

2a5f46f

Merge branch 'main' into smaller-job-view

2a00254

Add rough UI for counter

e6ace2f

Merge branch 'smaller-job-view' of https://github.com/timja/pipeline-…

d7b1250

…graph-view-plugin into pr/632

Add provider for multi pipeline graph

8d2a69d

Only load required resource bundles

2aaf54a

Semi working

d5e4ffc

Update PipelineGraphLayout.ts

3a7afe7

Update PipelineGraphLayout.ts

9e698f0

Merge branch 'main' into smaller-job-view

483803c

janfaracik and others added 3 commits April 24, 2025 15:25

Merge branch 'main' into smaller-job-view

dccc20f

Adjust height

586372b

Prettier

b0e414c

timja marked this pull request as ready for review April 24, 2025 15:04

timja requested a review from a team as a code owner April 24, 2025 15:04

timja changed the title ~~Improve Job view~~ Improve stage view Apr 24, 2025

lewisbirks reviewed Apr 24, 2025

View reviewed changes

timja mentioned this pull request Apr 24, 2025

Pass user locale down for grouping of dates in stage view #647

Closed

lewisbirks and others added 3 commits April 24, 2025 16:46

lift locale acquisition outside of provider

803d0fc

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

Swap test to playwright

d6c6170

Wait for build to complete

9b0e64d

timja enabled auto-merge (squash) April 24, 2025 19:37

timja merged commit da20b9b into jenkinsci:main Apr 24, 2025
17 checks passed

timja deleted the smaller-job-view branch April 24, 2025 19:55

shamil mentioned this pull request Apr 25, 2025

Stage view overlaps witth orher elements in the Job status spage #664

Closed

0023-119 mentioned this pull request May 2, 2025

Make pipeline graphs on job page wider (display more stages) #718

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve stage view#632

Improve stage view#632
timja merged 45 commits intojenkinsci:mainfrom
timja:smaller-job-view

timja commented Apr 20, 2025 •

edited

Loading

Uh oh!

Uh oh!

timja Apr 20, 2025

Uh oh!

timja Apr 20, 2025

Uh oh!

timja Apr 20, 2025

Uh oh!

timja Apr 20, 2025

Uh oh!

timja commented Apr 20, 2025

Uh oh!

timja Apr 23, 2025

Uh oh!

janfaracik commented Apr 24, 2025 •

edited

Loading

Uh oh!

lewisbirks Apr 24, 2025

Uh oh!

lewisbirks Apr 24, 2025

Uh oh!

lewisbirks Apr 24, 2025

Uh oh!

timja Apr 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

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

Uh oh!

Testing done

Submitter checklist

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

timja commented Apr 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

janfaracik commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

timja commented Apr 20, 2025 •

edited

Loading

janfaracik commented Apr 24, 2025 •

edited

Loading