feat(alerting): some final changes to alert list #5784

public/app/features/alerting/alert_def.ts

@@ -42,8 +42,8 @@ function createReducerPart(model) {
 }
 
 var severityLevels = {
-  'critical': {text: 'CRITICAL', iconClass: 'icon-gf icon-gf-critical', stateClass: 'alert-state-critical'},
-  'warning': {text: 'WARNING', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'},
+  'critical': {text: 'Critical', iconClass: 'icon-gf icon-gf-critical', stateClass: 'alert-state-critical'},
+  'warning': {text: 'Warning', iconClass: 'icon-gf icon-gf-warning', stateClass: 'alert-state-warning'},
 };
 
 function getStateDisplayModel(state) {

public/app/features/alerting/alert_list_ctrl.ts

@@ -3,6 +3,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 import coreModule from '../../core/core_module';
+import appEvents from '../../core/app_events';
 import moment from 'moment';
 import alertDef from './alert_def';
 
@@ -42,6 +43,13 @@ export class AlertListCtrl {
       });
     });
   }
+
+  openHowTo() {
+    appEvents.emit('show-modal', {
+      src: 'public/app/features/alerting/partials/alert_howto.html',
+      model: {}
+    });
+  }
 }
 
 coreModule.controller('AlertListCtrl', AlertListCtrl);

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

@@ -0,0 +1,19 @@
+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-info-circle"></i>
+			<span class="p-l-1">How to add an alert</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+
+	<div class="modal-content">
+		Find your inner self, deep down you know. Grafana believes in you!
+	</div>
+
+</div>
+

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

@@ -4,6 +4,10 @@
 <div class="page-container" >
 	<div class="page-header">
 		<h1>Alert List</h1>
+    <a class="btn btn-inverse" ng-click="ctrl.openHowTo()">
+			<i class="fa fa-info-circle"></i>
+			How to add an alert
+		</a>
 	</div>
 
   <div class="gf-form-group">
@@ -25,8 +29,8 @@
         <div class="card-item card-item--alert">
           <div class="card-item-header">
             <div class="card-item-type">
-              <a href="dashboard/{{alert.dashboardUri}}" bs-tooltip="'Open dashboard'">
-                <i class="icon-gf icon-gf-dashboard"></i>
+              <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>
               </a>
             </div>
             <div class="card-item-notice" ng-show="alert.executionError">

public/sass/components/_cards.scss

@@ -82,6 +82,13 @@
   overflow: hidden;
 }
 
+.card-item-cog {
+  font-size: 130%;
+  position: relative;
+  top: 1rem;
+  color: $text-muted;
+}
+
 .card-item-header {
   margin-bottom: $spacer;
 }