Annotations: add standard annotations support (and use it for flux queries) (#27375)

public/app/plugins/datasource/influxdb/components/FluxQueryEditor.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import coreModule from 'app/core/core_module';
 import { InfluxQuery } from '../types';
-import { SelectableValue } from '@grafana/data';
+import { SelectableValue, QueryEditorProps } from '@grafana/data';
 import { cx, css } from 'emotion';
 import {
   InlineFormLabel,
@@ -12,12 +12,10 @@ import {
   CodeEditorSuggestionItemKind,
 } from '@grafana/ui';
 import { getTemplateSrv } from '@grafana/runtime';
+import InfluxDatasource from '../datasource';
 
-interface Props {
-  target: InfluxQuery;
-  change: (target: InfluxQuery) => void;
-  refresh: () => void;
-}
+// @ts-ignore -- complicated since the datasource is not really reactified yet!
+type Props = QueryEditorProps<InfluxDatasource, InfluxQuery>;
 
 const samples: Array<SelectableValue<string>> = [
   { label: 'Show buckets', description: 'List the avaliable buckets (table)', value: 'buckets()' },
@@ -87,20 +85,19 @@ v1.tagValues(
 
 export class FluxQueryEditor extends PureComponent<Props> {
   onFluxQueryChange = (query: string) => {
-    const { target, change } = this.props;
-    change({ ...target, query });
-    this.props.refresh();
+    this.props.onChange({ ...this.props.query, query });
+    this.props.onRunQuery();
   };
 
   onSampleChange = (val: SelectableValue<string>) => {
-    this.props.change({
-      ...this.props.target,
+    this.props.onChange({
+      ...this.props.query,
       query: val.value!,
     });
 
     // Angular HACK: Since the target does not actually change!
     this.forceUpdate();
-    this.props.refresh();
+    this.props.onRunQuery();
   };
 
   getSuggestions = (): CodeEditorSuggestionItem[] => {
@@ -157,7 +154,7 @@ export class FluxQueryEditor extends PureComponent<Props> {
   };
 
   render() {
-    const { target } = this.props;
+    const { query } = this.props;
 
     const helpTooltip = (
       <div>
@@ -171,7 +168,7 @@ export class FluxQueryEditor extends PureComponent<Props> {
         <CodeEditor
           height={'200px'}
           language="sql"
-          value={target.query || ''}
+          value={query.query || ''}
           onBlur={this.onFluxQueryChange}
           onSave={this.onFluxQueryChange}
           showMiniMap={false}
@@ -211,6 +208,6 @@ export class FluxQueryEditor extends PureComponent<Props> {
 coreModule.directive('fluxQueryEditor', [
   'reactDirective',
   (reactDirective: any) => {
-    return reactDirective(FluxQueryEditor, ['target', 'change', 'refresh']);
+    return reactDirective(FluxQueryEditor, ['query', 'onChange', 'onRunQuery']);
   },
 ]);

public/app/plugins/datasource/influxdb/components/VariableQueryEditor.tsx

@@ -19,12 +19,13 @@ export default class VariableQueryEditor extends PureComponent<Props> {
     if (datasource.isFlux) {
       return (
         <FluxQueryEditor
-          target={{
+          datasource={datasource}
+          query={{
             refId: 'A',
             query,
           }}
-          refresh={this.onRefresh}
-          change={v => onChange(v.query)}
+          onRunQuery={this.onRefresh}
+          onChange={v => onChange(v.query)}
         />
       );
     }

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

@@ -21,6 +21,7 @@ import { InfluxQueryBuilder } from './query_builder';
 import { InfluxQuery, InfluxOptions, InfluxVersion } from './types';
 import { getBackendSrv, getTemplateSrv, DataSourceWithBackend, frameToMetricFindValue } from '@grafana/runtime';
 import { Observable, from } from 'rxjs';
+import { FluxQueryEditor } from './components/FluxQueryEditor';
 
 export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery, InfluxOptions> {
   type: string;
@@ -55,6 +56,13 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     this.httpMode = settingsData.httpMode || 'GET';
     this.responseParser = new ResponseParser();
     this.isFlux = settingsData.version === InfluxVersion.Flux;
+
+    if (this.isFlux) {
+      // When flux, use an annotation processor rather than the `annotationQuery` lifecycle
+      this.annotations = {
+        QueryEditor: FluxQueryEditor,
+      };
+    }
   }
 
   query(request: DataQueryRequest<InfluxQuery>): Observable<DataQueryResponse> {
@@ -73,6 +81,16 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     return new InfluxQueryModel(query).render(false);
   }
 
+  /**
+   * Returns false if the query should be skipped
+   */
+  filterQuery(query: InfluxQuery): boolean {
+    if (this.isFlux) {
+      return !!query.query;
+    }
+    return true;
+  }
+
   /**
    * Only applied on flux queries
    */
@@ -183,7 +201,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
   async annotationQuery(options: AnnotationQueryRequest<any>): Promise<AnnotationEvent[]> {
     if (this.isFlux) {
       return Promise.reject({
-        message: 'Annotations are not yet supported with flux queries',
+        message: 'Flux requires the standard annotation query',
       });
     }
 

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -1,9 +1,9 @@
 
 <query-editor-row ng-if="ctrl.datasource.isFlux" query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="true">
   <flux-query-editor 
-    target="ctrl.target" 
-    change="ctrl.onChange" 
-    refresh="ctrl.onRunQuery"
+    query="ctrl.target" 
+    onChange="ctrl.onChange" 
+    onRunQuery="ctrl.onRunQuery"
   ></flux-query-editor>
 </query-editor-row>