tab_alerting.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <div class="editor-row">
  2. <div class="gf-form-group section" >
  3. <h5 class="section-heading">Alert Query</h5>
  4. <div class="gf-form-inline">
  5. <div class="gf-form">
  6. <query-part-editor
  7. class="gf-form-label query-part"
  8. part="ctrl.query"
  9. part-updated="ctrl.queryUpdated()">
  10. </query-part-editor>
  11. </div>
  12. <div class="gf-form">
  13. <span class="gf-form-label">Transform using</span>
  14. <div class="gf-form-select-wrapper">
  15. <select class="gf-form-input"
  16. ng-model="ctrl.alert.transform.type"
  17. ng-options="f.type as f.text for f in ctrl.transforms"
  18. ng-change="ctrl.transformChanged()"
  19. >
  20. </select>
  21. </div>
  22. </div>
  23. <div class="gf-form" ng-if="ctrl.transformDef.type === 'aggregation'">
  24. <span class="gf-form-label">Method</span>
  25. <div class="gf-form-select-wrapper">
  26. <select class="gf-form-input"
  27. ng-model="ctrl.alert.transform.method"
  28. ng-options="f for f in ctrl.aggregators">
  29. </select>
  30. </div>
  31. </div>
  32. <div class="gf-form" ng-if="ctrl.transformDef.type === 'forecast'">
  33. <span class="gf-form-label">Timespan</span>
  34. <input class="gf-form-input max-width-5" type="text" ng-model="ctrl.alert.transform.timespan" ng-change="ctrl.ruleUpdated()"></input>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="gf-form-group section">
  39. <h5 class="section-heading">Levels</h5>
  40. <div class="gf-form-inline">
  41. <div class="gf-form">
  42. <span class="gf-form-label">
  43. <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
  44. Warn if
  45. </span>
  46. <metric-segment-model property="ctrl.alert.warning.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
  47. <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.warnLevel" ng-change="ctrl.thresholdsUpdated()"></input>
  48. </div>
  49. <div class="gf-form">
  50. <span class="gf-form-label">
  51. <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
  52. Critcal if
  53. </span>
  54. <metric-segment-model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
  55. <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.critLevel" ng-change="ctrl.thresholdsUpdated()"></input>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="editor-row">
  61. <div class="gf-form-group section">
  62. <h5 class="section-heading">Execution</h5>
  63. <div class="gf-form-inline">
  64. <div class="gf-form">
  65. <span class="gf-form-label">Scheduler</span>
  66. <div class="gf-form-select-wrapper">
  67. <select class="gf-form-input"
  68. ng-model="ctrl.alert.scheduler"
  69. ng-options="f.value as f.text for f in ctrl.schedulers">
  70. </select>
  71. </div>
  72. </div>
  73. <div class="gf-form">
  74. <span class="gf-form-label">Evaluate every</span>
  75. <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.alert.frequency"></input>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="gf-form-group section">
  80. <h5 class="section-heading">Notifications</h5>
  81. <div class="gf-form-inline">
  82. <div class="gf-form">
  83. <span class="gf-form-label">Groups</span>
  84. <bootstrap-tagsinput ng-model="ctrl.alert.notify" tagclass="label label-tag" placeholder="add tags">
  85. </bootstrap-tagsinput>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="gf-form-group section">
  91. <h5 class="section-heading">Information</h5>
  92. <div class="gf-form">
  93. <span class="gf-form-label width-10">Alert name</span>
  94. <input type="text" class="gf-form-input width-22" ng-model="ctrl.panel.alerting.name">
  95. </div>
  96. <div class="gf-form-inline">
  97. <div class="gf-form">
  98. <span class="gf-form-label width-10" style="margin-top: -73px;">Alert description</span>
  99. </div>
  100. <div class="gf-form">
  101. <textarea rows="5" ng-model="ctrl.panel.alerting.description" class="gf-form-input width-22"></textarea>
  102. </div>
  103. </div>
  104. </div>
  105. <div class="editor-row">
  106. <div class="gf-form-button-row">
  107. <button class="btn btn-danger" ng-click="ctrl.delete()" ng-show="ctrl.alert.enabled">Delete</button>
  108. <button class="btn btn-success" ng-click="ctrl.enable()" ng-hide="ctrl.alert.enabled">Enable</button>
  109. <button class="btn btn-secondary" ng-click="ctrl.disable()" ng-show="ctrl.alert.enabled">Disable</button>
  110. </div>
  111. </div>