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

<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">

  <div class="page-action-bar">
    <div class="gf-form">
      <label class="gf-form-label">Filter by state</label>
      <div class="gf-form-select-wrapper width-13">
        <select class="gf-form-input" ng-model="ctrl.filters.state" ng-options="f.value as f.text for f in ctrl.stateFilters" ng-change="ctrl.filtersChanged()">
        </select>
      </div>
    </div>

    <div class="page-action-bar__spacer">
    </div>

    <a class="btn btn-secondary" ng-click="ctrl.openHowTo()">
      <i class="fa fa-info-circle"></i>
      How to add an alert
    </a>
  </div>

  <section class="card-section card-list-layout-list">

    <ol class="card-list" >
      <li class="card-item-wrapper" ng-repeat="alert in ctrl.alerts">
        <div class="card-item card-item--alert">
          <div class="card-item-header">
            <div class="card-item-type">
              <a class="card-item-cog" bs-tooltip="'Pausing an alert rule prevents it from executing'" ng-click="ctrl.pauseAlertRule(alert.id)">
                <i ng-show="alert.state !== 'paused'" class="fa fa-pause"></i>
                <i ng-show="alert.state === 'paused'" class="fa fa-play"></i>
              </a>
              <a class="card-item-cog" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
                <i class="icon-gf icon-gf-settings"></i>
              </a>
            </div>
          </div>
          <div class="card-item-body">
            <div class="card-item-details">
              <div class="card-item-name">
                <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
                  {{alert.name}}
                </a>
              </div>
              <div class="card-item-sub-name">
                <span class="alert-list-item-state {{alert.stateModel.stateClass}}">
                  <i class="{{alert.stateModel.iconClass}}"></i>
                  {{alert.stateModel.text}} <span class="small muted" ng-show="alert.no_data">(due to no data)</span>
                </span> for {{alert.newStateDateAgo}}
              </div>
              <div class="small muted" ng-show="alert.executionError !== ''">
                Error: "{{alert.executionError}}"
              </div>
            </div>
          </div>
        </div>
      </li>
    </ol>
  </section>
</div>