Build real-time CI status component for single pipelines
What does this MR do and why?
This MR builds a shared component pipeline_ci_status.vue for single pipelines. It utilizes a subscription to get real-time updates over websockets when ciPipelineStatusRealtime is enabled (BE controlled feature flag).
The overall goal is to eventually have all CI statuses (pipelines/jobs) in the product in-sync with real-time updates vs. delayed updates (polling).
This component can be re-used for single status locations. However when multiple statuses are used on a single view like the pipelines/jobs table we will need to instead handle the query/subscription in the upstream component.
References
Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Unchanged UI
Websocket update
How to set up and validate locally
- In rails console enable
Feature.enable(:ci_pipeline_status_realtime) - Have a local runner setup.
- Visit a project with a pipeline, view the repository page or repo home view.
- Ensure normal status displays
- Run a new pipeline and ensure the status gets updated as the pipeline status changes (without the need for refresh)
- Disable the FF and ensure normal CI status is displayed via GraphQL and subscription is not used.
Related to #516239 (closed)