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

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

<div ng-if="ctrl.alert.enabled">
  <div class="editor-row">
    <div class="gf-form-group section" >
      <h5 class="section-heading">Alert Query</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <query-part-editor
             class="gf-form-label query-part"
             part="ctrl.query"
             part-updated="ctrl.queryUpdated()">
          </query-part-editor>
        </div>
        <div class="gf-form">
          <span class="gf-form-label">Transform using</span>
          <div class="gf-form-select-wrapper">
            <select   class="gf-form-input"
                      ng-model="ctrl.alert.transform.type"
                      ng-options="f.type as f.text for f in ctrl.transforms"
                      ng-change="ctrl.transformChanged()"
                      >
            </select>
          </div>
        </div>
        <div class="gf-form" ng-if="ctrl.transformDef.type === 'aggregation'">
          <span class="gf-form-label">Method</span>
          <div class="gf-form-select-wrapper">
            <select   class="gf-form-input"
                      ng-model="ctrl.alert.transform.method"
                      ng-options="f for f in ctrl.aggregators">
            </select>
          </div>
        </div>
        <div class="gf-form" ng-if="ctrl.transformDef.type === 'forecast'">
          <span class="gf-form-label">Timespan</span>
          <input class="gf-form-input max-width-5" type="text" ng-model="ctrl.alert.transform.timespan" ng-change="ctrl.ruleUpdated()"></input>
        </div>
      </div>
    </div>

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

  <div class="editor-row">
    <div class="gf-form-group section">
      <h5 class="section-heading">Execution</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <span class="gf-form-label">Handler</span>
          <div class="gf-form-select-wrapper">
            <select   class="gf-form-input"
                      ng-model="ctrl.alert.handler"
                      ng-options="f.value as f.text for f in ctrl.handlers">
            </select>
          </div>
        </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>
    </div>
    <div class="gf-form-group section">
      <h5 class="section-heading">Notifications</h5>
      <div class="gf-form-inline">
        <div class="gf-form">
          <span class="gf-form-label">Groups</span>
          <bootstrap-tagsinput ng-model="ctrl.alert.notify" tagclass="label label-tag" placeholder="add tags">
          </bootstrap-tagsinput>
        </div>
      </div>
    </div>
  </div>

  <div class="gf-form-group section">
    <h5 class="section-heading">Information</h5>
    <div class="gf-form">
      <span class="gf-form-label width-10">Alert name</span>
      <input type="text" class="gf-form-input width-22" ng-model="ctrl.panel.alerting.name">
    </div>
    <div class="gf-form-inline">
      <div class="gf-form">
        <span class="gf-form-label width-10" style="margin-top: -73px;">Alert description</span>
      </div>
      <div class="gf-form">
        <textarea rows="5" ng-model="ctrl.panel.alerting.description" class="gf-form-input width-22"></textarea>
      </div>
    </div>
  </div>
</div>

<div class="editor-row">
  <div class="gf-form-button-row">
    <button class="btn btn-danger" ng-click="ctrl.delete()" ng-show="ctrl.alert.enabled">Delete</button>
    <button class="btn btn-inverse" ng-click="ctrl.enable()" ng-hide="ctrl.alert.enabled">
      <i class="icon-gf icon-gf-alert"></i>
      Create Alert
    </button>
  </div>
</div>