Trigger panel refactor. Migrated to ES6.

2016-03-19 17:15:48 +03:00
parent c6f854e948
commit a533f7f6b3
3 changed files with 243 additions and 258 deletions
--- a/Gruntfile.js
+++ b/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/'
        }]
--- a/src/panel-triggers/editor.js
+++ b/src/panel-triggers/editor.js
@@ -11,15 +11,13 @@
 * Licensed under the Apache License, Version 2.0
 */

-define([
-  'angular',
-  'lodash',
-  'jquery'
-],
-function (angular, _, $) {
-  'use strict';
+import _ from 'lodash';
+import $ from 'jquery';

-  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;
-
-  // Get list of metric names for bs-typeahead directive
-  function getMetricNames(scope, metricList) {
-    return _.uniq(_.map(scope.metric[metricList], 'name'));
-  }
-
-  p.initFilters = function () {
+  initFilters() {
    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() {
-    return {
-      restrict: 'E',
-      scope: true,
-      templateUrl: 'public/plugins/triggers/editor.html',
-      controller: TriggerPanelEditorCtrl,
-    };
-  };
+// Get list of metric names for bs-typeahead directive
+function getMetricNames(scope, metricList) {
+  return _.uniq(_.map(scope.metric[metricList], 'name'));
+}

-  return triggerPanelEditor;
-});
+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,
+  };
+}
--- a/src/panel-triggers/module.js
+++ b/src/panel-triggers/module.js
@@ -11,220 +11,207 @@
 * Licensed under the Apache License, Version 2.0
 */

