Flux: use monaco query editor (#26179)

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<Props> {
-  onFluxQueryChange = (e: any) => {
+export class FluxQueryEditor extends PureComponent<Props> {
+  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<Props> {
     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 = (
+      <div>
+        Type: <i>ctrl+space</i> to show template variable suggestions <br />
+        Many queries can be copied from chronograph
+      </div>
+    );
+
     return (
       <>
-        <div className="gf-form">
-          <TextArea
-            value={target.query || ''}
-            onChange={this.onFluxQueryChange}
-            onBlur={this.onFluxBlur}
-            placeholder="Flux query"
-            rows={10}
-          />
-        </div>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel width={5} tooltip="Queries can be copied from chronograph">
-              Help
-            </InlineFormLabel>
-            <Segment options={samples} value="Sample Query" onChange={this.onSampleChange} />
-            <LinkButton
-              icon="external-link-alt"
-              variant="secondary"
-              target="blank"
-              href="https://docs.influxdata.com/flux/latest/introduction/getting-started/"
-            >
-              Flux docs
-            </LinkButton>
-          </div>
+        <CodeEditor
+          height={'200px'}
+          language="sql"
+          value={target.query || ''}
+          onBlur={this.onFluxQueryChange}
+          onSave={this.onFluxQueryChange}
+          showMiniMap={false}
+          showLineNumbers={true}
+          getSuggestions={this.getSuggestions}
+          onEditorDidMount={this.editorDidMountCallbackHack}
+        />
+        <div
+          className={cx(
+            'gf-form-inline',
+            css`
+              margin-top: 6px;
+            `
+          )}
+        >
+          <LinkButton
+            icon="external-link-alt"
+            variant="secondary"
+            target="blank"
+            href="https://docs.influxdata.com/flux/latest/introduction/getting-started/"
+          >
+            Flux language syntax
+          </LinkButton>
+          <Segment options={samples} value="Sample Query" onChange={this.onSampleChange} />
           <div className="gf-form gf-form--grow">
             <div className="gf-form-label gf-form-label--grow"></div>
           </div>
+          <InlineFormLabel width={5} tooltip={helpTooltip}>
+            Help
+          </InlineFormLabel>
         </div>
       </>
     );

public/app/plugins/datasource/influxdb/datasource.ts

@@ -62,6 +62,13 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     return from(this.classicQuery(request));
   }
 
+  getQueryDisplayText(query: InfluxQuery) {
+    if (this.is2x) {
+      return query.query;
+    }
+    return new InfluxQueryModel(query).render(false);
+  }
+
   /**
    * Only applied on flux queries
    */

public/app/plugins/datasource/influxdb/query_ctrl.ts

@@ -420,8 +420,4 @@ export class InfluxQueryCtrl extends QueryCtrl {
     }
     return null;
   }
-
-  getCollapsedText() {
-    return this.queryModel.render(false);
-  }
 }