Trigger panel refactor. Migrated to ES6.

Gruntfile.js

@@ -16,6 +16,7 @@ module.exports = function(grunt) {
         src: [
           '**/*',
           '!datasource-zabbix/*.js',
+          '!panel-triggers/*.js',
           '!**/*.scss'
         ],
         dest: 'dist/'
@@ -46,7 +47,8 @@ module.exports = function(grunt) {
           cwd: 'src',
           expand: true,
           src: [
-            'datasource-zabbix/*.js'
+            'datasource-zabbix/*.js',
+            'panel-triggers/*.js',
           ],
           dest: 'dist/'
         }]

src/panel-triggers/editor.js

@@ -11,15 +11,13 @@
  * Licensed under the Apache License, Version 2.0
  */
 
-define([
+import _ from 'lodash';
-  'angular',
+import $ from 'jquery';
-  'lodash',
-  'jquery'
-],
-function (angular, _, $) {
-  'use strict';
 
-  function TriggerPanelEditorCtrl($scope, $q, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
+class TriggerPanelEditorCtrl{
+
+  /** @ngInject */
+  constructor($scope, $q, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
     $scope.editor = this;
     this.panelCtrl = $scope.ctrl;
     this.panel = this.panelCtrl.panel;
@@ -80,35 +78,28 @@ function (angular, _, $) {
     });
   }
 
-  var p = TriggerPanelEditorCtrl.prototype;
+  initFilters() {
-
-  // Get list of metric names for bs-typeahead directive
-  function getMetricNames(scope, metricList) {
-    return _.uniq(_.map(scope.metric[metricList], 'name'));
-  }
-
-  p.initFilters = function () {
     this.filterGroups();
     this.filterHosts();
     this.filterApplications();
-  };
+  }
 
-  p.filterGroups = function() {
+  filterGroups() {
     var self = this;
     this.datasource.queryProcessor.filterGroups().then(function(groups) {
       self.metric.groupList = groups;
     });
-  };
+  }
 
-  p.filterHosts = function() {
+  filterHosts() {
     var self = this;
     var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
     this.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
       self.metric.filteredHosts = hosts;
     });
-  };
+  }
 
-  p.filterApplications = function() {
+  filterApplications() {
     var self = this;
     var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
     var hostFilter = this.templateSrv.replace(this.panel.triggers.host.filter);
@@ -116,51 +107,41 @@ function (angular, _, $) {
       .then(function(apps) {
         self.metric.filteredApplications = apps;
       });
-  };
+  }
 
-  p.onTargetPartChange = function(targetPart) {
+  onTargetPartChange(targetPart) {
     var regexStyle = {'color': '#CCA300'};
     targetPart.isRegex = isRegex(targetPart.filter);
     targetPart.style = targetPart.isRegex ? regexStyle : {};
-  };
-
-  function isRegex(str) {
-    // Pattern for testing regex
-    var regexPattern = /^\/(.*)\/([gmi]*)$/m;
-    return regexPattern.test(str);
   }
 
-  p.parseTarget = function() {
+  parseTarget() {
     this.initFilters();
     var newTarget = _.cloneDeep(this.panel.triggers);
     if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
       this.oldTarget = newTarget;
       this.panelCtrl.refreshData();
     }
-  };
+  }
 
-  p.refreshTriggerSeverity = function() {
+  refreshTriggerSeverity() {
     _.each(this.triggerList, function(trigger) {
       trigger.color = this.panel.triggerSeverity[trigger.priority].color;
       trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
     });
     this.panelCtrl.refreshData();
-  };
-
-  p.datasourceChanged = function() {
-    this.panelCtrl.refreshData();
-  };
-
-  p.changeTriggerSeverityColor = function(trigger, color) {
-    this.panel.triggerSeverity[trigger.priority].color = color;
-    this.refreshTriggerSeverity();
-  };
-
-  function getTriggerIndexForElement(el) {
-    return el.parents('[data-trigger-index]').data('trigger-index');
   }
 
-  p.openTriggerColorSelector = function(event) {
+  datasourceChanged() {
+    this.panelCtrl.refreshData();
+  }
+
+  changeTriggerSeverityColor(trigger, color) {
+    this.panel.triggerSeverity[trigger.priority].color = color;
+    this.refreshTriggerSeverity();
+  }
+
+  openTriggerColorSelector(event) {
     var el = $(event.currentTarget);
     var index = getTriggerIndexForElement(el);
     var popoverScope = this.$new();
@@ -173,9 +154,9 @@ function (angular, _, $) {
       templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
       scope: popoverScope
     });
-  };
+  }
 
-  p.openOkEventColorSelector = function(event) {
+  openOkEventColorSelector(event) {
     var el = $(event.currentTarget);
     var popoverScope = this.$new();
     popoverScope.trigger = {color: this.panel.okEventColor};
@@ -190,16 +171,31 @@ function (angular, _, $) {
       templateUrl:  'public/plugins/triggers/trigger.colorpicker.html',
       scope: popoverScope
     });
-  };
+  }
+}
 
