alert_list.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <navbar icon="icon-gf icon-gf-alert" title="Alerting" title-url="alerting">
  2. </navbar>
  3. <div class="page-container" >
  4. <div class="page-header">
  5. <h1>Alert List</h1>
  6. <a class="btn btn-inverse" ng-click="ctrl.openHowTo()">
  7. <i class="fa fa-info-circle"></i>
  8. How to add an alert
  9. </a>
  10. </div>
  11. <div class="gf-form-group">
  12. <div class="gf-form-inline">
  13. <div class="gf-form">
  14. <label class="gf-form-label">Filter by state</label>
  15. <div class="gf-form-select-wrapper width-13">
  16. <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()">
  17. </select>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <section class="card-section card-list-layout-list">
  23. <ol class="card-list" >
  24. <li class="card-item-wrapper" ng-repeat="alert in ctrl.alerts">
  25. <div class="card-item card-item--alert">
  26. <div class="card-item-header">
  27. <div class="card-item-type">
  28. <a class="card-item-cog" bs-tooltip="'Pausing an alert rule prevents it from executing'" ng-click="ctrl.pauseAlertRule(alert.id)">
  29. <i class="fa fa-pause"></i>
  30. </a>
  31. <a class="card-item-cog" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
  32. <i class="icon-gf icon-gf-settings"></i>
  33. </a>
  34. </div>
  35. </div>
  36. <div class="card-item-body">
  37. <div class="card-item-details">
  38. <div class="card-item-name">
  39. <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
  40. {{alert.name}}
  41. </a>
  42. </div>
  43. <div class="card-item-sub-name">
  44. <span class="alert-list-item-state {{alert.stateModel.stateClass}}">
  45. <i class="{{alert.stateModel.iconClass}}"></i>
  46. {{alert.stateModel.text}}
  47. </span> for {{alert.newStateDateAgo}}
  48. </div>
  49. <div class="small muted" ng-show="alert.executionError">
  50. {{alert.executionError}}
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </li>
  56. </ol>
  57. </section>
  58. </div>