Pipeline Mini Graph

This page contains information related to upcoming products, features, and functionality. It is important to note that the information presented is for informational purposes only. Please do not rely on this information for purchasing or planning purposes. The development, release, and timing of any products, features, or functionality may be subject to change or delay and remain at the sole discretion of GitLab Inc.
Status Authors Coach DRIs Owning Stage Created
ongoing bsandlin ntepluhina dhershkovitch nmezzopera devops verify 2024-05-27

This blueprint serves as living documentation for the Pipeline Mini Graph. The Pipeline Mini Graph is used in various places throughout the platform to communicate to users the status of the relevant pipeline. Users are able to re-run jobs directly from the component or drilldown into said jobs and linked pipelines for further investigation.

Pipeline Mini Graph

Motivation

The Pipeline Mini Graph originally relied on REST for its functionality. We have updated the component to support GraphQL and are in the process of migrating all instances to this API. This documentation will act as the single source of truth (SSOT) for the refactor. Developers have found it challenging to contribute to the component due to the coexistence of two APIs, making it essential to simplify the code while ensuring compatibility with both REST and GraphQL.

Goals

  • Improved maintainability
  • Backwards compatibility
  • Improved query performance
  • Deprecation of REST support
  • Real-time pipeline status updates

Non-Goals

  • Redesign of the Pipeline Mini Graph UI

Proposal

To break down implementation, we are taking the following steps:

  1. [COMPLETE] Separate the REST version and the GraphQL version of the component into 2 directories called pipeline_mini_graph and legacy_pipeline_mini_graph. This way, developers can contribute with more ease and we can easily remove the REST version once all apps are using GraphQL.
  2. [COMPLETE] Optimize GraphQL query structure to be more performant.
  3. [COMPLETE] Finish updating the newer component to fully support GraphQL
  4. [COMPLETE] Roll out ci_graphql_pipeline_mini_graph to globally enable GraphQL instances of the component.

Implementation Details

Issue Milestone Status
Move legacy files to new directory 17.1 ✅
Move remaining legacy code 17.1 ✅
Create README for PMG 17.1 ✅
GraphQL Query Optimization 17.1 ✅
Dedicated component for downstream pipelines 17.1 ✅
Fetch Stage by ID 17.2 ✅
Job Item 17.2 ✅
Job Actions 17.3 ✅
Rollout ci_graphql_pipeline_mini_graph 17.8 ✅
Migrate pipeline editor PMG to GraphQL instance 17.8 ✅
Migrate commit page PMG to GraphQL instance 17.8 ✅
Remove dead logic from PMG codebase TBD To Do
Migrate MR PMG to GraphQL instance TBD To Do

Design Details

Structure

All data for the pipeline mini graph is passed into the component. This data comes from various API calls throughout different apps which use the component. The data passed in is formatted to GraphQL structure within the entry file. All API calls which then occur in the component itself are GraphQL queries/mutations.

Properties

Name Type Required Description
downstreamPipelines Array false pipelines triggered by current pipeline
isMergeTrain Boolean false whether the pipeline is part of a merge train
pipelinePath String false pipeline URL
pipelineStages Array true stages of current pipeline
upstreamPipeline Object false upstream pipeline which triggered current pipeline

File Structure

├── pipeline_mini_graph/
│   ├── downstream_pipelines.vue
│   ├── pipeline_mini_graph.vue << entry point
│   ├── pipeline_stage_dropdown.vue
│   └── pipeline_stages.vue
├────── graphql/
│       └── fragments/
│           └── job.fragment.graphql
│       └── mutations/
│           ├── job_cancel.mutation.graphql
│           ├── job_play.mutation.graphql
│           ├── job_retry.mutation.graphql
│           └── job_unschedule.mutation.graphql
│       └──queries/
│           └── get_pipeline_stage_jobs.query.graphql

Considerations

Properties
  • isMergeTrain: This property is specific to the MR page and is used to display a message in the job dropdown to warn users that merge train jobs cannot be retried. This is an odd flow. Perhaps we should consider either having this data come from somewhere else within the pipeline mini graph, or living in the merge train widget itself. It is worth noting here that this boolean is not used for any other logic outside of displaying this message.

Future Improvements

Last modified January 8, 2025: Update pipeline mini graph architecture (a28beb38)
View page source - Edit this page - please contribute. Creative Commons License