Add heat map widget to environments dashboard for at scale view of all environments

Problem to solve

As a user of environments across many projects, I would like to go to the existing Environment Dashboard to see the health or status of all the environments in my group.

Users often need to be able to see at a quick glance the health of their environments at scale (more then 3 environments across 7 projects). Today, the environment dashboard would not meet this need of a quick overview for users all environments in a group.

Intended users

User experience goal

Display a 24h heatmap of available/stopped production environments (per group) in the environment dashboard.

UX DoD (Definition of Done)

❗ Do not remove this expandable section.

Click to see the UX DoD (Definition of Done) tasks 🔽

Entry Criteria for Design

  • Problem has been validated
  • Has UX effort accounted for in long term cycle, we know unknowns

Criteria for UX DoD

  • UX label is added to the issue
  • User stories and acceptance criteria have been created
    • Edge cases were considered
  • Cross-team dependencies have been identified, if applicable
  • Prototype or mock for each user story have been created
    • Empty states
    • Responsiveness
  • If changes involve copy, UI text label has been added
  • Pajamas: UI Component design have been identified
    • Pajamas issue is created (new workflow)
  • Marked as Ready for engineering evaluation per user story moved into workflowplanning breakdown & needs weight

Entry Criteria for Ready for Development

  • Scope has been defined and reviewed with engineering
  • User stories have been weighed and are less than 5 MRs
  • Create new issues for follow up user stories

Criteria for Engineering DOD (in addition to defined process)

  • UX review for MRs that include user experience changes - mandatory for frontend that has impact to UI/UX
  • Update SSOT in issues:
    • Update prototypes of deliverables
    • Add link to documentation
  • Create new issues for follow up and open scope

Proposal

👁 SEE FIGMA PROTOTYPES

Add a heat map widget to the existing environments dashboard that color codes the production environment's pipeline, where the x axis is hours and the y axis is a single production environment per project in a group. We only display production environments with deploy jobs.

The user should be able to select different groups using a dropdown component -- which should update the heatmap widget.

We want to break the environment dashboard view into two distinct sections:

  1. The heat map view of environments (this feature).
  2. The existing environment dashboard with the mechanism to configure the cards for projects only.

Acceptance criteria

Example

In the example below, user is able to see the status of their deployments to production for all projects under the gitlab-org group in the last 24h.

heat map dropdown selection
heat-map--default heat-map--dropdown

Further details

  • As a first iteration, we will only be mapping the latest successful deployments in each environment - each time stamp of available or stopped would be a block in the heat map. Each environment ID would have a row in the heat map.
  • User can make a group selection. But all projects in the groups and subgroups should be available to users in the heat map.
  • We will only support production environments for now.
    • Dynamic environments would be excluded from this MVC.
  • We only want to show production environments for the user’s access roles (permission)
  • We will likely create a follow up issue for Styling & Pajamas Implementation.

Out of scope

  • As an MVC, we will have no interactions from this. The heat map will be just a static chart with realtime status of all the environments in the group. We may choose to add:
    • Filters on project
    • Filters on Stage
    • Filters on Available/stopped
    • Filters on Geo-location
  • For now, users can only see the status of production environments. In the future, we would like to allow them to select different environment types using the dropdown component.
    • When the user selects the dropdown combination (group + environment): show only the status of my environment when a deployment is created for project and production, or test, or whatever.
    • If we want to display all environments: Each environment has a name, and also belongs to a specific project. Without this context, this graph view becomes a bit useless.

Concerns

  1. Usability: if this page becomes all about displaying a visual interpretation of the statuses of all your environments, it will probably occupy most of the available display area in the page and impact the existing cards displayed in the dashboard. We're also assuming that each square = 1 environment, but a group can have N number of environments that are available or stopped in the last 24h. So that means the y-axis would have sub-rows?
  2. ❓ Question: I wonder if this could help with the performance issues? As in, the data would only load once the user expands/collapses or triggers an specific area in the UI? @krasio
  3. You could still have 20.000 deployments/environments across 1.000 projects in 200 groups... which could still be a challenge.

Documentation

We would need to add a blurb to the existing Environments Dashboard page

What is the type of buyer?

Edited by Rayana Verissimo