DQLEditor

The DQLEditor is specifically designed for editing DQL queries. It further offers syntax highlighting and autocomplete functionality specific to the Dynatrace Query Language. Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.

OverviewProperties

Import

import { DQLEditor } from '@dynatrace/strato-components-preview/editors';

Use cases

CodeSandbox

Disable editing

To disable editing of the content, use the readOnly property.

CodeSandbox

Enable linewrap

To enable linewrap as soon as the content overflows, use the linewrap property.

CodeSandbox

Expand editor to full height

To expand the DQLEditor to the full available height of its parent, use the fullHeight property. If you want the DQLEditor to respect the min-height and max-height of the parent, use a flex container.

CodeSandbox

Query autocomplete

The DQLEditor supports autocomplete functionality to assist with writing DQL queries more efficiently. Autocomplete suggestions appear automatically as you type, or can be manually triggered using Ctrl+Space.

Note

In the following example, the autocomplete suggestions are limited for demonstration purposes. In a real-world environment, the suggestions will be more comprehensive, depending on the query context.

CodeSandbox