Implementation:Apache Druid CurrentDartPanel
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Query_Workbench |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
CurrentDartPanel is a React component that displays a live list of currently running Dart queries in the workbench sidebar.
Description
The panel polls the Druid SQL queries API endpoint (`/druid/v2/sql/queries?includeComplete`) every 3 seconds to fetch and display Dart query entries. Each entry shows a status icon (color-coded for RUNNING, ACCEPTED, SUCCESS, FAILED, CANCELED), the query start time with elapsed duration, and the identity/authenticator information. A right-click popover menu provides actions to show execution details, copy SQL or Dart query IDs, and cancel running queries with a confirmation dialog.
Usage
Used as a sidebar panel in the workbench view to monitor Dart (distributed SQL) queries in real-time. The panel auto-refreshes and integrates with the WORK_STATE_STORE via zustand for version tracking of MSQ Dart state changes.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
- Lines: 1-197
Signature
export interface CurrentViberPanelProps {
onExecutionDetails(id: string): void;
onClose(): void;
}
export const CurrentDartPanel = React.memo(function CurrentViberPanel(
props: CurrentViberPanelProps,
): JSX.Element;
Import
import { CurrentDartPanel } from 'web-console/src/views/workbench-view/current-dart-panel/current-dart-panel';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| onExecutionDetails | (id: string) => void | Yes | Callback to navigate to execution details for a given SQL query ID |
| onClose | () => void | Yes | Callback to close the panel |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | div | A panel with a title bar, list of Dart query entries with status icons and popover menus, and an optional cancel confirmation dialog |
Usage Examples
Rendering the current Dart panel
<CurrentDartPanel
onExecutionDetails={(queryId) => showExecutionDetails(queryId)}
onClose={() => setDartPanelVisible(false)}
/>