Implementation:Apache Druid WorkbenchHistoryDialog
| Knowledge Sources | |
|---|---|
| Domains | Web_Console, Query_Workbench |
| Last Updated | 2026-02-10 10:00 GMT |
Overview
WorkbenchHistoryDialog is a React dialog component that displays the user's query history and allows selecting a past query to open in a new workbench tab.
Description
The dialog retrieves the query history from WorkbenchHistory.getHistory() and renders it as a vertical tabbed interface using BlueprintJS Tabs. Each history entry displays a version label as the tab title and the query string in a read-only AceEditor with syntax highlighting (hjson mode for JSON queries, dsql mode for SQL). A popover button shows the number of context keys and the full query context JSON on hover. The "Open in new tab" button passes the selected query back to the parent via the onSelectQuery callback. If the history is empty, a CenterMessage is displayed.
Usage
Used in the workbench view when a user wants to browse and restore a previously executed query from local history. Opened from the workbench toolbar history button.
Code Reference
Source Location
- Repository: Apache Druid
- File: web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
- Lines: 1-141
Signature
export interface WorkbenchHistoryDialogProps {
onSelectQuery(query: WorkbenchQuery): void;
onClose(): void;
}
export const WorkbenchHistoryDialog = React.memo(function WorkbenchHistoryDialog(
props: WorkbenchHistoryDialogProps,
): JSX.Element;
Import
import { WorkbenchHistoryDialog } from 'web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| onSelectQuery | (query: WorkbenchQuery) => void | Yes | Callback invoked with the selected WorkbenchQuery when the user clicks "Open in new tab" |
| onClose | () => void | Yes | Callback to close the dialog |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | Dialog | A BlueprintJS Dialog with vertical tabs showing query history entries, each with an AceEditor preview and context info |
Usage Examples
Opening the workbench history dialog
<WorkbenchHistoryDialog
onSelectQuery={(query) => openQueryInNewTab(query)}
onClose={() => setShowHistory(false)}
/>