Implementation:Apache Druid ExecutionDetailsPane

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

Overview

ExecutionDetailsPane is a React component that provides a tabbed interface for viewing comprehensive details of an MSQ query execution.

Description

The component renders a FancyTabPane with multiple tabs conditionally displayed based on the execution state: General (task ID, ingestion target, timing, stages overview), SQL query, Native query, Segments status, Results table, Result pages, Error details, and Warnings. The General tab integrates ExecutionStagesPane for stage-by-stage progress visualization and ExecutionErrorPane for inline error display. Available tabs are dynamically determined by the execution object's properties, such as whether a SQL query, native query, result set, or error is present.

Usage

Used in the workbench view to display detailed execution information when a user clicks on an MSQ query task to inspect its status, results, plan, errors, or segment loading progress.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
• Lines: 1-220

Signature

export type ExecutionDetailsTab =
  | 'general'
  | 'sql'
  | 'native'
  | 'result'
  | 'pages'
  | 'error'
  | 'warnings'
  | 'segmentStatus';

interface ExecutionDetailsPaneProps {
  execution: Execution;
  initTab?: ExecutionDetailsTab;
  goToTask(taskId: string): void;
}

export const ExecutionDetailsPane = React.memo(function ExecutionDetailsPane(
  props: ExecutionDetailsPaneProps,
): JSX.Element;

Import

import { ExecutionDetailsPane } from 'web-console/src/views/workbench-view/execution-details-pane/execution-details-pane';

I/O Contract

Inputs

Name	Type	Required	Description
execution	Execution	Yes	The execution object containing query details, stages, results, errors, and warnings
initTab	ExecutionDetailsTab	No	The initial tab to display (defaults to 'general')
goToTask	(taskId: string) => void	Yes	Callback to navigate to a specific task by ID

Outputs

Name	Type	Description
JSX.Element	FancyTabPane	A tabbed pane with dynamically rendered tabs for general info, SQL, native query, segments, results, pages, errors, and warnings

Usage Examples

Displaying execution details with an initial tab

<ExecutionDetailsPane
  execution={currentExecution}
  initTab="general"
  goToTask={(taskId) => navigateToTask(taskId)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development