Annotation & Alerts: Makes various annotation and alert requests cancelable (#22055)

* Annotations: Makes various annotation and alert calls cancelable
Fixes #21943

* Refactor: Uses backendSrv.get method with requestId instead

* Update public/app/features/annotations/annotations_srv.ts

Co-Authored-By: Marcus Efraimsson <marcus.efraimsson@gmail.com>

Co-authored-by: Marcus Efraimsson <marcus.efraimsson@gmail.com>

public/app/features/alerting/StateHistory.tsx

 import React, { PureComponent } from 'react';
-import alertDef from './state/alertDef';
 import { getBackendSrv } from '@grafana/runtime';
+
+import alertDef from './state/alertDef';
 import { DashboardModel } from '../dashboard/state/DashboardModel';
 import appEvents from '../../core/app_events';
 import { CoreEvents } from 'app/types';
@@ -24,9 +25,13 @@ class StateHistory extends PureComponent<Props, State> {
     const { dashboard, panelId } = this.props;
 
     getBackendSrv()
-      .get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`)
-      .then((res: any[]) => {
-        const items = res.map((item: any) => {
+      .get(
+        `/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`,
+        {},
+        `state-history-${dashboard.id}-${panelId}`
+      )
+      .then(data => {
+        const items = data.map((item: any) => {
           return {
             stateModel: alertDef.getStateDisplayModel(item.newState),
             time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),

public/app/features/annotations/annotations_srv.ts

 // Libaries
 import flattenDeep from 'lodash/flattenDeep';
 import cloneDeep from 'lodash/cloneDeep';
-
 // Components
 import './editor_ctrl';
 import coreModule from 'app/core/core_module';
-
 // Utils & Services
 import { dedupAnnotations } from './events_processing';
-
 // Types
 import { DashboardModel } from '../dashboard/state/DashboardModel';
-import { DataSourceApi, PanelEvents, AnnotationEvent, AppEvents, PanelModel, TimeRange } from '@grafana/data';
-import { appEvents } from 'app/core/core';
+import { AnnotationEvent, AppEvents, DataSourceApi, PanelEvents, PanelModel, TimeRange } from '@grafana/data';
 import { getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
+import { appEvents } from 'app/core/core';
 import { getTimeSrv } from '../dashboard/services/TimeSrv';
 
 export class AnnotationsSrv {
@@ -87,9 +84,13 @@ export class AnnotationsSrv {
       return this.alertStatesPromise;
     }
 
-    this.alertStatesPromise = getBackendSrv().get('/api/alerts/states-for-dashboard', {
-      dashboardId: options.dashboard.id,
-    });
+    this.alertStatesPromise = getBackendSrv().get(
+      '/api/alerts/states-for-dashboard',
+      {
+        dashboardId: options.dashboard.id,
+      },
+      `get-alert-states-${options.dashboard.id}`
+    );
 
     return this.alertStatesPromise;
   }

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

@@ -80,7 +80,11 @@ class GrafanaDatasource extends DataSourceApi<any> {
       params.tags = tags;
     }
 
-    return getBackendSrv().get('/api/annotations', params);
+    return getBackendSrv().get(
+      '/api/annotations',
+      params,
+      `grafana-data-source-annotations-${options.annotation.name}-${options.dashboard?.id}`
+    );
   }
 
   testDatasource() {

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

 import { DataSourceInstanceSettings, dateTime } from '@grafana/data';
+
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 import { GrafanaDatasource } from '../datasource';
 

public/app/plugins/panel/alertlist/module.ts

 import _ from 'lodash';
+import { getBackendSrv } from '@grafana/runtime';
+import { dateMath, dateTime, PanelEvents } from '@grafana/data';
+import { auto, IScope } from 'angular';
+
 import alertDef from '../../../features/alerting/state/alertDef';
 import { PanelCtrl } from 'app/plugins/sdk';
-
-import { dateMath, dateTime } from '@grafana/data';
-import { PanelEvents } from '@grafana/data';
-import { auto, IScope } from 'angular';
-import { getBackendSrv } from '@grafana/runtime';
 import { promiseToDigest } from 'app/core/utils/promiseToDigest';
 
 class AlertListPanel extends PanelCtrl {
@@ -123,9 +122,9 @@ class AlertListPanel extends PanelCtrl {
 
     return promiseToDigest(this.$scope)(
       getBackendSrv()
-        .get(`/api/annotations`, params)
-        .then(res => {
-          this.alertHistory = _.map(res, al => {
+        .get('/api/annotations', params, `alert-list-get-state-changes-${this.panel.id}`)
+        .then(data => {
+          this.alertHistory = _.map(data, al => {
             al.time = this.dashboard.formatDate(al.time, 'MMM D, YYYY HH:mm:ss');
             al.stateModel = alertDef.getStateDisplayModel(al.newState);
             al.info = alertDef.getAlertAnnotationInfo(al);
@@ -166,10 +165,10 @@ class AlertListPanel extends PanelCtrl {
 
     return promiseToDigest(this.$scope)(
       getBackendSrv()
-        .get(`/api/alerts`, params)
-        .then(res => {
+        .get('/api/alerts', params, `alert-list-get-current-alert-state-${this.panel.id}`)
+        .then(data => {
           this.currentAlerts = this.sortResult(
-            _.map(res, al => {
+            _.map(data, al => {
               al.stateModel = alertDef.getStateDisplayModel(al.state);
               al.newStateDateAgo = dateTime(al.newStateDate)
                 .locale('en')

public/app/plugins/panel/annolist/AnnoListPanel.tsx

 // Libraries
 import React, { PureComponent } from 'react';
-
 // Types
 import { AnnoOptions } from './types';
-import { PanelProps, dateTime, DurationUnit, AnnotationEvent, AppEvents } from '@grafana/data';
+import { AnnotationEvent, AppEvents, dateTime, DurationUnit, PanelProps } from '@grafana/data';
 import { Tooltip } from '@grafana/ui';
 import { getBackendSrv } from '@grafana/runtime';
 import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
@@ -13,7 +12,7 @@ import appEvents from 'app/core/app_events';
 
 import { updateLocation } from 'app/core/actions';
 import { store } from 'app/store/store';
-import { cx, css } from 'emotion';
+import { css, cx } from 'emotion';
 
 interface UserInfo {
   id: number;
@@ -98,7 +97,8 @@ export class AnnoListPanel extends PureComponent<Props, State> {
       params.tags = params.tags ? [...params.tags, ...queryTags] : queryTags;
     }
 
-    const annotations = await getBackendSrv().get('/api/annotations', params);
+    const annotations = await getBackendSrv().get('/api/annotations', params, `anno-list-panel-${this.props.id}`);
+
     this.setState({
       annotations,
       timeInfo,