Alerting/Annotations: Bring back metrics and alert state to annotations tooltip (#39035)

* Normalize alert state name for UI descriptor retrieval

* Bring back alert state and metric values to annotation tooltip

* Make sure alert state is only shown when present

* Update test

* Handle Error alerting satte

public/app/features/alerting/state/alertDef.ts

@@ -81,7 +81,10 @@ function createReducerPart(model: any) {
 }
 
 function getStateDisplayModel(state: string) {
-  switch (state) {
+  const normalizedState = state.toLowerCase().replace(/_/g, '');
+
+  switch (normalizedState) {
+    case 'normal':
     case 'ok': {
       return {
         text: 'OK',
@@ -96,7 +99,7 @@ function getStateDisplayModel(state: string) {
         stateClass: 'alert-state-critical',
       };
     }
-    case 'no_data': {
+    case 'nodata': {
       return {
         text: 'NO DATA',
         iconClass: 'question-circle',
@@ -121,7 +124,7 @@ function getStateDisplayModel(state: string) {
       return {
         text: 'UNKNOWN',
         iconClass: 'question-circle',
-        stateClass: 'alert-state-paused',
+        stateClass: '.alert-state-paused',
       };
     }
 
@@ -140,6 +143,14 @@ function getStateDisplayModel(state: string) {
         stateClass: '',
       };
     }
+
+    case 'error': {
+      return {
+        text: 'ERROR',
+        iconClass: 'heart-break',
+        stateClass: 'alert-state-critical',
+      };
+    }
   }
 
   throw { message: 'Unknown alert state' };

public/app/features/annotations/annotation_tooltip.ts

@@ -36,7 +36,7 @@ export function annotationTooltipDirective(
       let tooltip = '<div class="graph-annotation">';
       let titleStateClass = '';
 
-      if (event.alertId) {
+      if (event.alertId !== undefined) {
         const stateModel = alertDef.getStateDisplayModel(event.newState);
         titleStateClass = stateModel.stateClass;
         title = `<i class="${stateModel.iconClass}"></i> ${stateModel.text}`;

public/app/features/annotations/standardAnnotationSupport.test.ts

@@ -111,6 +111,7 @@ describe('DataFrame to annotations', () => {
         { name: 'newState', values: ['alerting'] },
         { name: 'data', values: [{ text: 'a', value: 'A' }] },
         { name: 'panelId', values: [4] },
+        { name: 'alertId', values: [0] },
       ],
     });
 
@@ -134,6 +135,7 @@ describe('DataFrame to annotations', () => {
           title: 'title',
           type: 'default',
           userId: 'Admin',
+          alertId: 0,
         },
       ],
     ]);

public/app/features/annotations/standardAnnotationSupport.ts

@@ -123,6 +123,7 @@ const alertEventAndAnnotationFields: AnnotationFieldInfo[] = [
   { key: 'newState' },
   { key: 'data' as any },
   { key: 'panelId' },
+  { key: 'alertId' },
 ];
 
 export function getAnnotationsFromData(

public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx

@@ -35,8 +35,8 @@ export const AnnotationTooltip: React.FC<AnnotationTooltipProps> = ({
     avatar = <img className={styles.avatar} src={annotation.avatarUrl} />;
   }
 
-  if (annotation.alertId) {
-    const stateModel = alertDef.getStateDisplayModel(annotation.newState!);
+  if (annotation.alertId !== undefined && annotation.newState) {
+    const stateModel = alertDef.getStateDisplayModel(annotation.newState);
     state = (
       <div className={styles.alertState}>
         <i className={stateModel.stateClass}>{stateModel.text}</i>