Implementation:Apache Druid ShowValueDialog

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

Overview

ShowValueDialog is a React dialog component that displays a string value with optional formatted JSON view and copy-to-clipboard functionality.

Description

The ShowValueDialog component renders a BlueprintJS Dialog that presents a string value in two possible views: a formatted JSON view using AceEditor (when the string can be parsed as valid JSON) and a raw text view using a TextArea. Users can toggle between "Formatted" and "Raw" tabs when JSON parsing succeeds. The dialog supports normal and large size variants and includes a copy-to-clipboard button that copies the raw string value.

Usage

Used throughout the web console to display full values that may be truncated in table cells, such as JSON payloads, configuration strings, or long text values.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx
• Lines: 1-111

Signature

export interface ShowValueDialogProps {
  title?: string;
  str: string;
  size?: 'normal' | 'large';
  onClose: () => void;
}

export const ShowValueDialog = React.memo(function ShowValueDialog(
  props: ShowValueDialogProps,
): JSX.Element;

Import

import { ShowValueDialog } from 'web-console/src/dialogs/show-value-dialog/show-value-dialog';

I/O Contract

Inputs

Name	Type	Required	Description
title	string	No	Dialog title; defaults to "Full value"
str	string	Yes	The string value to display
size	'normal' or 'large'	No	Dialog size variant; defaults to 'normal'
onClose	() => void	Yes	Callback invoked when the dialog is closed

Outputs

Name	Type	Description
rendered dialog	JSX.Element	A BlueprintJS Dialog with formatted/raw toggle for JSON strings, an AceEditor or TextArea view, and a copy-to-clipboard button

Usage Examples

Displaying a JSON Value

<ShowValueDialog
  title="Task Payload"
  str='{"type":"index","spec":{"dataSchema":{}}}'
  size="large"
  onClose={() => setShowValue(false)}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development