Implementation:Apache Druid DatasourcesView

Knowledge Sources	Apache_Druid
Domains	Web Console, Datasource Management
Last Updated	2026-02-10 10:00 GMT

Overview

Renders the Datasources management view in the Apache Druid web console, displaying a table of all datasources with their metadata, compaction status, retention rules, and management actions.

Description

The DatasourcesView is a React class component extending PureComponent that provides a comprehensive datasource management interface. It queries sys.segments and sys.tasks system tables (or the Coordinator API in no-SQL mode) to display datasource information including availability, segment statistics, data size, compaction progress, and retention rules. The view supports a segment timeline visualization, multiple capability modes (full, no-sql, no-proxy), and actions such as editing compaction config, managing retention rules, marking segments as used/unused, and killing datasources.

Usage

Rendered as the main content area when the user navigates to the "Datasources" tab in the web console. Requires capabilities, filters, navigation callbacks, and filter change handlers as props.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/datasources-view/datasources-view.tsx
• Lines: 1-1838

Signature

export interface DatasourcesViewProps {
  filters: TableFilters;
  onFiltersChange(filters: TableFilters): void;
  goToQuery(queryWithContext: QueryWithContext): void;
  goToView(tab: ConsoleViewId, filters?: TableFilters): void;
  capabilities: Capabilities;
}

export interface DatasourcesViewState {
  datasourcesAndDefaultRulesState: QueryState<DatasourcesAndDefaultRules>;
  showUnused: boolean;
  retentionDialogOpenOn?: RetentionDialogOpenOn;
  compactionDialogOpenOn?: CompactionConfigDialogOpenOn;
  datasourceToMarkAsUnusedAllSegmentsIn?: string;
  datasourceToMarkAllNonOvershadowedSegmentsAsUsedIn?: string;
  killDatasource?: string;
  datasourceToMarkSegmentsByIntervalIn?: string;
  useUnuseAction: 'use' | 'unuse';
  // ... additional state properties
}

export class DatasourcesView extends React.PureComponent<
  DatasourcesViewProps,
  DatasourcesViewState
>

Import

import { DatasourcesView } from '../../views/datasources-view/datasources-view';

I/O Contract

Inputs

Name	Type	Required	Description
filters	TableFilters	Yes	Current table filter state for filtering the datasources table.
onFiltersChange	(filters: TableFilters) => void	Yes	Callback invoked when the user changes table filters.
goToQuery	(queryWithContext: QueryWithContext) => void	Yes	Callback to navigate to the Query view with a pre-populated query.
goToView	(tab: ConsoleViewId, filters?: TableFilters) => void	Yes	Callback to navigate to another console view, optionally with filters.
capabilities	Capabilities	Yes	The detected cluster capabilities, determining which columns and features are available.

Outputs

Name	Type	Description
JSX.Element	React element	Renders the complete datasources view including control bar, optional segment timeline, ReactTable, and action dialogs.

Usage Examples

Rendering the Datasources View

<DatasourcesView
  filters={datasourceFilters}
  onFiltersChange={setDatasourceFilters}
  goToQuery={handleGoToQuery}
  goToView={handleGoToView}
  capabilities={capabilities}
/>

Internals

Table Columns by Mode

The view adapts its displayed columns based on the capabilities mode:

Mode	Key Columns
full	Datasource name, Availability, Load/drop queues, Total data size, Running tasks (sys.tasks), Segment rows/size/granularity, Total rows, Avg. row size, Replicated size, Compaction, % Compacted, Left to be compacted, Retention
no-sql	Datasource name, Availability, Load/drop queues, Total data size, Running tasks (API), Compaction, % Compacted, Left to be compacted, Retention
no-proxy	Datasource name, Availability, Load/drop queues, Total data size, Running tasks (sys.tasks), Segment rows/size/granularity, Total rows, Avg. row size, Replicated size

Data Sources

The view queries data from multiple endpoints:

• sys.segments -- Segment-level statistics aggregated per datasource
• sys.tasks -- Running task counts per datasource
• /druid/coordinator/v1/rules -- Retention rules
• /druid/coordinator/v1/config/compaction -- Compaction configurations
• /druid/coordinator/v1/compaction/status -- Compaction progress

Visual Indicators

• Color-coded availability: fully available (green), partially available (yellow), unused (dark), empty (gray)
• Compaction progress shown as percentage with bar indicator
• Load/drop queue summaries

Dialogs

• RetentionDialog -- Edit retention rules for a datasource
• CompactionConfigDialog -- Configure compaction settings
• KillDatasourceDialog -- Permanently delete unused segments
• DatasourceTableActionDialog -- Detail view with action menu
• AsyncActionDialog -- Used for mark-as-unused and mark-as-used operations

Related Pages

• Environment:Apache_Druid_Web_Console_Development