Implementation:Apache Druid DestinationForm

Knowledge Sources	Apache Druid
Domains	Data_Ingestion, SQL_Ingestion
Last Updated	2026-02-10 00:00 GMT

Overview

Concrete React component for configuring the target datasource and write mode in the SQL-based ingestion workflow.

Description

The DestinationForm component renders radio buttons for write mode selection (new, append, replace) and a table name input. For append and replace modes, it shows a dropdown of existing datasources. The form outputs a DestinationInfo object that is integrated into the SQL query as INSERT INTO / REPLACE INTO clauses.

This is a pure form component with no API calls.

Usage

Render this component in the SQL data loader destination dialog. The changeDestinationInfo callback receives updates when the user changes the target.

Code Reference

Source Location

Repository: Apache Druid
File: web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
Lines: L43-L130

Signature

interface DestinationFormProps {
  existingTables: string[];
  destinationInfo: DestinationInfo;
  changeDestinationInfo(info: DestinationInfo): void;
}

interface DestinationInfo {
  mode: 'new' | 'append' | 'replace';
  tableName: string;
}

export const DestinationForm = React.memo(function DestinationForm(
  props: DestinationFormProps,
): JSX.Element {
  // ...
});

Import

import { DestinationForm } from './destination-form/destination-form';

I/O Contract

Inputs

Name	Type	Required	Description
existingTables	string[]	Yes	List of existing datasource names in the cluster
destinationInfo	DestinationInfo	Yes	Current destination selection (mode and table name)
changeDestinationInfo	callback	Yes	Called when the user changes destination settings

Outputs

Name	Type	Description
destinationInfo	DestinationInfo	Updated mode ('new', 'append', 'replace') and target table name

Usage Examples

Destination Selection

<DestinationForm
  existingTables={['events', 'users', 'logs']}
  destinationInfo={{ mode: 'new', tableName: 'my_new_table' }}
  changeDestinationInfo={(info) => {
    // info.mode = 'replace', info.tableName = 'events'
    updateDestination(info);
  }}
/>

Related Pages

Implements Principle

Principle:Apache_Druid_SQL_Destination_Configuration

Requires Environment

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment