Visualization of .gitlab-ci.yml static file (MVC)
Description: A complex CI configuration can be difficult to understand when trying to imagine how your pipeline might behave (or misbehave). Without a visual aid, it could be impossible to form a mental image of all the dependencies between countless jobs. In our first iteration of pipeline visualization, you can now see a graphic representation of your .gitlab-ci.yml file. Then you can decide for yourself if a picture really is worth a thousand words.
Problem to solve
.gitlab-ci.yml file can be difficult to understand, even for the original author if it is a complex CI configuration. Without a visualization of the pipeline that is created by a yml file, it could be hard to imagine how the pipeline might behave.
- Sasha (Software Developer)
- Devon (DevOps Engineer)
- Any user trying to understand a CI yml file without running the pipeline
User experience goal
When a user is viewing (not editing) a CI yaml file in a simple editor they should have the option to see a graphic representation of the file.
Translate the .gitlab-ci.yml file into a graphic visualization when viewing the static, checked-in file in the simple editor (https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/.gitlab-ci.yml).
This first iteration of the feature is a view only representation with these elements:
- From the static view of .gitlab-ci.yml file, add method for user to click to a graphical visualization of the file
- Show stages and differentiate between stages with jobs and those without
- Show jobs under the stage to which they belong
- Show dependency between jobs (those using
needskeyword) with a visual connecting line
See Design section for most current illustrations.
This graph is built to replace the current pipeline graph eventually once it is prove to work well. There first effort to use thi graph as the new pipeline view is being made in a spike here:
Permissions and Security
Availability & Testing
Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance.
- Unit test changes - yes, there should be unit test for new added logics
- Integration test changes - yes, there should be frontend integration tests to make sure components are rendered
- End-to-end test change - not required