From 2e7cb04490e4fd2798da6f995c37ebe1074ee7d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 17 Aug 2016 15:48:58 +0200
Subject: [PATCH] feat(alerting): some final changes to alert list #5784

---
 public/app/features/alerting/alert_def.ts     |  4 ++--
 .../app/features/alerting/alert_list_ctrl.ts  |  8 ++++++++
 .../alerting/partials/alert_howto.html        | 19 +++++++++++++++++++
 .../alerting/partials/alert_list.html         |  8 ++++++--
 public/sass/components/_cards.scss            |  7 +++++++
 5 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 public/app/features/alerting/partials/alert_howto.html

diff --git a/public/app/features/alerting/alert_def.ts b/public/app/features/alerting/alert_def.ts
index 58d50ebd908..894f3cb5cbe 100644
--- a/public/app/features/alerting/alert_def.ts
+++ b/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) {
diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts
index ebae20e1ebf..64b0950a90c 100644
--- a/public/app/features/alerting/alert_list_ctrl.ts
+++ b/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);
diff --git a/public/app/features/alerting/partials/alert_howto.html b/public/app/features/alerting/partials/alert_howto.html
new file mode 100644
index 00000000000..4452ed888c3
--- /dev/null
+++ b/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>
+
diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html
index d5915d6fa22..1f1820ed0fe 100644
--- a/public/app/features/alerting/partials/alert_list.html
+++ b/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">
diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss
index 459554fb1c1..6dba94494b1 100644
--- a/public/sass/components/_cards.scss
+++ b/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;
 }