Add timings to stage view by timja · Pull Request #814 · jenkinsci/pipeline-graph-view-plugin

timja · 2025-06-02T21:21:04Z

Fixes #688

Most of these aren't solved yet but will be done with this PR:

Fixes Toggle to display stage name in Stages view #688
Fixes Toggle to display the duration of stages in Pipeline Overview and Stages View #684
Fixes Add changes, durations, time & status information on graph view #343 - I think we can close this one with this too

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 demonstrate the feature works or the issue is fixed

timja

cc @janfaracik and @lewisbirks

timja · 2025-06-02T21:28:48Z

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


  const layout: LayoutInfo = {
    ...defaultLayout,
-    nodeSpacingH: 45,


needs to be re-added behind a setting, possibly we can calculate it based on longest stage name too so we don't have to lose all the value by shortening it

timja · 2025-06-02T21:29:05Z

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


  return (
-    <div className="pgv-single-run">
+    <div className="pgv-single-run" style={{ height: "100px" }}>


needs to be dynamic based on a setting

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/single-run.scss

timja · 2025-06-02T21:29:40Z

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/single-run.scss

  }

-  .pgw-user-specified-text {
+  .pgv-user-specified-text {


typo I noticed

timja · 2025-06-02T21:29:58Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

      for (const node of row) {
        measuredWidth = Math.max(measuredWidth, node.x + nodeSpacingH / 2);
-        measuredHeight = collapsed
-          ? 60


may need re-adding behind setting

timja · 2025-06-02T21:30:07Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

-  if (collapsed) {
-    return [];
-  }
+  // if (collapsed) {


needs to be re-added behind a setting

timja · 2025-06-02T21:30:11Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

+): Array<NodeLabelInfo> {
+  const labels: Array<NodeLabelInfo> = [];
+
+  // if (collapsed) {


needs to be re-added behind a setting

timja · 2025-06-02T21:30:44Z

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

+    left: x + "px",
+  };
+
+  const classNames = ["PWGx-pipeline-big-label"];


could review if all these classes and features are needed, its mostly a copy of big label

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

felipecrs · 2025-06-02T22:17:21Z

This is looking great!

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

…timings

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

DreamPWJ · 2025-06-09T08:31:41Z

Looks really good. When will it be released? @timja

timja · 2025-06-09T08:34:00Z

Looks really good. When will it be released? @timja

Hopefully this week, just had a couple of other things to sort first.

DreamPWJ · 2025-06-09T09:04:38Z

This plugin is great, but there are a few obvious issues.

It would be best if the git change log could be displayed by mouse over or by clicking on it.
If there are a lot of pipeline steps (30+), they should all be displayed (based on the screen size). You can consider wrapping or folding unexecuted steps.
If the display is incomplete, can the view automatically scroll according to the specific steps executed? The pipeline-overview log can also automatically scroll.
It is recommended that the pipeline view be unified on the top and the log be displayed below. @timja

timja · 2025-06-09T09:14:02Z

This plugin is great, but there are a few obvious issues.

It would be best if the git change log could be displayed by mouse over or by clicking on it.

If there are a lot of pipeline steps (30+), they should all be displayed (based on the screen size). You can consider wrapping or folding unexecuted steps.

If the display is incomplete, can the view automatically scroll according to the specific steps executed? The pipeline-overview log can also automatically scroll.

It is recommended that the pipeline view be unified on the top and the log be displayed below. @timja

Can you please file these as issues (if they don't exist already) so these can be unpicked to understand what you mean, thanks.

- Merged settings and console functionality - Kept error handling in useMessages function - Combined localization keys from both branches

DreamPWJ · 2025-06-10T08:16:17Z

Thank you. I will review the issues and submit issues after experiencing this PR release.

timja · 2025-06-10T11:20:48Z

Happy to do a bit more here if people think its needed, should be good for review now though

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

lewisbirks

Looking good and seems to work after some manual testing

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

lewisbirks · 2025-06-10T14:50:48Z

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

+  showNames: boolean,
+  showDurations: boolean,


would it make sense to combine these with collapse in some sort of DisplayConfig object?

I'd be a little worried that it complicates getting everything to re-render properly but if you think its worth it I can take a look.

nah, it's nothing major, was just thinking about potentially grouping logical params into a parent object is all

…ort/labels.tsx Co-authored-by: Lewis Birks <22620804+lewisbirks@users.noreply.github.com>

lewisbirks · 2025-06-10T15:02:34Z

I noticed in #343 it mentions the following

Global average time IMHO are to complicated to be added on the current layout and least interesting for build with optional step. Nonetheless some global metrics (build duration median/min/max, latest build success, ...) could be added as an header.

Do we want that? And if so would it be better to split out into it's own issue once this is merged?

timja · 2025-06-10T15:04:03Z

I noticed in #343 it mentions the following

Global average time IMHO are to complicated to be added on the current layout and least interesting for build with optional step. Nonetheless some global metrics (build duration median/min/max, latest build success, ...) could be added as an header.

Do we want that? And if so would it be better to split out into it's own issue once this is merged?

Yeah new issue I think

felipecrs · 2025-06-10T16:25:31Z

Duration overlaps a bit with the stages line for skipped stages:

But this is not a big deal, I don't mind.

timja · 2025-06-10T21:45:32Z

Duration overlaps a bit with the stages line for skipped stages:

But this is not a big deal, I don't mind.

I gave it a bit of a go but didn't get something working, would probably be possible to stop the skipped line and just draw a regular one, might be the easiest thing but I don't think its a blocker.

felipecrs · 2025-06-10T22:08:16Z

Yeah, it is not a blocker for sure.

DreamPWJ · 2025-06-11T00:32:54Z

Can you test the display effect of more than 30 stages and automatically distribute them according to the size of the computer screen, without shrinking them together ，Display date and time on one line at the same time. For example, '2025-06-11 08:30' instead of displaying them separately. The picture shows unfriendly

DreamPWJ · 2025-06-11T00:34:08Z

I suggest abbreviating all time units like ‘’4min 25 seg to ‘’4m25s’’ so it looks more friendly.

felipecrs · 2025-06-11T01:00:29Z

Can you test the display effect of more than 30 stages and automatically distribute them according to the size of the computer screen, without shrinking them together

I agree with this one, but I think it deserves its own issue. It's not related to this. Maybe there should be a toggle to show all stages or not, which can otherwise be problematic for performance reasons.

DreamPWJ · 2025-06-11T02:05:29Z

The stages that do not need to be executed can be hidden, but the stages that are executed are displayed in one view, and you don’t need to scroll to see them.

felipecrs · 2025-06-11T03:27:18Z

The stages that do not need to be executed can be hidden, but the stages that are executed are displayed in one view, and you don’t need to scroll to see them.

I don't think this is a good idea because it would make comparisons harder if different builds skips different stages.

DreamPWJ · 2025-06-11T03:35:04Z

Technical implementation may be difficult, but this is the best user experience， Too many stages are hidden. When I can't see the stage I'm currently building, this view becomes meaningless.

DreamPWJ · 2025-06-11T03:44:09Z

Many key deployment steps are hidden, information transmission efficiency is low, and users have to perform multiple operations (click or slide) to see them.

timja · 2025-06-11T07:54:40Z

Too many stages are hidden. When I can't see the stage I'm currently building, this view becomes meaningless.

That's part of #650, which is in the priority epic so will look to improve this soon.

henriduflot · 2025-06-11T08:56:22Z

Hello @timja

Thanks for the work!

Is it possible to not show timings on skipped stages? I assume that skipped stages are not executed, which could save space on the graph.

Another question: The configuration to display stage names and their duration is set per user. Is it possible to enable this globally?

timja · 2025-06-11T09:15:02Z

Makes sense, I've created issues to track this feedback:

Add timings to stage view

b3e5dd8

timja added the enhancement New feature or request label Jun 2, 2025

timja commented Jun 2, 2025

View reviewed changes

Imports

ffd9f8e

timja and others added 7 commits June 3, 2025 09:10

Add settings UI

1924246

refactor: move symbols to common

2d49427

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

refactor: move settings control into react

248cebd

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

Prettier

14292bf

refactor: accessibility, file name standardisation, formatting

38581e1

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

Merge remote-tracking branch 'upstream/main' into fork/timja/display-…

6864ef1

…timings

add options to the stages page

e0d0683

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

Resolve merge conflicts

9bc3cda

- Merged settings and console functionality - Kept error handling in useMessages function - Combined localization keys from both branches

timja added 9 commits June 10, 2025 09:27

Format

47495ae

Hide popup

f2da90d

Use preferences

2e39bc7

Fixups

1f4ad27

Mostly there

c29e548

Closer

344081d

re-render on layout change

b8dc2bb

Fix missing provider

7c7c421

Another place

63d237c

timja marked this pull request as ready for review June 10, 2025 11:20

timja requested a review from a team as a code owner June 10, 2025 11:20

timja and others added 2 commits June 10, 2025 12:30

Fix test

e3aa025

linting

c8a6416

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

lewisbirks reviewed Jun 10, 2025

View reviewed changes

Update src/main/frontend/pipeline-graph-view/pipeline-graph/main/supp…

ddad509

…ort/labels.tsx Co-authored-by: Lewis Birks <22620804+lewisbirks@users.noreply.github.com>

Compress stages a bit

324c87e

timja merged commit c540550 into jenkinsci:main Jun 11, 2025
17 checks passed

timja deleted the display-timings branch June 11, 2025 07:55

This was referenced Jun 11, 2025

Skip showing timings on skipped stages #838

Closed

Configuration for default displaying names and duration globally #839

Closed

This was referenced Jun 11, 2025

Toggle to display the duration of stages in Pipeline Overview and Stages View #684

Closed

Add changes, durations, time & status information on graph view #343

Closed

felipecrs mentioned this pull request Jun 11, 2025

Duration of skipped stages no longer shown in Stages view even if slow #845

Closed

Uh oh!

Conversation

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

Uh oh!

Testing done

Submitter checklist

Uh oh!

timja left a comment

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!

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!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

felipecrs commented Jun 2, 2025

Uh oh!

DreamPWJ commented Jun 9, 2025

Uh oh!

timja commented Jun 9, 2025

Uh oh!

DreamPWJ commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timja commented Jun 9, 2025

Uh oh!

DreamPWJ commented Jun 10, 2025

Uh oh!

timja commented Jun 10, 2025

Uh oh!

lewisbirks left a comment

Choose a reason for hiding this comment

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!

lewisbirks commented Jun 10, 2025

Uh oh!

timja commented Jun 10, 2025

Uh oh!

felipecrs commented Jun 10, 2025

Uh oh!

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

Uh oh!

Uh oh!

felipecrs commented Jun 10, 2025

Uh oh!

DreamPWJ commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DreamPWJ commented Jun 11, 2025

Uh oh!

felipecrs commented Jun 11, 2025

Uh oh!

DreamPWJ commented Jun 11, 2025

Uh oh!

felipecrs commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DreamPWJ commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DreamPWJ commented Jun 11, 2025

Uh oh!

timja commented Jun 11, 2025

timja commented Jun 2, 2025 •

edited

Loading

DreamPWJ commented Jun 9, 2025 •

edited

Loading

timja commented Jun 10, 2025 •

edited

Loading

DreamPWJ commented Jun 11, 2025 •

edited

Loading

felipecrs commented Jun 11, 2025 •

edited

Loading

DreamPWJ commented Jun 11, 2025 •

edited

Loading