Skip to content

Design: Make pipelines use full-width and show full job names

🧩 Problem

Pipelines can be quite wide, however they show in a fixed-size rectangle. Also, all job names are cropped to be of a fixed width as well. Developers want to see more of the pipeline graph and see full job names. It would make large pipelines easier to navigate.

🎨 Proposal

1. Set the pipeline page width to fluid layout by default.

This will allow us to show more of the pipeline graph and utilize the extra space to let the content breathe a bit.

2. Make the job pill width dynamic based on the job name length.

The job width should be dynamic to allow to create a more flexible pipeline graph layout based on your job names, and to show full job names in most cases.

Jobs can take on the length between 120px and 400px based on their length. All jobs in the same column will be the same length, based on the longest job in the column. If a the longest job in the column is longer that 400px, we'll truncate the name, and all jobs in the column will be 400px long.

It'll allow us to show most jobs with full names for most users, while truncating the very long job names that are probably machine generated.

🖼 Mock-ups

These mock-ups show the old pipeline graph (before we introduced the job dependencies view), but the same design would apply to the new graph.

Additional notes, not shown in the mock-ups:

  • The column width will vary between 120px and 400px depending on the width of the job with the longest name in that column.
  • If the job name is long enough to extend beyond 400px, we'll truncate the job name.

Screen_Shot_2020-02-12_at_18.33.29

For reference, this code was provided by the issue author. Our implementation will differ to accommodate for the proposed changes.

Expand code

This code will make any pipeline show like in the first image (and remove tooltips which aren't needed when names aren't truncated):

// Full width pipeline
$('head').append('<style type="text/css"> .container-limited { max-width: 100%!important; } </style>')
// Do not crop names
$('head').append('<style type="text/css"> .pipeline-graph .build { width: auto!important; } .ci-status-text { max-width: 100%; margin-right: 35px } </style>')
// Hide tooltips
$('head').append('<style type="text/css"> .bs-tooltip-bottom { display: none; } </style>')
Edited by Nadia Sotnikova