-define([
-  'app/plugins/sdk',
-  'angular',
-  'lodash',
-  'jquery',
-  'moment',
-  './editor'
-],
-function (sdk, angular, _, $, moment, triggerPanelEditor) {
-  'use strict';
+import _ from 'lodash';
+import moment from 'moment';
+import {PanelCtrl} from 'app/plugins/sdk';
+import {triggerPanelEditor} from './editor';

-  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 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 = {
-    datasource: null,
-    triggers: {
-      group: {filter: ""},
-      host: {filter: ""},
-      application: {filter: ""},
-      trigger: {filter: ""}
-    },
-    hostField: true,
-    statusField: false,
-    severityField: false,
-    lastChangeField: true,
-    ageField: true,
-    infoField: true,
-    limit: 10,
-    showTriggers: 'all triggers',
-    sortTriggersBy: { text: 'last change', value: 'lastchange' },
-    showEvents: { text: 'Problem events', value: '1' },
-    triggerSeverity: defaultSeverity,
-    okEventColor: '#890F02',
-  };
+var panelDefaults = {
+  datasource: null,
+  triggers: {
+    group: {filter: ""},
+    host: {filter: ""},
+    application: {filter: ""},
+    trigger: {filter: ""}
+  },
+  hostField: true,
+  statusField: false,
+  severityField: false,
+  lastChangeField: true,
+  ageField: true,
+  infoField: true,
+  limit: 10,
+  showTriggers: 'all triggers',
+  sortTriggersBy: { text: 'last change', value: 'lastchange' },
+  showEvents: { text: 'Problem events', value: '1' },
+  triggerSeverity: defaultSeverity,
+  okEventColor: '#890F02',
+};

-  var triggerStatusMap = {
-    '0': 'OK',
-    '1': 'Problem'
-  };
+var triggerStatusMap = {
+  '0': 'OK',
+  '1': 'Problem'
+};

-  var TriggerPanelCtrl = (function(_super) {
+class TriggerPanelCtrl extends PanelCtrl {

-    /** @ngInject */
-    function TriggerPanelCtrl($scope, $injector, $q, $element, datasourceSrv) {
-      _super.call(this, $scope, $injector);
-      this.datasourceSrv = datasourceSrv;
-      this.triggerStatusMap = triggerStatusMap;
+  /** @ngInject */
+  constructor($scope, $injector, $q, $element, datasourceSrv) {
+    super($scope, $injector);
+    this.datasourceSrv = datasourceSrv;
+    this.triggerStatusMap = triggerStatusMap;

-      // Load panel defaults
-      _.defaults(this.panel, panelDefaults);
+    // Load panel defaults
+    _.defaults(this.panel, panelDefaults);

-      this.triggerList = [];
-      this.refreshData();
-    }
+    this.triggerList = [];
+    this.refreshData();
+  }

-    TriggerPanelCtrl.templateUrl = 'module.html';
+  // Add panel editor
+  initEditMode() {
+    super.initEditMode();
+    this.icon = "fa fa-lightbulb-o";
+    this.addEditorTab('Options', triggerPanelEditor, 2);
+  }

-    TriggerPanelCtrl.prototype = Object.create(_super.prototype);
-    TriggerPanelCtrl.prototype.constructor = TriggerPanelCtrl;
+  refreshData() {
+    var self = this;

-    // Add panel editor
-    TriggerPanelCtrl.prototype.initEditMode = function() {
-      _super.prototype.initEditMode();
-      this.icon = "fa fa-lightbulb-o";
-      this.addEditorTab('Options', triggerPanelEditor, 2);
-    };
+    // Load datasource
+    return this.datasourceSrv.get(this.panel.datasource).then(datasource => {
+      var zabbix = datasource.zabbixAPI;
+      var queryProcessor = datasource.queryProcessor;
+      var triggerFilter = self.panel.triggers;
+      var showEvents = self.panel.showEvents.value;
+      var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
+                                                        triggerFilter.host.filter,
+                                                        triggerFilter.application.filter);
+      return buildQuery.then(query => {
+        return zabbix.getTriggers(query.groupids,
+                                  query.hostids,
+                                  query.applicationids,
+                                  showEvents)
+          .then(triggers => {
+            return _.map(triggers, trigger => {
+              var triggerObj = trigger;

-    TriggerPanelCtrl.prototype.refreshData = function() {
-      var self = this;
+              // Format last change and age
+              trigger.lastchangeUnix = Number(trigger.lastchange);
+              var timestamp = moment.unix(trigger.lastchangeUnix);
+              if (self.panel.customLastChangeFormat) {
+                // User defined format
+                triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
+              } else {
+                triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
+              }
+              triggerObj.age = timestamp.fromNow(true);

-      // Load datasource
-      return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
-        var zabbix = datasource.zabbixAPI;
-        var queryProcessor = datasource.queryProcessor;
-        var triggerFilter = self.panel.triggers;
-        var showEvents = self.panel.showEvents.value;
-        var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
-                                                          triggerFilter.host.filter,
-                                                          triggerFilter.application.filter);
-        return buildQuery.then(function(query) {
-          return zabbix.getTriggers(query.groupids,
-                                    query.hostids,
-                                    query.applicationids,
-                                    showEvents)
-            .then(function(triggers) {
-              return _.map(triggers, function (trigger) {
-                var triggerObj = trigger;
+              // Set color
+              if (trigger.value === '1') {
+                triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
+              } else {
+                triggerObj.color = self.panel.okEventColor;
+              }

-                // Format last change and age
-                trigger.lastchangeUnix = Number(trigger.lastchange);
-                var timestamp = moment.unix(trigger.lastchangeUnix);
-                if (self.panel.customLastChangeFormat) {
-                  // User defined format
-                  triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
-                } else {
-                  triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
-                }
-                triggerObj.age = timestamp.fromNow(true);
-
-                // Set color
-                if (trigger.value === '1') {
-                  triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
-                } else {
-                  triggerObj.color = self.panel.okEventColor;
-                }
-
-                triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
-                return triggerObj;
-              });
-            })
-            .then(function (triggerList) {
-
-              // Request acknowledges for trigger
-              var eventids = _.map(triggerList, function(trigger) {
-                return trigger.lastEvent.eventid;
-              });
-
-              return zabbix.getAcknowledges(eventids)
-                .then(function (events) {
-
-                  // Map events to triggers
-                  _.each(triggerList, function(trigger) {
-                    var event = _.find(events, function(event) {
-                      return event.eventid === trigger.lastEvent.eventid;
-                    });
-
-                    if (event) {
-                      trigger.acknowledges = _.map(event.acknowledges, function (ack) {
-                        var time = new Date(+ack.clock * 1000);
-                        ack.time = time.toLocaleString();
-                        ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
-                        return ack;
-                      });
-                    }
-                  });
-
-                  // Filter triggers by description
-                  var triggerFilter = self.panel.triggers.trigger.filter;
-                  if (triggerFilter) {
-                    triggerList = filterTriggers(triggerList, triggerFilter);
-                  }
-
-                  // Filter acknowledged triggers
-                  if (self.panel.showTriggers === 'unacknowledged') {
-                    triggerList = _.filter(triggerList, function (trigger) {
-                      return !trigger.acknowledges;
-                    });
-                  } else if (self.panel.showTriggers === 'acknowledged') {
-                    triggerList = _.filter(triggerList, 'acknowledges');
-                  } else {
-                    triggerList = triggerList;
-                  }
-
-                  // Filter triggers by severity
-                  triggerList = _.filter(triggerList, function (trigger) {
-                    return self.panel.triggerSeverity[trigger.priority].show;
-                  });
-
-                  // Sort triggers
-                  if (self.panel.sortTriggersBy.value === 'priority') {
-                    triggerList = _.sortBy(triggerList, 'priority').reverse();
-                  } else {
-                    triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
-                  }
-
-                  // Limit triggers number
-                  self.triggerList  = _.first(triggerList, self.panel.limit);
-
-                  self.renderingCompleted();
-                });
+              triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
+              return triggerObj;
            });
-        });
+          })
+          .then(triggerList => {
+
+            // Request acknowledges for trigger
+            var eventids = _.map(triggerList, trigger => {
+              return trigger.lastEvent.eventid;
+            });
+
+            return zabbix.getAcknowledges(eventids)
+              .then(events => {
+
+                // Map events to triggers
+                _.each(triggerList, trigger => {
+                  var event = _.find(events, event => {
+                    return event.eventid === trigger.lastEvent.eventid;
+                  });
+
+                  if (event) {
+                    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 + ')';
+                      return ack;
+                    });
+                  }
+                });
+
+                // Filter triggers by description
+                var triggerFilter = self.panel.triggers.trigger.filter;
+                if (triggerFilter) {
+                  triggerList = filterTriggers(triggerList, triggerFilter);
+                }
+
+                // Filter acknowledged triggers
+                if (self.panel.showTriggers === 'unacknowledged') {
+                  triggerList = _.filter(triggerList, trigger => {
+                    return !trigger.acknowledges;
+                  });
+                } else if (self.panel.showTriggers === 'acknowledged') {
+                  triggerList = _.filter(triggerList, 'acknowledges');
+                } else {
+                  triggerList = triggerList;
+                }
+
+                // Filter triggers by severity
+                triggerList = _.filter(triggerList, trigger => {
+                  return self.panel.triggerSeverity[trigger.priority].show;
+                });
+
+                // Sort triggers
+                if (self.panel.sortTriggersBy.value === 'priority') {
+                  triggerList = _.sortBy(triggerList, 'priority').reverse();
+                } else {
+                  triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
+                }
+
+                // Limit triggers number
+                self.triggerList  = _.first(triggerList, self.panel.limit);
+
+                self.renderingCompleted();
+              });
+          });
      });
-    };
+    });
+  }
+}

-    function filterTriggers(triggers, triggerFilter) {
-      if (isRegex(triggerFilter)) {
-        return _.filter(triggers, function(trigger) {
-          return buildRegex(triggerFilter).test(trigger.description);
-        });
-      } else {
-        return _.filter(triggers, function(trigger) {
-          return trigger.description === triggerFilter;
-        });
-      }
-    }
+TriggerPanelCtrl.templateUrl = 'module.html';

-    function isRegex(str) {
-      // Pattern for testing regex
-      var regexPattern = /^\/(.*)\/([gmi]*)$/m;
-      return regexPattern.test(str);
-    }
+function filterTriggers(triggers, triggerFilter) {
+  if (isRegex(triggerFilter)) {
+    return _.filter(triggers, function(trigger) {
+      return buildRegex(triggerFilter).test(trigger.description);
+    });
+  } else {
+    return _.filter(triggers, function(trigger) {
+      return trigger.description === triggerFilter;
+    });
+  }
+}

-    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);
-    }
+function isRegex(str) {
+  // Pattern for testing regex
+  var regexPattern = /^\/(.*)\/([gmi]*)$/m;
+  return regexPattern.test(str);
+}

-    return TriggerPanelCtrl;
+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);
+}

-  })(sdk.PanelCtrl);
-
-  return {
-    PanelCtrl: TriggerPanelCtrl
-  };
-
-});
+export {
+  TriggerPanelCtrl,
+  TriggerPanelCtrl as PanelCtrl
+};