ContextQMD
Back to Gitlabhq

Dashboard layout framework

doc/development/fe_guide/dashboard_layout_framework.md

18.11.23.0 KB
Original Source

{{< details >}}

  • Tier: Free, Premium, Ultimate
  • Offering: GitLab.com, GitLab Self-Managed, GitLab Dedicated

{{< /details >}}

{{< history >}}

{{< /history >}}

The dashboard layout framework is part of a broader effort to standardize dashboards across the platform as described in Epic #13801.

For more in depth details on the dashboard layout framework, see the architecture design document.

Rendering dashboards

To render dashboard layouts it's recommended to use the GlDashboardLayout component. It provides an easy way to render dashboards using a configuration which aligns with our Pajamas guidelines.

Panel guidelines

You are free to choose whichever panel component best suits your needs. However, to ensure consistency with our design patterns, it's strongly recommended that you use one of the following components:

Migration guide

Migrating an existing dashboard to the GlDashboardLayout should be relatively straightforward. In most cases because you only need to replace the dashboard shell and can keep existing visualizations. A typical migration path could look like this:

  1. Create a feature flag to conditionally render your new dashboard.
  2. Create a new dashboard using GlDashboardLayout and extended_dashboard_panel.vue.
  3. Create a dashboard config object that mimics your old dashboard layout.
  4. Optionally, use GlDashboardLayout's slots to render your dashboard's filters, actions, or custom title or description.
  5. Ensure your new dashboard, panels, and visualizations render correctly.
  6. Remove the feature flag and your old dashboard.

See the basic implementation on Pajamas for an example on how to render existing visualization components using the dashboard layout component.

Example implementations

Real world implementations and migrations using the GlDashboardLayout component:

  • New group security dashboard added in MR !191974
  • New project security dashboard added in MR !197626
  • New compliance center added in MR !195759