Implementation:Apache Druid SegmentsCard
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Dashboard |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
A React dashboard card component that displays segment count statistics on the home view of the Druid web console.
Description
The SegmentsCard component queries Druid for segment statistics and renders them inside a HomeViewCard container. It supports two data retrieval paths: a SQL-based query against sys.segments when SQL capabilities are available, and a fallback REST API path using the coordinator endpoints when only coordinator access exists. The card displays counts for active segments, segments cached on historicals, unavailable segments waiting to be loaded, and realtime segments. It uses the useQueryManager hook for async data fetching with loading and error state management.
Usage
Used on the Druid web console home view dashboard to provide a quick at-a-glance summary of the cluster's segment health, linking to the full segments view when clicked.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/home-view/segments-card/segments-card.tsx
- Lines: 1-113
Signature
export interface SegmentCounts {
active: number;
cached_on_historical: number;
unavailable: number;
realtime: number;
}
export interface SegmentsCardProps {
capabilities: Capabilities;
}
export const SegmentsCard = React.memo(function SegmentsCard(props: SegmentsCardProps));
Import
import { SegmentsCard } from './segments-card/segments-card';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| capabilities | Capabilities | Yes | The current cluster capabilities object used to determine whether SQL or coordinator API access is available for querying segment counts |
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered card | JSX.Element | A HomeViewCard displaying active, cached, unavailable, and realtime segment counts with loading/error states |
Usage Examples
Rendering the segments card on the home view
<SegmentsCard capabilities={clusterCapabilities} />