Skip to content

Make deployment & status information easier to read on environments page

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.

Problem to be solved

The table component on the Environments page is no longer able to hold all the information on this page, and in its current state it already has poor readability (#332446 (closed), #335228 (closed)), even without considering adding more information or actions (#332581 (closed), #35412 (closed), #335228 (closed)).

There is currently no way to fit more information on the page or provide a better hierarchy for it without moving away from a table for visualizing environment information.

Based on results from the recent problem validation survey on the page, this issue will focus improving usability for these needs, that users declared as some of the main reasons they visit the page today:

  • I want to see the (latest) deployment status
  • I want to check the status of my environments
  • I want to see which commits are deployed

JTBD

Tracking and coordinating deployments

When I am planning deployments or changes to production I want to make sure all my teams are informed and know what changes will be made so I can ensure our customers have a positive experience with our code/product.

Personas

Screenshots

image-1 Content clipping and poor readability at 1760px width (16" screen)

image Content clipping and poor readability at 1000px width

Proposal

Iterate the table component to display information for environments and deployments in a clear, separated fashion, making sure users:

  • Are able to see the latest deployment and latest commit for an environment
  • Are able to see the next upcoming deployment for an environment
  • Are able to understand which information refers to environment and which refers to deployment
  • Are able to find status, commit, MR, author and job information
  • Are able to find all available actions on the page

🌀 See mockups in the issues linked below in the Epic

This design proposal will inform the frontend work to refactor the Environments page (#213589 (closed))

Solves #16115

Edited by Daniel Fosco