Implementation:Apache Druid ConnectExternalDataDialog

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

Overview

ConnectExternalDataDialog is a React dialog component that guides users through connecting to an external data source for ingestion.

Description

The dialog provides a two-step wizard workflow for configuring external data connections. In the first step, the user selects an input source via the InputSourceStep component. In the second step, the user configures the input format and parses sample data via the InputFormatStep component. Upon completion, the dialog passes back the full ExternalConfig (input source, input format, and signature), along with a time expression, partition hint, and array ingest mode to the parent component.

Usage

Used in the workbench view when a user wants to ingest data from an external source (such as HTTP, S3, or local files) using the SQL-based ingestion workflow. The dialog is opened via a button in the workbench toolbar.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.tsx
• Lines: 1-99

Signature

export interface ConnectExternalDataDialogProps {
  initExternalConfig?: Partial<ExternalConfig>;
  onSetExternalConfig(
    config: ExternalConfig,
    timeExpression: SqlExpression | undefined,
    partitionedByHint: string | undefined,
    arrayMode: ArrayIngestMode,
  ): void;
  onClose(): void;
}

export const ConnectExternalDataDialog = React.memo(function ConnectExternalDataDialog(
  props: ConnectExternalDataDialogProps,
): JSX.Element;

Import

import { ConnectExternalDataDialog } from 'web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
initExternalConfig	Partial<ExternalConfig>	No	Initial external config to pre-populate the dialog
onSetExternalConfig	function	Yes	Callback with the completed ExternalConfig, time expression, partition hint, and array mode
onClose	() => void	Yes	Callback to close the dialog

Outputs

Name	Type	Description
JSX.Element	Dialog	A BlueprintJS Dialog containing either the InputSourceStep or InputFormatStep wizard page

Usage Examples

Opening the connect external data dialog

<ConnectExternalDataDialog
  onSetExternalConfig={(config, timeExpression, partitionHint, arrayMode) => {
    handleExternalDataConfigured(config, timeExpression, partitionHint, arrayMode);
  }}
  onClose={() => setShowConnectDialog(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development