Project environment dashboard to view environments and deployment statuses
Problem to solve
People want to see how changes are flowing through their environments. Typically for a project there will a path to production... a review app, then maybe a stage environment, then performance testing, and ultimately production. We have all this information already, but don't currently offer a cross-project environment based view that lets you see the big picture if what you're interested in is environments. People interested in environments are people like release managers, testers, and people involved in pushing things along the path to prod. They want to know:
- Is the version they care about deployed yet?
- Is the environment not working because it's being deployed to, or because something is actually broken?
- What version of the code is deployed to the environment?
Target audience
- Parker, Product Manager, https://design.gitlab.com/research/personas#persona-parker
- Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon
Proposal
For the first MVS this is what needs to be delivered: The dashboard will display a predefined number of environments/projects:
- projects
7
- environments
3
Alerts have been pulled out into a separate issue: #36409 (closed)
Grouped environments (such as review apps) have been put in a separate issue: #35652
Add environment dashboard that shows an environment-based view of what's deployed where. This would be analogous to and operate identically to the cross-project pipeline dashboard (https://gitlab.com/gitlab-org/gitlab-ee/issues/7861). It should exist in the same place, but it should be possible to select between the pipeline and environment view.
- Important note: where releases exist for a deployed tag, the link should display and take you to the release.
Responsive - Environments dashboard | Desktop - Environments dashboard | Tooltips |
---|---|---|
Empty State | Loading items | Add items |
---|---|---|
Card anatomy
- Card title: displays the environment name. For environments with multiple live environments views grouped (such as review app), the link on the title should point to the latest updated environment. The badge should count the number of total environments in the group.
**Alert state: Same logic applied on https://gitlab.com/gitlab-org/gitlab-ee/issues/7861 **
- Cards are colored orange when:
- There are errors and current project pipeline has not failed
- Cards are colored red when:
- The current project pipeline has failed
- Cards are colored grey when:
- There are no errors and current project pipeline has not failed
- The pipeline info within a Cards is colored red (otherwise always gray) when:
- The current project pipeline has failed
- A or multiple downstream pipelines have failed
Section | Content | Interaction |
---|---|---|
1 | Environment name - as defined by the project settings | Clicking on it takes the user to the environment detail page |
2 | Badge counter | N/A |
3 | Info button | Displays tooltip on hover |
4 | View App button | Clicking on it takes the user to the live environment view |
5 | Avatar - triggerer | Displays tooltip with the user name on hover. Clicking on the avatar takes to the user profile page |
6 | Latest job (name and ID) | Displays tooltip on hover. Clicking on it takes the user to the job page |
7 | Timestamp | Displays tooltip on hover with detailed timestamp Finished. Ex: Aug 13, 2018 10:35pm GMT+0100 |
8 | Tag | Clicking on it takes the user to the tag page |
9 | Commit hash (short) | Clicking on it takes the user to the commit page |
10 | Environments alerts | N/A |
11 | Avatar - commit author | Displays tooltip with the user name on hover. Clicking on it takes to the user profile page |
12 | Commit description | If truncated, displays a tooltip with the full description on hover |
User stories
# | User Story | Acceptance Criteria | Feature |
---|---|---|---|
0 | As a user, I want to be able to navigate to the Environments dashboard, so I can start using it | Users can access the Environments dashboard by clicking the 'speedometer' menu item in GitLab.com app header. A dropdown menu option should be available listing all existing personal-level dashboards, including Environments dashboard. | 1.0 MVC Dashboard |
1 | As a user, I want to have a single point of access to the status of environments in all my groups and projects, so that I can quickly identify problem areas and work to find a solution | Users should have access to the Environments dashboard. | 1.0 MVC Dashboard |
2 | As a user, I want to see an informative empty state message when I don't have any projects added to my dashboard, so that I know what to do with it | If no project is added to the dashboard, an empty state message should be displayed. | 1.0 MVC Dashboard |
3 | As a user, I want to be able to add projects in the dashboard, so that I can manage specific data | User sees a 'Add projects' button in the page. Clicking the button should trigger a modal with the option to filter and select projects to be added in the dashboard. This modal is shared across all personal-level dashboards, meaning that a project added in the Environments dashboard view will also be added to the Pipelines dashboard view #7861 (closed). Adding a project should add horizontal section to the dashboard. Each section displays a project: a breadcrumbs menu, with the path to the project; below the breadcrumbs the stage cards. Projects are listed in the order they were added to dashboard. | 1.0 MVC Dashboard |
4 | As a user, I want to see my environments arranged by stages, so that I know which stage the job is getting executed for my environment | cards should be added for each stage listed in the project. Review environments (or environments with multiple deployment environments) should be grouped into a single card. When review environments apps are displayed, a 'info' icon should be added to the card header. Hovering the icon should display a tooltip with a helper text. | 1.0 MVC Dashboard |
5 | As a user, I want to be able to quickly go to the detail of my environments, so that I can access a complete set of information | User should be able to navigate to the environment's details page by clicking the title displayed in each card added to the dashboard. | 1.0 MVC Dashboard |
6 | As a user, I want to see my environments grouped by projects/groups in a logical layout, so that I can identify at a glance which environments belong to which projects/groups | Projects added to the Environments dashboards should be listed in the order they were added by the user (same as the backend) | 1.0 MVC Dashboard |
7 | As a user, I want to know what commits and tags are deployed in an environment, so that I know which tags are used to mark a specific commit or version of my application | A link to the latest commit in the environment should be displayed in the card. The avatar of the commit author should be displayed, as well as with the commit message. Whenever available, a link to the environment tag should be displayed in the card. User should be able to click and go to the detail view of the commit, tag, and user profile. | 1.0 MVC Dashboard |
8 | As a user, I want to see the information about latest pipeline in my environments, so that I can quickly identify problem areas and work to find a solution | A 'pipeline strip' should be displayed in each card, with the current stage the pipeline is in. Clicking on the stage icons should take the user to the detail view of the pipeline. | 1.0 MVC Dashboard |
9 | As a user, I want to see when a pipeline was finished for my environment, so that I know when my environment was last updated | The 'pipeline strip' should be updated real-time as the jobs pass/fail for the pipeline | 1.0 MVC Dashboard |
10 | As a user, I want to be able to see if a deployment is happening in an environment, so that I can decide what actions to take upon it | If a deployment is happening, the pipeline strip should display the 'deployment' stage. Once a deployment is ready, user should see a 'View App' button added to the card header. The 'View App' button should not be displayed for review environments. | 1.0 MVC Dashboard |
11 | As a user, I want to see an empty state message in the stage card when an environment has no commits or deployments to display | Given there's no activity in an environment, an empty state message should be displayed in the card . The message should read: This environment has no deployments yet
|
1.0 MVC Dashboard |
12 | As a user, I want to see if there's any alerts for my environments, so I can monitor key metrics of my apps | Given there's any alerts for my environments, an 'Alerts' helped text is displayed in the card. The alert type should modify the card's background color. If there's no alerts, no text is displayed and the card color should stay as default. Error Rate should be hidden if not configured. | 1.0 Dashboard |
13 | As a user, I want to be able to perform actions on my environments, so that I can remediate issues quickly | -- | 2.0 Dashboard |
14 | As a user, I want to be able to manage which projects are included in the dashboard, so that I might eliminate any noise from the dashboard | User should be able to remove projects from the dashboard | 2.0 Dashboard |
Technical user stories
# | User story |
---|---|
1 | As a developer, I want to be able to reuse existing components and functionality from the Operations Dashboard, so that I can ensure consistency across GitLab and speed-up my development process |
2 | As a designer, I want to be able to reuse existing components and designs from the Operations Dashboard, so that I can ensure consistency across GitLab and speed-up my design process |
3 | As a designer, I want identify and document potential reusable components and patterns, so that I can build a foundation for the Pajamas Design System |
4 | As a team, we want to build reusable components, so that they can be shared and reused next time we build our application’s UI |
Documentation
TBD
What does success look like, and how can we measure that?
Measure usage of this page
Links / references
Todo
-
The pipeline strip at the bottom -
Test in staging/production -
Enable feature flag -
Remove active feature flags in production to enable on gitlab.com