-  var triggerPanelEditor = function() {
+// Get list of metric names for bs-typeahead directive
+function getMetricNames(scope, metricList) {
+  return _.uniq(_.map(scope.metric[metricList], 'name'));
+}
+
+function getTriggerIndexForElement(el) {
+  return el.parents('[data-trigger-index]').data('trigger-index');
+}
+
+function isRegex(str) {
+  // Pattern for testing regex
+  var regexPattern = /^\/(.*)\/([gmi]*)$/m;
+  return regexPattern.test(str);
+}
+
+/** @ngInject */
+export function triggerPanelEditor($q, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
+  'use strict';
   return {
     restrict: 'E',
     scope: true,
     templateUrl: 'public/plugins/triggers/editor.html',
     controller: TriggerPanelEditorCtrl,
   };
-  };
+}
-
-  return triggerPanelEditor;
-});

src/panel-triggers/module.js

@@ -11,27 +11,21 @@
  * Licensed under the Apache License, Version 2.0
  */
 
-define([
+import _ from 'lodash';
-  'app/plugins/sdk',
+import moment from 'moment';
-  'angular',
+import {PanelCtrl} from 'app/plugins/sdk';
-  'lodash',
+import {triggerPanelEditor} from './editor';
-  'jquery',
-  'moment',
-  './editor'
-],
-function (sdk, angular, _, $, moment, triggerPanelEditor) {
-  'use strict';
 
-  var defaultSeverity = [
+var defaultSeverity = [
   { priority: 0, severity: 'Not classified',  color: '#B7DBAB', show: true },
   { priority: 1, severity: 'Information',     color: '#82B5D8', show: true },
   { priority: 2, severity: 'Warning',         color: '#E5AC0E', show: true },
   { priority: 3, severity: 'Average',         color: '#C15C17', show: true },
   { priority: 4, severity: 'High',            color: '#BF1B00', show: true },
   { priority: 5, severity: 'Disaster',        color: '#890F02', show: true }
-  ];
+];
 
-  var panelDefaults = {
+var panelDefaults = {
   datasource: null,
   triggers: {
     group: {filter: ""},
@@ -51,18 +45,18 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
   showEvents: { text: 'Problem events', value: '1' },
   triggerSeverity: defaultSeverity,
   okEventColor: '#890F02',
-  };
+};
 
-  var triggerStatusMap = {
+var triggerStatusMap = {
   '0': 'OK',
   '1': 'Problem'
-  };
+};
 
-  var TriggerPanelCtrl = (function(_super) {
+class TriggerPanelCtrl extends PanelCtrl {
 
   /** @ngInject */
-    function TriggerPanelCtrl($scope, $injector, $q, $element, datasourceSrv) {
+  constructor($scope, $injector, $q, $element, datasourceSrv) {
-      _super.call(this, $scope, $injector);
+    super($scope, $injector);
     this.datasourceSrv = datasourceSrv;
     this.triggerStatusMap = triggerStatusMap;
 
@@ -73,23 +67,18 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
     this.refreshData();
   }
 
-    TriggerPanelCtrl.templateUrl = 'module.html';
-
-    TriggerPanelCtrl.prototype = Object.create(_super.prototype);
-    TriggerPanelCtrl.prototype.constructor = TriggerPanelCtrl;
-
   // Add panel editor
-    TriggerPanelCtrl.prototype.initEditMode = function() {
+  initEditMode() {
-      _super.prototype.initEditMode();
+    super.initEditMode();
     this.icon = "fa fa-lightbulb-o";
     this.addEditorTab('Options', triggerPanelEditor, 2);
-    };
+  }
 
-    TriggerPanelCtrl.prototype.refreshData = function() {
+  refreshData() {
     var self = this;
 
     // Load datasource
-      return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
+    return this.datasourceSrv.get(this.panel.datasource).then(datasource => {
       var zabbix = datasource.zabbixAPI;
       var queryProcessor = datasource.queryProcessor;
       var triggerFilter = self.panel.triggers;
@@ -97,13 +86,13 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
       var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
                                                         triggerFilter.host.filter,
                                                         triggerFilter.application.filter);
-        return buildQuery.then(function(query) {
+      return buildQuery.then(query => {
         return zabbix.getTriggers(query.groupids,
                                   query.hostids,
                                   query.applicationids,
                                   showEvents)
-            .then(function(triggers) {
+          .then(triggers => {
-              return _.map(triggers, function (trigger) {
+            return _.map(triggers, trigger => {
               var triggerObj = trigger;
 
               // Format last change and age
@@ -128,24 +117,24 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
               return triggerObj;
             });
           })
-            .then(function (triggerList) {
+          .then(triggerList => {
 
             // Request acknowledges for trigger
-              var eventids = _.map(triggerList, function(trigger) {
+            var eventids = _.map(triggerList, trigger => {
               return trigger.lastEvent.eventid;
             });
 
             return zabbix.getAcknowledges(eventids)
-                .then(function (events) {
+              .then(events => {
 
                 // Map events to triggers
-                  _.each(triggerList, function(trigger) {
+                _.each(triggerList, trigger => {
-                    var event = _.find(events, function(event) {
+                  var event = _.find(events, event => {
                     return event.eventid === trigger.lastEvent.eventid;
                   });
 
                   if (event) {
-                      trigger.acknowledges = _.map(event.acknowledges, function (ack) {
+                    trigger.acknowledges = _.map(event.acknowledges, ack => {
                       var time = new Date(+ack.clock * 1000);
                       ack.time = time.toLocaleString();
                       ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
@@ -162,7 +151,7 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
 
                 // Filter acknowledged triggers
                 if (self.panel.showTriggers === 'unacknowledged') {
-                    triggerList = _.filter(triggerList, function (trigger) {
+                  triggerList = _.filter(triggerList, trigger => {
                     return !trigger.acknowledges;
                   });
                 } else if (self.panel.showTriggers === 'acknowledged') {
@@ -172,7 +161,7 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
                 }
 
                 // Filter triggers by severity
-                  triggerList = _.filter(triggerList, function (trigger) {
+                triggerList = _.filter(triggerList, trigger => {
                   return self.panel.triggerSeverity[trigger.priority].show;
                 });
 
@@ -191,9 +180,12 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
           });
       });
     });
-    };
+  }
+}
 
-    function filterTriggers(triggers, triggerFilter) {
+TriggerPanelCtrl.templateUrl = 'module.html';
+
+function filterTriggers(triggers, triggerFilter) {
   if (isRegex(triggerFilter)) {
     return _.filter(triggers, function(trigger) {
       return buildRegex(triggerFilter).test(trigger.description);
@@ -203,28 +195,23 @@ function (sdk, angular, _, $, moment, triggerPanelEditor) {
       return trigger.description === triggerFilter;
     });
   }
-    }
+}
 
-    function isRegex(str) {
+function isRegex(str) {
   // Pattern for testing regex
   var regexPattern = /^\/(.*)\/([gmi]*)$/m;
   return regexPattern.test(str);
-    }
+}
 
-    function buildRegex(str) {
+function buildRegex(str) {
   var regexPattern = /^\/(.*)\/([gmi]*)$/m;
   var matches = str.match(regexPattern);
   var pattern = matches[1];
   var flags = matches[2] !== "" ? matches[2] : undefined;
   return new RegExp(pattern, flags);
-    }
+}
 
-    return TriggerPanelCtrl;
+export {
-
+  TriggerPanelCtrl,
-  })(sdk.PanelCtrl);
+  TriggerPanelCtrl as PanelCtrl
-
+};
-  return {
-    PanelCtrl: TriggerPanelCtrl
-  };
-
-});