Implementation:Apache Druid ExecutionProgressBarPane

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

Overview

ExecutionProgressBarPane is a React component that displays progress bars and status labels for an in-progress MSQ query execution.

Description

The component renders an overall progress bar and a per-stage progress bar to visualize the advancement of a multi-stage query execution. The overall bar shows the combined progress across all stages, while the stage bar shows the progress of the current active stage. It includes a cancel/skip-waiting link that shows a CancelQueryDialog confirmation when data processing is active. Additionally, it supports toggling live reports visibility and displays a segment status description label when the execution is waiting for segments to load.

Usage

Used in the workbench view output area when an MSQ query is actively running, to provide visual progress feedback and allow the user to cancel the execution or skip waiting for segment loading.

Code Reference

Source Location

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

Signature

export interface ExecutionProgressBarPaneProps {
  execution: Execution | undefined;
  onCancel?(message?: string): void;
  onToggleLiveReports?(): void;
  showLiveReports?: boolean;
}

export const ExecutionProgressBarPane = React.memo(function ExecutionProgressBarPane(
  props: ExecutionProgressBarPaneProps,
): JSX.Element;

Import

import { ExecutionProgressBarPane } from 'web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane';

I/O Contract

Inputs

Name	Type	Required	Description
execution	Execution or undefined	No	The current execution state for progress computation
onCancel	(message?: string) => void	No	Callback to cancel the execution; when provided, a cancel link is shown
onToggleLiveReports	() => void	No	Callback to toggle live reports display
showLiveReports	boolean	No	Whether live reports are currently visible

Outputs

Name	Type	Description
JSX.Element	div	A pane containing overall progress bar, stage progress bar, cancel link, live reports toggle, and optional cancel confirmation dialog

Usage Examples

Rendering a progress bar for a running execution

<ExecutionProgressBarPane
  execution={runningExecution}
  onCancel={(msg) => cancelExecution(msg)}
  onToggleLiveReports={() => setShowLiveReports(!showLiveReports)}
  showLiveReports={showLiveReports}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development