feat(alerting): add pause button in alert list

pkg/api/alerting.go

@@ -265,12 +265,17 @@ func PauseAlert(c *middleware.Context, cmd models.PauseAlertCommand) Response {
 		return ApiError(500, "", err)
 	}
 
-	response := "un paused"
+	var response models.AlertStateType = models.AlertStateNoData
 	if cmd.Paused {
-		response = "paused"
+		response = models.AlertStatePaused
 	}
 
-	return ApiSuccess("Alert " + response)
+	result := map[string]interface{}{
+		"alertId": cmd.AlertId,
+		"state":   response,
+	}
+
+	return Json(200, result)
 }
 
 func getAlertIdForRequest(c *middleware.Context) (int64, error) {

pkg/models/alert.go

@@ -104,7 +104,7 @@ type SaveAlertsCommand struct {
 type PauseAlertCommand struct {
 	OrgId   int64
 	AlertId int64 `json:"alertId"`
-	Paused  bool  `json:"bool"`
+	Paused  bool  `json:"paused"`
 }
 
 type SetAlertStateCommand struct {

public/app/features/alerting/alert_list_ctrl.ts

@@ -23,7 +23,7 @@ export class AlertListCtrl {
   };
 
   /** @ngInject */
-  constructor(private backendSrv, private $location) {
+  constructor(private backendSrv, private $location, private $scope) {
     var params = $location.search();
     this.filters.state = params.state || null;
     this.loadAlerts();
@@ -43,6 +43,19 @@ export class AlertListCtrl {
     });
   }
 
+  pauseAlertRule(alertId: any) {
+    var alert = _.find(this.alerts, {id: alertId});
+
+    var payload = {
+      paused: alert.state !== "paused"
+    };
+
+    this.backendSrv.post(`/api/alerts/${alertId}/pause`, payload).then(result => {
+      alert.state = result.state;
+      alert.stateModel = alertDef.getStateDisplayModel(result.state);
+    });
+  }
+
   openHowTo() {
     appEvents.emit('show-modal', {
       src: 'public/app/features/alerting/partials/alert_howto.html',

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

@@ -33,6 +33,9 @@
                 <i class="icon-gf icon-gf-settings"></i>
               </a>
             </div>
+						<div class="card-item-header">
+							<a class="card-item-cog" ng-click="ctrl.pauseAlertRule(alert.id)">pause</a>
+						</div>
           </div>
           <div class="card-item-body">
             <div class="card-item-details">