API Reference@grafana/ui › QueryField

QueryField class

Renders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.

Signature

export declare class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState> 

Import

import { QueryField } from '@grafana/ui';

Constructors

Constructor Modifiers Description
constructor(props, context) Constructs a new instance of the QueryField class

Properties

Property Modifiers Type Description
editor Editor | null
handleBlur (event: Event, editor: CoreEditor, next: Function) => any We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
lastExecutedValue Value | null
mounted boolean
onChange (value: Value, runQuery?: boolean | undefined) => void Update local state, propagate change upstream and optionally run the query afterwards.
plugins Plugin[]
runOnChange () => void
runOnChangeAndRunQuery () => void
runOnChangeDebounced Function
runOnRunQuery () => void

Methods

Method Modifiers Description
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
render()

constructor(props, context)

Constructs a new instance of the QueryField class

Signature

constructor(props: QueryFieldProps, context: Context<any>);

Parameters

Parameter Type Description
props QueryFieldProps
context Context<any>

editor property

Signature

editor: Editor | null;

handleBlur property

We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.

Signature

handleBlur: (event: Event, editor: CoreEditor, next: Function) => any;

lastExecutedValue property

Signature

lastExecutedValue: Value | null;

mounted property

Signature

mounted: boolean;

onChange property

Update local state, propagate change upstream and optionally run the query afterwards.

Signature

onChange: (value: Value, runQuery?: boolean | undefined) => void;

plugins property

Signature

plugins: Plugin[];

runOnChange property

Signature

runOnChange: () => void;

runOnChangeAndRunQuery property

Signature

runOnChangeAndRunQuery: () => void;

runOnChangeDebounced property

Signature

runOnChangeDebounced: Function;

runOnRunQuery property

Signature

runOnRunQuery: () => void;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState): void;

Parameters

Parameter Type Description
prevProps QueryFieldProps
prevState QueryFieldState

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element