Skip to content

Design: Differentiate trigger jobs from regular jobs in the pipeline graph and mini pipeline graph

Release notes

🧩 Problem

Trigger jobs are special jobs that trigger downstream pipelines. They serve a special function but look the same in the UI. For example, there's no way to tell which job triggers a downstream pipeline by looking at the pipeline graph.

This makes it difficult to troubleshoot problems with downstream pipelines.

In #353049 (closed) we'll be adding a "Retry" button to the trigger jobs which will re-run the job, thus allowing you to re-run the downstream pipeline. While it's very useful, we need to make sure that users know that the job they're retrying is a trigger job since re-running a downstream pipeline can be costly in terms of CI minutes. If a trigger job triggers a very long downstream pipelines, users may want to choose to go into the downstream pipeline and retry individual jobs instead.

Intended users

Metrics

N/A

UX definition of done ✅

Learn more about how and why we use UX Definition of Done.

Click to expand

Problem Validation Phase

  • Problem is well understood and has been validated
  • [-] JTBD is well understood and has been validated
  • [-] PM has communicated the opportunity canvas to stable counterparts and group stakeholders, including the Product Designer and Product Design Manager

Design Phase

  • Document the JTBD and UX goal in the issue/epic description
  • Explore multiple different approaches as a team 👈 We're here
  • Discuss the technical implications with Engineering
    • Identify any potential cross-team dependencies and include the DRIs in the discussions
  • [-] Identify a small set of options to validate (the change is low risk and high confidence, solution validation not necessary)
    • [-] Document the user story(ies) for the MVC
    • [-] Consider edge cases for each user story
    • [-] Create prototypes or mockups for each user story
  • Pajamas component lifecyle
    • Identify component design or pattern update/creation
    • Discuss the technical implications with Engineering
    • Pajamas issue is created (within the scope of the MVC) (issue to update the Data Vis Figma file)
  • Update issues/epic descriptions
  • Proposed solution(s) identified and documented in the issue/epic description

Solution Validation Phase

  • [-] Validate the solution to increase confidence in the proposed solution
  • [-] Document the solution validation learnings
  • [-] Product Designer has communicated the solution validation learnings to stable counterparts and group stakeholders, including the Product Design Manager
  • [-] Update the MVC proposal with relevant insights from the solution validation
    • [-] Discuss the technical implications with Engineering
    • [-] Update issue/epic description to contain or link to the findings

User story

When troubleshooting a pipeline that triggers a downstream I want to easily see which jobs trigger pipelines so I can investigate and resolve the problem.

User experience goal

It should be easy to identify the trigger job from the UI in all pages where a trigger job shows up, without unnecessarily cluttering the UI.

💡 Proposal

As the first step, we will provide a visual indication when a job is a trigger job in the pipeline graph and mini pipeline graph.

1. Mini pipeline graph 👉 See design

  • Add UI text indication that a job is a trigger job to the on-hover tooltip in the mini pipeline graph.

2. Pipeline page pipeline graph 👉 See design

  • Add a Trigger job badge to the trigger job pill. It should match the styling of the labels we use on multi-project and child pipelines.
  • The label will appear underneath the job status and name, with 8px vertical padding between the pipeline status icon and the label.
  • Give the trigger job pill a square shape with rounded corners (8px radius).
  • Apply an 8px border radius to the downstream pipeline card to match the trigger job.

🖼 View all designs

📐 Design specs in Figma

Trigger jobs UI audit

Below is the audit of all the pages where jobs show up in the UI. Trigger jobs show up in all pages except for the jobs list page, which is an odd exception that should probably be removed.

Click to expand
Page Current UI Proposed UI (tbd)
Pipelines list page image
Pipeline graph in the pipeline page image
Jobs tab on the pipeline page image
Pipeline editor page image
Jobs list page ❌ trigger jobs missing image
Commit page image
Merge request page widget image
Merge request pipelines tab image

Permissions and Security

Documentation

This change will need to be documented in the trigger jobs, child and multi-project pipeline documentation.

Availability & Testing

Available Tier

  • Free

Is this a cross-stage feature?

Yes, this feature is relevant to grouppipeline execution .

Implementation Table

Issue Issue Link
Design: Differentiate trigger jobs from regular jobs in the pipeline graph and mini pipeline graph 👈 You are here
Backend: Differentiate trigger jobs from regular jobs in the UI ✅ #356071 (closed)
Frontend: Differentiate trigger jobs from regular jobs in the pipeline graph ✅ #356330 (closed)
Frontend: Differentiate trigger jobs from regular jobs in the mini- pipeline ✅ #356331

Links / references

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by Dov Hershkovitch