Open-Source Wikis

/

Grafana

/

Frontend

/

Explore

grafana/grafana

Explore

Explore is Grafana's ad-hoc query view: pick a datasource, write a query, see results immediately, iterate. It is the most-used non-dashboard surface and lives in public/app/features/explore/.

Layout

public/app/features/explore/
├── ExplorePage.tsx          # Top-level page
├── Explore.tsx              # Per-pane container
├── ExploreToolbar.tsx       # Toolbar (datasource picker, time, share)
├── QueryRows/               # Stacked query editors
├── Logs/                    # Logs panel
├── Graph/                   # Time series visualization
├── Table/                   # Table panel
├── TraceView/               # Distributed traces
├── NodeGraphContainer/      # Service graph
├── FlameGraphExploreContainer/  # Profiling flame graph
├── state/                   # explorePane slice + RTK actions
├── hooks/                   # useExplorePaneState, useStateSync, ...
├── utils/                   # URL serialization, time helpers
├── correlations/            # Correlation editor
└── (more)

Panes

Explore supports up to two side-by-side panes (left/right) so users can compare different datasources or time ranges. The two panes are managed independently in the explorePane slice keyed by paneId ('left' | 'right').

URL state

Explore aggressively serializes its full state into the URL query string so that links and back/forward navigation work. The serialization is in public/app/features/explore/hooks/useStateSync/ — every relevant field (datasource UID, queries, time range, panels expanded) is encoded into a JSON-ish blob.

Query execution

Queries are executed via the same plugin host pipeline used by dashboards. Explore wraps each query group in an RxJS observable so results stream as they arrive (especially relevant for Loki tail and Tempo).

Visualization picker

Explore picks a panel automatically based on the data shape (logs, time series, traces, table) and lets users switch between them. The mapping is in public/app/features/explore/utils/decorators.ts.

Logs view

The Logs panel (Logs/) supports:

  • Live tail (via the Live channel from Loki / others).
  • Field analysis ("Detected fields").
  • Per-line context (jump to nearby logs from a single line).
  • LogQL syntax highlighting via the Loki frontend plugin.

Trace view

The Trace view (TraceView/) renders distributed traces with span tree, attribute panels, and service-map links. Backed by @grafana/o11y-ds-frontend and the Tempo/Jaeger frontend plugins.

Correlations

Cross-datasource navigation (e.g. metric → logs of the same service) is implemented via Correlations and the pkg/services/correlations/ backend service.

Query history

Recent queries are persisted by pkg/services/queryhistory/ and surfaced via the <QueryHistory> drawer.

Key source files

File Purpose
public/app/features/explore/ExplorePage.tsx Page entry
public/app/features/explore/state/main.ts Top-level slice (illustrative path)
public/app/features/explore/Logs/ Logs panel
public/app/features/explore/TraceView/ Trace view
public/app/features/explore/hooks/useStateSync/ URL ↔ state sync

Built by Factory AutoWiki from public repository content. It is a generated preview for codebase exploration, not source-maintained documentation.

Explore – Grafana wiki | Factory