Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Trigger panel refactor. Migrated to ES6.

Browse Source
This commit is contained in:
Alexander Zobnin
2016-03-19 17:15:48 +03:00
parent c6f854e948
commit a533f7f6b3
3 changed files with 243 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@@ -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/'
}]

106
src/panel-triggers/editor.js
View File

@@ -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() {
// 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;
});
}

99
src/panel-triggers/module.js
View File

@@ -11,27 +11,21 @@
* 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 = [
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) {
_super.call(this, $scope, $injector);
constructor($scope, $injector, $q, $element, datasourceSrv) {
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() {
_super.prototype.initEditMode();
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) {
return _.map(triggers, function (trigger) {
.then(triggers => {
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) {
var event = _.find(events, function(event) {
_.each(triggerList, trigger => {
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;
})(sdk.PanelCtrl);
return {
PanelCtrl: TriggerPanelCtrl
};
});
export {
TriggerPanelCtrl,
TriggerPanelCtrl as PanelCtrl
};