alert_list.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
  29. <i class="icon-gf icon-gf-settings"></i>
  30. </a>
  31. </div>
  32. <div class="card-item-notice" ng-show="alert.executionError">
  33. <span>Execution Error</span>
  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>
  50. </div>
  51. </div>
  52. </div>
  53. </li>
  54. </ol>
  55. </section>
  56. </div>