Core (public/app/core/)

public/app/core/ is the kitchen drawer of the frontend. It hosts cross-feature components, hooks, services, types, and utilities that don't fit cleanly inside a single feature folder.

Layout

public/app/core/
├── components/         # Shared React components (Layout, ErrorBoundary, Page, ...)
├── services/           # Imperative services (BackendSrv, ContextSrv, KeybindingSrv, ...)
├── hooks/              # Shared React hooks
├── reducers/           # Slices for cross-cutting state (navTree, appNotifications, ...)
├── selectors/          # Cross-cutting selectors
├── utils/              # Helpers (kbn, browser, accessibility)
├── specs/              # Feature spec tests for cross-cutting helpers
├── icons/              # Icon registry
├── nav_model/          # Nav model utilities
├── style.scss          # Global stylesheet
├── core.ts             # Re-exports
├── config.ts           # Re-exports the runtime config
└── (more)

Notable services

backend_srv.ts

public/app/core/services/backend_srv.ts is the typed HTTP client. Almost every server call from the SPA goes through getBackendSrv().get|post|put|delete. It handles:

• CSRF tokens.
• Auth redirects (401 → /login).
• Error normalization into FetchError.
• Per-org/X-Grafana headers.

External plugins consume this through @grafana/runtime.

context_srv.ts

public/app/core/services/context_srv.ts holds the bootstrap user identity (whoami, role, permissions, signed-in flags, RBAC permissions snapshot) and exposes shorthand checks (contextSrv.hasRole(...), contextSrv.hasPermissionInMetadata(...)).

KeybindingSrv

public/app/core/services/KeybindingSrv.ts registers global keyboard shortcuts (cmd-K palette, dashboard time range nudges, fullscreen toggles).

Live event bus

public/app/core/services/live.ts wraps the Live channel client used by datasources for streaming.

Notable components

Component	Purpose
AppChrome/	Top navigation bar, breadcrumbs, mega-menu
Page/	Standard page layout with title, actions, sub-nav
ErrorBoundary/	Catch-and-display React error boundary
AccessControl/	RBAC-aware permission editors
Footer/	Footer with version + edition badge
PluginSignatureBadge/	Plugin signed/unsigned indicator

@grafana/ui is the design system; core/components/ adds Grafana-app-specific composites that should not be exposed to external plugins.

Reducers

The legacy global Redux store is set up in public/app/core/reducers/root.ts. It includes nav tree state, breadcrumbs, app notifications, and a few stragglers. Newer code prefers RTK Query slices co-located with their feature.

Where to put things

• Reusable across features? It probably goes here.
• Specific to one feature? Keep it in the feature's folder.
• Used by external plugins? It belongs in @grafana/ui or @grafana/runtime, not core/.

When in doubt, copy what neighbors do.