Skip to content

Pipeline tabs migration - Failed jobs tab

What does this MR do and why?

Behind the disabled feature flag pipeline_tabs_vue, we now have Vue tabs in the pipeline page instead of Haml. However given how big the work is, we have divided each tab content into its own issue and MR. This specific issue is to migrate the failed jobs tab content to Vue.

We now pass the data from the rails helper method to the Vue app for the pipeline tabs and update the tests to now run for both the disabled and enabled pipeline_tabs_vue feature.

Note that we used to show the jobs app inside the failed jobs app. There is a reason for this, but it's long not relevant 😅 Just know that when looking at the before/after screenshot, what you see in the before is the job app (which is identical to what is in the jobs tab) and was mistake essentially. Now we show the failed jobs tab, which is what we want 👌🏻

Screenshots or screen recordings

Before After
Screen_Shot_2022-05-31_at_6.52.50_PM Screen_Shot_2022-05-31_at_6.51.00_PM

How to set up and validate locally

  • Make sure you have runners setup locally: https://docs.gitlab.com/runner/configuration/macos_setup.html#set-up-macos-runners
  • Enable pipeline_tabs_vue feature flag
  • Go to the pipeline page
  • To to a pipeline with no failures
  • Notice that the tab is not there! 🎉
  • Pass the following query param to the url: ?tab=failures
  • Hit enter
  • Notice that you are taken to the pipeline tab 🎉
  • Setup your pipeline to have at least one failed. The best way to quickly achieve this is by giving your Ci config file a job with exit status of 1:
failed_job:
  script: exit 1
  • Run your pipeline
  • Go to the pipeline page
  • Notice the failures tab! 🎉
  • Notice that the jobs tab has a badge component with the total number of failed jobs
  • Click on failed jobs
  • Notice that it loads! (Lazy loading is working 🎉)
  • The failed jobs page content should be exactly the same as without the flag on

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #360798 (closed)

Edited by Frédéric Caplette

Merge request reports