From 1a566bef478d188092ba4b81d957d31a1af25f3a Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 9 Sep 2021 16:58:27 +0200
Subject: [PATCH] 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  | 17 ++++++++++++++---
 .../features/annotations/annotation_tooltip.ts  |  2 +-
 .../standardAnnotationSupport.test.ts           |  2 ++
 .../annotations/standardAnnotationSupport.ts    |  1 +
 .../plugins/annotations/AnnotationTooltip.tsx   |  4 ++--
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/public/app/features/alerting/state/alertDef.ts b/public/app/features/alerting/state/alertDef.ts
index 79503b0eca2..1ed703e216b 100644
--- a/public/app/features/alerting/state/alertDef.ts
+++ b/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' };
diff --git a/public/app/features/annotations/annotation_tooltip.ts b/public/app/features/annotations/annotation_tooltip.ts
index e8c4e6093b6..3ec2763d8dd 100644
--- a/public/app/features/annotations/annotation_tooltip.ts
+++ b/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}`;
diff --git a/public/app/features/annotations/standardAnnotationSupport.test.ts b/public/app/features/annotations/standardAnnotationSupport.test.ts
index 6be3050e792..9af8c457b4e 100644
--- a/public/app/features/annotations/standardAnnotationSupport.test.ts
+++ b/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,
         },
       ],
     ]);
diff --git a/public/app/features/annotations/standardAnnotationSupport.ts b/public/app/features/annotations/standardAnnotationSupport.ts
index b9c7d99b0a8..9348dd2535e 100644
--- a/public/app/features/annotations/standardAnnotationSupport.ts
+++ b/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(
diff --git a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx b/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
index a9b93d868b5..f0b9e3e0dd1 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations/AnnotationTooltip.tsx
+++ b/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>