Menu

Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Enterprise Open source

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

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

Import

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

Constructors

ConstructorModifiersDescription
constructor(props, context)Constructs a new instance of the QueryField class

Properties

PropertyModifiersTypeDescription
editorEditor | null
handleBlur(event: Event, editor: CoreEditor, next: Function) => anyWe need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
lastExecutedValueValue | null
mountedboolean
onChange(value: Value, runQuery?: boolean | undefined) => voidUpdate local state, propagate change upstream and optionally run the query afterwards.
pluginsPlugin[]
runOnChange() => void
runOnChangeAndRunQuery() => void
runOnChangeDebouncedFunction
runOnRunQuery() => void

Methods

MethodModifiersDescription
cleanText(text)
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
render()

constructor(props, context)

Constructs a new instance of the QueryField class

Signature

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

Parameters

ParameterTypeDescription
propsQueryFieldProps
contextContext<any>

editor property

Signature

typescript
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

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

lastExecutedValue property

Signature

typescript
lastExecutedValue: Value | null;

mounted property

Signature

typescript
mounted: boolean;

onChange property

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

Signature

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

plugins property

Signature

typescript
plugins: Plugin[];

runOnChange property

Signature

typescript
runOnChange: () => void;

runOnChangeAndRunQuery property

Signature

typescript
runOnChangeAndRunQuery: () => void;

runOnChangeDebounced property

Signature

typescript
runOnChangeDebounced: Function;

runOnRunQuery property

Signature

typescript
runOnRunQuery: () => void;

cleanText method

Signature

typescript
cleanText(text: string): string;

Parameters

ParameterTypeDescription
textstring

Returns:

string

componentDidMount method

Signature

typescript
componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

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

Parameters

ParameterTypeDescription
prevPropsQueryFieldProps
prevStateQueryFieldState

Returns:

void

componentWillUnmount method

Signature

typescript
componentWillUnmount(): void;

Returns:

void

render method

Signature

typescript
render(): JSX.Element;

Returns:

JSX.Element