energylink/public/app/features/dashboard/partials/globalAlerts.html

<topnav title="Alerting" subnav="false">
  <ul class="nav">
    <li class="active" ><a href="global-alerts">Global Alerts</a></li>
  </ul>
</topnav>

<div class="page-container">
  <div class="page-wide">
    <h1>Global alerts</h1>

    <div class="filter-controls-filters">
      <div class="tight-form last">
        <ul class="tight-form-list">
          <li class="tight-form-item">Filters:</li>
          <li class="tight-form-item">Alert State</li>
          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
          <li class="tight-form-item">Dashboards</li>
          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
          <li class="tight-form-item">
            <a class="pointer">
              <i class="fa fa-pencil"></i>
            </a>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
    <ul class="filter-controls-actions">
      <li>
        <div class="dropdown">
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
            <input class="cr1" id="state-enabled" type="checkbox">
            <label for="state-enabled" class="cr1"></label> <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a>All</a></li>
          </ul>
        </div>
      </li>
      <li>
        <div class="dropdown">
          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
            Bulk Actions &nbsp; <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li><a>Update notifications</a></li>
          </ul>
        </div>
      </li>
      <li>
        <button class="btn btn-inverse" data-toggle="dropdown">
          <i class="fa fa-fw fa-th-large"></i> New Dashboard from selected
        </button>
      </li>
      <li>
        <span class="filter-controls-actions-selected">2 selected, showing 6 of 6 total</span>
      </li>
    </ul>
    <ul class="filter-list">
      <li>
        <ul class="filter-list-card">
          <li class="filter-list-card-select">
            <input class="cr1" id="alert1" type="checkbox">
            <label for="alert1" class="cr1"></label>
          </li>
          <li>
            <div class="filter-list-card-controls">
              <div class="filter-list-card-links">
                <span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
                <span class="filter-list-card-link">Panel: <a href="">Prod CPU Data Writes</a></span>
              </div>
              <div class="filter-list-card-config">
                <a href="#"><i class="fa fa-cog"></i></a>
              </div>
              <div class="filter-list-card-expand" ng-click="alert1.expanded = !alert1.expanded">
                <i class="fa fa-angle-right" ng-show="!alert1.expanded"></i>
                <i class="fa fa-angle-down" ng-show="alert1.expanded"></i>
              </div>
            </div>
            <span class="filter-list-card-title">Prod CPU Data Writes</span>
            <span class="filter-list-card-status">
              <span class="filter-list-card-state online">Online</span> for 19 hours
            </span>
          </li>
        </ul>
        <div class="filter-list-card-details" ng-show="alert1.expanded">
          <h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
          <div class="tight-form last">
            <ul class="tight-form-list">
              <li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
              <li class="tight-form-item">apps</li>
              <li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
              <li class="tight-form-item">fakesite</li>
              <li class="tight-form-item">counters</li>
              <li class="tight-form-item">requests</li>
              <li class="tight-form-item">count</li>
              <li class="tight-form-item">scaleToSeconds(1)</li>
              <li class="tight-form-item">aliasByNode(2)</li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </li>
      <li>
        <ul class="filter-list-card">
          <li class="filter-list-card-select">
            <input class="cr1" id="alert2" type="checkbox" checked>
            <label for="alert2" class="cr1"></label>
          </li>
          <li>
            <div class="filter-list-card-controls">
              <div class="filter-list-card-links">
                <span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Insanely Super Duper Sekret</a></span>
                <span class="filter-list-card-link">Panel: <a href="">client side full page load</a></span>
              </div>
              <div class="filter-list-card-config">
                <a href="#"><i class="fa fa-cog"></i></a>
              </div>
              <div class="filter-list-card-expand" ng-click="alert2.expanded = !alert2.expanded">
                <i class="fa fa-angle-right" ng-show="!alert2.expanded"></i>
                <i class="fa fa-angle-down" ng-show="alert2.expanded"></i>
              </div>
            </div>
            <span class="filter-list-card-title">Prod DB Reads</span>
            <span class="filter-list-card-status">
              <span class="filter-list-card-state warn">Warn</span> for 1 hour
            </span>
          </li>
        </ul>
        <div class="filter-list-card-details" ng-show="alert2.expanded">
          <h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
          <div class="tight-form last">
            <ul class="tight-form-list">
              <li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
              <li class="tight-form-item">apps</li>
              <li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
              <li class="tight-form-item">fakesite</li>
              <li class="tight-form-item">counters</li>
              <li class="tight-form-item">requests</li>
              <li class="tight-form-item">count</li>
              <li class="tight-form-item">scaleToSeconds(1)</li>
              <li class="tight-form-item">aliasByNode(2)</li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </li>
      <li>
        <ul class="filter-list-card">
          <li class="filter-list-card-select">
            <input class="cr1" id="alert3" type="checkbox" checked>
            <label for="alert3" class="cr1"></label>
          </li>
          <li>
            <div class="filter-list-card-controls">
              <div class="filter-list-card-links">
                <span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Mildly Sekret</a></span>
                <span class="filter-list-card-link">Panel: <a href="">Memory/CPU</a></span>
              </div>
              <div class="filter-list-card-config">
                <a href="#"><i class="fa fa-cog"></i></a>
              </div>
              <div class="filter-list-card-expand" ng-click="alert3.expanded = !alert3.expanded">
                <i class="fa fa-angle-right" ng-show="!alert3.expanded"></i>
                <i class="fa fa-angle-down" ng-show="alert3.expanded"></i>
              </div>
            </div>
            <span class="filter-list-card-title">Prod CPU Data Writes</span>
            <span class="filter-list-card-status">
              <span class="filter-list-card-state critical">Online</span> for 10 minutes
            </span>
          </li>
        </ul>
        <div class="filter-list-card-details" ng-show="alert3.expanded">
          <h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
          <div class="tight-form last">
            <ul class="tight-form-list">
              <li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
              <li class="tight-form-item">apps</li>
              <li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
              <li class="tight-form-item">fakesite</li>
              <li class="tight-form-item">counters</li>
              <li class="tight-form-item">requests</li>
              <li class="tight-form-item">count</li>
              <li class="tight-form-item">scaleToSeconds(1)</li>
              <li class="tight-form-item">aliasByNode(2)</li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </li>
      <li>
        <ul class="filter-list-card">
          <li class="filter-list-card-select">
            <input class="cr1" id="alert4" type="checkbox">
            <label for="alert4" class="cr1"></label>
          </li>
          <li>
            <div class="filter-list-card-controls">
              <div class="filter-list-card-links">
                <span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Super Sekret</a></span>
                <span class="filter-list-card-link">Panel: <a href="">Stacked lines</a></span>
              </div>
              <div class="filter-list-card-config">
                <a href="#"><i class="fa fa-cog"></i></a>
              </div>
              <div class="filter-list-card-expand" ng-click="alert4.expanded = !alert4.expanded">
                <i class="fa fa-angle-right" ng-show="!alert4.expanded"></i>
                <i class="fa fa-angle-down" ng-show="alert4.expanded"></i>
              </div>
            </div>
            <span class="filter-list-card-title">Critical Thing</span>
            <span class="filter-list-card-status">
              <span class="filter-list-card-state online">Online</span> for 5 weeks
            </span>
          </li>
        </ul>
        <div class="filter-list-card-details" ng-show="alert4.expanded">
          <h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
          <div class="tight-form last">
            <ul class="tight-form-list">
              <li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
              <li class="tight-form-item">apps</li>
              <li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
              <li class="tight-form-item">fakesite</li>
              <li class="tight-form-item">counters</li>
              <li class="tight-form-item">requests</li>
              <li class="tight-form-item">count</li>
              <li class="tight-form-item">scaleToSeconds(1)</li>
              <li class="tight-form-item">aliasByNode(2)</li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </li>
      <li>
        <ul class="filter-list-card">
          <li class="filter-list-card-select">
            <input class="cr1" id="alert5" type="checkbox">
            <label for="alert5" class="cr1"></label>
          </li>
          <li>
            <div class="filter-list-card-controls">
              <div class="filter-list-card-links">
                <span class="filter-list-card-link"><i class="fa fa-fw fa-th-large"></i>: <a href="">OpSec Public</a></span>
                <span class="filter-list-card-link">Panel: <a href="">More Critical Thing</a></span>
              </div>
              <div class="filter-list-card-config">
                <a href="#"><i class="fa fa-cog"></i></a>
              </div>
              <div class="filter-list-card-expand" ng-click="alert5.expanded = !alert5.expanded">
                <i class="fa fa-angle-right" ng-show="!alert5.expanded"></i>
                <i class="fa fa-angle-down" ng-show="alert5.expanded"></i>
              </div>
            </div>
            <span class="filter-list-card-title">More Critical Thing</span>
            <span class="filter-list-card-status">
              <span class="filter-list-card-state online">Online</span> for 2 months
            </span>
          </li>
        </ul>
        <div class="filter-list-card-details" ng-show="alert5.expanded">
          <h5 class="filter-list-card-details-heading">Alert query <a>configure alerting</a></h5>
          <div class="tight-form last">
            <ul class="tight-form-list">
              <li class="tight-form-item" style="min-width: 15px; text-align: center">A</li>
              <li class="tight-form-item">apps</li>
              <li class="tight-form-item"><i class="fa fa-asterisk"><i></i></i></li>
              <li class="tight-form-item">fakesite</li>
              <li class="tight-form-item">counters</li>
              <li class="tight-form-item">requests</li>
              <li class="tight-form-item">count</li>
              <li class="tight-form-item">scaleToSeconds(1)</li>
              <li class="tight-form-item">aliasByNode(2)</li>
            </ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>