Updated alert tab layout & markup

public/app/features/alerting/AlertTabCtrl.ts

@@ -115,7 +115,7 @@ export class AlertTabCtrl {
   }
 
   getNotifications() {
-    return Promise.resolve(
+    return this.$q.when(
       this.notifications.map(item => {
         return this.uiSegmentSrv.newSegment(item.name);
       })
@@ -148,6 +148,7 @@ export class AlertTabCtrl {
     // reset plus button
     this.addNotificationSegment.value = this.uiSegmentSrv.newPlusButton().value;
     this.addNotificationSegment.html = this.uiSegmentSrv.newPlusButton().html;
+    this.addNotificationSegment.fake = true;
   }
 
   removeNotification(index) {

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

@@ -4,13 +4,13 @@
   </div>
   <div class="panel-option-section">
     <div class="panel-option-section__body">
-      <div class="section">
-        <div class="gf-form">
+      <div class="gf-form-group">
+        <h4 class="section-heading">Rule</h4>
+        <div class="gf-form-inline">
           <div class="gf-form">
             <span class="gf-form-label width-6">Name</span>
             <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
           </div>
-          <div class="gf-form-inline">
           <div class="gf-form">
             <span class="gf-form-label width-9">Evaluate every</span>
             <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
@@ -32,12 +32,9 @@
           </div>
         </div>
       </div>
-      </div>
-    </div>
-  </div>
-  <div class="panel-option-section">
-    <div class="panel-option-section__header">Conditions</div>
-    <div class="panel-option-section__body">
+
+      <div class="gf-form-group">
+        <h4 class="section-heading">Conditions</h4>
         <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
           <div class="gf-form">
             <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
@@ -80,6 +77,7 @@
             </label>
           </div>
         </div>
+
         <div class="gf-form">
           <label class="gf-form-label dropdown">
             <a class="pointer dropdown-toggle" data-toggle="dropdown">
@@ -92,9 +90,15 @@
             </ul>
           </label>
         </div>
+      </div>
+
       <div class="gf-form-group">
+        <h4 class="section-heading">No Data & Error Handling</h4>
+        <div class="gf-form-inline">
+          <div class="gf-form">
+            <span class="gf-form-label width-15">If no data or all values are null</span>
+          </div>
           <div class="gf-form">
-          <span class="gf-form-label width-18">If no data or all values are null</span>
             <span class="gf-form-label query-keyword">SET STATE TO</span>
             <div class="gf-form-select-wrapper">
               <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
@@ -102,9 +106,13 @@
               </select>
             </div>
           </div>
+        </div>
 
+        <div class="gf-form-inline">
+          <div class="gf-form">
+            <span class="gf-form-label width-15">If execution error or timeout</span>
+          </div>
           <div class="gf-form">
-          <span class="gf-form-label width-18">If execution error or timeout</span>
             <span class="gf-form-label query-keyword">SET STATE TO</span>
             <div class="gf-form-select-wrapper">
               <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
@@ -112,6 +120,7 @@
               </select>
             </div>
           </div>
+        </div>
 
         <div class="gf-form-button-row">
           <button class="btn btn-inverse" ng-click="ctrl.test()">
@@ -129,19 +138,23 @@
       </div>
     </div>
   </div>
+
   <div class="panel-option-section">
     <div class="panel-option-section__header">Notifications</div>
     <div class="panel-option-section__body">
       <div class="gf-form-inline">
-        <div class="gf-form max-width-30">
+        <div class="gf-form">
           <span class="gf-form-label width-8">Send to</span>
-          <span class="gf-form-label" ng-repeat="nc in ctrl.alertNotifications"
-                ng-style="{'background-color': nc.bgColor }">
+        </div>
+        <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
+          <span class="gf-form-label" ng-style="{'background-color': nc.bgColor }">
             <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
-							<i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)"
-                 ng-if="nc.isDefault === false"></i>
+            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification($index)" ng-if="nc.isDefault === false"></i>
           </span>
-          <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()"
+        </div>
+        <div class="gf-form">
+          <metric-segment segment="ctrl.addNotificationSegment"
+                          get-options="ctrl.getNotifications()"
                           on-change="ctrl.notificationAdded()"></metric-segment>
         </div>
       </div>