Skip to content

Add visualization functionality to Authoring home

Frédéric Caplette requested to merge fc-ci-viz-tab into master

What does this MR do?

We are adding a ci config visualization that takes the blob content of the ci config file and send it to the API for linting. The returned result is a payload with stages, groups, jobs and their needs which we parse and then render jobs and links to show what the graph actually looks like.

To note that this functionality already existed behind a flag in the repository view, but its release was delayed due to concerns of how we parsed the data (on the FE vs on the BE) and therefore this MR doesn't change much of how it's parsed, but rather took the existing component and moved it in the right section. We are also plugging it with the graphQL api that parses the YML instead of parsing it on the client side.

To note that this MR doesn't add E2E test simply because currently, there is nothing to test from that point of view. The only interaction a user can do is hovering on a job pill and seeing the highlight. It could be a nice to have to test, but it will require some serious thought. That plus the fact that this feature will change drastically in the following months made me think it was not worth the effort as is. The best solution would be visual testing, which we will explore soon as a team outside of this MR.

This is behind a feature flag so we don't need a changelog.

To test

This is behind two feature flags. One is to enable the new pipeline authoring home, which is necessary to go in the Pipeline Editor section in our nav under Ci/CD and the other is to enable the tab in which the visualization is rendered. This is to ensure that we can turn it off independently if something was to go wrong.

  1. Enable the editor page feature flag in your rails console rails c, then Feature.enable(:ci_pipeline_editor_page)
  2. Enable the visualization tab Feature.enable(:ci_config_visualization_tab)
  3. Navigate under CI/CD to the editor section
  4. Add a valid CI configuration. Here is one pretty basic:
stages:
  - prepare
  - optimize
  - build
  
prepare_1:
  script: "echo hello"
  stage: "prepare"
prepare_2:
  script: "echo hello"
  stage: "prepare"
prepare_3:
  script: "echo hello"
  stage: "prepare"
prepare_4:
  script: "echo hello"
  stage: "prepare"
optimize_1:
  script: "echo hello"
  stage: "optimize"
  needs: ["prepare_2"]
optimize_2:
  script: "echo hello"
  stage: "optimize"
  needs: ["prepare_3"]
optimize_3:
  script: "echo hello"
  stage: "optimize"
  needs: ["prepare_3"]
build_1:
  script: "echo hello"
  stage: "build"
  needs: ["prepare_2"]
build_2:
  script: "echo hello"
  stage: "build"
  needs: ["optimize_2","prepare_2"]
  1. Click on the visualize tab
  2. You should see the graph!
  3. Hover on a node with dependencies to see it highlighted
  4. If you modify the yml file, the visualization will update itself automatically and when you go back in the tab, you should see the updates
  5. If the configuration is invalid, there will be a message at the top to say so and the graph will not render (we cannot construct it if the config is invalid.

Screenshots (strongly suggested)

Before After
Screen_Shot_2020-12-08_at_10.08.06_AM Screen_Shot_2020-12-01_at_2.22.13_PM

|

Demo

Screen_Recording_2020-12-09_at_11.51.42_AM

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Frédéric Caplette

Merge request reports