CloudMonitoring: Support request cancellation properly (#28847)

public/app/plugins/datasource/cloud-monitoring/api.test.ts

+import { of } from 'rxjs';
+
 import Api from './api';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
-import { SelectableValue } from '@grafana/data';
+import { createFetchResponse } from 'test/helpers/createFetchResponse';
 
 jest.mock('@grafana/runtime', () => ({
   ...((jest.requireActual('@grafana/runtime') as unknown) as object),
@@ -12,58 +14,60 @@ const response = [
   { label: 'test2', value: 'test2' },
 ];
 
-describe('api', () => {
-  const datasourceRequestMock = jest.spyOn(backendSrv, 'datasourceRequest');
-  beforeEach(() => {
-    datasourceRequestMock.mockImplementation((options: any) => {
+type Args = { path?: string; options?: any; response?: any; cache?: any };
+
+async function getTestContext({ path = 'some-resource', options = {}, response = {}, cache }: Args = {}) {
+  jest.clearAllMocks();
+
+  const fetchMock = jest.spyOn(backendSrv, 'fetch');
+
+  fetchMock.mockImplementation((options: any) => {
     const data = { [options.url.match(/([^\/]*)\/*$/)[1]]: response };
-      return Promise.resolve({ data, status: 200 });
-    });
+    return of(createFetchResponse(data));
   });
 
+  const api = new Api('/cloudmonitoring/');
+
+  if (cache) {
+    api.cache[path] = cache;
+  }
+
+  const res = await api.get(path, options);
+
+  return { res, api, fetchMock };
+}
+
+describe('api', () => {
   describe('when resource was cached', () => {
-    let api: Api;
-    let res: Array<SelectableValue<string>>;
-    beforeEach(async () => {
-      api = new Api('/cloudmonitoring/');
-      api.cache['some-resource'] = response;
-      res = await api.get('some-resource');
-    });
+    it('should return cached value and not load from source', async () => {
+      const path = 'some-resource';
+      const { res, api, fetchMock } = await getTestContext({ path, cache: response });
 
-    it('should return cached value and not load from source', () => {
       expect(res).toEqual(response);
-      expect(api.cache['some-resource']).toEqual(response);
-      expect(datasourceRequestMock).not.toHaveBeenCalled();
+      expect(api.cache[path]).toEqual(response);
+      expect(fetchMock).not.toHaveBeenCalled();
     });
   });
 
   describe('when resource was not cached', () => {
-    let api: Api;
-    let res: Array<SelectableValue<string>>;
-    beforeEach(async () => {
-      api = new Api('/cloudmonitoring/');
-      res = await api.get('some-resource');
-    });
+    it('should return from source and not from cache', async () => {
+      const path = 'some-resource';
+      const { res, api, fetchMock } = await getTestContext({ path, response });
 
-    it('should return cached value and not load from source', () => {
       expect(res).toEqual(response);
-      expect(api.cache['some-resource']).toEqual(response);
-      expect(datasourceRequestMock).toHaveBeenCalled();
+      expect(api.cache[path]).toEqual(response);
+      expect(fetchMock).toHaveBeenCalled();
     });
   });
 
   describe('when cache should be bypassed', () => {
-    let api: Api;
-    let res: Array<SelectableValue<string>>;
-    beforeEach(async () => {
-      api = new Api('/cloudmonitoring/');
-      api.cache['some-resource'] = response;
-      res = await api.get('some-resource', { useCache: false });
-    });
+    it('should return from source and not from cache', async () => {
+      const options = { useCache: false };
+      const path = 'some-resource';
+      const { res, fetchMock } = await getTestContext({ path, response, cache: response, options });
 
-    it('should return cached value and not load from source', () => {
       expect(res).toEqual(response);
-      expect(datasourceRequestMock).toHaveBeenCalled();
+      expect(fetchMock).toHaveBeenCalled();
     });
   });
 });

public/app/plugins/datasource/cloud-monitoring/api.ts

-import appEvents from 'app/core/app_events';
-import { CoreEvents } from 'app/types';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
 import { SelectableValue } from '@grafana/data';
-import { getBackendSrv } from '@grafana/runtime';
+import { FetchResponse, getBackendSrv } from '@grafana/runtime';
 
+import appEvents from 'app/core/app_events';
+import { CoreEvents } from 'app/types';
 import { formatCloudMonitoringError } from './functions';
 import { MetricDescriptor } from './types';
 
+export interface PostResponse {
+  results: Record<string, any>;
+}
+
 interface Options {
   responseMap?: (res: any) => SelectableValue<string> | MetricDescriptor;
   baseUrl?: string;
@@ -25,19 +31,20 @@ export default class Api {
     };
   }
 
-  async get(path: string, options?: Options): Promise<Array<SelectableValue<string>> | MetricDescriptor[]> {
-    try {
+  get(path: string, options?: Options): Promise<Array<SelectableValue<string>> | MetricDescriptor[]> {
     const { useCache, responseMap, baseUrl } = { ...this.defaultOptions, ...options };
 
     if (useCache && this.cache[path]) {
-        return this.cache[path];
+      return Promise.resolve(this.cache[path]);
     }
 
-      const response = await getBackendSrv().datasourceRequest({
+    return getBackendSrv()
+      .fetch<Record<string, any>>({
         url: baseUrl + path,
         method: 'GET',
-      });
-
+      })
+      .pipe(
+        map(response => {
           const responsePropName = path.match(/([^\/]*)\/*$/)![1];
           let res = [];
           if (response && response.data && response.data[responsePropName]) {
@@ -49,24 +56,31 @@ export default class Api {
           }
 
           return res;
-    } catch (error) {
-      appEvents.emit(CoreEvents.dsRequestError, { error: { data: { error: formatCloudMonitoringError(error) } } });
-      return [];
-    }
+        }),
+        catchError(error => {
+          appEvents.emit(CoreEvents.dsRequestError, {
+            error: { data: { error: formatCloudMonitoringError(error) } },
+          });
+          return of([]);
+        })
+      )
+      .toPromise();
   }
 
-  async post(data: { [key: string]: any }) {
-    return getBackendSrv().datasourceRequest({
+  post(data: Record<string, any>): Observable<FetchResponse<PostResponse>> {
+    return getBackendSrv().fetch<PostResponse>({
       url: '/api/tsdb/query',
       method: 'POST',
       data,
     });
   }
 
-  async test(projectName: string) {
-    return getBackendSrv().datasourceRequest({
+  test(projectName: string) {
+    return getBackendSrv()
+      .fetch<any>({
         url: `${this.baseUrl}${projectName}/metricDescriptors`,
         method: 'GET',
-    });
+      })
+      .toPromise();
   }
 }

public/app/plugins/datasource/cloud-monitoring/datasource.ts

@@ -14,8 +14,10 @@ import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 
 import { CloudMonitoringOptions, CloudMonitoringQuery, Filter, MetricDescriptor, QueryType } from './types';
 import { cloudMonitoringUnitMappings } from './constants';
-import API from './api';
+import API, { PostResponse } from './api';
 import { CloudMonitoringVariableSupport } from './variables';
+import { catchError, map, mergeMap } from 'rxjs/operators';
+import { from, Observable, of, throwError } from 'rxjs';
 
 export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonitoringQuery, CloudMonitoringOptions> {
   api: API;
@@ -37,16 +39,23 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
     return this.templateSrv.getVariables().map(v => `$${v.name}`);
   }
 
-  async query(options: DataQueryRequest<CloudMonitoringQuery>): Promise<DataQueryResponseData> {
+  query(options: DataQueryRequest<CloudMonitoringQuery>): Observable<DataQueryResponseData> {
+    return this.getTimeSeries(options).pipe(
+      map(data => {
+        if (!data.results) {
+          return { data: [] };
+        }
+
         const result: DataQueryResponseData[] = [];
-    const data = await this.getTimeSeries(options);
-    if (data.results) {
-      Object.values(data.results).forEach((queryRes: any) => {
+        const values = Object.values(data.results);
+        for (const queryRes of values) {
           if (!queryRes.series) {
-          return;
+            continue;
           }
+
           const unit = this.resolvePanelUnitFromTargets(options.targets);
-        queryRes.series.forEach((series: any) => {
+
+          for (const series of queryRes.series) {
             let timeSerie: any = {
               target: series.name,
               datapoints: series.points,
@@ -70,14 +79,14 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
               }
             }
             result.push(df);
-        });
-      });
-      return { data: result };
-    } else {
-      return { data: [] };
           }
         }
 
+        return { data: result };
+      })
+    );
+  }
+
   async annotationQuery(options: any) {
     await this.ensureGCEDefaultProject();
     const annotation = options.annotation;
@@ -101,12 +110,14 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
       },
     ];
 
-    const { data } = await this.api.post({
+    return this.api
+      .post({
         from: options.range.from.valueOf().toString(),
         to: options.range.to.valueOf().toString(),
         queries,
-    });
-
+      })
+      .pipe(
+        map(({ data }) => {
           const results = data.results['annotationQuery'].tables[0].rows.map((v: any) => {
             return {
               annotation: annotation,
@@ -118,30 +129,38 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
           });
 
           return results;
+        })
+      )
+      .toPromise();
   }
 
-  async getTimeSeries(options: DataQueryRequest<CloudMonitoringQuery>) {
-    await this.ensureGCEDefaultProject();
+  getTimeSeries(options: DataQueryRequest<CloudMonitoringQuery>): Observable<PostResponse> {
     const queries = options.targets
       .map(this.migrateQuery)
       .filter(this.shouldRunQuery)
       .map(q => this.prepareTimeSeriesQuery(q, options.scopedVars))
       .map(q => ({ ...q, intervalMs: options.intervalMs, type: 'timeSeriesQuery' }));
 
-    if (queries.length > 0) {
-      const { data } = await this.api.post({
+    if (!queries.length) {
+      return of({ results: [] });
+    }
+
+    return from(this.ensureGCEDefaultProject()).pipe(
+      mergeMap(() => {
+        return this.api.post({
           from: options.range.from.valueOf().toString(),
           to: options.range.to.valueOf().toString(),
           queries,
         });
+      }),
+      map(({ data }) => {
         return data;
-    } else {
-      return { results: [] };
-    }
+      })
+    );
   }
 
   async getLabels(metricType: string, refId: string, projectName: string, groupBys?: string[]) {
-    const response = await this.getTimeSeries({
+    return this.getTimeSeries({
       targets: [
         {
           refId,
@@ -157,9 +176,14 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
         },
       ],
       range: this.timeSrv.timeRange(),
-    } as DataQueryRequest<CloudMonitoringQuery>);
+    } as DataQueryRequest<CloudMonitoringQuery>)
+      .pipe(
+        map(response => {
           const result = response.results[refId];
           return result && result.meta ? result.meta.labels : {};
+        })
+      )
+      .toPromise();
   }
 
   async testDatasource() {
@@ -205,14 +229,17 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
           },
         ],
       })
-      .then(({ data }) => {
+      .pipe(
+        map(({ data }) => {
           return data && data.results && data.results.getGCEDefaultProject && data.results.getGCEDefaultProject.meta
             ? data.results.getGCEDefaultProject.meta.defaultProject
             : '';
+        }),
+        catchError(err => {
+          return throwError(err.data.error);
         })
-      .catch(err => {
-        throw err.data.error;
-      });
+      )
+      .toPromise();
   }
 
   getDefaultProject(): string {
@@ -272,7 +299,7 @@ export default class CloudMonitoringDatasource extends DataSourceApi<CloudMonito
     });
   }
 
-  async getProjects() {
+  getProjects() {
     return this.api.get(`projects`, {
       responseMap: ({ projectId, name }: { projectId: string; name: string }) => ({
         value: projectId,

public/test/helpers/createFetchResponse.ts

+import { FetchResponse } from '@grafana/runtime';
+
+export function createFetchResponse<T>(data: T): FetchResponse<T> {
+  return {
+    data,
+    status: 200,
+    url: 'http://localhost:3000/api/query',
+    config: { url: 'http://localhost:3000/api/query' },
+    type: 'basic',
+    statusText: 'Ok',
+    redirected: false,
+    headers: ({} as unknown) as Headers,
+    ok: true,
+  };
+}