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

<div class="edit-tab-with-sidemenu" ng-if="ctrl.alert.enabled">
	<aside class="edit-sidemenu-aside">
		<ul class="edit-sidemenu">
			<li ng-class="{active: ctrl.subTabIndex === 0}">
				<a ng-click="ctrl.changeTabIndex(0)">Alert Config</a>
			</li>
			<li ng-class="{active: ctrl.subTabIndex === 1}">
				<a ng-click="ctrl.changeTabIndex(1)">
					Notifications <span class="muted">({{ctrl.alertNotifications.length}})</span>
				</a>
			</li>
			<li ng-class="{active: ctrl.subTabIndex === 2}">
				<a ng-click="ctrl.changeTabIndex(2)">State history</a>
			</li>
      <li>
				<a ng-click="ctrl.delete()">Delete</a>
			</li>
		</ul>
	</aside>

	<div class="edit-tab-content">
		<div ng-if="ctrl.subTabIndex === 0">
			<div class="alert alert-error m-b-2" ng-show="ctrl.error">
				<i class="fa fa-warning"></i> {{ctrl.error}}
			</div>

			<div class="gf-form-group">
				<h5 class="section-heading">Alert Config</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 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="key as value.text for (key, value) in ctrl.severityLevels" ng-change="ctrl.severityChanged()">
							</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.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-7" type="number" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"></input>
            <label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
            <input class="gf-form-input max-width-7" type="number" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"></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">
				<div class="gf-form">
          <span class="gf-form-label">If no data points 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>
					</div>
				</div>

				<div class="gf-form-button-row">
					<button class="btn btn-inverse" ng-click="ctrl.test()">
						Test Rule
					</button>
				</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.subTabIndex === 1">
			<h5 class="section-heading">Notifications</h5>
			<div class="gf-form-inline">
				<div class="gf-form max-width-30">
					<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()" 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 class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
      <h5 class="section-heading">State history <span class="muted small">(last 50 state changes)</span></h5>
			<section class="card-section card-list-layout-list">
				<ol class="card-list" >
					<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
						<div class="card-item card-item--alert">
							<div class="card-item-body">
								<div class="card-item-details">
									<div class="card-item-sub-name">
										<span class="alert-list-item-state {{ah.stateModel.stateClass}}">
											<i class="{{ah.stateModel.iconClass}}"></i>
											{{ah.stateModel.text}}
										</span> {{ah.metrics}}
									</div>
									<div class="card-item-sub-name">
										{{ah.time}}
									</div>
								</div>
							</div>
						</div>
					</li>
				</ol>
			</section>
		</div>
	</div>
</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>