alert_tab_ctrl.ts 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. ///<reference path="../../headers/common.d.ts" />
  2. import _ from 'lodash';
  3. import {ThresholdMapper} from './threshold_mapper';
  4. import {QueryPart} from 'app/core/components/query_part/query_part';
  5. import alertDef from './alert_def';
  6. export class AlertTabCtrl {
  7. panel: any;
  8. panelCtrl: any;
  9. testing: boolean;
  10. testResult: any;
  11. subTabIndex: number;
  12. conditionTypes: any;
  13. alert: any;
  14. conditionModels: any;
  15. evalFunctions: any;
  16. severityLevels: any;
  17. addNotificationSegment;
  18. notifications;
  19. alertNotifications;
  20. /** @ngInject */
  21. constructor(private $scope, private $timeout, private backendSrv, private dashboardSrv, private uiSegmentSrv) {
  22. this.panelCtrl = $scope.ctrl;
  23. this.panel = this.panelCtrl.panel;
  24. this.$scope.ctrl = this;
  25. this.subTabIndex = 0;
  26. this.evalFunctions = alertDef.evalFunctions;
  27. this.conditionTypes = alertDef.conditionTypes;
  28. this.severityLevels = alertDef.severityLevels;
  29. }
  30. $onInit() {
  31. this.addNotificationSegment = this.uiSegmentSrv.newPlusButton();
  32. this.initModel();
  33. // set panel alert edit mode
  34. this.$scope.$on("$destroy", () => {
  35. this.panelCtrl.editingThresholds = false;
  36. this.panelCtrl.render();
  37. });
  38. // subscribe to graph threshold handle changes
  39. this.panelCtrl.events.on('threshold-changed', this.graphThresholdChanged.bind(this));
  40. // build notification model
  41. this.notifications = [];
  42. this.alertNotifications = [];
  43. return this.backendSrv.get('/api/alert-notifications').then(res => {
  44. this.notifications = res;
  45. _.each(this.alert.notifications, item => {
  46. var model = _.findWhere(this.notifications, {id: item.id});
  47. if (model) {
  48. model.iconClass = this.getNotificationIcon(model.type);
  49. this.alertNotifications.push(model);
  50. }
  51. });
  52. });
  53. }
  54. getNotificationIcon(type) {
  55. switch (type) {
  56. case "email": return "fa fa-envelope";
  57. case "slack": return "fa fa-slack";
  58. case "webhook": return "fa fa-cubes";
  59. }
  60. }
  61. getNotifications() {
  62. return Promise.resolve(this.notifications.map(item => {
  63. return this.uiSegmentSrv.newSegment(item.name);
  64. }));
  65. }
  66. notificationAdded() {
  67. var model = _.findWhere(this.notifications, {name: this.addNotificationSegment.value});
  68. if (!model) {
  69. return;
  70. }
  71. this.alertNotifications.push({name: model.name, iconClass: this.getNotificationIcon(model.type)});
  72. this.alert.notifications.push({id: model.id});
  73. // reset plus button
  74. this.addNotificationSegment.value = this.uiSegmentSrv.newPlusButton().value;
  75. this.addNotificationSegment.html = this.uiSegmentSrv.newPlusButton().html;
  76. }
  77. removeNotification(index) {
  78. this.alert.notifications.splice(index, 1);
  79. this.alertNotifications.splice(index, 1);
  80. }
  81. initModel() {
  82. var alert = this.alert = this.panel.alert = this.panel.alert || {};
  83. alert.conditions = alert.conditions || [];
  84. if (alert.conditions.length === 0) {
  85. alert.conditions.push(this.buildDefaultCondition());
  86. }
  87. alert.severity = alert.severity || 'critical';
  88. alert.frequency = alert.frequency || '60s';
  89. alert.handler = alert.handler || 1;
  90. alert.notifications = alert.notifications || [];
  91. var defaultName = this.panel.title + ' alert';
  92. alert.name = alert.name || defaultName;
  93. alert.description = alert.description || defaultName;
  94. this.conditionModels = _.reduce(alert.conditions, (memo, value) => {
  95. memo.push(this.buildConditionModel(value));
  96. return memo;
  97. }, []);
  98. if (this.alert.enabled) {
  99. this.panelCtrl.editingThresholds = true;
  100. }
  101. ThresholdMapper.alertToGraphThresholds(this.panel);
  102. this.panelCtrl.render();
  103. }
  104. graphThresholdChanged(evt) {
  105. for (var condition of this.alert.conditions) {
  106. if (condition.type === 'query') {
  107. condition.evaluator.params[evt.handleIndex] = evt.threshold.value;
  108. this.evaluatorParamsChanged();
  109. break;
  110. }
  111. }
  112. }
  113. buildDefaultCondition() {
  114. return {
  115. type: 'query',
  116. query: {params: ['A', '5m', 'now']},
  117. reducer: {type: 'avg', params: []},
  118. evaluator: {type: 'gt', params: [null]},
  119. };
  120. }
  121. buildConditionModel(source) {
  122. var cm: any = {source: source, type: source.type};
  123. cm.queryPart = new QueryPart(source.query, alertDef.alertQueryDef);
  124. cm.reducerPart = new QueryPart({params: []}, alertDef.reducerAvgDef);
  125. cm.evaluator = source.evaluator;
  126. return cm;
  127. }
  128. queryPartUpdated(conditionModel) {
  129. }
  130. addCondition(type) {
  131. var condition = this.buildDefaultCondition();
  132. // add to persited model
  133. this.alert.conditions.push(condition);
  134. // add to view model
  135. this.conditionModels.push(this.buildConditionModel(condition));
  136. }
  137. removeCondition(index) {
  138. this.alert.conditions.splice(index, 1);
  139. this.conditionModels.splice(index, 1);
  140. }
  141. delete() {
  142. this.panel.alert = {enabled: false};
  143. this.initModel();
  144. }
  145. enable() {
  146. this.alert.enabled = true;
  147. this.initModel();
  148. }
  149. evaluatorParamsChanged() {
  150. ThresholdMapper.alertToGraphThresholds(this.panel);
  151. this.panelCtrl.render();
  152. }
  153. severityChanged() {
  154. ThresholdMapper.alertToGraphThresholds(this.panel);
  155. this.panelCtrl.render();
  156. }
  157. evaluatorTypeChanged(evaluator) {
  158. // ensure params array is correct length
  159. switch (evaluator.type) {
  160. case "lt":
  161. case "gt": {
  162. evaluator.params = [evaluator.params[0]];
  163. break;
  164. }
  165. case "within_range":
  166. case "outside_range": {
  167. evaluator.params = [evaluator.params[0], evaluator.params[1]];
  168. break;
  169. }
  170. case "no_value": {
  171. evaluator.params = [];
  172. }
  173. }
  174. this.evaluatorParamsChanged();
  175. }
  176. test() {
  177. this.testing = true;
  178. var payload = {
  179. dashboard: this.dashboardSrv.getCurrent().getSaveModelClone(),
  180. panelId: this.panelCtrl.panel.id,
  181. };
  182. return this.backendSrv.post('/api/alerts/test', payload).then(res => {
  183. this.testResult = res;
  184. this.testing = false;
  185. });
  186. }
  187. }
  188. /** @ngInject */
  189. export function alertTab() {
  190. 'use strict';
  191. return {
  192. restrict: 'E',
  193. scope: true,
  194. templateUrl: 'public/app/features/alerting/partials/alert_tab.html',
  195. controller: AlertTabCtrl,
  196. };
  197. }