From c5e90b1801a7319b18ca1d7947296fd7d77ea22e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 31 Jul 2016 21:58:12 +0200
Subject: [PATCH] feat(alerting): more polish on alerting tab UI

---
 .../app/features/alerting/alert_tab_ctrl.ts   |  11 +-
 .../features/alerting/partials/alert_tab.html | 143 +++++++++---------
 2 files changed, 85 insertions(+), 69 deletions(-)

diff --git a/public/app/features/alerting/alert_tab_ctrl.ts b/public/app/features/alerting/alert_tab_ctrl.ts
index 9f9b7f2b70e..8b3a757d92e 100644
--- a/public/app/features/alerting/alert_tab_ctrl.ts
+++ b/public/app/features/alerting/alert_tab_ctrl.ts
@@ -80,12 +80,21 @@ export class AlertTabCtrl {
       _.each(this.alert.notifications, item => {
         var model = _.findWhere(this.notifications, {id: item.id});
         if (model) {
+          model.iconClass = this.getNotificationIcon(model.type);
           this.alertNotifications.push(model);
         }
       });
     });
   }
 
+  getNotificationIcon(type) {
+    switch (type) {
+      case "email": return "fa fa-envelope";
+      case "slack": return "fa fa-slack";
+      case "webhook": return "fa fa-cubes";
+    }
+  }
+
   getNotifications() {
     return Promise.resolve(this.notifications.map(item => {
       return this.uiSegmentSrv.newSegment(item.name);
@@ -98,7 +107,7 @@ export class AlertTabCtrl {
       return;
     }
 
-    this.alertNotifications.push({name: model.name});
+    this.alertNotifications.push({name: model.name, iconClass: this.getNotificationIcon(model.type)});
     this.alert.notifications.push({id: model.id});
 
     // reset plus button
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 870eb220811..87ce81f69e9 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -16,78 +16,88 @@
 	</aside>
 
 	<div class="edit-tab-content">
-			<div class="gf-form-group" ng-if="ctrl.subTabIndex === 0">
-			<h5 class="section-heading">Alert Rule</h5>
-			<div class="gf-form">
-				<span class="gf-form-label width-8">Name</span>
-				<input type="text" class="gf-form-input width-25" ng-model="ctrl.alert.name">
-			</div>
-			<div class="gf-form-inline">
+		<div ng-if="ctrl.subTabIndex === 0">
+			<div class="gf-form-group">
+				<h5 class="section-heading">Alert Config</h5>
 				<div class="gf-form">
-					<span class="gf-form-label width-8">Evaluate every</span>
-					<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.alert.frequency"></input>
+					<span class="gf-form-label width-8">Name</span>
+					<input type="text" class="gf-form-input width-25" ng-model="ctrl.alert.name">
 				</div>
-				<div class="gf-form">
-					<span class="gf-form-label">Severity</span>
-					<div class="gf-form-select-wrapper width-13">
-						<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
-						</select>
+				<div class="gf-form-inline">
+					<div class="gf-form">
+						<span class="gf-form-label width-8">Evaluate every</span>
+						<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.alert.frequency"></input>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label">Severity</span>
+						<div class="gf-form-select-wrapper width-13">
+							<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
+							</select>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
 
-		<div class="gf-form-group" ng-if="ctrl.subTabIndex === 0">
-			<h5 class="section-heading">Conditions</h5>
-			<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-				<div class="gf-form">
-					<span class="gf-form-label query-keyword width-5" ng-if="$index">AND</span>
-					<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+			<div class="gf-form-group">
+				<h5 class="section-heading">Conditions</h5>
+				<div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
+					<div class="gf-form">
+						<span class="gf-form-label query-keyword width-5" ng-if="$index">AND</span>
+						<span class="gf-form-label query-keyword width-5" ng-if="$index===0">WHEN</span>
+					</div>
+					<div class="gf-form">
+						<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" part-updated="ctrl.queryPartUpdated(conditionModel)">
+						</query-part-editor>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label">Reducer</span>
+						<query-part-editor class="gf-form-label query-part" part="conditionModel.reducerPart" part-updated="ctrl.reducerPartUpdated(conditionModel)">
+						</query-part-editor>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label">Value</span>
+						<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
+						<input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
+					</div>
+					<div class="gf-form">
+						<label class="gf-form-label">
+							<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
+								<i class="fa fa-trash"></i>
+							</a>
+						</label>
+					</div>
 				</div>
+
 				<div class="gf-form">
-					<query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart" part-updated="ctrl.queryPartUpdated(conditionModel)">
-					</query-part-editor>
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label">Reducer</span>
-					<query-part-editor class="gf-form-label query-part" part="conditionModel.reducerPart" part-updated="ctrl.reducerPartUpdated(conditionModel)">
-					</query-part-editor>
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label">Value</span>
-					<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
-					<input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
-				</div>
-				<div class="gf-form">
-					<label class="gf-form-label">
-						<a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
-							<i class="fa fa-trash"></i>
+					<label class="gf-form-label dropdown">
+						<a class="pointer dropdown-toggle" data-toggle="dropdown">
+							<i class="fa fa-plus"></i>
 						</a>
+						<ul class="dropdown-menu" role="menu">
+							<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
+								<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
+							</li>
+						</ul>
 					</label>
 				</div>
+
+				<div class="gf-form-button-row">
+					<button class="btn btn-inverse" ng-click="ctrl.test()">
+						Test Rule
+					</button>
+
+					<button class="btn btn-inverse" ng-click="ctrl.delete()">
+						Delete Alert
+					</button>
+				</div>
 			</div>
 
-			<div class="gf-form">
-				<label class="gf-form-label dropdown">
-					<a class="pointer dropdown-toggle" data-toggle="dropdown">
-						<i class="fa fa-plus"></i>
-					</a>
-					<ul class="dropdown-menu" role="menu">
-						<li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
-							<a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
-						</li>
-					</ul>
-				</label>
+			<div class="gf-form-group" ng-if="ctrl.testing">
+				Evaluating rule <i class="fa fa-spinner fa-spin"></i>
 			</div>
 
-			<div class="gf-form-button-row">
-				<button class="btn btn-inverse" ng-click="ctrl.test()">
-					Test Rule
-				</button>
-
-				<button class="btn btn-inverse" ng-click="ctrl.delete()">
-					Delete Alert
-				</button>
+			<div class="gf-form-group" ng-if="ctrl.testResult">
+				<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
 			</div>
 		</div>
 
@@ -95,23 +105,20 @@
 			<h5 class="section-heading">Notifications</h5>
 			<div class="gf-form-inline">
 				<div class="gf-form max-width-30">
-					<span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications">
-						{{nc.name}}
-						<i class="fa fa-remove pointer" ng-click="ctrl.removeNotification($index)"></i>
+					<span class="gf-form-label width-8">Send to</span>
+					<span class="gf-form-label query-part" ng-repeat="nc in ctrl.alertNotifications">
+						<i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
+						<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)"></i>
 					</span>
 					<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
 				</div>
 			</div>
+			<div class="gf-form gf-form--v-stretch">
+				<span class="gf-form-label width-8">Message</span>
+				<textarea class="gf-form-input width-20" rows="10" ng-model="ctrl.alert.message"  placeholder="Notification message details..."></textarea>
+			</div>
 		</div>
 	</div>
-
-	<div class="gf-form-group" ng-if="ctrl.testing">
-		Evaluating rule <i class="fa fa-spinner fa-spin"></i>
-	</div>
-
-	<div class="gf-form-group" ng-if="ctrl.testResult">
-		<json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
-	</div>
 </div>
 
 <div class="gf-form-group" ng-if="!ctrl.alert.enabled">