alerting: improving and fixing alert history, #7257

pkg/services/alerting/result_handler.go

@@ -31,17 +31,15 @@ func (handler *DefaultResultHandler) Handle(evalContext *EvalContext) error {
 	executionError := ""
 	annotationData := simplejson.New()
 
-	if evalContext.Firing {
-		annotationData = simplejson.NewFromAny(evalContext.EvalMatches)
+	if len(evalContext.EvalMatches) > 0 {
+		annotationData.Set("evalMatches", simplejson.NewFromAny(evalContext.EvalMatches))
 	}
 
 	if evalContext.Error != nil {
 		executionError = evalContext.Error.Error()
-		annotationData.Set("errorMessage", executionError)
-	}
-
-	if evalContext.NoDataFound {
-		annotationData.Set("no_data", true)
+		annotationData.Set("error", executionError)
+	} else if evalContext.NoDataFound {
+		annotationData.Set("noData", true)
 	}
 
 	countStateResult(evalContext.Rule.State)

public/app/features/alerting/alert_tab_ctrl.ts

@@ -81,14 +81,23 @@ export class AlertTabCtrl {
       this.alertHistory = _.map(res, ah => {
         ah.time = moment(ah.time).format('MMM D, YYYY HH:mm:ss');
         ah.stateModel = alertDef.getStateDisplayModel(ah.newState);
-        ah.metrics = alertDef.joinEvalMatches(ah.data, ', ');
+        ah.reason = "";
 
-        if (ah.data.errorMessage) {
-          ah.metrics = "Error: " + ah.data.errorMessage;
+        if (_.isArray(ah.data)) {
+          ah.reason = "Conditions";
+          ah.metrics = alertDef.joinEvalMatches(ah.data, ', ');
+        } else if (_.isArray(ah.data.evalMatches)) {
+          ah.metrics = alertDef.joinEvalMatches(ah.data.evalMatches, ', ');
         }
 
-        if (ah.data.no_data) {
-          ah.metrics = "(due to no data)";
+        if (ah.data.error) {
+          ah.metrics = "" + ah.data.error;
+          ah.reason = "Error";
+        }
+
+        if (ah.data.noData || ah.data.no_data) {
+          ah.metrics = "";
+          ah.reason = "No Data";
         }
 
         return ah;

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

@@ -148,16 +148,20 @@
 				<ol class="card-list" >
 					<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
 						<div class="card-item card-item--alert">
+              <div class="card-item-header">
+                <div class="card-item-type">
+                </div>
+              </div>
 							<div class="card-item-body">
 								<div class="card-item-details">
 									<div class="card-item-sub-name">
 										<span class="alert-list-item-state {{ah.stateModel.stateClass}}">
 											<i class="{{ah.stateModel.iconClass}}"></i>
-											{{ah.stateModel.text}}
-										</span> {{ah.metrics}}
+                      {{ah.stateModel.text}}
+                    </span> {{ah.time}}
 									</div>
 									<div class="card-item-sub-name">
-										{{ah.time}}
+									  &nbsp;{{ah.metrics}}
 									</div>
 								</div>
 							</div>

public/sass/components/edit_sidemenu.scss

@@ -26,6 +26,7 @@
     display: block;
     color: $text-color;
     margin: 0 0 1.5rem 1rem;
+    white-space: nowrap;
   }
 }