Datasources UI

This page covers the Grafana app surfaces around datasources — listing, configuring, testing — not the per-datasource frontend plugins. For those, see Built-in plugins and Datasources & queries (backend).

Layout

public/app/features/datasources/
├── pages/                    # ListDataSources, NewDataSource, EditDataSource
├── components/               # Settings forms, picker, query editors host
├── api/                      # datasources RTK Query slice
├── state/                    # legacy slice (selected ds, settings)
├── utils/                    # validation helpers
└── mocks/

public/app/features/connections/
├── pages/                    # Connections home, datasource list, type picker
├── tabs/                     # Per-tab views (Data sources, Add new, Plugins)
├── api/
└── ...

The "Data sources" entry in the side nav goes through connections/, which is the newer, broader "connect anything" experience that wraps datasources, plugins, correlations, and the cloud "Add new" wizard. The classic per-datasource settings pages still live under features/datasources/.

Add datasource flow

graph LR
    Connections[connections/Add new] --> Picker[Type picker]
    Picker --> Plugin[Plugin's ConfigEditor<br/>from public/app/plugins/datasource/<id>/]
    Plugin --> Save[saveDataSource via backendSrv]
    Save --> Test[runHealthCheck]
    Test --> Done[redirect to ListDataSources]

The type picker is driven by the plugin store: every installed datasource plugin is a candidate. Once a type is chosen, the plugin's ConfigEditor React component is rendered in a generic frame that handles save / test / delete.

Per-datasource settings

A datasource's settings page is a composition of:

• The shared <DataSourceSettingsPage> chrome (basic name, default flag, access mode).
• The plugin-provided ConfigEditor (whatever fields the plugin needs).
• A standardized "Save & test" footer that runs the plugin's health check.

Plugins implement ConfigEditor against the DataSourcePluginOptionsEditorProps from @grafana/data.

Default datasource

There's a per-org "default" datasource (used when a panel doesn't specify one). It's a flag on the data_source row server-side. The UI exposes this as a checkbox on the settings page.

Permissions

Datasource permissions (which users/teams can query a datasource) are exposed as a tab on the settings page. Backed by the generic pkg/services/accesscontrol/resourcepermissions/.

Health checks

The "Test" button calls /api/datasources/uid/<uid>/health which dispatches to the plugin's CheckHealth handler over gRPC. Result is a status (OK, Error) plus a message.

Mock fixtures

Datasource tests share fixtures in public/app/features/datasources/mocks/. The store.navIndex.mock.ts file is one of the largest in the repo because it represents the full nav tree state that the datasource pages need at render time.

Cloud onboarding

For Grafana Cloud and the "Connections" workflow, additional UX is in public/app/features/connections/tabs/ConnectData/ — guided integrations that auto-provision datasources and dashboards.

Key source files

File	Purpose
public/app/features/datasources/pages/	Datasource list / new / edit pages
public/app/features/datasources/components/	Reusable settings components
public/app/features/connections/	"Connections" experience
public/app/features/datasources/api/	RTK Query slice