Pipeline Mini Graph

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.

Motivation

While the Pipeline Mini Graph primarily functions via REST, we are updating the component to support GraphQL and subsequently migrating all instances of this component to GraphQL. This documentation will serve as the SSOT for this refactor. Developers have expressed difficulty contributing to this component as the two APIs co-exist, so we need to make this code easier to update while also supporting both REST and GraphQL. This refactor lives behind a feature flag called ci_graphql_pipeline_mini_graph.

Goals

• Improved maintainability
• Backwards compatibility
• Improved query performance
• Deprecation of REST support

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. Finish updating the newer component to fully support GraphQL
4. Roll out ci_graphql_pipeline_mini_graph to globally enable GraphQL instances of the component.

Implementation Details

Design Details

REST Structure

All data for the legacy pipeline mini graph is passed into the REST instance of the component. This data comes from various API calls throughout different apps which use the component.

File Structure

├── pipeline_mini_graph/
├── └── legacy_pipeline_mini_graph/
│       ├── legacy_job_item.vue
│       ├── legacy_linked_pipelines_mini_list.vue
│       ├── legacy_pipeline_mini_graph.vue
│       ├── legacy_pipeline_stage.vue
│       └── legacy_pipeline_stages.yml

Properties

GraphQL Structure

The GraphQL instance of the pipeline mini graph has self-managed data.

File Structure

├── pipeline_mini_graph/
│   ├── downstream_pipelines.vue
│   ├── job_action_button.vue
│   ├── job_item.vue.vue
│   ├── pipeline_mini_graph.vue
│   ├── pipeline_stage.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_mini_graph_query.query.graphql
│           └── get_pipeline_stage_jobs.query.graphql

Properties

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.

• pipelineEtag: Consider whether this data must be passed into the pipeline mini graph, or whether we can generate this within the component through a query.

Future Improvements

• GraphQL Subscriptions
• Show downstream pipeline jobs
• Possible redesign

View page source - Edit this page - please contribute.