Implementation:Apache Druid SegmentsPreviewPane
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Segments |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
SegmentsPreviewPane is a React component that displays a data preview of a specific Druid segment by running a native scan query against it.
Description
The SegmentsPreviewPane component parses a segment ID to extract the datasource, interval, version, and partition number, then executes a native scan query via the druid-query-toolkit QueryRunner targeting that specific segment. The query uses a "segments" interval type to address the individual segment and limits results to 1001 rows. Results are displayed using the RecordTablePane component, with loading and error states handled inline. The component also exports the parseSegmentId utility function for reuse.
Usage
Used within the segments table action dialog to preview the actual data contents of a selected segment, helping administrators inspect what data a segment contains.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.tsx
- Lines: 1-120
Signature
interface ParsedSegmentId {
datasource: string;
interval: string;
partitionNumber: number;
version: string;
}
export function parseSegmentId(segmentId: string): ParsedSegmentId;
export interface DatasourcePreviewPaneProps {
segmentId: string;
}
export const SegmentsPreviewPane = React.memo(function DatasourcePreviewPane(
props: DatasourcePreviewPaneProps,
): JSX.Element;
Import
import { SegmentsPreviewPane, parseSegmentId } from 'web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| segmentId | string | Yes | The full Druid segment ID string to parse and preview (e.g., "datasource_2024-01-01T00:00:00.000Z_2024-01-02T00:00:00.000Z_version_0") |
Outputs
| Name | Type | Description |
|---|---|---|
| rendered pane | JSX.Element | A div containing a Loader during query execution, a RecordTablePane with scan query results, or an error message |
Usage Examples
Previewing Segment Data
<SegmentsPreviewPane segmentId="wikipedia_2024-01-01T00:00:00.000Z_2024-01-02T00:00:00.000Z_2024-01-01T00:00:00.000Z_0" />