Design: Show all jobs in the pipeline graph and add progressive loading when a stage has 100+ jobs
Release notes
Problem to solve
The pipeline graph only shows up to 100 jobs per stage. It's possible to create more than 100 jobs per stage, but we don't show them in the graph. Developers want to see all jobs in the pipeline graph.
Intended users
Metrics
N/A
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 -
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)
-
-
Update issues/epic descriptions -
The appropriate labels were applied -
If changes involve copy, add the Technical Writing and UI text labels
-
-
-
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 experience goal
When I'm investigating my pipeline run I want to see all jobs in one place so I have the full picture of how the pipeline is working.
Proposal
Add progressive loading to the pipeline graph so we load 100 jobs at a time. If you have 150 jobs in a stage, we will load the remaining 50 jobs once you scroll down to the bottom of the graph. Hitting the bottom of the graph would automatically trigger the loading and a spinner would appear. Here are the detailed guidelines for spinner usage.
- Spinner variant is
md
dark
- Label is
Loading more jobs...
- A 100ms delay occurs before showing a spinner to mitigate unnecessary spinners showing up at the same time when load times are minimal.
- While a spinner visually indicates that a process is happening, it should also be announced by assistive technology through the use of aria-live. See the WAI-ARIA aria-live documentation for more details.
Rough prototype |
---|
Permissions and Security
This change doesn't affect permissions.
Documentation
We need to check if the 100 job limitation is documented.
Availability & Testing
Available Tier
- Free
What does success look like, and how can we measure that?
What is the type of buyer?
Is this a cross-stage feature?
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.