Cross-Project Pipeline Dashboard MVC
Problem Statement
A dashboard can be useful to see the overall status of your pipelines (and other information) in a simple way, which lets you see trouble areas that might your attention at a glance. Right now in order to do this you'd have to either be monitoring email closely to look for pipeline failures and keep track of trends in your head, or go to each of the project pages and look at the pipeline history manually.
Use Cases
- Team manager who wants to see if all the pipelines for the teams he manages are green, so that he can go ask about any that look like they are in trouble. This user would probably be mostly interested in one group. One use case still to think about is what if a company has just one or two very large repos that everyone works in - this will be less useful because the whole company is working in one space.
- Portfolio manager who wants to know how overall development for the company is going, so is looking potentially across even multiple groups.
Proposal
- Implement a specific view for pipelines (including multi-project pipelines) that is suitable for TV monitors
- You should be able to drill down from an individual tile to the pipeline page.
- Allowing users to select what they are interested in from across the instance. Could be, to keep it simple, starred projects for a user.
- For the MVC, we're only going to report on master but a future iteration could include a view into branch development.
Solution
Functionality
Dashboard functionality:
- Adding/deleting project
- Search bar for adding projects deleted and converted to a button + modal (this also applies to operations dashboard)
- Grid positioning
- All tiles are equally big
- Tiles are preferable to width in the mockups (Let's experiment with responsive size if width just exceeds columns)
- On mobile it becomes a list with 100% width tiles
- Skeleton loading
- Information showed:
- Project (Grey if not failed, red if failed)
- Project avatar
- Namespace name
- Project name
- Error Rate (hidden if not configured)
- Triggerer avatar
- Ref (default branch only for now)
- Commit
- Hash
- Author avatar
- Commit message
- Time ago pipeline finished (changed from started time and hidden if pipeline is running)
- Pipeline info (link towards respective project pipelines):
- Upstream Pipeline status icon + arrow (if any)
- Current project Pipeline status badge
- Downstream Pipeline status icons + arrow (if any)
- These are expanded upon hover (work similar to comment avatars in diffs))
- Empty state widget when no commit on branch
- Empty state widget when no pipeline config active on branch
- Poll time 2 min is fine for now
- Project (Grey if not failed, red if failed)
Additional notes:
- Widgets are colored orange when:
- There are errors and current project pipeline has not failed
- Widgets are colored red when:
- The current project pipeline has failed
- Widgets are colored grey when:
- There are no errors and current project pipeline has not failed
- The pipeline info within a widgets is colored red (otherwise always gray) when:
- The current project pipeline has failed
- A or multiple downstream pipelines have failed
Out of scope for now:
- New pipeline badges gitlab-design#138 (closed) (let's use legacy ones)
- Mini pipeline graph
- Multiple dashboards
- Change of ref (towards tag or other branch than the default one)
- Adjusting positions
Specs
Mockups
Concourse Example
Concourse shows a overall view of status of selected services. The key items it's showing are:
- Status of up to the last 3 pipelines (whether they were success or fail)
- If a pipeline is in progress now, what is it's status (pending, running, etc.)
- If not - how long since the last one finished?
- An overall status based on if the last 3 pipelines were green
Edited by Dimitrie Hoekstra