feat(alerting): add pause button to alert list

pkg/api/alerting.go

@@ -270,13 +270,16 @@ func PauseAlert(c *middleware.Context, dto dtos.PauseAlertCommand) Response {
 	}
 	}
 
 
 	var response models.AlertStateType = models.AlertStateNoData
 	var response models.AlertStateType = models.AlertStateNoData
+	pausedState := "un paused"
 	if cmd.Paused {
 	if cmd.Paused {
 		response = models.AlertStatePaused
 		response = models.AlertStatePaused
+		pausedState = "paused"
 	}
 	}
 
 
 	result := map[string]interface{}{
 	result := map[string]interface{}{
 		"alertId": cmd.AlertId,
 		"alertId": cmd.AlertId,
 		"state":   response,
 		"state":   response,
+		"message": "alert " + pausedState,
 	}
 	}
 
 
 	return Json(200, result)
 	return Json(200, result)

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

@@ -29,13 +29,13 @@
         <div class="card-item card-item--alert">
         <div class="card-item card-item--alert">
           <div class="card-item-header">
           <div class="card-item-header">
             <div class="card-item-type">
             <div class="card-item-type">
-              <a class="card-item-cog" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
+              <a class="card-item-cog" bs-tooltip="'Pausing an alert rule prevents it from executing'" ng-click="ctrl.pauseAlertRule(alert.id)">
+								<i class="fa fa-pause"></i>
+							</a>
+							<a class="card-item-cog" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
                 <i class="icon-gf icon-gf-settings"></i>
                 <i class="icon-gf icon-gf-settings"></i>
               </a>
               </a>
             </div>
             </div>
-						<div class="card-item-header">
-							<a class="card-item-cog" ng-click="ctrl.pauseAlertRule(alert.id)">pause</a>
-						</div>
           </div>
           </div>
           <div class="card-item-body">
           <div class="card-item-body">
             <div class="card-item-details">
             <div class="card-item-details">