Design: Integrated pipeline editor and visualization experience
Problem
- The Pipeline Editor provides a pipeline visualization that allows you to see the overall pipeline architecture and dependencies, but it doesn't provide the detailed information about the jobs like when it runs, what type of job is it, what script it runs, etc.
- The visualization can be used to preview an existing CI/CD YAML structure, but it's not connected to the YAML in a sense that you can't easily navigate from a job in a visualization to its code or details to edit them.
Research
Dovetail insight: Pipeline visualization can bring more value by showing additional job information and by connecting it to the relevant YAML parts
WIP Proposal
Pipeline visualization can be very helpful for making it easier to learn CI/CD syntax if we can connect specific parts of the visualization to the specific parts in YAML.
The next step for evolving the pipeline visualization in the pipeline editor could be to connect the jobs in the visualization to their YAML in the editor.
Hypothesis is that for new users it'll make it easier to see which parts of YAML define which jobs. For advanced users with a large configuration, an interesting use case could be to investigate the dependencies for the jobs in the visualization, then drill into the YAML for specific jobs to edit the dependencies to increase pipeline efficiency.
We could also allow to navigate back to the visualization from the YAML, to see the job within the overall pipeline architecture, to get an overview of its dependencies, etc.
The visualization in this prototype is styled to look more like the visualization we have in the pipeline detail page.
Once it's possible to go from a job in a visualization to its YAML in the editor, we could explore making job parameters more "human readable" by providing a job detail view. Clicking edit would take you to the job's YAML in the editor. Creating this additional layer of abstraction would make it easier for new CI/CD users to make a connection between a specific job setting and its YAML definition.
This GIF illustrates the idea with a more complex job to show different job parameters in the detail view. Clicking "edit" opens up the editor with the job highlighted.