Implementation:Apache Druid ShowJsonOrStages

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

Overview

ShowJsonOrStages is a React component that fetches JSON data from a Druid API endpoint and displays it either as a formatted JSON document or as an MSQ execution stages visualization.

Description

The component uses the useQueryManager hook to fetch data from the given endpoint, optionally transforms it, and then determines whether the response contains multi-stage query (MSQ) execution information. If MSQ data is present, it renders the ExecutionStagesPane for a visual stages view; otherwise, it displays the raw JSON in a read-only Ace Editor. The component provides action buttons for refreshing, downloading, copying to clipboard, and opening the raw endpoint in a new browser tab.

Usage

Used in the Druid web console to display task reports and query execution details, particularly for MSQ (multi-stage query) tasks that benefit from the stages visualization view.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/components/show-json-or-stages/show-json-or-stages.tsx
• Lines: 1-128

Signature

export interface ShowJsonOrStagesProps {
  endpoint: string;
  transform?: (x: any) => any;
  downloadFilename?: string;
}

export const ShowJsonOrStages: React.NamedExoticComponent<ShowJsonOrStagesProps>;

Import

import { ShowJsonOrStages } from './components/show-json-or-stages/show-json-or-stages';

I/O Contract

Inputs

Name	Type	Required	Description
endpoint	string	Yes	The Druid API endpoint URL path to fetch JSON data from
transform	(x: any) => any	No	An optional transformation function applied to the response data before display
downloadFilename	string	No	If provided, enables a download button that saves the JSON with this filename

Outputs

Name	Type	Description
JSX.Element	div	A container with action buttons and either an ExecutionStagesPane, a read-only AceEditor, or a Loader

Usage Examples

Showing a task report with stages

<ShowJsonOrStages
  endpoint={`/druid/indexer/v1/task/${taskId}/reports`}
  downloadFilename={`task-report-${taskId}.json`}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development