Add Failed Jobs expandable widget to GraphQL MR Pipelines page

Summary

As part of the migration of MR Pipelines migration to GraphQL (&14144) • Sahil Sharma • 18.7, we need to implement the Failed Jobs expandable widget that currently exists in the REST-based MR Pipelines page.

Background

The current REST-based MR Pipelines page (legacy_pipelines_table_wrapper.vue) includes an expandable "Failed Jobs" section that appears below each pipeline row when the pipeline has failed jobs. This widget provides quick visibility into which jobs failed without navigating to the full pipeline details page.

The GraphQL-based pipelines page does not yet have this functionality implemented.

What needs to be done

Implement the Failed Jobs widget for the GraphQL MR Pipelines page to:

  1. Display failed jobs count - Show a badge with the number of failed jobs for each pipeline that has failures
  2. Expandable row details - Allow users to expand/collapse the failed jobs section for each pipeline
  3. List failed jobs - Display the list of failed jobs with relevant information (job name, status, stage, etc.)
  4. Support job actions - Enable users to retry failed jobs directly from the widget
  • Failed jobs widget component: app/assets/javascripts/ci/pipelines_page/components/failure_widget/pipeline_failed_jobs_widget.vue
Edited by Sahil Sharma