Implementation:Apache Druid ExecutionSubmitDialog

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

Overview

ExecutionSubmitDialog is a React dialog component that allows users to load and view query detail archive files from other Druid clusters.

Description

The dialog provides a file upload interface for loading JSON query detail archive files. It supports both file input selection and drag-and-drop onto the dialog backdrop. The component parses the uploaded JSON file (using json-bigint-native for BigInt support), validates the archive format (supporting detail archive version 2 with reports and statements status, or legacy task report format), and constructs an Execution object from the parsed data. Comprehensive error handling covers JSON parse errors (with row/column location), unsupported archive versions, unrecognized formats, and decode failures.

Usage

Used in the workbench view when a user wants to inspect query execution details from another Druid cluster by importing a previously downloaded query detail archive JSON file.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx
• Lines: 1-216

Signature

export interface ExecutionSubmitDialogProps {
  onSubmit(execution: Execution): void;
  onClose(): void;
}

export const ExecutionSubmitDialog = React.memo(function ExecutionSubmitDialog(
  props: ExecutionSubmitDialogProps,
): JSX.Element;

Import

import { ExecutionSubmitDialog } from 'web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
onSubmit	(execution: Execution) => void	Yes	Callback invoked with the decoded Execution object after a successful file parse
onClose	() => void	Yes	Callback to close the dialog

Outputs

Name	Type	Description
JSX.Element	Dialog	A BlueprintJS Dialog with file input, drag-and-drop support, instructions, and Submit/Close buttons

Usage Examples

Rendering the execution submit dialog

<ExecutionSubmitDialog
  onSubmit={(execution) => {
    setExecution(execution);
  }}
  onClose={() => setShowSubmitDialog(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development