Fix alert groups automatic refresh (#4463)

# What this PR does

- Fixes AG auto-refresh (every 15s)
- Reflect correct data on the UI after doing a bulk update
- Few tweaks regarding UX around bulk updates/loading
- Added some missing typescript support

## Which issue(s) this PR closes

Closes #4454

grafana-plugin/src/containers/RemoteFilters/RemoteFilters.tsx

@@ -48,7 +48,7 @@ interface RemoteFiltersProps extends WithStoreProps {
  grafanaTeamStore: GrafanaTeamStore;
  skipFilterOptionFn?: (filterOption: FilterOption) => boolean;
 }
-interface RemoteFiltersState {
+export interface RemoteFiltersState {
  filterOptions?: FilterOption[];
  filters: FilterOption[];
  values: Record<string, any>;

grafana-plugin/src/models/alertgroup/alertgroup.helpers.ts

@@ -1,6 +1,8 @@
+import { ActionKey } from 'models/loader/action-keys';
 import { makeRequest } from 'network/network';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { onCallApi } from 'network/oncall-api/http-client';
+import { AutoLoadingState } from 'utils/decorators';
 
 import { AlertGroupStore } from './alertgroup';
 
@@ -33,6 +35,26 @@ export class AlertGroupHelper {
  return (await onCallApi().POST('/alertgroups/bulk_action/', { params: {}, body: data })).data;
  }
 
+ @AutoLoadingState(ActionKey.INCIDENTS_BULK_UPDATE)
+ static async updateBulkActionAndRefresh(
+ data: ApiSchemas['AlertGroupBulkActionRequest'],
+ alertGroupStore: AlertGroupStore,
+ onFinally?: () => void
+ ) {
+ try {
+ alertGroupStore.setLiveUpdatesPaused(true);
+
+ await AlertGroupHelper.bulkAction(data);
+
+ // pull new data
+ await alertGroupStore.fetchAlertGroups();
+ } finally {
+ alertGroupStore.setLiveUpdatesPaused(false);
+
+ onFinally?.();
+ }
+ }
+
  static async renderPreview(id: ApiSchemas['AlertGroup']['pk'], template_name: string, template_body: string) {
  return (
  await onCallApi().POST('/alertgroups/{id}/preview_template/', {

grafana-plugin/src/models/alertgroup/alertgroup.ts

@@ -79,7 +79,7 @@ export class AlertGroupStore {
  const newAlerts = new Map(
  results.map((alert: ApiSchemas['AlertGroup']) => {
  const oldAlert = this.alerts.get(alert.pk) || {};
- const mergedAlertData = { ...oldAlert, ...alert, undoAction: alert.undoAction };
+ const mergedAlertData = { ...oldAlert, ...alert };
  return [alert.pk, mergedAlertData];
  })
  );
@@ -114,7 +114,8 @@ export class AlertGroupStore {
  this.rootStore.setPageTitle(`#${alertGroup.inside_organization_number} ${alertGroup.render_for_web.title}`);
  }
 
- async fetchIncidentsAndStats(isPollingJob = false) {
+ @AutoLoadingState(ActionKey.FETCH_INCIDENTS_AND_STATS)
+ async fetchIncidentsAndStats(isPollingJob = false): Promise<void> {
  await Promise.all([
  this.fetchStats(IncidentStatus.Firing),
  this.fetchStats(IncidentStatus.Acknowledged),
@@ -218,13 +219,11 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async resolve(id: ApiSchemas['AlertGroup']['pk']) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi({ skipErrorHandling: true }).POST('/alertgroups/{id}/resolve/', {
  params: { path: { id } },
  });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.Resolve,
  });
  }
 
@@ -233,11 +232,9 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async unresolve(id: ApiSchemas['AlertGroup']['pk']) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi().POST('/alertgroups/{id}/unresolve/', { params: { path: { id } } });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.unResolve,
  });
  }
 
@@ -246,11 +243,9 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async acknowledge(id: ApiSchemas['AlertGroup']['pk']) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi().POST('/alertgroups/{id}/acknowledge/', { params: { path: { id } } });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.Acknowledge,
  });
  }
 
@@ -259,11 +254,9 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async unacknowledge(id: ApiSchemas['AlertGroup']['pk']) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi().POST('/alertgroups/{id}/unacknowledge/', { params: { path: { id } } });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.unAcknowledge,
  });
  }
 
@@ -272,14 +265,12 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async silence(id: ApiSchemas['AlertGroup']['pk'], delay: number) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi().POST('/alertgroups/{id}/silence/', {
  params: { path: { id } },
  body: { delay },
  });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.Silence,
  });
  }
 
@@ -288,11 +279,9 @@ export class AlertGroupStore {
  composeFailureMessageFn,
  })
  async unsilence(id: ApiSchemas['AlertGroup']['pk']) {
- this.setLiveUpdatesPaused(true);
  const { data } = await onCallApi().POST('/alertgroups/{id}/unsilence/', { params: { path: { id } } });
  this.updateAlert(id, {
  ...data,
- undoAction: AlertAction.unSilence,
  });
  }
 
@@ -305,8 +294,14 @@ export class AlertGroupStore {
  [AlertAction.Resolve]: this.resolve,
  [AlertAction.unResolve]: this.unresolve,
  };
+
  if (actionToMethodMap[action]) {
- await actionToMethodMap[action](id, delay);
+ try {
+ this.setLiveUpdatesPaused(true);
+ await actionToMethodMap[action](id, delay);
+ } finally {
+ this.setLiveUpdatesPaused(false);
+ }
  }
  }
 

grafana-plugin/src/models/loader/action-keys.ts

@@ -8,6 +8,8 @@ export enum ActionKey {
  FETCH_INCIDENTS = 'FETCH_INCIDENTS',
  FETCH_INCIDENTS_POLLING = 'FETCH_INCIDENTS_POLLING',
  FETCH_INCIDENTS_AND_STATS = 'FETCH_INCIDENTS_AND_STATS',
+ INCIDENTS_BULK_UPDATE = 'INCIDENTS_BULK_UPDATE',
+
  UPDATE_FILTERS_AND_FETCH_INCIDENTS = 'UPDATE_FILTERS_AND_FETCH_INCIDENTS',
  UPDATE_SERVICENOW_TOKEN = 'UPDATE_SERVICENOW_TOKEN',
  FETCH_INTEGRATIONS = 'FETCH_INTEGRATIONS',

grafana-plugin/src/network/oncall-api/types-generator/custom-schemas.ts

@@ -1,5 +1,3 @@
-import { AlertAction } from 'models/alertgroup/alertgroup.types';
-
 // Custom properties not exposed by OpenAPI schema should be defined here
 export type CustomApiSchemas = {
  Webhook: {
@@ -15,7 +13,6 @@ export type CustomApiSchemas = {
  };
  };
  AlertGroup: {
- undoAction: AlertAction;
  loading?: boolean;
  created_at?: string;
  };