GitLab version 13.8 was released on Jan 22, 2021 and ships with a new Pipeline Editor feature. Let’s look into it.
Pipelines in CI/CD systems are traditionally created in text form. Whether Jenkins, CircleCI or GitLab – you usually start your pipeline in your favourite text editor. With CI/CD processes gaining more attention by all kinds of developers, this practice is now questioned since text-based formats are said to be less user-friendly than graphical UIs.
GitLab’s vision is to have a more visual CI/CD experience
In their 3 year vision plan, the GitLab team describes very openly how they want to transition from the current YAML-based approach of defining pipelines to a more visual way. They claim that needing to know the YAML syntax (a very widespread format for pipelines) results in a steep learning curve that makes the CI/CD experience of GitLab difficult for first-time users.
They have created a UI mockup that shows how such a visual pipeline builder may look like in the future:
This approach may look very familiar to users of Azure DevOps by Microsoft. Interestingly, Microsoft started with a visual pipeline editor and is now transitioning to a YAML-centric approach with Release Pipelines.
The newly released editor is currently read-only
In a perfectly agile fashion, GitLab is not releasing the whole editor at once but right now focuses on the visualisation of the pipeline. The feature name “pipeline editor” is a bit misleading; right now, it can only be used to visualise existing pipelines; we need to be patient for a real editing experience.
Here is a quick demonstration of the new editor. The UI consists of three tabs, “Write pipeline configuration”, “Visualize” and “Lint”. The first tab consists of a text editor that is preloaded with the .gitlab-ci.yml file:
For demo purposes, I created three stages (build, config, release) and three jobs (one for stage release, two for build and none for config). GitLab’s editor automatically applies syntax highlighting and helps the user with indentation.
The “Visualize” tab represents each pipeline stage together with each job:
As expected, the two stages “build” and “release” are displayed with their respective job(s). The “config” stage is left out because it currently contains no jobs.
Finally, the “Lint” tab indicates whether your yml syntax is correct and provides a more explicit textual representation of each job:
An interesting take with much room for improvements
I really like the direction of making CI/CD more accessible to first-time users and how GitLab rolls out this feature piece by piece. However, the much more interesting part of this experience will be the editing capability. I’m looking forward to how their UI team will handle configuring directed acyclic graph (DAG)-based configurations (where steps can be defined with a “must be executed before” relation). Stay tuned for more updates.