Skip to content

N
nexpie-grafana-theme
Commit 8264b220 by Hugo Häggmark Committed by GitHub
Options

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>
parent 95b1607c
Showing with 37 additions and 27 deletions
public/app/features/alerting/StateHistory.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import alertDef from './state/alertDef';
import { getBackendSrv } from '@grafana/runtime'; import { getBackendSrv } from '@grafana/runtime';
import alertDef from './state/alertDef';
import { DashboardModel } from '../dashboard/state/DashboardModel'; import { DashboardModel } from '../dashboard/state/DashboardModel';
import appEvents from '../../core/app_events'; import appEvents from '../../core/app_events';
import { CoreEvents } from 'app/types'; import { CoreEvents } from 'app/types';
...@@ -24,9 +25,13 @@ class StateHistory extends PureComponent<Props, State> { ...@@ -24,9 +25,13 @@ class StateHistory extends PureComponent<Props, State> {
const { dashboard, panelId } = this.props; const { dashboard, panelId } = this.props;
getBackendSrv() getBackendSrv()
.get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`) .get(
.then((res: any[]) => { `/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`,
const items = res.map((item: any) => { {},
`state-history-${dashboard.id}-${panelId}`
)
.then(data => {
const items = data.map((item: any) => {
return { return {
stateModel: alertDef.getStateDisplayModel(item.newState), stateModel: alertDef.getStateDisplayModel(item.newState),
time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'), time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),
......
public/app/features/annotations/annotations_srv.ts
// Libaries // Libaries
import flattenDeep from 'lodash/flattenDeep'; import flattenDeep from 'lodash/flattenDeep';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
// Components // Components
import './editor_ctrl'; import './editor_ctrl';
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
// Utils & Services // Utils & Services
import { dedupAnnotations } from './events_processing'; import { dedupAnnotations } from './events_processing';
// Types // Types
import { DashboardModel } from '../dashboard/state/DashboardModel'; import { DashboardModel } from '../dashboard/state/DashboardModel';
import { DataSourceApi, PanelEvents, AnnotationEvent, AppEvents, PanelModel, TimeRange } from '@grafana/data'; import { AnnotationEvent, AppEvents, DataSourceApi, PanelEvents, PanelModel, TimeRange } from '@grafana/data';
import { appEvents } from 'app/core/core';
import { getBackendSrv, getDataSourceSrv } from '@grafana/runtime'; import { getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
import { appEvents } from 'app/core/core';
import { getTimeSrv } from '../dashboard/services/TimeSrv'; import { getTimeSrv } from '../dashboard/services/TimeSrv';
export class AnnotationsSrv { export class AnnotationsSrv {
...@@ -87,9 +84,13 @@ export class AnnotationsSrv { ...@@ -87,9 +84,13 @@ export class AnnotationsSrv {
return this.alertStatesPromise; return this.alertStatesPromise;
} }
this.alertStatesPromise = getBackendSrv().get('/api/alerts/states-for-dashboard', { this.alertStatesPromise = getBackendSrv().get(
'/api/alerts/states-for-dashboard',
{
dashboardId: options.dashboard.id, dashboardId: options.dashboard.id,
}); },
`get-alert-states-${options.dashboard.id}`
);
return this.alertStatesPromise; return this.alertStatesPromise;
} }
......
public/app/plugins/datasource/grafana/datasource.ts
...@@ -80,7 +80,11 @@ class GrafanaDatasource extends DataSourceApi<any> { ...@@ -80,7 +80,11 @@ class GrafanaDatasource extends DataSourceApi<any> {
params.tags = tags; 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() { testDatasource() {
......
public/app/plugins/datasource/grafana/specs/datasource.test.ts
import { DataSourceInstanceSettings, dateTime } from '@grafana/data'; import { DataSourceInstanceSettings, dateTime } from '@grafana/data';
import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__ import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
import { GrafanaDatasource } from '../datasource'; import { GrafanaDatasource } from '../datasource';
......
public/app/plugins/panel/alertlist/module.ts
import _ from 'lodash'; 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 alertDef from '../../../features/alerting/state/alertDef';
import { PanelCtrl } from 'app/plugins/sdk'; 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'; import { promiseToDigest } from 'app/core/utils/promiseToDigest';
class AlertListPanel extends PanelCtrl { class AlertListPanel extends PanelCtrl {
...@@ -123,9 +122,9 @@ class AlertListPanel extends PanelCtrl { ...@@ -123,9 +122,9 @@ class AlertListPanel extends PanelCtrl {
return promiseToDigest(this.$scope)( return promiseToDigest(this.$scope)(
getBackendSrv() getBackendSrv()
.get(`/api/annotations`, params) .get('/api/annotations', params, `alert-list-get-state-changes-${this.panel.id}`)
.then(res => { .then(data => {
this.alertHistory = _.map(res, al => { this.alertHistory = _.map(data, al => {
al.time = this.dashboard.formatDate(al.time, 'MMM D, YYYY HH:mm:ss'); al.time = this.dashboard.formatDate(al.time, 'MMM D, YYYY HH:mm:ss');
al.stateModel = alertDef.getStateDisplayModel(al.newState); al.stateModel = alertDef.getStateDisplayModel(al.newState);
al.info = alertDef.getAlertAnnotationInfo(al); al.info = alertDef.getAlertAnnotationInfo(al);
...@@ -166,10 +165,10 @@ class AlertListPanel extends PanelCtrl { ...@@ -166,10 +165,10 @@ class AlertListPanel extends PanelCtrl {
return promiseToDigest(this.$scope)( return promiseToDigest(this.$scope)(
getBackendSrv() getBackendSrv()
.get(`/api/alerts`, params) .get('/api/alerts', params, `alert-list-get-current-alert-state-${this.panel.id}`)
.then(res => { .then(data => {
this.currentAlerts = this.sortResult( this.currentAlerts = this.sortResult(
_.map(res, al => { _.map(data, al => {
al.stateModel = alertDef.getStateDisplayModel(al.state); al.stateModel = alertDef.getStateDisplayModel(al.state);
al.newStateDateAgo = dateTime(al.newStateDate) al.newStateDateAgo = dateTime(al.newStateDate)
.locale('en') .locale('en')
......
public/app/plugins/panel/annolist/AnnoListPanel.tsx
// Libraries // Libraries
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
// Types // Types
import { AnnoOptions } from './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 { Tooltip } from '@grafana/ui';
import { getBackendSrv } from '@grafana/runtime'; import { getBackendSrv } from '@grafana/runtime';
import { AbstractList } from '@grafana/ui/src/components/List/AbstractList'; import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
...@@ -13,7 +12,7 @@ import appEvents from 'app/core/app_events'; ...@@ -13,7 +12,7 @@ import appEvents from 'app/core/app_events';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { store } from 'app/store/store'; import { store } from 'app/store/store';
import { cx, css } from 'emotion'; import { css, cx } from 'emotion';
interface UserInfo { interface UserInfo {
id: number; id: number;
...@@ -98,7 +97,8 @@ export class AnnoListPanel extends PureComponent<Props, State> { ...@@ -98,7 +97,8 @@ export class AnnoListPanel extends PureComponent<Props, State> {
params.tags = params.tags ? [...params.tags, ...queryTags] : queryTags; 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({ this.setState({
annotations, annotations,
timeInfo, timeInfo,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment