Annotations: Fix types?

public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { GrafanaAnnotationQuery, GrafanaAnnotationType } from '../types';
+import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQueryType } from '../types';
 import AnnotationQueryEditor from './AnnotationQueryEditor';
 
 describe('AnnotationQueryEditor', () => {
@@ -11,11 +11,9 @@ describe('AnnotationQueryEditor', () => {
   beforeEach(() => {
     mockQuery = {
       refId: 'Anno',
+      queryType: GrafanaQueryType.Annotations,
       type: GrafanaAnnotationType.Tags,
       limit: 100,
-      enable: true,
-      name: 'a name',
-      iconColor: 'a color',
     };
   });
 
@@ -31,7 +29,11 @@ describe('AnnotationQueryEditor', () => {
     expect(maxLimit).toBeInTheDocument();
   });
 
-  describe('when the query type is "Tags"', () => {
+  describe('when the query type is "Tags" and the tags array exists', () => {
+    beforeEach(() => {
+      mockQuery.tags = [];
+    });
+
     it('has a "Match any" toggle', () => {
       render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
       const matchAny = screen.getByLabelText('Match any');

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

@@ -97,7 +97,7 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
           />
         </InlineField>
       </InlineFieldRow>
-      {type === GrafanaAnnotationType.Tags && (
+      {type === GrafanaAnnotationType.Tags && tags && (
         <InlineFieldRow>
           <InlineField label="Match any" labelWidth={18} tooltip={matchTooltipContent}>
             <InlineSwitch id="grafana-annotations__match-any" value={matchAny} onChange={onMatchAnyChange} />
@@ -105,7 +105,6 @@ export default function AnnotationQueryEditor({ query, onChange }: Props) {
           <InlineField label="Tags" labelWidth="auto" tooltip={tagsTooltipContent}>
             <TagFilter
               inputId="grafana-annotations__tags"
-              allowCustomValue
               onChange={onTagsChange}
               tagOptions={getAnnotationTags}
               tags={tags}

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

@@ -1,8 +1,8 @@
-import { AnnotationQueryRequest, DataSourceInstanceSettings, dateTime } from '@grafana/data';
+import { DataSourceInstanceSettings, dateTime, RawTimeRange, TimeRange } from '@grafana/data';
 
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 import { GrafanaDatasource } from './datasource';
-import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQuery } from './types';
+import { GrafanaAnnotationQuery, GrafanaAnnotationType } from './types';
 
 jest.mock('@grafana/runtime', () => ({
   ...((jest.requireActual('@grafana/runtime') as unknown) as object),
@@ -79,7 +79,7 @@ describe('grafana data source', () => {
 });
 
 function setupAnnotationQueryOptions(annotation: Partial<GrafanaAnnotationQuery>, dashboard?: { id: number }) {
-  return ({
+  return {
     annotation,
     dashboard,
     range: {
@@ -87,5 +87,10 @@ function setupAnnotationQueryOptions(annotation: Partial<GrafanaAnnotationQuery>
       to: dateTime(1432288401),
     },
     rangeRaw: { from: 'now-24h', to: 'now' },
-  } as unknown) as AnnotationQueryRequest<GrafanaQuery>;
+  } as {
+    range: TimeRange;
+    rangeRaw: RawTimeRange;
+    annotation: GrafanaAnnotationQuery;
+    dashboard: any;
+  };
 }

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

@@ -2,29 +2,31 @@ import { from, merge, Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { getBackendSrv, getGrafanaLiveSrv, getTemplateSrv, toDataQueryResponse } from '@grafana/runtime';
 import {
-  AnnotationQueryRequest,
+  AnnotationQuery,
   DataQueryRequest,
   DataQueryResponse,
   DataSourceApi,
   DataSourceInstanceSettings,
   isValidLiveChannelAddress,
   parseLiveChannelAddress,
+  RawTimeRange,
   StreamingFrameOptions,
+  TimeRange,
   toDataFrame,
 } from '@grafana/data';
 
-import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQuery, GrafanaQueryType } from './types';
+import { GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQueryType } from './types';
 import AnnotationQueryEditor from './components/AnnotationQueryEditor';
 import { getDashboardSrv } from '../../../features/dashboard/services/DashboardSrv';
 
 let counter = 100;
 
-export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
+export class GrafanaDatasource extends DataSourceApi<GrafanaAnnotationQuery> {
   constructor(instanceSettings: DataSourceInstanceSettings) {
     super(instanceSettings);
     this.annotations = {
       QueryEditor: AnnotationQueryEditor,
-      prepareAnnotation(json: any): GrafanaAnnotationQuery {
+      prepareAnnotation(json: any): AnnotationQuery<GrafanaAnnotationQuery> {
         // Previously, these properties lived outside of target
         // This should handle migrating them
         json.target = json.target ?? {
@@ -35,13 +37,13 @@ export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
         }; // using spread syntax caused an infinite loop in StandardAnnotationQueryEditor
         return json;
       },
-      prepareQuery(anno: GrafanaAnnotationQuery): GrafanaQuery {
-        return { ...anno, refId: anno.name, queryType: GrafanaQueryType.Annotations };
+      prepareQuery(anno: AnnotationQuery<GrafanaAnnotationQuery>): GrafanaAnnotationQuery {
+        return { ...anno.target!, refId: anno.name, queryType: GrafanaQueryType.Annotations };
       },
     };
   }
 
-  query(request: DataQueryRequest<GrafanaQuery>): Observable<DataQueryResponse> {
+  query(request: DataQueryRequest<GrafanaAnnotationQuery>): Observable<DataQueryResponse> {
     const queries: Array<Observable<DataQueryResponse>> = [];
     const templateSrv = getTemplateSrv();
     for (const target of request.targets) {
@@ -53,7 +55,7 @@ export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
           this.getAnnotations({
             range: request.range,
             rangeRaw: request.range.raw,
-            annotation: target.target as any,
+            annotation: target,
             dashboard: getDashboardSrv().getCurrent(),
           })
         );
@@ -109,7 +111,12 @@ export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
     return Promise.resolve([]);
   }
 
-  async getAnnotations(options: AnnotationQueryRequest<GrafanaQuery>): Promise<DataQueryResponse> {
+  async getAnnotations(options: {
+    range: TimeRange;
+    rangeRaw: RawTimeRange;
+    annotation: GrafanaAnnotationQuery;
+    dashboard: any;
+  }): Promise<DataQueryResponse> {
     const templateSrv = getTemplateSrv();
     const annotation = (options.annotation as unknown) as GrafanaAnnotationQuery;
     const params: any = {
@@ -154,7 +161,7 @@ export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
     const annotations = await getBackendSrv().get(
       '/api/annotations',
       params,
-      `grafana-data-source-annotations-${annotation.name}-${options.dashboard?.id}`
+      `grafana-data-source-annotations-${annotation.refId}-${options.dashboard?.id}`
     );
     return { data: [toDataFrame(annotations)] };
   }

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

@@ -1,4 +1,4 @@
-import { AnnotationQuery, DataQuery } from '@grafana/data';
+import { DataQuery } from '@grafana/data';
 import { LiveDataFilter } from '@grafana/runtime';
 
 //----------------------------------------------
@@ -32,7 +32,7 @@ export enum GrafanaAnnotationType {
   Tags = 'tags',
 }
 
-export interface GrafanaAnnotationQuery extends AnnotationQuery<GrafanaQuery> {
+export interface GrafanaAnnotationQuery extends GrafanaQuery {
   type: GrafanaAnnotationType; // tags
   limit: number; // 100
   tags?: string[];