Visualize DAG/hybrid DAG in pipeline view
Problem to solve
Summary
There are various display bugs in the pipeline view when a DAG is used. Relationships between steps are more fluid, but the display still works based on the older stage model. This creates confusion when there are complex job relationships.
Use a pipeline with a dag and see confusing jumble of connections between jobs. It varies based on the specific DAG configuration, but generally results in this sort of thing:
| Problem of non sensical graph |
|---|
 |
Intended users
Implementor personas
User personas
Further details
Proposal
We'll create a PoC that includes a new tab on the pipeline detail view] which showcases new DAG visualization. This will be the first step towards a new pipeline visualization model without immediately replacing the existing one and risking disrupting existing flows.
This new tab's graph visualization will focus solely on visualizing execution order in the way of dependency generations (see video) and each job's dependency lines. There will be no GitLab other data visualized apart from status and job names (so no up/downstreams, no job grouping, no stages, etc)
This will fix the core problem of troubleshooting or exploring pipeline architecture.
Additionally, it will make it easy to experiment for future iterations and additions together with FE and will enable us to build out this new graph by including more and more GitLab data elements until it can potentially replace the original graph visualisation.
| GitLab additional tab visualisation (Note: this visualisation still has artifacts) |
|---|
 |
| Reference DAG graph the mockup is based on |
|---|
 |
Backend
Create an API adjustment which yields parent information (jobs they depend on, if any) of jobs.
e.a. {job: 'release', parents: ['lint', 'build']},
Frontend
- Fix this graph to no longer have visual artifacts.
- Create a separate tab on the pipeline detail page which visualizes a new graph with mock pipeline data. We need to showcase the following data:
- Columns (dependency generation)
- Dependency connection (this is taken care of by the graph)
- Job name
- Job-status (by including a status icon before the job name)
- Make this work with the API edit created by BE and release it on GitLab.com
UX
Start working on the building blocks and logic needed to extend the new pipeline visualization, prototype, and ideate together with FE to eventually see how to replace the original graph.
Permissions and Security
Documentation
Availability & Testing
What does success look like, and how can we measure that?
What is the type of buyer?
Links / references
This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.