From 2eeba9dae186806ed5977d1e79815bfc5328169c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 4 Jan 2019 11:57:16 +0100
Subject: [PATCH] Updated alert tab layout & markup

---
 public/app/features/alerting/AlertTabCtrl.ts  |   3 +-
 .../features/alerting/partials/alert_tab.html | 217 ++++++++++--------
 2 files changed, 117 insertions(+), 103 deletions(-)

diff --git a/public/app/features/alerting/AlertTabCtrl.ts b/public/app/features/alerting/AlertTabCtrl.ts
index ffcb20472ad..2be25e9df6a 100644
--- a/public/app/features/alerting/AlertTabCtrl.ts
+++ b/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) {
diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html
index 3a03b23a076..da862203da6 100644
--- a/public/app/features/alerting/partials/alert_tab.html
+++ b/public/app/features/alerting/partials/alert_tab.html
@@ -4,112 +4,121 @@
   </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">
-            </div>
-            <div class="gf-form max-width-11">
-              <label class="gf-form-label width-5">For</label>
-              <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
-                     spellcheck='false' placeholder="5m">
-              <info-popover mode="right-absolute">
-                If an alert rule has a configured For and the query violates the configured
-                threshold it
-                will first go from OK to Pending.
-                Going from OK to Pending Grafana will not send any notifications. Once the alert
-                rule
-                has
-                been firing for more than For duration, it will change to Alerting and send alert
-                notifications.
-              </info-popover>
-            </div>
+          <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">
+          </div>
+          <div class="gf-form max-width-11">
+            <label class="gf-form-label width-5">For</label>
+            <input type="text" class="gf-form-input max-width-6" ng-model="ctrl.alert.for"
+                  spellcheck='false' placeholder="5m">
+            <info-popover mode="right-absolute">
+              If an alert rule has a configured For and the query violates the configured
+              threshold it
+              will first go from OK to Pending.
+              Going from OK to Pending Grafana will not send any notifications. Once the alert
+              rule
+              has
+              been firing for more than For duration, it will change to Alerting and send alert
+              notifications.
+            </info-popover>
           </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-inline" ng-repeat="conditionModel in ctrl.conditionModels">
-        <div class="gf-form">
-          <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
-                                property="conditionModel.operator.type" options="ctrl.evalOperators"
-                                custom="false"></metric-segment-model>
-          <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 width-9"
-                             part="conditionModel.reducerPart"
-                             handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
-          </query-part-editor>
-          <span class="gf-form-label query-keyword">OF</span>
-        </div>
-        <div class="gf-form">
-          <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
-                             handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
-          </query-part-editor>
-        </div>
-        <div class="gf-form">
-          <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
-                                custom="false" css-class="query-keyword"
-                                on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
-          <input class="gf-form-input max-width-9" type="number" step="any"
-                 ng-hide="conditionModel.evaluator.params.length === 0"
-                 ng-model="conditionModel.evaluator.params[0]"
-                 ng-change="ctrl.evaluatorParamsChanged()" />
-          <label class="gf-form-label query-keyword"
-                 ng-show="conditionModel.evaluator.params.length === 2">TO</label>
-          <input class="gf-form-input max-width-9" type="number" step="any"
-                 ng-if="conditionModel.evaluator.params.length === 2"
-                 ng-model="conditionModel.evaluator.params[1]"
-                 ng-change="ctrl.evaluatorParamsChanged()" />
-        </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">
-        <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-group">
-        <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"
-                    ng-options="f.value as f.text for f in ctrl.noDataModes">
-            </select>
+        <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"
+                                  property="conditionModel.operator.type" options="ctrl.evalOperators"
+                                  custom="false"></metric-segment-model>
+            <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 width-9"
+                                part="conditionModel.reducerPart"
+                                handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
+            </query-part-editor>
+            <span class="gf-form-label query-keyword">OF</span>
+          </div>
+          <div class="gf-form">
+            <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
+                                handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
+            </query-part-editor>
+          </div>
+          <div class="gf-form">
+            <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
+                                  custom="false" css-class="query-keyword"
+                                  on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
+            <input class="gf-form-input max-width-9" type="number" step="any"
+                    ng-hide="conditionModel.evaluator.params.length === 0"
+                    ng-model="conditionModel.evaluator.params[0]"
+                    ng-change="ctrl.evaluatorParamsChanged()" />
+            <label class="gf-form-label query-keyword"
+                    ng-show="conditionModel.evaluator.params.length === 2">TO</label>
+            <input class="gf-form-input max-width-9" type="number" step="any"
+                    ng-if="conditionModel.evaluator.params.length === 2"
+                    ng-model="conditionModel.evaluator.params[1]"
+                    ng-change="ctrl.evaluatorParamsChanged()" />
+          </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">
-          <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"
-                    ng-options="f.value as f.text for f in ctrl.executionErrorModes">
-            </select>
+          <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>
+
+      <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 query-keyword">SET STATE TO</span>
+            <div class="gf-form-select-wrapper">
+              <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
+                                            ng-options="f.value as f.text for f in ctrl.noDataModes">
+              </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 query-keyword">SET STATE TO</span>
+            <div class="gf-form-select-wrapper">
+              <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
+                                            ng-options="f.value as f.text for f in ctrl.executionErrorModes">
+              </select>
+            </div>
           </div>
         </div>
 
@@ -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 }">
-							<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>
-						</span>
-          <metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()"
+        </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>
+          </span>
+        </div>
+        <div class="gf-form">
+          <metric-segment segment="ctrl.addNotificationSegment"
+                          get-options="ctrl.getNotifications()"
                           on-change="ctrl.notificationAdded()"></metric-segment>
         </div>
       </div>