diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx index 4bea9333fe2..dc9de22cb93 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx @@ -29,6 +29,7 @@ export interface QueryFieldProps { onRunQuery?: () => void; onBlur?: () => void; onChange?: (value: string) => void; + onRichValueChange?: (value: Value) => void; onClick?: (event: Event, editor: CoreEditor, next: () => any) => any; onTypeahead?: (typeahead: TypeaheadInput) => Promise; onWillApplySuggestion?: (suggestion: string, state: SuggestionsState) => string; @@ -121,6 +122,9 @@ export class QueryField extends React.PureComponent { const documentChanged = value.document !== this.state.value.document; const prevValue = this.state.value; + if (this.props.onRichValueChange) { + this.props.onRichValueChange(value); + } // Update local state with new value and optionally change value upstream. this.setState({ value }, () => { diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx index a2b1f340216..a1d36871c50 100644 --- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx @@ -1,6 +1,7 @@ // Libraries import React, { ReactNode } from 'react'; import intersection from 'lodash/intersection'; +import debounce from 'lodash/debounce'; import { QueryField, @@ -12,10 +13,11 @@ import { Select, MultiSelect, } from '@grafana/ui'; +import Plain from 'slate-plain-serializer'; // Utils & Services // dom also includes Element polyfills -import { Plugin, Node, Editor } from 'slate'; +import { Plugin, Node, Editor, Value } from 'slate'; import syntax from '../syntax'; // Types @@ -140,33 +142,11 @@ export class CloudWatchLogsQueryField extends React.PureComponent { + onChangeQuery = (value: string) => { // Send text change to parent - const { query, onChange, onRunQuery, datasource, exploreMode } = this.props; + const { query, onChange } = this.props; const { selectedLogGroups, selectedRegion } = this.state; - // TEMP: Remove when logs/metrics unification is complete - if (datasource.languageProvider && exploreMode === ExploreMode.Logs) { - const cloudwatchLanguageProvider = datasource.languageProvider as CloudWatchLanguageProvider; - const queryUsesStatsCommand = cloudwatchLanguageProvider.isStatsQuery(query.expression); - - if (queryUsesStatsCommand) { - this.setState({ - hint: { - message: 'You are trying to run a stats query in Logs mode. ', - fix: { - label: 'Switch to Metrics mode.', - action: this.switchToMetrics, - }, - }, - }); - } else { - this.setState({ - hint: undefined, - }); - } - } - if (onChange) { const nextQuery = { ...query, @@ -175,10 +155,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent logGroup.value!) } ); - - return result; }; switchToMetrics = () => { @@ -282,6 +256,34 @@ export class CloudWatchLogsQueryField extends React.PureComponent { + const { datasource } = this.props; + // TEMP: Remove when logs/metrics unification is complete + if (datasource.languageProvider && this.props.exploreMode === ExploreMode.Logs) { + const cloudwatchLanguageProvider = datasource.languageProvider as CloudWatchLanguageProvider; + const queryUsesStatsCommand = cloudwatchLanguageProvider.isStatsQuery(Plain.serialize(value)); + if (queryUsesStatsCommand) { + this.setState({ + hint: { + message: 'You are trying to run a stats query in Logs mode. ', + fix: { + label: 'Switch to Metrics mode.', + action: this.switchToMetrics, + }, + }, + }); + } else { + this.setState({ + hint: undefined, + }); + } + } + }, 250); + render() { const { ExtraFieldElement, data, query, syntaxLoaded, datasource } = this.props; const { @@ -359,6 +361,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent {ExtraFieldElement}