Design of Operations Dashboard

This issue is intended to serve as as the ~"design artifact" for our Operations Dashboard MVC, defined here: https://gitlab.com/gitlab-org/gitlab-ee/issues/5781

To retain a SSOT, we should keep the discussion and iteration on the description in that issue.

Designs

Set as the default dashboard

You can set "Operations dashboard" as the default dashboard on Settings > Preferences (https://gitlab.com/profile/preferences).

02-set-as-default-dashboard

Operations dashboard

  • It is at the instance level, so you can access it on the main navigation.
  • It shows two projects in each row.
  • You can add/remove projects directly on the dashboard.
  • Add projects: Paste the project link to the input field and click "Add projects".
  • Remove projects: Click ellipsis-v icon and click "Remove" in the dropdown menu.
Default Add projects
01-operations-dashboard 01.2-operations-dashboard--add-projects
Empty state
  • Title: Add a project to the dashboard
  • Subtitle: The operations dashboards provides a summary of each project operational health, including pipeline status and Apdex score.
  • SVG: illustrations/operations-dashboard_empty.svg in gitlab-svgs

00-operations-dashboard-empty

Out of scope - Add projects to the dashboard by starring them
    You can choose to:
  • only add the project to the starred projects.
  • add the project to both the starred projects and operations dashboard.

03-add-project-to-dashboard

Edited by Hazel Yang