Implementation:Apache Druid SegmentsPreviewPane

Knowledge Sources	Apache_Druid
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" />

Related Pages

• Environment:Apache_Druid_Web_Console_Development