Implementation:Apache Druid AsyncActionDialog

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

Overview

AsyncActionDialog is a React dialog component that wraps an asynchronous action with confirm/cancel buttons, a progress indicator, warning checklists, and toast notifications for success or failure.

Description

The component renders a Blueprint Dialog styled as an alert that executes a provided async action when the confirm button is clicked. While the action is running, it displays a progress bar and offers a "Run in background" button to dismiss the dialog without canceling the operation. Upon success, it shows a success toast and invokes the onSuccess callback; upon failure, it displays a danger toast with the error message. The component also supports an optional WarningChecklist that must be fully checked before the confirm button becomes enabled.

Usage

Used throughout the Druid web console for destructive or significant operations requiring user confirmation, such as deleting datasources, terminating tasks, resetting supervisors, and compacting segments.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
• Lines: 1-137

Signature

export interface AsyncActionDialogProps {
  action: () => Promise<void>;
  onClose: () => void;
  onSuccess?: () => void;
  confirmButtonText: string;
  confirmButtonDisabled?: boolean;
  cancelButtonText?: string;
  className?: string;
  icon?: IconName;
  intent?: Intent;
  successText: ReactNode;
  failText: ReactNode;
  warningChecks?: ReactNode[];
  children?: ReactNode;
}

export const AsyncActionDialog: React.NamedExoticComponent<AsyncActionDialogProps>;

Import

import { AsyncActionDialog } from './dialogs/async-action-dialog/async-action-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
action	() => Promise<void>	Yes	The async function to execute when the user confirms
onClose	() => void	Yes	Callback to close the dialog (called after success, failure, or cancel)
onSuccess	() => void	No	Callback invoked after the action completes successfully
confirmButtonText	string	Yes	Label for the confirm/submit button
confirmButtonDisabled	boolean	No	When true, disables the confirm button regardless of warning checks
cancelButtonText	string	No	Label for the cancel button (defaults to 'Cancel')
className	string	No	Additional CSS class name for the dialog
icon	IconName	No	Blueprint icon displayed in the alert body
intent	Intent	No	Blueprint intent for the confirm button and progress bar styling
successText	ReactNode	Yes	Toast message displayed on successful action completion
failText	ReactNode	Yes	Toast message prefix displayed on action failure (error message is appended)
warningChecks	ReactNode[]	No	A list of warning messages that must all be checked before confirming
children	ReactNode	No	Content displayed in the alert body above the warning checklist

Outputs

Name	Type	Description
JSX.Element	Dialog	A Blueprint Dialog with confirm/cancel buttons, optional progress bar, and warning checklist

Usage Examples

Delete datasource confirmation dialog

<AsyncActionDialog
  action={async () => {
    await Api.instance.delete(`/druid/coordinator/v1/datasources/${datasource}`);
  }}
  confirmButtonText="Delete datasource"
  successText="Datasource deleted successfully"
  failText="Could not delete datasource"
  intent={Intent.DANGER}
  icon={IconNames.TRASH}
  onClose={() => setShowDeleteDialog(false)}
  onSuccess={() => refreshDatasources()}
  warningChecks={[
    'I understand this action cannot be undone',
    `I want to permanently delete "${datasource}"`,
  ]}
>
  <p>Are you sure you want to delete this datasource?</p>
</AsyncActionDialog>

Related Pages

• Environment:Apache_Druid_Web_Console_Development