diff --git a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx index feb3c1ada9c..17d743bbdaf 100644 --- a/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx +++ b/public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx @@ -1,8 +1,17 @@ -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import coreModule from 'app/core/core_module'; import { InfluxQuery } from '../types'; import { SelectableValue } from '@grafana/data'; -import { InlineFormLabel, LinkButton, Segment, TextArea } from '@grafana/ui'; +import { cx, css } from 'emotion'; +import { + InlineFormLabel, + LinkButton, + Segment, + CodeEditor, + CodeEditorSuggestionItem, + CodeEditorSuggestionItemKind, +} from '@grafana/ui'; +import { getTemplateSrv } from '@grafana/runtime'; interface Props { target: InfluxQuery; @@ -76,13 +85,10 @@ v1.tagValues( }, ]; -export class FluxQueryEditor extends Component { - onFluxQueryChange = (e: any) => { +export class FluxQueryEditor extends PureComponent { + onFluxQueryChange = (query: string) => { const { target, change } = this.props; - change({ ...target, query: e.currentTarget.value }); - }; - - onFluxBlur = (e: any) => { + change({ ...target, query }); this.props.refresh(); }; @@ -97,37 +103,105 @@ export class FluxQueryEditor extends Component { this.props.refresh(); }; + getSuggestions = (): CodeEditorSuggestionItem[] => { + const sugs: CodeEditorSuggestionItem[] = [ + { + label: 'v.timeRangeStart', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'The start time', + }, + { + label: 'v.timeRangeStop', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'The stop time', + }, + { + label: 'v.windowPeriod', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'based on max data points', + }, + { + label: 'v.defaultBucket', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'bucket configured in the datsource', + }, + { + label: 'v.organization', + kind: CodeEditorSuggestionItemKind.Property, + detail: 'org configured for the datsource', + }, + ]; + + const templateSrv = getTemplateSrv(); + templateSrv.getVariables().forEach(variable => { + const label = '${' + variable.name + '}'; + let val = templateSrv.replace(label); + if (val === label) { + val = ''; + } + sugs.push({ + label, + kind: CodeEditorSuggestionItemKind.Text, + detail: `(Template Variable) ${val}`, + }); + }); + + return sugs; + }; + + // For some reason in angular, when this component gets re-mounted, the width + // is not set properly. This forces the layout shorly after mount so that it + // displays OK. Note: this is not an issue when used directly in react + editorDidMountCallbackHack = (editor: any) => { + setTimeout(() => editor.layout(), 100); + }; + render() { const { target } = this.props; + + const helpTooltip = ( +
+ Type: ctrl+space to show template variable suggestions
+ Many queries can be copied from chronograph +
+ ); + return ( <> -
-