Add real-time stage status updates to MR pipeline mini graph

Sahil Sharmarequested to merge
realtime-mr-stage-status-subscription into master

What does this MR do and why?

This MR implements real-time stage status updates for the MR Pipelines page via GraphQL subscriptions, and adds optimized single-pipeline refetch for job/pipeline actions.

Background

This is part of the MR Pipelines migration to GraphQL epic, which aims to migrate the MR Pipelines tab to use GraphQL. As part of this migration, we're leveraging GraphQL subscriptions to make the pipeline mini graph real-time, providing an improved user experience. Previously, we implemented real-time updates at the pipeline level. This MR extends that work to individual stage statuses.

Solution

  1. Stage subscriptions: Subscribe to ciStageStatusUpdated GraphQL subscription so stage icons update immediately when their status changes. To minimize WebSocket overhead, we only subscribe to "alive" stages (running, pending, etc.) and automatically unsubscribe when a stage reaches a terminal status.

  2. Single pipeline refetch: When a job or pipeline action is triggered (retry, cancel, play), we now refetch only the affected pipeline instead of refreshing the entire table. This enables stage subscriptions to reactivate when a completed stage becomes alive again (e.g., job retry).

  3. 30-second polling backup: Reduced polling frequency from 10s to 30s as a backup mechanism, since real-time updates are now handled by subscriptions.

References

Screenshots or screen recordings

Before After

How to set up and validate locally

  1. Ensure backend MR !224756 (merged) is merged or cherry-picked locally
  2. Open a merge request and trigger a new pipeline
  3. Observe the pipeline mini graph - stage icons should update immediately as jobs progress
  4. Open browser dev tools → Network → WS → find cable connection
  5. Verify ciStageStatusUpdated messages appear when stages change status
  6. Verify that completed stages (success/failed) do not have active subscriptions
  7. Retry a job on a completed stage - verify the stage resubscribes and updates in real-time

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Sahil Sharma

Merge request reports