grafana/grafana

Dashboards (frontend)

Dashboards are the single most important UX in Grafana. The frontend currently has two dashboard implementations that coexist:

The legacy runtime under public/app/features/dashboard/ — based on the original Angular-era model, ported to React but still keyed off the DashboardModel/PanelModel classes.
The new Scenes-based runtime under public/app/features/dashboard-scene/ — built on @grafana/scenes, the long-term replacement.

Dashboards saved in the legacy v1 schema render in either runtime; v2-schema dashboards only render in dashboard-scene. A feature toggle controls which runtime opens by default.

Legacy runtime (`features/dashboard/`)

public/app/features/dashboard/
├── containers/             # DashboardPage, PanelEditor pages
├── state/                  # DashboardModel + slice
├── components/             # DashboardSettings, FolderPicker, time picker
├── api/                    # Dashboard API (REST and v2 conversion)
├── dashgrid/               # Panel grid layout
├── panel_editor/           # Side-panel editor
├── services/               # DashboardSrv, BackendDataSourceImporter
└── utils/

DashboardModel (public/app/features/dashboard/state/DashboardModel.ts) is the runtime representation of a dashboard. It owns the panels array, the variable list, the time range, and emits events on mutation. Panels (PanelModel) hold their own state machine for query execution and rendering.

The grid layout uses react-grid-layout (configured in dashgrid/) to manage drag/resize.

Scenes runtime (`features/dashboard-scene/`)

public/app/features/dashboard-scene/
├── pages/                  # Scene-aware pages
├── scene/                  # SceneObject implementations: layout, panels, controls
├── settings/               # Dashboard settings
├── panel-edit/             # Panel editor (Scenes version)
├── serialization/          # v1 ↔ v2 schema conversion
├── sharing/                # Share modals (snapshot, public, embed)
├── inspect/                # Inspect drawer
├── saving/                 # Save flow
├── solo/                   # Single-panel render endpoint
├── utils/
└── (more)

Scenes is a reactive, composable, declarative framework. Every node is a SceneObject with its own state, lifecycle, and observable updates. A dashboard becomes a tree of scenes:

DashboardScene
├── SceneTimePicker
├── SceneVariableSet
├── SceneGridLayout
│   ├── GridItem
│   │   └── VizPanel (with SceneQueryRunner)
│   └── ...
└── ...

This decouples query execution from layout, makes nested scenes easy (drilldowns), and replaces the imperative DashboardModel.events with an RxJS-style observable model.

Schema conversion

Loading a v1 JSON dashboard into the Scenes runtime requires converting it into a SceneObject tree. Saving back to v1 requires the inverse. These conversions live in public/app/features/dashboard-scene/serialization/ (frontend) and apps/dashboard/pkg/migration/conversion/ (backend, for v2 storage).

Dashboard API

public/app/features/dashboard/api/ defines the RTK Query slice for dashboards plus a v1 ↔ v2 transformer used during fetch/save. Notable file: ResponseTransformers.ts.

Time range and refresh

The time picker, refresh interval picker, and time range state are part of the dashboard runtime. In Scenes they're SceneTimeRange and SceneRefreshPicker; in legacy they live on DashboardModel.

Variables

Template variables drive interpolation across panels, queries, and titles. The legacy variable system lives in public/app/features/variables/ and integrates with DashboardModel. Scenes uses SceneVariableSet and per-variable SceneObject implementations.

Panel rendering

A panel is rendered by:

Resolving the panel plugin (by type) via getPanelPluginFromCache(...).
Running the queries via the dashboard's query runner.
Passing the resulting DataFrames into the panel's React component.

This pipeline is shared across runtimes via @grafana/data and the PanelChrome from @grafana/ui.

Migration trajectory

The codebase is gradually moving everything to Scenes. Nuances:

New features land in Scenes only.
Legacy code is still maintained for the rendering of v1 dashboards inside the legacy runtime.
Many dashboard-scene/ files have a "from-legacy" counterpart that does conversion or proxying.

Key source files

File	Purpose
`public/app/features/dashboard/state/DashboardModel.ts`	Legacy runtime model
`public/app/features/dashboard-scene/scene/DashboardScene.ts`	Scenes runtime root (illustrative path)
`public/app/features/dashboard/api/ResponseTransformers.ts`	v1 ↔ v2 transformations on the wire
`apps/dashboard/`	Backend dashboard resource (k8s-style API)