Implementation:Apache Druid TimezoneMenuItems

Knowledge Sources	Apache_Druid
Domains	Web_Console, Timezone_Configuration
Last Updated	2026-02-10 10:00 GMT

Overview

TimezoneMenuItems is a React component that generates Blueprint MenuItem elements for selecting an SQL timezone, supporting both named timezones and UTC offset values.

Description

The component renders a list of selectable menu items covering 20 common named timezones (from America/Juneau at UTC-9 through Australia/Sydney at UTC+11) plus the browser's local timezone if not already included. It also generates hourly UTC offset options from -12:00 to +14:00 including the browser's current offset. Items are organized into a flat list (named-only mode) or nested submenus for named and offset categories. The browser's timezone and offset are marked with a star icon for easy identification.

Usage

Used in the Druid web console's query workbench and time-related configuration panels to allow users to select the SQL timezone context for query execution and time display.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/timezone-menu-items/timezone-menu-items.tsx
• Lines: 1-162

Signature

export interface TimezoneMenuItemsProps {
  sqlTimeZone: string | undefined;
  setSqlTimeZone(sqlTimeZone: string | undefined): void;
  defaultSqlTimeZone: string | undefined;
  namedOnly?: boolean;
}

export const TimezoneMenuItems: React.FC<TimezoneMenuItemsProps>;

Import

import { TimezoneMenuItems } from './components/timezone-menu-items/timezone-menu-items';

I/O Contract

Inputs

Name	Type	Required	Description
sqlTimeZone	string or undefined	Yes	The currently selected timezone string; undefined indicates "Default"
setSqlTimeZone	(sqlTimeZone: string or undefined) => void	Yes	Callback to set the selected timezone; called with undefined to reset to default
defaultSqlTimeZone	string or undefined	Yes	The label to display for the default timezone option
namedOnly	boolean	No	When true, renders a flat list of named timezones only without offset submenu

Outputs

Name	Type	Description
JSX.Element[]	MenuItem[]	An array of Blueprint MenuItem elements suitable for use inside a Menu or as submenu children

Usage Examples

Timezone selector in a popover menu

<Menu>
  <TimezoneMenuItems
    sqlTimeZone={currentTimezone}
    setSqlTimeZone={setTimezone}
    defaultSqlTimeZone="Etc/UTC"
  />
</Menu>

Related Pages

• Environment:Apache_Druid_Web_Console_Development