feat(alerting): show execution errors in alert list

pkg/models/alert.go

@@ -11,7 +11,7 @@ type AlertSeverityType string
 
 const (
 	AlertStatePending        AlertStateType = "pending"
-	AlertStateExeuctionError AlertStateType = "exeuction_error"
+	AlertStateExeuctionError AlertStateType = "execution_error"
 	AlertStatePaused         AlertStateType = "paused"
 	AlertStateCritical       AlertStateType = "critical"
 	AlertStateWarning        AlertStateType = "warning"

pkg/services/alerting/result_handler.go

@@ -29,7 +29,7 @@ func NewResultHandler() *DefaultResultHandler {
 func (handler *DefaultResultHandler) Handle(ctx *EvalContext) {
 	oldState := ctx.Rule.State
 
-	exeuctionError := " "
+	exeuctionError := ""
 	if ctx.Error != nil {
 		handler.log.Error("Alert Rule Result Error", "ruleId", ctx.Rule.Id, "error", ctx.Error)
 		ctx.Rule.State = m.AlertStateExeuctionError

public/app/features/alerting/alert_def.ts

@@ -61,28 +61,36 @@ function getStateDisplayModel(state) {
         iconClass: 'icon-gf icon-gf-critical',
         stateClass: 'alert-state-critical'
       };
-     }
-     case 'warning': {
+    }
+    case 'warning': {
       return {
         text: 'WARNING',
         iconClass: 'icon-gf icon-gf-warning',
         stateClass: 'alert-state-warning'
       };
-     }
-     case 'pending': {
+    }
+    case 'pending': {
       return {
         text: 'PENDING',
         iconClass: "fa fa-question",
         stateClass: 'alert-state-warning'
       };
-     }
-     case 'paused': {
+    }
+    case 'execution_error': {
+      return {
+        text: 'EXECUTION ERROR',
+        iconClass: 'icon-gf icon-gf-critical',
+        stateClass: 'alert-state-critical'
+      };
+    }
+
+    case 'paused': {
       return {
         text: 'paused',
         iconClass: "fa fa-pause",
         stateClass: 'alert-state-paused'
       };
-     }
+    }
   }
 }
 

public/app/features/alerting/partials/alert_list.html

@@ -33,9 +33,6 @@
                 <i class="icon-gf icon-gf-settings"></i>
               </a>
             </div>
-            <div class="card-item-notice" ng-show="alert.executionError">
-              <span>Execution Error</span>
-            </div>
           </div>
           <div class="card-item-body">
             <div class="card-item-details">
@@ -49,7 +46,9 @@
                   <i class="{{alert.stateModel.iconClass}}"></i>
                   {{alert.stateModel.text}}
                 </span> for {{alert.newStateDateAgo}}
-                </div>
+              </div>
+              <div class="small muted" ng-show="alert.executionError">
+                {{alert.executionError}}
               </div>
             </div>
           </div>