energylink/public/app/plugins/panel/graph/partials/tab_alerting.html

<!-- <div ng&#45;if="!ctrl.alert.enabled"> -->
<!--   <div class="gf&#45;form&#45;group"> -->
<!--     <h5 class="section&#45;heading">Visual Thresholds</h5> -->
<!--     <div class="gf&#45;form&#45;inline"> -->
<!--       <div class="gf&#45;form"> -->
<!--         <span class="gf&#45;form&#45;label"> -->
<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;critical"></i> -->
<!--           Critcal if -->
<!--         </span> -->
<!--         <metric&#45;segment&#45;model property="ctrl.alert.crit.op" options="ctrl.operatorList" custom="false" css&#45;class="query&#45;segment&#45;operator" on&#45;change="ctrl.thresholdsUpdated()"></metric&#45;segment&#45;model> -->
<!--         <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.crit.value" ng&#45;change="ctrl.thresholdsUpdated()"></input> -->
<!--       </div> -->
<!--       <div class="gf&#45;form"> -->
<!--         <span class="gf&#45;form&#45;label"> -->
<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;warn"></i> -->
<!--           Warn if -->
<!--         </span> -->
<!--         <metric&#45;segment&#45;model property="ctrl.alert.warn.op" options="ctrl.operatorList" custom="false" css&#45;class="query&#45;segment&#45;operator" on&#45;change="ctrl.thresholdsUpdated()"></metric&#45;segment&#45;model> -->
<!--         <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.warn.value" ng&#45;change="ctrl.thresholdsUpdated()"></input> -->
<!--       </div> -->
<!--     </div> -->
<!--   </div> -->
<!-- </div> -->

<div ng-if="ctrl.alert.enabled">
	<div class="gf-form-group">
		<h5 class="section-heading">Alert Rule</h5>
		<div class="gf-form-inline">
			<div class="gf-form">
				<span class="gf-form-label">Name</span>
				<input type="text" class="gf-form-input width-22" ng-model="ctrl.alert.name">
			</div>
			<div class="gf-form">
				<span class="gf-form-label">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">
					<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 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">
			<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">
		<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>
				<metric-segment segment="ctrl.addNotificationSegment" get-options="ctrl.getNotifications()" on-change="ctrl.notificationAdded()"></metric-segment>
			</div>
		</div>
	</div>

	<div class="gf-form-group">
		<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>

<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 class="gf-form-group" ng-if="!ctrl.alert.enabled">
	<div class="gf-form-button-row">
		<button class="btn btn-inverse" ng-click="ctrl.enable()">
			<i class="icon-gf icon-gf-alert"></i>
			Create Alert
		</button>
	</div>
</div>