gitlab-foss/doc/development/fe_guide/dashboard_layout_framework.md

stage, group, info, title

stage	group	info	title
Monitor	Platform Insights	To determine the technical writer assigned to the Stage/Group associated with this page, see https://handbook.gitlab.com/handbook/product/ux/technical-writing/#assignments	Dashboard layout framework

{{< details >}}

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

{{< /details >}}

{{< history >}}

• Introduced in GitLab 18.1.

{{< /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:

• GlDashboardPanel: The official Pajamas dashboard panel
• extended_dashboard_panel.vue: Extends GlDashboardPanel with easy alert styling and i18n strings

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 GitLab UI 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