Implementation:Apache Druid HeaderBar

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

Overview

Renders the main navigation header bar for the Apache Druid web console, providing links to all major views and configuration dialogs.

Description

The HeaderBar component is a React memoized functional component that renders the top-level navigation bar using Blueprint.js Navbar. It provides navigation links to all major console views (Query, Load Data, Datasources, Supervisors, Tasks, Segments, Services, Lookups, and Explore), along with settings and help menus. The component is capability-aware, disabling navigation items that are not available based on the current cluster configuration, and supports manual capability override for advanced debugging.

Usage

Used as the top-level navigation component in the Druid web console application shell. It should receive the currently active view, the detected capabilities, and a callback for unrestricting capabilities.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/header-bar/header-bar.tsx
• Lines: 1-416

Signature

export interface HeaderBarProps {
  activeView: ConsoleViewId | null;
  capabilities: Capabilities;
  onUnrestrict(capabilities: Capabilities): void;
}

export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps): JSX.Element

Import

import { HeaderBar } from '../../components/header-bar/header-bar';

I/O Contract

Inputs

Name	Type	Required	Description
activeView	null	Yes	The currently active console view identifier, used to highlight the active navigation item.
capabilities	Capabilities	Yes	The detected or overridden capabilities of the Druid cluster, controlling which navigation items are enabled.
onUnrestrict	(capabilities: Capabilities) => void	Yes	Callback invoked when the user unrestricts capabilities from restricted mode.

Outputs

Name	Type	Description
JSX.Element	Navbar	Renders a Blueprint.js Navbar containing navigation links, settings popover, help popover, and conditionally rendered dialogs.

Usage Examples

Rendering the Header Bar

import { HeaderBar } from './components/header-bar/header-bar';

<HeaderBar
  activeView="datasources"
  capabilities={detectedCapabilities}
  onUnrestrict={(caps) => setCapabilities(caps)}
/>

Internals

Navigation Items

The header provides links to these console views:

View	Capabilities Required	Notes
Query (Workbench)	hasQuerying()	Always shown first
Load Data	hasEverything()	Split menu when MSQ is available (Streaming, Batch SQL, Batch Classic)
Datasources	hasSqlOrCoordinatorAccess()	-
Supervisors	hasSqlOrOverlordAccess()	-
Tasks	hasSqlOrOverlordAccess()	-
Segments	hasSqlOrCoordinatorAccess()	-
Services	hasSqlOrCoordinatorAccess()	-
Lookups	hasCoordinatorAccess()	Under "More" menu
Explore	hasSql()	Under "More" menu, marked experimental

Dialogs

The header manages opening/closing of these configuration dialogs:

• AboutDialog -- Shows Druid version information
• DoctorDialog -- Druid cluster health check
• CoordinatorDynamicConfigDialog -- Coordinator configuration
• OverlordDynamicConfigDialog -- Overlord configuration
• CompactionDynamicConfigDialog -- Compaction settings
• WebConsoleConfigDialog -- Console-specific settings

Capability Override

The component reads LocalStorageKeys.CAPABILITIES_OVERRIDE from local storage. When set, the console operates in a manual capability mode with a warning indicator. Users can manually set: Coordinator/Overlord, Coordinator-only, Overlord-only, or Router with no management proxy mode.

Related Pages

• Environment:Apache_Druid_Web_Console_Development