alert_list.html 2.4 KB

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