Add pipeline graph

What does this MR do?

Adds pipeline visualization

What are the relevant issue numbers?

Closes #18141 (closed)
Part of #19982 (closed)

Screenshots (if relevant)

mentioned in issue #19982 (closed)

Added 2 commits:

• 3ab78df3 - Add min width and horizontally scroll pipeline graph when overflow
• 02ee8d71 - Truncate build names

Added 37 commits:

• 02ee8d71...37013c6d - 31 commits from branch master
• 3b4fb0bb - Add build data to top of pipeline page
• dcb7d414 - Connect top level tests to each other
• 83c1ce74 - Connect all builds in visual pipeline
• a76864cc - Add min width and horizontally scroll pipeline graph when overflow
• 5bc4c7fd - Truncate build names
• ba6f8900 - Truncate stage name

Added 1 commit:

• aeacadb3 - Truncate build and stage names

Added 2 commits:

• 94ca1e3e - Fix graph scrolling bug
• ef767268 - Fix scss lint error

OMG this is exciting!

@annabeldunstone Are you going to be able to get the curved lines matching Hazel's mockups? i.e. curving at both ends.

Before I forget, we should have some kind of confirmation before manual actions are performed. I've accidentally triggered deploys because sometimes the play button brings up a dropdown of actions, and sometimes it runs the actions immediately. Think we could have a drop-down everywhere? For this MR, that means on any nodes in the graph that are skipped manual actions. I'm not sure the dropdown will look nice in this graph since it's different than our usage of buttons elsewhere.

Yeah still working on getting it to curve at the top in the opposite direction using only CSS. It was taking a while so I've moved on to working on hiding/showing it, and adding whatever manual actions need to be included. I can circle back once the functionality is complete.

@annabeldunstone This looks really nice :)

Changed title: WIP Resolve "Add pipeline graph and show builds in context of pipeline" → WIP Add pipeline graph

Added 303 commits:

• ef767268...f7e08ad0 - 295 commits from branch master
• bdbc3d35 - Add build data to top of pipeline page
• dfe94da0 - Connect top level tests to each other
• ca9bba29 - Connect all builds in visual pipeline
• 1b583583 - Add min width and horizontally scroll pipeline graph when overflow
• d7b3b15f - Truncate build and stage names
• e573cdfb - Fix graph scrolling bug
• 0ff0acc8 - Fix scss lint error
• 8d5dc4fa - Add toggle button to hide graph; set max-height

Added 1 commit:

• b631985a - Add links to pipeline graph

Unmarked this merge request as a Work In Progress

@ayufan Would you be able to help me get some fixtures that have a deployment option?

Sure

Added 84 commits:

• b631985a...d1da2e81 - 70 commits from branch master
• 3b4fb0bb - Add build data to top of pipeline page
• dcb7d414 - Connect top level tests to each other
• 83c1ce74 - Connect all builds in visual pipeline
• a76864cc - Add min width and horizontally scroll pipeline graph when overflow
• aeacadb3 - Truncate build and stage names
• 94ca1e3e - Fix graph scrolling bug
• ef767268 - Fix scss lint error
• fee7992c - Fix pipelines visualisation rendering
• f52f62d7 - Update fixtures to make development testing easier
• 5caf1066 - Merge remote-tracking branch 'origin/master' into 18141-pipeline-graph
• fd09311d - Update fixtures to add a created status to pipeline
• 1cd9b3b8 - Split pipeline status item for Commit Status and Build
• ae5ec791 - Merge branch '18141-pipeline-graph' of gitlab.com:gitlab-org/gitlab-ce into 18141-pipeline-graph
• 49e7070a - Add support for Play and Created jobs

Added ~149423 label

@grzesiek Could you review?

Is this change related to this MR? Shouldn't we have a separate MR for that?

Playable should be only actions that are skipped. Since this is when you can run this manual action (change the state from skipped to pending).

I'm think that we should introduce a additional status for playable actions.

Up till now I wanted to reduce number of statuses that we use, because it complicates how things works, but probably having a separate status for that makes sense.

Nice!

Added 1 commit:

• 1fd6498b - Add deploy btn in graph; fix JS to toggle one graph at a time if multiple pipelines