Alerting: Support for alerting for react panels, and lots of fixes to alert annotations for both react and angular (#33608)

* Alerting: Support for alerting for react panels, and lots of fixes to alert annotations for both react and angular

* Fix showing annotations in panel edit

public/app/features/query/state/DashboardQueryRunner/utils.ts

@@ -58,6 +58,21 @@ export function translateQueryResult(annotation: AnnotationQuery, results: Annot
     item.color = annotation.iconColor;
     item.type = annotation.name;
     item.isRegion = Boolean(item.timeEnd && item.time !== item.timeEnd);
+
+    switch (item.newState) {
+      case 'pending':
+        item.color = 'gray';
+        break;
+      case 'alerting':
+        item.color = 'red';
+        break;
+      case 'ok':
+        item.color = 'green';
+        break;
+      case 'no_data':
+        item.color = 'gray';
+        break;
+    }
   }
 
   return results;

public/app/features/query/state/PanelQueryRunner.test.ts

@@ -67,6 +67,7 @@ function describeQueryRunnerScenario(
     const defaultPanelConfig: grafanaData.DataConfigSource = {
       getFieldOverrideOptions: () => undefined,
       getTransformations: () => undefined,
+      getDataSupport: () => ({ annotations: false, alertStates: false }),
     };
     const ctx: ScenarioContext = {
       maxDataPoints: 200,
@@ -251,6 +252,7 @@ describe('PanelQueryRunner', () => {
         theme: grafanaData.createTheme(),
       }),
       getTransformations: () => undefined,
+      getDataSupport: () => ({ annotations: false, alertStates: false }),
     }
   );
 
@@ -274,6 +276,7 @@ describe('PanelQueryRunner', () => {
       getFieldOverrideOptions: () => undefined,
       // @ts-ignore
       getTransformations: () => [({} as unknown) as grafanaData.DataTransformerConfig],
+      getDataSupport: () => ({ annotations: false, alertStates: false }),
     }
   );
 
@@ -316,6 +319,7 @@ describe('PanelQueryRunner', () => {
       }),
       // @ts-ignore
       getTransformations: () => [({} as unknown) as grafanaData.DataTransformerConfig],
+      getDataSupport: () => ({ annotations: false, alertStates: false }),
     }
   );
 

public/app/features/query/state/PanelQueryRunner.ts

@@ -24,7 +24,6 @@ import {
   DataTransformerConfig,
   LoadingState,
   PanelData,
-  PanelPluginDataSupport,
   rangeUtil,
   ScopedVars,
   TimeRange,
@@ -67,12 +66,10 @@ export class PanelQueryRunner {
   private subscription?: Unsubscribable;
   private lastResult?: PanelData;
   private dataConfigSource: DataConfigSource;
-  private dataSupport?: PanelPluginDataSupport;
 
   constructor(dataConfigSource: DataConfigSource) {
     this.subject = new ReplaySubject(1);
     this.dataConfigSource = dataConfigSource;
-    this.dataSupport = this.dataConfigSource.dataSupport;
   }
 
   /**
@@ -249,7 +246,9 @@ export class PanelQueryRunner {
     }
 
     let panelData = observable;
-    if (this.dataSupport?.alertStates || this.dataSupport?.annotations) {
+    const dataSupport = this.dataConfigSource.getDataSupport();
+
+    if (dataSupport.alertStates || dataSupport.annotations) {
       panelData = mergePanelAndDashData(observable, getDashboardQueryRunner().getResult(panelId));
     }