Implementation:Apache Druid LookupEditDialog

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

Overview

LookupEditDialog is a React dialog component that provides a form-based and JSON-based editor for creating and editing Druid lookups.

Description

The LookupEditDialog component renders a BlueprintJS Dialog with input fields for lookup name, tier, and version, plus a tab-switchable editor that supports both a structured AutoForm mode (using LOOKUP_FIELDS) and a raw JSON editing mode (with LOOKUP_COMPLETIONS for autocomplete). It validates the lookup configuration using the isLookupInvalid utility before allowing submission. The version field includes a convenience button to set it to the current ISO timestamp. When editing an existing lookup, the name and tier fields are disabled.

Usage

Used from the lookups management view to create new lookups or edit existing ones, including their spec, tier assignment, and version metadata.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx
• Lines: 1-167

Signature

export interface LookupEditDialogProps {
  onClose: () => void;
  onSubmit: (updateLookupVersion: boolean) => void;
  onChange: (
    field: 'id' | 'tier' | 'version' | 'spec',
    value: string | Partial<LookupSpec>,
  ) => void;
  lookupId: string;
  lookupTier: string;
  lookupVersion: string;
  lookupSpec: Partial<LookupSpec>;
  isEdit: boolean;
  allLookupTiers: string[];
}

export const LookupEditDialog = React.memo(function LookupEditDialog(
  props: LookupEditDialogProps,
): JSX.Element;

Import

import { LookupEditDialog } from 'web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
onClose	() => void	Yes	Callback invoked when the dialog is closed
onSubmit	(updateLookupVersion: boolean) => void	Yes	Callback invoked on submit; boolean indicates whether the version should be auto-updated
onChange	(field, value) => void	Yes	Callback invoked when any field changes; field is one of 'id', 'tier', 'version', or 'spec'
lookupId	string	Yes	The lookup name/identifier
lookupTier	string	Yes	The tier the lookup is assigned to
lookupVersion	string	Yes	The version string of the lookup
lookupSpec	Partial<LookupSpec>	Yes	The partial lookup specification object
isEdit	boolean	Yes	Whether the dialog is in edit mode (true) or create mode (false)
allLookupTiers	string[]	Yes	Available tier names for the tier dropdown selector

Outputs

Name	Type	Description
rendered dialog	JSX.Element	A BlueprintJS Dialog with name/tier/version inputs and a form/JSON toggle editor for the lookup spec

Usage Examples

Creating a New Lookup

<LookupEditDialog
  lookupId=""
  lookupTier="__default"
  lookupVersion={new Date().toISOString()}
  lookupSpec={{}}
  isEdit={false}
  allLookupTiers={['__default', 'hot']}
  onChange={(field, value) => handleChange(field, value)}
  onSubmit={(updateVersion) => saveLookup(updateVersion)}
  onClose={() => setShowDialog(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development