Annotations: create React component, naive attempt at hooking together

packages/grafana-data/src/types/datasource.ts

@@ -354,6 +354,7 @@ export interface QueryEditorProps<
   TOptions extends DataSourceJsonData = DataSourceJsonData,
   TVQuery extends DataQuery = TQuery
 > {
+  annotation?: AnnotationQuery<DataQuery>;
   datasource: DSType;
   query: TVQuery;
   onRunQuery: () => void;

public/app/features/annotations/components/StandardAnnotationQueryEditor.tsx

@@ -167,6 +167,7 @@ export default class StandardAnnotationQueryEditor extends PureComponent<Props,
     return (
       <>
         <QueryEditor
+          annotation={annotation}
           key={datasource?.name}
           query={query}
           datasource={datasource}

public/app/plugins/datasource/grafana/components/AnnotationQuery.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { InlineField, Select, Switch } from '@grafana/ui';
+import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
+import { SelectableValue } from '@grafana/data';
+import { GrafanaAnnotationQuery, GrafanaAnnotationType } from '../types';
+
+const filterTooltipContent = (
+  <ul>
+    <li>
+      Dashboard: This will fetch annotation and alert state changes for whole dashboard and show them only on the event
+      {"'"}s originating panel.
+    </li>
+    <li>Tags: This will fetch any annotation events that match the tags filter.</li>
+  </ul>
+);
+
+const matchTooltipContent =
+  'By default Grafana only shows annotations that match all tags in the query. Enabling this returns annotations that match any of the tags in the query.';
+
+const tagsTooltipContent = (
+  <div>
+    A tag entered here as {"'"}foo{"'"} will match
+    <ul>
+      <li>
+        annotation tags {"'"}foo{"'"}
+      </li>
+      <li>
+        annotation key-value tags formatted as {"'"}foo:bar{"'"}
+      </li>
+    </ul>
+  </div>
+);
+
+const annotationTypes = [
+  { label: 'Dashboard', value: GrafanaAnnotationType.Dashboard },
+  { label: 'Tags', value: GrafanaAnnotationType.Tags },
+];
+
+const limitOptions = [10, 50, 100, 200, 300, 500, 1000, 2000].map((limit) => ({
+  label: String(limit),
+  value: limit,
+}));
+
+interface Props {
+  annotation: GrafanaAnnotationQuery;
+  onChange: (newValue: GrafanaAnnotationQuery) => void;
+}
+
+export default function AnnotationQuery({ annotation, onChange }: Props) {
+  const { limit = 100, matchAny = false, tags = [], type = GrafanaAnnotationType.Tags } = annotation;
+
+  const onFilterByChange = (newValue: SelectableValue<GrafanaAnnotationType>) =>
+    onChange({
+      ...annotation,
+      type: newValue.value!,
+    });
+
+  const onMaxLimitChange = (newValue: SelectableValue<number>) =>
+    onChange({
+      ...annotation,
+      limit: newValue.value!,
+    });
+
+  const onMatchAnyChange = (newValue: React.ChangeEvent<HTMLInputElement>) =>
+    onChange({
+      ...annotation,
+      matchAny: newValue.target.checked,
+    });
+
+  const onTagsChange = (tags: string[]) =>
+    onChange({
+      ...annotation,
+      tags,
+    });
+
+  return (
+    <div className="gf-form-group">
+      <div className="gf-form-inline">
+        <InlineField label="Filter by" labelWidth={18} tooltip={filterTooltipContent}>
+          <Select width={16} options={annotationTypes} value={type} onChange={onFilterByChange} />
+        </InlineField>
+        <InlineField label="Max limit">
+          <Select width={16} options={limitOptions} value={limit} onChange={onMaxLimitChange} />
+        </InlineField>
+      </div>
+      <div className="gf-form-inline">
+        {annotation.type === 'tags' && (
+          <>
+            <InlineField label="Match any" labelWidth={18} tooltip={matchTooltipContent}>
+              <div className="gf-form-switch">
+                <Switch value={matchAny} onChange={onMatchAnyChange} />
+              </div>
+            </InlineField>
+            <InlineField label="Tags" labelWidth="auto" tooltip={tagsTooltipContent}>
+              <TagFilter onChange={onTagsChange} tagOptions={() => Promise.resolve([])} tags={tags} />
+            </InlineField>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

public/app/plugins/datasource/grafana/datasource.ts

@@ -14,12 +14,16 @@ import { GrafanaQuery, GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQue
 import { getBackendSrv, getGrafanaLiveSrv, getTemplateSrv, toDataQueryResponse } from '@grafana/runtime';
 import { Observable, of, merge } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
+import AnnotationQuery from './components/AnnotationQuery';
 
 let counter = 100;
 
 export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
   constructor(instanceSettings: DataSourceInstanceSettings) {
     super(instanceSettings);
+    this.annotations = {
+      QueryEditor: AnnotationQuery,
+    };
   }
 
   query(request: DataQueryRequest<GrafanaQuery>): Observable<DataQueryResponse> {