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

Merge branch 'multiple-triggers-ds'

Browse Source
This commit is contained in:
Alexander Zobnin
2017-12-03 12:54:50 +03:00
parent 7cff1d65f7 5359176f2a
commit 53d795d259
32 changed files with 2516 additions and 1799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
dist/panel-triggers/datasource-selector.directive.js vendored Normal file
View File

@@ -0,0 +1,93 @@
'use strict';
System.register(['angular', 'lodash'], function (_export, _context) {
"use strict";
var angular, _, _createClass, template, DatasourceSelectorCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
return {
setters: [function (_angular) {
angular = _angular.default;
}, function (_lodash) {
_ = _lodash.default;
}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
template = '\n<value-select-dropdown variable="ctrl.dsOptions" on-updated="ctrl.onChange(ctrl.dsOptions)">\n</value-select-dropdown>\n';
angular.module('grafana.directives').directive('datasourceSelector', function () {
return {
scope: {
datasources: "=",
options: "=",
onChange: "&"
},
controller: DatasourceSelectorCtrl,
controllerAs: 'ctrl',
template: template
};
});
DatasourceSelectorCtrl = function () {
/** @ngInject */
function DatasourceSelectorCtrl($scope) {
_classCallCheck(this, DatasourceSelectorCtrl);
this.scope = $scope;
var datasources = $scope.datasources;
var options = $scope.options;
this.dsOptions = {
multi: true,
current: { value: datasources, text: datasources.join(" + ") },
options: _.map(options, function (ds) {
return { text: ds, value: ds, selected: _.includes(datasources, ds) };
})
};
}
_createClass(DatasourceSelectorCtrl, [{
key: 'onChange',
value: function onChange(updatedOptions) {
var _this = this;
var newDataSources = updatedOptions.current.value;
this.scope.datasources = newDataSources;
// Run after model was changed
this.scope.$$postDigest(function () {
_this.scope.onChange();
});
}
}]);
return DatasourceSelectorCtrl;
}();
}
};
});
//# sourceMappingURL=datasource-selector.directive.js.map

1
dist/panel-triggers/datasource-selector.directive.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../src/panel-triggers/datasource-selector.directive.js"],"names":["angular","_","template","module","directive","scope","datasources","options","onChange","controller","DatasourceSelectorCtrl","controllerAs","$scope","dsOptions","multi","current","value","text","join","map","ds","selected","includes","updatedOptions","newDataSources","$$postDigest"],"mappings":";;;;;;;;;;;;;;;AAAOA,a;;AACAC,O;;;;;;;;;;;;;;;;;;;;;AAEDC,c;;;AAKNF,cACCG,MADD,CACQ,oBADR,EAECC,SAFD,CAEW,oBAFX,EAEiC,YAAM;AACrC,eAAO;AACLC,iBAAO;AACLC,yBAAa,GADR;AAELC,qBAAS,GAFJ;AAGLC,sBAAU;AAHL,WADF;AAMLC,sBAAYC,sBANP;AAOLC,wBAAc,MAPT;AAQLT,oBAAUA;AARL,SAAP;AAUD,OAbD;;AAeMQ,4B;;AAEJ;AACA,wCAAYE,MAAZ,EAAoB;AAAA;;AAClB,eAAKP,KAAL,GAAaO,MAAb;AACA,cAAIN,cAAcM,OAAON,WAAzB;AACA,cAAIC,UAAUK,OAAOL,OAArB;AACA,eAAKM,SAAL,GAAiB;AACfC,mBAAO,IADQ;AAEfC,qBAAS,EAACC,OAAOV,WAAR,EAAqBW,MAAMX,YAAYY,IAAZ,CAAiB,KAAjB,CAA3B,EAFM;AAGfX,qBAASN,EAAEkB,GAAF,CAAMZ,OAAN,EAAe,UAACa,EAAD,EAAQ;AAC9B,qBAAO,EAACH,MAAMG,EAAP,EAAWJ,OAAOI,EAAlB,EAAsBC,UAAUpB,EAAEqB,QAAF,CAAWhB,WAAX,EAAwBc,EAAxB,CAAhC,EAAP;AACD,aAFQ;AAHM,WAAjB;AAOD;;;;mCAEQG,c,EAAgB;AAAA;;AACvB,gBAAIC,iBAAiBD,eAAeR,OAAf,CAAuBC,KAA5C;AACA,iBAAKX,KAAL,CAAWC,WAAX,GAAyBkB,cAAzB;;AAEA;AACA,iBAAKnB,KAAL,CAAWoB,YAAX,CAAwB,YAAM;AAC5B,oBAAKpB,KAAL,CAAWG,QAAX;AACD,aAFD;AAGD","file":"datasource-selector.directive.js","sourcesContent":["import angular from 'angular';\nimport _ from 'lodash';\n\nconst template = `\n<value-select-dropdown variable=\"ctrl.dsOptions\" on-updated=\"ctrl.onChange(ctrl.dsOptions)\">\n</value-select-dropdown>\n`;\n\nangular\n.module('grafana.directives')\n.directive('datasourceSelector', () => {\n return {\n scope: {\n datasources: \"=\",\n options: \"=\",\n onChange: \"&\"\n },\n controller: DatasourceSelectorCtrl,\n controllerAs: 'ctrl',\n template: template\n };\n});\n\nclass DatasourceSelectorCtrl {\n\n /** @ngInject */\n constructor($scope) {\n this.scope = $scope;\n let datasources = $scope.datasources;\n let options = $scope.options;\n this.dsOptions = {\n multi: true,\n current: {value: datasources, text: datasources.join(\" + \")},\n options: _.map(options, (ds) => {\n return {text: ds, value: ds, selected: _.includes(datasources, ds)};\n })\n };\n }\n\n onChange(updatedOptions) {\n let newDataSources = updatedOptions.current.value;\n this.scope.datasources = newDataSources;\n\n // Run after model was changed\n this.scope.$$postDigest(() => {\n this.scope.onChange();\n });\n }\n}\n"]}

293
dist/panel-triggers/editor.html vendored
View File

@@ -1,293 +0,0 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Select triggers</h5>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label>
<input type="text"
ng-model="editor.panel.triggers.group.filter"
bs-typeahead="editor.getGroupNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Host</label>
<input type="text"
ng-model="editor.panel.triggers.host.filter"
bs-typeahead="editor.getHostNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
}">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label>
<input type="text"
ng-model="editor.panel.triggers.application.filter"
bs-typeahead="editor.getApplicationNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Trigger</label>
<input type="text"
ng-model="editor.panel.triggers.trigger.filter"
ng-blur="editor.parseTarget()"
placeholder="trigger name"
class="gf-form-input"
ng-style="editor.panel.triggers.trigger.style"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.trigger.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.trigger.filter)
}"
empty-to-null>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Data source</h5>
<div class="gf-form-inline">
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select class="gf-form-input"
ng-model="editor.panel.datasource"
ng-options="ds for ds in editor.datasources"
ng-change="editor.datasourceChanged()">
</select>
</div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showTriggers"
ng-options="f for f in editor.ackFilters"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<gf-form-switch class="gf-form"
label-class="width-13"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-9">
<select class="gf-form-input"
ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6"
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
label="Enable scroll"
checked="editor.panel.scroll"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label>
<input class="gf-form-input width-5"
type="number"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-8"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Host technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-5"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-5"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-7"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-14"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
<tip>See moment.js dosc for time format.</tip>
</a>
</label>
<input class="gf-form-input width-18"
type="text"
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Customize triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
<input type="text"
class="gf-form-input width-12"
empty-to-null
ng-model="trigger.severity"
style="color: white"
ng-style="{background: trigger.color}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="trigger.show"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="editor.panel.markAckEvents"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
</div>
</div>

224
dist/panel-triggers/editor.js vendored
View File

@@ -1,224 +0,0 @@
'use strict';
System.register(['lodash', '../datasource-zabbix/utils', '../datasource-zabbix/css/query-editor.css!'], function (_export, _context) {
"use strict";
var _, utils, _createClass, TriggerPanelEditorCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
// Get list of metric names for bs-typeahead directive
function getMetricNames(scope, metricList) {
return _.uniq(_.map(scope.metric[metricList], 'name'));
}
function triggerPanelEditor() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/editor.html',
controller: TriggerPanelEditorCtrl
};
}
_export('triggerPanelEditor', triggerPanelEditor);
return {
setters: [function (_lodash) {
_ = _lodash.default;
}, function (_datasourceZabbixUtils) {
utils = _datasourceZabbixUtils;
}, function (_datasourceZabbixCssQueryEditorCss) {}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
TriggerPanelEditorCtrl = function () {
/** @ngInject */
function TriggerPanelEditorCtrl($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
var _this = this;
_classCallCheck(this, TriggerPanelEditorCtrl);
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.datasourceSrv = datasourceSrv;
this.templateSrv = templateSrv;
this.popoverSrv = popoverSrv;
// Map functions for bs-typeahead
this.getGroupNames = _.partial(getMetricNames, this, 'groupList');
this.getHostNames = _.partial(getMetricNames, this, 'hostList');
this.getApplicationNames = _.partial(getMetricNames, this, 'appList');
// Update metric suggestion when template variable was changed
$rootScope.$on('template-variable-value-updated', function () {
return _this.onVariableChange();
});
this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
this.ackFilters = ['all triggers', 'unacknowledged', 'acknowledged'];
this.sortByFields = [{ text: 'last change', value: 'lastchange' }, { text: 'severity', value: 'priority' }];
this.showEventsFields = [{ text: 'All', value: [0, 1] }, { text: 'OK', value: [0] }, { text: 'Problems', value: 1 }];
// Load scope defaults
var scopeDefaults = {
metric: {},
inputStyles: {},
oldTarget: _.cloneDeep(this.panel.triggers)
};
_.defaults(this, scopeDefaults);
// Set default datasource
this.datasources = _.map(this.getZabbixDataSources(), 'name');
if (!this.panel.datasource) {
this.panel.datasource = this.datasources[0];
}
// Load datasource
this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
_this.datasource = datasource;
_this.zabbix = datasource.zabbix;
_this.queryBuilder = datasource.queryBuilder;
_this.initFilters();
_this.panelCtrl.refresh();
});
}
_createClass(TriggerPanelEditorCtrl, [{
key: 'initFilters',
value: function initFilters() {
return Promise.all([this.suggestGroups(), this.suggestHosts(), this.suggestApps()]);
}
}, {
key: 'suggestGroups',
value: function suggestGroups() {
var _this2 = this;
return this.zabbix.getAllGroups().then(function (groups) {
_this2.metric.groupList = groups;
return groups;
});
}
}, {
key: 'suggestHosts',
value: function suggestHosts() {
var _this3 = this;
var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
return this.zabbix.getAllHosts(groupFilter).then(function (hosts) {
_this3.metric.hostList = hosts;
return hosts;
});
}
}, {
key: 'suggestApps',
value: function suggestApps() {
var _this4 = this;
var groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
var hostFilter = this.datasource.replaceTemplateVars(this.panel.triggers.host.filter);
return this.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
_this4.metric.appList = apps;
return apps;
});
}
}, {
key: 'onVariableChange',
value: function onVariableChange() {
if (this.isContainsVariables()) {
this.targetChanged();
}
}
}, {
key: 'isContainsVariables',
value: function isContainsVariables() {
var _this5 = this;
return _.some(['group', 'host', 'application'], function (field) {
return utils.isTemplateVariable(_this5.panel.triggers[field].filter, _this5.templateSrv.variables);
});
}
}, {
key: 'targetChanged',
value: function targetChanged() {
this.initFilters();
this.panelCtrl.refresh();
}
}, {
key: 'parseTarget',
value: function parseTarget() {
this.initFilters();
var newTarget = _.cloneDeep(this.panel.triggers);
if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
this.oldTarget = newTarget;
this.panelCtrl.refresh();
}
}
}, {
key: 'refreshTriggerSeverity',
value: 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.refresh();
}
}, {
key: 'datasourceChanged',
value: function datasourceChanged() {
this.panelCtrl.refresh();
}
}, {
key: 'changeTriggerSeverityColor',
value: function changeTriggerSeverityColor(trigger, color) {
this.panel.triggerSeverity[trigger.priority].color = color;
this.refreshTriggerSeverity();
}
}, {
key: 'isRegex',
value: function isRegex(str) {
return utils.isRegex(str);
}
}, {
key: 'isVariable',
value: function isVariable(str) {
return utils.isTemplateVariable(str, this.templateSrv.variables);
}
}, {
key: 'getZabbixDataSources',
value: function getZabbixDataSources() {
var ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
return _.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
});
}
}]);
return TriggerPanelEditorCtrl;
}();
}
};
});
//# sourceMappingURL=editor.js.map

1
dist/panel-triggers/editor.js.map vendored
View File

File diff suppressed because one or more lines are too long

41
dist/panel-triggers/migrations.js vendored Normal file
View File

@@ -0,0 +1,41 @@
"use strict";
System.register([], function (_export, _context) {
"use strict";
function migratePanelSchema(panel) {
if (isEmptyPanel(panel)) {
return panel;
}
var schemaVersion = getSchemaVersion(panel);
switch (schemaVersion) {
case 1:
panel.datasources = [panel.datasource];
panel.targets = {};
panel.targets[panel.datasources[0]] = panel.triggers;
// delete old props
delete panel.triggers;
delete panel.datasource;
break;
}
return panel;
}
_export("migratePanelSchema", migratePanelSchema);
function getSchemaVersion(panel) {
return panel.schemaVersion || 1;
}
function isEmptyPanel(panel) {
return !panel.datasource && !panel.datasources && !panel.triggers && !panel.targets;
}
return {
setters: [],
execute: function () {}
};
});
//# sourceMappingURL=migrations.js.map

1
dist/panel-triggers/migrations.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../src/panel-triggers/migrations.js"],"names":["migratePanelSchema","panel","isEmptyPanel","schemaVersion","getSchemaVersion","datasources","datasource","targets","triggers"],"mappings":";;;;;AAAO,WAASA,kBAAT,CAA4BC,KAA5B,EAAmC;AACxC,QAAIC,aAAaD,KAAb,CAAJ,EAAyB;AACvB,aAAOA,KAAP;AACD;;AAED,QAAME,gBAAgBC,iBAAiBH,KAAjB,CAAtB;AACA,YAAQE,aAAR;AACE,WAAK,CAAL;AACEF,cAAMI,WAAN,GAAoB,CAACJ,MAAMK,UAAP,CAApB;AACAL,cAAMM,OAAN,GAAgB,EAAhB;AACAN,cAAMM,OAAN,CAAcN,MAAMI,WAAN,CAAkB,CAAlB,CAAd,IAAsCJ,MAAMO,QAA5C;;AAEA;AACA,eAAOP,MAAMO,QAAb;AACA,eAAOP,MAAMK,UAAb;AACA;AATJ;;AAYA,WAAOL,KAAP;AACD;;gCAnBeD,kB;;AAqBhB,WAASI,gBAAT,CAA0BH,KAA1B,EAAiC;AAC/B,WAAOA,MAAME,aAAN,IAAuB,CAA9B;AACD;;AAED,WAASD,YAAT,CAAsBD,KAAtB,EAA6B;AAC3B,WAAO,CAACA,MAAMK,UAAP,IAAqB,CAACL,MAAMI,WAA5B,IAA2C,CAACJ,MAAMO,QAAlD,IAA8D,CAACP,MAAMM,OAA5E;AACD","file":"migrations.js","sourcesContent":["export function migratePanelSchema(panel) {\n if (isEmptyPanel(panel)) {\n return panel;\n }\n\n const schemaVersion = getSchemaVersion(panel);\n switch (schemaVersion) {\n case 1:\n panel.datasources = [panel.datasource];\n panel.targets = {};\n panel.targets[panel.datasources[0]] = panel.triggers;\n\n // delete old props\n delete panel.triggers;\n delete panel.datasource;\n break;\n }\n\n return panel;\n}\n\nfunction getSchemaVersion(panel) {\n return panel.schemaVersion || 1;\n}\n\nfunction isEmptyPanel(panel) {\n return !panel.datasource && !panel.datasources && !panel.triggers && !panel.targets;\n}\n"]}

455
dist/panel-triggers/module.js vendored
View File

@@ -1,455 +1,32 @@
'use strict';
System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource-zabbix/utils', './editor', './ack-tooltip.directive'], function (_export, _context) {
System.register(['./triggers_panel_ctrl', 'app/plugins/sdk', './ack-tooltip.directive'], function (_export, _context) {
"use strict";
var _, $, moment, loadPluginCss, utils, PanelCtrl, triggerPanelEditor, _createClass, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _filterTriggers(triggers, triggerFilter) {
if (utils.isRegex(triggerFilter)) {
return _.filter(triggers, function (trigger) {
return utils.buildRegex(triggerFilter).test(trigger.description);
});
} else {
return _.filter(triggers, function (trigger) {
return trigger.description === triggerFilter;
});
}
}
var TriggerPanelCtrl, loadPluginCss;
return {
setters: [function (_lodash) {
_ = _lodash.default;
}, function (_jquery) {
$ = _jquery.default;
}, function (_moment) {
moment = _moment.default;
setters: [function (_triggers_panel_ctrl) {
TriggerPanelCtrl = _triggers_panel_ctrl.TriggerPanelCtrl;
}, function (_appPluginsSdk) {
loadPluginCss = _appPluginsSdk.loadPluginCss;
PanelCtrl = _appPluginsSdk.PanelCtrl;
}, function (_datasourceZabbixUtils) {
utils = _datasourceZabbixUtils;
}, function (_editor) {
triggerPanelEditor = _editor.triggerPanelEditor;
}, function (_ackTooltipDirective) {}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
/**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
loadPluginCss({
dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
});
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 }];
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',
hideHostsInMaintenance: false,
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
triggerSeverity: defaultSeverity,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)',
scroll: true,
pageSize: 10,
fontSize: '100%'
};
triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
};
defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
_export('PanelCtrl', _export('TriggerPanelCtrl', TriggerPanelCtrl = function (_PanelCtrl) {
_inherits(TriggerPanelCtrl, _PanelCtrl);
/** @ngInject */
function TriggerPanelCtrl($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
_classCallCheck(this, TriggerPanelCtrl);
var _this = _possibleConstructorReturn(this, (TriggerPanelCtrl.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl)).call(this, $scope, $injector));
_this.datasourceSrv = datasourceSrv;
_this.templateSrv = templateSrv;
_this.contextSrv = contextSrv;
_this.dashboardSrv = dashboardSrv;
_this.triggerStatusMap = triggerStatusMap;
_this.defaultTimeFormat = defaultTimeFormat;
_this.pageIndex = 0;
_this.triggerList = [];
_this.currentTriggersPage = [];
// Load panel defaults
// _.cloneDeep() need for prevent changing shared defaultSeverity.
// Load object "by value" istead "by reference".
_.defaults(_this.panel, _.cloneDeep(panelDefaults));
_this.events.on('init-edit-mode', _this.onInitEditMode.bind(_this));
_this.events.on('refresh', _this.onRefresh.bind(_this));
return _this;
}
_createClass(TriggerPanelCtrl, [{
key: 'onInitEditMode',
value: function onInitEditMode() {
this.addEditorTab('Options', triggerPanelEditor, 2);
}
}, {
key: 'onRefresh',
value: function onRefresh() {
var _this2 = this;
// ignore fetching data if another panel is in fullscreen
if (this.otherPanelInFullscreenMode()) {
return;
}
// clear loading/error state
delete this.error;
this.loading = true;
return this.refreshData().then(function (triggerList) {
// Limit triggers number
_this2.triggerList = triggerList.slice(0, _this2.panel.limit);
_this2.getCurrentTriggersPage();
// Notify panel that request is finished
_this2.loading = false;
_this2.render(_this2.triggerList);
});
}
}, {
key: 'refreshData',
value: function refreshData() {
return this.getTriggers().then(this.getAcknowledges.bind(this)).then(this.filterTriggers.bind(this));
}
}, {
key: 'getTriggers',
value: function getTriggers() {
var _this3 = this;
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbix = datasource.zabbix;
_this3.zabbix = zabbix;
_this3.datasource = datasource;
var showEvents = _this3.panel.showEvents.value;
var triggerFilter = _this3.panel.triggers;
var hideHostsInMaintenance = _this3.panel.hideHostsInMaintenance;
// Replace template variables
var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
var triggersOptions = {
showTriggers: showEvents,
hideHostsInMaintenance: hideHostsInMaintenance
};
return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
}).then(function (triggers) {
return _.map(triggers, _this3.formatTrigger.bind(_this3));
});
}
}, {
key: 'getAcknowledges',
value: function getAcknowledges(triggerList) {
var _this4 = this;
// Request acknowledges for trigger
var eventids = _.map(triggerList, function (trigger) {
return trigger.lastEvent.eventid;
});
return this.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 timestamp = moment.unix(ack.clock);
if (_this4.panel.customLastChangeFormat) {
ack.time = timestamp.format(_this4.panel.lastChangeFormat);
} else {
ack.time = timestamp.format(_this4.defaultTimeFormat);
}
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (_this4.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = _this4.panel.ackEventColor;
}
}
});
return triggerList;
});
}
}, {
key: 'filterTriggers',
value: function filterTriggers(triggerList) {
var _this5 = this;
// Filter triggers by description
var triggerFilter = this.panel.triggers.trigger.filter;
triggerFilter = this.datasource.replaceTemplateVars(triggerFilter);
if (triggerFilter) {
triggerList = _filterTriggers(triggerList, triggerFilter);
}
// Filter acknowledged triggers
if (this.panel.showTriggers === 'unacknowledged') {
triggerList = _.filter(triggerList, function (trigger) {
return !trigger.acknowledges;
});
} else if (this.panel.showTriggers === 'acknowledged') {
triggerList = _.filter(triggerList, 'acknowledges');
} else {
triggerList = triggerList;
}
// Filter triggers by severity
triggerList = _.filter(triggerList, function (trigger) {
return _this5.panel.triggerSeverity[trigger.priority].show;
});
// Sort triggers
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
}
return triggerList;
}
}, {
key: 'formatTrigger',
value: function formatTrigger(trigger) {
var triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
var timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
}
}, {
key: 'switchComment',
value: function switchComment(trigger) {
trigger.showComment = !trigger.showComment;
}
}, {
key: 'acknowledgeTrigger',
value: function acknowledgeTrigger(trigger, message) {
var eventid = trigger.lastEvent.eventid;
var grafana_user = this.contextSrv.user.name;
var ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
}).then(this.onRefresh.bind(this));
}
}, {
key: 'getCurrentTriggersPage',
value: function getCurrentTriggersPage() {
var pageSize = this.panel.pageSize || 10;
var startPos = this.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
}, {
key: 'link',
value: function link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
}
return panelHeight - 31 + 'px';
}
function switchPage(e) {
var el = $(e.currentTarget);
ctrl.pageIndex = parseInt(el.text(), 10) - 1;
var pageSize = ctrl.panel.pageSize || 10;
var startPos = ctrl.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply();
renderPanel();
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
var startPage = Math.max(ctrl.pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>');
for (var i = startPage; i < endPage; i++) {
var activeClass = i === ctrl.pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i + 1) + '</a></li>');
paginationList.append(pageLinkElem);
}
footerElem.append(paginationList);
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({ 'font-size': panel.fontSize });
panelElem.addClass('triggers-panel-wrapper');
appendPaginationControls(footerElem);
rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
}
elem.on('click', '.triggers-panel-page-link', switchPage);
var unbindDestroy = scope.$on('$destroy', function () {
elem.off('click', '.triggers-panel-page-link');
unbindDestroy();
});
ctrl.events.on('render', function (renderData) {
data = renderData || data;
if (data) {
renderPanel();
}
ctrl.renderingCompleted();
});
}
}]);
return TriggerPanelCtrl;
}(PanelCtrl)));
TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
_export('TriggerPanelCtrl', TriggerPanelCtrl);
}); /**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
_export('PanelCtrl', TriggerPanelCtrl);
}

2
dist/panel-triggers/module.js.map vendored
View File

File diff suppressed because one or more lines are too long

86
dist/panel-triggers/options_tab.js vendored Normal file
View File

@@ -0,0 +1,86 @@
'use strict';
System.register(['lodash', './datasource-selector.directive', '../datasource-zabbix/css/query-editor.css!'], function (_export, _context) {
"use strict";
var _, _createClass, TriggerPanelOptionsCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function triggerPanelOptionsTab() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/options_tab.html',
controller: TriggerPanelOptionsCtrl
};
}
_export('triggerPanelOptionsTab', triggerPanelOptionsTab);
return {
setters: [function (_lodash) {
_ = _lodash.default;
}, function (_datasourceSelectorDirective) {}, function (_datasourceZabbixCssQueryEditorCss) {}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
TriggerPanelOptionsCtrl = function () {
/** @ngInject */
function TriggerPanelOptionsCtrl($scope) {
_classCallCheck(this, TriggerPanelOptionsCtrl);
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
this.ackFilters = ['all triggers', 'unacknowledged', 'acknowledged'];
this.sortByFields = [{ text: 'last change', value: 'lastchange' }, { text: 'severity', value: 'priority' }];
this.showEventsFields = [{ text: 'All', value: [0, 1] }, { text: 'OK', value: [0] }, { text: 'Problems', value: 1 }];
}
_createClass(TriggerPanelOptionsCtrl, [{
key: 'refreshTriggerSeverity',
value: 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.refresh();
}
}, {
key: 'changeTriggerSeverityColor',
value: function changeTriggerSeverityColor(trigger, color) {
this.panel.triggerSeverity[trigger.priority].color = color;
this.refreshTriggerSeverity();
}
}]);
return TriggerPanelOptionsCtrl;
}();
}
};
});
//# sourceMappingURL=options_tab.js.map

1
dist/panel-triggers/options_tab.js.map vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../src/panel-triggers/options_tab.js"],"names":["triggerPanelOptionsTab","restrict","scope","templateUrl","controller","TriggerPanelOptionsCtrl","_","$scope","editor","panelCtrl","ctrl","panel","fontSizes","ackFilters","sortByFields","text","value","showEventsFields","each","triggerList","trigger","color","triggerSeverity","priority","severity","refresh","refreshTriggerSeverity"],"mappings":";;;;;;;;;;;;;AAyDO,WAASA,sBAAT,GAAkC;AACvC,WAAO;AACLC,gBAAU,GADL;AAELC,aAAO,IAFF;AAGLC,mBAAa,oFAHR;AAILC,kBAAYC;AAJP,KAAP;AAMD;;oCAPeL,sB;;;;AA5CTM,O;;;;;;;;;;;;;;;;;;;;;AAKDD,6B;;AAEJ;AACA,yCAAYE,MAAZ,EAAoB;AAAA;;AAClBA,iBAAOC,MAAP,GAAgB,IAAhB;AACA,eAAKC,SAAL,GAAiBF,OAAOG,IAAxB;AACA,eAAKC,KAAL,GAAa,KAAKF,SAAL,CAAeE,KAA5B;;AAEA,eAAKC,SAAL,GAAiB,CAAC,KAAD,EAAQ,KAAR,EAAe,MAAf,EAAuB,MAAvB,EAA+B,MAA/B,EAAuC,MAAvC,EAA+C,MAA/C,EAAuD,MAAvD,EAA+D,MAA/D,EAAuE,MAAvE,EAA+E,MAA/E,EAAuF,MAAvF,CAAjB;AACA,eAAKC,UAAL,GAAkB,CAChB,cADgB,EAEhB,gBAFgB,EAGhB,cAHgB,CAAlB;AAKA,eAAKC,YAAL,GAAoB,CAClB,EAAEC,MAAM,aAAR,EAAwBC,OAAO,YAA/B,EADkB,EAElB,EAAED,MAAM,UAAR,EAAwBC,OAAO,UAA/B,EAFkB,CAApB;AAIA,eAAKC,gBAAL,GAAwB,CACtB,EAAEF,MAAM,KAAR,EAAmBC,OAAO,CAAC,CAAD,EAAG,CAAH,CAA1B,EADsB,EAEtB,EAAED,MAAM,IAAR,EAAmBC,OAAO,CAAC,CAAD,CAA1B,EAFsB,EAGtB,EAAED,MAAM,UAAR,EAAoBC,OAAO,CAA3B,EAHsB,CAAxB;AAKD;;;;mDAEwB;AACvBV,cAAEY,IAAF,CAAO,KAAKC,WAAZ,EAAyB,UAASC,OAAT,EAAkB;AACzCA,sBAAQC,KAAR,GAAgB,KAAKV,KAAL,CAAWW,eAAX,CAA2BF,QAAQG,QAAnC,EAA6CF,KAA7D;AACAD,sBAAQI,QAAR,GAAmB,KAAKb,KAAL,CAAWW,eAAX,CAA2BF,QAAQG,QAAnC,EAA6CC,QAAhE;AACD,aAHD;AAIA,iBAAKf,SAAL,CAAegB,OAAf;AACD;;;qDAE0BL,O,EAASC,K,EAAO;AACzC,iBAAKV,KAAL,CAAWW,eAAX,CAA2BF,QAAQG,QAAnC,EAA6CF,KAA7C,GAAqDA,KAArD;AACA,iBAAKK,sBAAL;AACD","file":"options_tab.js","sourcesContent":["/**\n * Grafana-Zabbix\n * Zabbix plugin for Grafana.\n * http://github.com/alexanderzobnin/grafana-zabbix\n *\n * Trigger panel.\n * This feature sponsored by CORE IT\n * http://www.coreit.fr\n *\n * Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com\n * Licensed under the Apache License, Version 2.0\n */\n\nimport _ from 'lodash';\nimport './datasource-selector.directive';\n\nimport '../datasource-zabbix/css/query-editor.css!';\n\nclass TriggerPanelOptionsCtrl {\n\n /** @ngInject */\n constructor($scope) {\n $scope.editor = this;\n this.panelCtrl = $scope.ctrl;\n this.panel = this.panelCtrl.panel;\n\n this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];\n this.ackFilters = [\n 'all triggers',\n 'unacknowledged',\n 'acknowledged'\n ];\n this.sortByFields = [\n { text: 'last change', value: 'lastchange' },\n { text: 'severity', value: 'priority' }\n ];\n this.showEventsFields = [\n { text: 'All', value: [0,1] },\n { text: 'OK', value: [0] },\n { text: 'Problems', value: 1 }\n ];\n }\n\n refreshTriggerSeverity() {\n _.each(this.triggerList, function(trigger) {\n trigger.color = this.panel.triggerSeverity[trigger.priority].color;\n trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;\n });\n this.panelCtrl.refresh();\n }\n\n changeTriggerSeverityColor(trigger, color) {\n this.panel.triggerSeverity[trigger.priority].color = color;\n this.refreshTriggerSeverity();\n }\n}\n\nexport function triggerPanelOptionsTab() {\n return {\n restrict: 'E',\n scope: true,\n templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/options_tab.html',\n controller: TriggerPanelOptionsCtrl,\n };\n}\n"]}

199
dist/panel-triggers/partials/options_tab.html vendored Normal file
View File

@@ -0,0 +1,199 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<gf-form-switch class="gf-form"
label-class="width-15"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showTriggers"
ng-options="f for f in editor.ackFilters"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label>
<input class="gf-form-input width-5"
type="number"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-6">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6"
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
label="Enable scroll"
checked="editor.panel.scroll"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-16"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
<tip>See moment.js dosc for time format.</tip>
</a>
</label>
<input class="gf-form-input width-18"
type="text"
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
<input type="text"
class="gf-form-input width-12"
empty-to-null
ng-model="trigger.severity"
style="color: white"
ng-style="{background: trigger.color}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="trigger.show"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="editor.panel.markAckEvents"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
</div>
</div>

83
dist/panel-triggers/partials/triggers_tab.html vendored Normal file
View File

@@ -0,0 +1,83 @@
<div class="editor-row">
<div class="section gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-7">Data sources</label>
</div>
<div class="gf-form">
<datasource-selector
datasources="editor.panel.datasources"
options="editor.panelCtrl.available_datasources"
on-change="editor.datasourcesChanged()">
</datasource-selector>
</div>
</div>
</div>
</div>
<div class="editor-row" ng-repeat="ds in editor.panel.datasources">
<div class="section gf-form-group">
<h5 class="section-heading">{{ ds }}</h5>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label>
<input type="text"
ng-model="editor.panel.targets[ds].group.filter"
bs-typeahead="editor.getGroupNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].group.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].group.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Host</label>
<input type="text"
ng-model="editor.panel.targets[ds].host.filter"
bs-typeahead="editor.getHostNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].host.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].host.filter)
}">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label>
<input type="text"
ng-model="editor.panel.targets[ds].application.filter"
bs-typeahead="editor.getApplicationNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].application.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].application.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Trigger</label>
<input type="text"
ng-model="editor.panel.targets[ds].trigger.filter"
ng-blur="editor.parseTarget()"
placeholder="trigger name"
class="gf-form-input"
ng-style="editor.panel.targets[ds].trigger.style"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].trigger.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].trigger.filter)
}"
empty-to-null>
</div>
</div>
</div>
</div>

110
dist/panel-triggers/specs/migrations.spec.js vendored Normal file
View File

@@ -0,0 +1,110 @@
import {TriggerPanelCtrl} from '../triggers_panel_ctrl';
import {DEFAULT_TARGET} from '../triggers_panel_ctrl';
import {DEFAULT_SEVERITY} from '../triggers_panel_ctrl';
describe('Triggers Panel schema migration', () => {
let ctx = {};
let datasourceSrvMock = {
getMetricSources: () => {
return [{ meta: {id: 'alexanderzobnin-zabbix-datasource'}, value: {}, name: 'zabbix_default' }];
},
get: () => Promise.resolve({})
};
beforeEach(() => {
ctx = {
scope: {
panel: {
datasource: 'zabbix',
triggers: DEFAULT_TARGET,
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
limit: 10,
showTriggers: 'all triggers',
hideHostsInMaintenance: false,
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)',
scroll: true,
pageSize: 10,
fontSize: '100%',
}
}
};
});
it('should update old panel schema', (done) => {
let updatedPanelCtrl = new TriggerPanelCtrl(ctx.scope, {}, {}, datasourceSrvMock, {}, {}, {});
let expected = {
schemaVersion: 2,
datasources: ['zabbix'],
targets: {
'zabbix': DEFAULT_TARGET
},
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
expect(updatedPanelCtrl.panel).toEqual(expected);
done();
});
it('should create new panel with default schema', (done) => {
ctx.scope.panel = {};
let updatedPanelCtrl = new TriggerPanelCtrl(ctx.scope, {}, {}, datasourceSrvMock, {}, {}, {});
let expected = {
schemaVersion: 2,
datasources: ['zabbix_default'],
targets: {
'zabbix_default': DEFAULT_TARGET
},
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
expect(updatedPanelCtrl.panel).toEqual(expected);
done();
});
});

530
dist/panel-triggers/triggers_panel_ctrl.js vendored Normal file
View File

@@ -0,0 +1,530 @@
'use strict';
System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'app/plugins/sdk', './options_tab', './triggers_tab', './migrations'], function (_export, _context) {
"use strict";
var _, $, moment, utils, PanelCtrl, triggerPanelOptionsTab, triggerPanelTriggersTab, migratePanelSchema, _createClass, ZABBIX_DS_ID, DEFAULT_TARGET, DEFAULT_SEVERITY, DEFAULT_TIME_FORMAT, panelDefaults, triggerStatusMap, TriggerPanelCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _filterTriggers(triggers, triggerFilter) {
if (utils.isRegex(triggerFilter)) {
return _.filter(triggers, function (trigger) {
return utils.buildRegex(triggerFilter).test(trigger.description);
});
} else {
return _.filter(triggers, function (trigger) {
return trigger.description === triggerFilter;
});
}
}
return {
setters: [function (_lodash) {
_ = _lodash.default;
}, function (_jquery) {
$ = _jquery.default;
}, function (_moment) {
moment = _moment.default;
}, function (_datasourceZabbixUtils) {
utils = _datasourceZabbixUtils;
}, function (_appPluginsSdk) {
PanelCtrl = _appPluginsSdk.PanelCtrl;
}, function (_options_tab) {
triggerPanelOptionsTab = _options_tab.triggerPanelOptionsTab;
}, function (_triggers_tab) {
triggerPanelTriggersTab = _triggers_tab.triggerPanelTriggersTab;
}, function (_migrations) {
migratePanelSchema = _migrations.migratePanelSchema;
}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
_export('DEFAULT_TARGET', DEFAULT_TARGET = {
group: { filter: "" },
host: { filter: "" },
application: { filter: "" },
trigger: { filter: "" }
});
_export('DEFAULT_TARGET', DEFAULT_TARGET);
_export('DEFAULT_SEVERITY', DEFAULT_SEVERITY = [{ 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 }]);
_export('DEFAULT_SEVERITY', DEFAULT_SEVERITY);
DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss";
panelDefaults = {
schemaVersion: 2,
datasources: [],
targets: {},
// Fields
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
// Options
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
// View options
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
// Triggers severity and colors
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
};
_export('TriggerPanelCtrl', TriggerPanelCtrl = function (_PanelCtrl) {
_inherits(TriggerPanelCtrl, _PanelCtrl);
/** @ngInject */
function TriggerPanelCtrl($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
_classCallCheck(this, TriggerPanelCtrl);
var _this = _possibleConstructorReturn(this, (TriggerPanelCtrl.__proto__ || Object.getPrototypeOf(TriggerPanelCtrl)).call(this, $scope, $injector));
_this.datasourceSrv = datasourceSrv;
_this.templateSrv = templateSrv;
_this.contextSrv = contextSrv;
_this.dashboardSrv = dashboardSrv;
_this.editorTabIndex = 1;
_this.triggerStatusMap = triggerStatusMap;
_this.defaultTimeFormat = DEFAULT_TIME_FORMAT;
_this.pageIndex = 0;
_this.triggerList = [];
_this.currentTriggersPage = [];
_this.datasources = {};
_this.panel = migratePanelSchema(_this.panel);
_.defaults(_this.panel, _.cloneDeep(panelDefaults));
_this.available_datasources = _.map(_this.getZabbixDataSources(), 'name');
if (_this.panel.datasources.length === 0) {
_this.panel.datasources.push(_this.available_datasources[0]);
}
if (_.isEmpty(_this.panel.targets)) {
_this.panel.targets[_this.panel.datasources[0]] = DEFAULT_TARGET;
}
_this.initDatasources();
_this.events.on('init-edit-mode', _this.onInitEditMode.bind(_this));
_this.events.on('refresh', _this.onRefresh.bind(_this));
return _this;
}
_createClass(TriggerPanelCtrl, [{
key: 'initDatasources',
value: function initDatasources() {
var _this2 = this;
var promises = _.map(this.panel.datasources, function (ds) {
// Load datasource
return _this2.datasourceSrv.get(ds).then(function (datasource) {
_this2.datasources[ds] = datasource;
return datasource;
});
});
return Promise.all(promises);
}
}, {
key: 'getZabbixDataSources',
value: function getZabbixDataSources() {
return _.filter(this.datasourceSrv.getMetricSources(), function (datasource) {
return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
});
}
}, {
key: 'onInitEditMode',
value: function onInitEditMode() {
this.addEditorTab('Triggers', triggerPanelTriggersTab, 1);
this.addEditorTab('Options', triggerPanelOptionsTab, 2);
}
}, {
key: 'setTimeQueryStart',
value: function setTimeQueryStart() {
this.timing.queryStart = new Date().getTime();
}
}, {
key: 'setTimeQueryEnd',
value: function setTimeQueryEnd() {
this.timing.queryEnd = new Date().getTime();
}
}, {
key: 'onRefresh',
value: function onRefresh() {
var _this3 = this;
// ignore fetching data if another panel is in fullscreen
if (this.otherPanelInFullscreenMode()) {
return;
}
// clear loading/error state
delete this.error;
this.loading = true;
this.setTimeQueryStart();
return this.getTriggers().then(function (triggerList) {
// Notify panel that request is finished
_this3.loading = false;
_this3.setTimeQueryEnd();
// Limit triggers number
_this3.triggerList = triggerList.slice(0, _this3.panel.limit);
_this3.getCurrentTriggersPage();
_this3.render(_this3.triggerList);
}).catch(function (err) {
// if cancelled keep loading set to true
if (err.cancelled) {
console.log('Panel request cancelled', err);
return;
}
_this3.loading = false;
_this3.error = err.message || "Request Error";
if (err.data) {
if (err.data.message) {
_this3.error = err.data.message;
}
if (err.data.error) {
_this3.error = err.data.error;
}
}
_this3.events.emit('data-error', err);
console.log('Panel data error:', err);
});
}
}, {
key: 'getTriggers',
value: function getTriggers() {
var _this4 = this;
var promises = _.map(this.panel.datasources, function (ds) {
return _this4.datasourceSrv.get(ds).then(function (datasource) {
var zabbix = datasource.zabbix;
var showEvents = _this4.panel.showEvents.value;
var triggerFilter = _this4.panel.targets[ds];
var hideHostsInMaintenance = _this4.panel.hideHostsInMaintenance;
// Replace template variables
var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
var triggersOptions = {
showTriggers: showEvents,
hideHostsInMaintenance: hideHostsInMaintenance
};
return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
}).then(function (triggers) {
return _this4.getAcknowledges(triggers, ds);
}).then(function (triggers) {
return _this4.filterTriggers(triggers, ds);
});
});
return Promise.all(promises).then(function (results) {
return _.flatten(results);
}).then(function (triggers) {
return _this4.sortTriggers(triggers);
}).then(function (triggers) {
return _.map(triggers, _this4.formatTrigger.bind(_this4));
});
}
}, {
key: 'getAcknowledges',
value: function getAcknowledges(triggerList, ds) {
var _this5 = this;
// Request acknowledges for trigger
var eventids = _.map(triggerList, function (trigger) {
return trigger.lastEvent.eventid;
});
return this.datasources[ds].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 timestamp = moment.unix(ack.clock);
if (_this5.panel.customLastChangeFormat) {
ack.time = timestamp.format(_this5.panel.lastChangeFormat);
} else {
ack.time = timestamp.format(_this5.defaultTimeFormat);
}
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (_this5.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = _this5.panel.ackEventColor;
}
}
});
return triggerList;
});
}
}, {
key: 'filterTriggers',
value: function filterTriggers(triggerList, ds) {
var _this6 = this;
// Filter triggers by description
var triggerFilter = this.panel.targets[ds].trigger.filter;
triggerFilter = this.datasources[ds].replaceTemplateVars(triggerFilter);
if (triggerFilter) {
triggerList = _filterTriggers(triggerList, triggerFilter);
}
// Filter acknowledged triggers
if (this.panel.showTriggers === 'unacknowledged') {
triggerList = _.filter(triggerList, function (trigger) {
return !trigger.acknowledges;
});
} else if (this.panel.showTriggers === 'acknowledged') {
triggerList = _.filter(triggerList, 'acknowledges');
} else {
triggerList = triggerList;
}
// Filter triggers by severity
triggerList = _.filter(triggerList, function (trigger) {
return _this6.panel.triggerSeverity[trigger.priority].show;
});
return triggerList;
}
}, {
key: 'sortTriggers',
value: function sortTriggers(triggerList) {
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
}
return triggerList;
}
}, {
key: 'formatTrigger',
value: function formatTrigger(trigger) {
var triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
var timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
}
}, {
key: 'switchComment',
value: function switchComment(trigger) {
trigger.showComment = !trigger.showComment;
}
}, {
key: 'acknowledgeTrigger',
value: function acknowledgeTrigger(trigger, message) {
var eventid = trigger.lastEvent.eventid;
var grafana_user = this.contextSrv.user.name;
var ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
var zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
}).then(this.onRefresh.bind(this));
}
}, {
key: 'getCurrentTriggersPage',
value: function getCurrentTriggersPage() {
var pageSize = this.panel.pageSize || 10;
var startPos = this.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
}, {
key: 'link',
value: function link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
}
return panelHeight - 31 + 'px';
}
function switchPage(e) {
var el = $(e.currentTarget);
ctrl.pageIndex = parseInt(el.text(), 10) - 1;
var pageSize = ctrl.panel.pageSize || 10;
var startPos = ctrl.pageIndex * pageSize;
var endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply(function () {
renderPanel();
});
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
var startPage = Math.max(ctrl.pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>');
for (var i = startPage; i < endPage; i++) {
var activeClass = i === ctrl.pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i + 1) + '</a></li>');
paginationList.append(pageLinkElem);
}
footerElem.append(paginationList);
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({ 'font-size': panel.fontSize });
panelElem.addClass('triggers-panel-wrapper');
appendPaginationControls(footerElem);
rootElem.css({ 'max-height': panel.scroll ? getTableHeight() : '' });
ctrl.renderingCompleted();
}
elem.on('click', '.triggers-panel-page-link', switchPage);
var unbindDestroy = scope.$on('$destroy', function () {
elem.off('click', '.triggers-panel-page-link');
unbindDestroy();
});
ctrl.events.on('render', function (renderData) {
data = renderData || data;
if (data) {
scope.$apply(function () {
renderPanel();
});
}
});
}
}]);
return TriggerPanelCtrl;
}(PanelCtrl));
_export('TriggerPanelCtrl', TriggerPanelCtrl);
TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
}
};
});
//# sourceMappingURL=triggers_panel_ctrl.js.map

1
dist/panel-triggers/triggers_panel_ctrl.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

163
dist/panel-triggers/triggers_tab.js vendored Normal file
View File

@@ -0,0 +1,163 @@
'use strict';
System.register(['lodash', '../datasource-zabbix/utils', './datasource-selector.directive', '../datasource-zabbix/css/query-editor.css!', './triggers_panel_ctrl'], function (_export, _context) {
"use strict";
var _, utils, DEFAULT_TARGET, _createClass, TriggersTabCtrl;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function triggerPanelTriggersTab() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/triggers_tab.html',
controller: TriggersTabCtrl
};
}
_export('triggerPanelTriggersTab', triggerPanelTriggersTab);
return {
setters: [function (_lodash) {
_ = _lodash.default;
}, function (_datasourceZabbixUtils) {
utils = _datasourceZabbixUtils;
}, function (_datasourceSelectorDirective) {}, function (_datasourceZabbixCssQueryEditorCss) {}, function (_triggers_panel_ctrl) {
DEFAULT_TARGET = _triggers_panel_ctrl.DEFAULT_TARGET;
}],
execute: function () {
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
TriggersTabCtrl = function () {
/** @ngInject */
function TriggersTabCtrl($scope, $rootScope, uiSegmentSrv, templateSrv) {
_classCallCheck(this, TriggersTabCtrl);
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.templateSrv = templateSrv;
this.datasources = this.panelCtrl.datasources;
// Load scope defaults
var scopeDefaults = {
getGroupNames: {},
getHostNames: {},
getApplicationNames: {},
oldTarget: _.cloneDeep(this.panel.targets)
};
_.defaultsDeep(this, scopeDefaults);
this.initDatasources();
this.panelCtrl.refresh();
}
_createClass(TriggersTabCtrl, [{
key: 'initDatasources',
value: function initDatasources() {
var _this = this;
return this.panelCtrl.initDatasources().then(function (datasources) {
_.each(datasources, function (datasource) {
_this.bindSuggestionFunctions(datasource);
});
});
}
}, {
key: 'bindSuggestionFunctions',
value: function bindSuggestionFunctions(datasource) {
// Map functions for bs-typeahead
var ds = datasource.name;
this.getGroupNames[ds] = _.bind(this.suggestGroups, this, datasource);
this.getHostNames[ds] = _.bind(this.suggestHosts, this, datasource);
this.getApplicationNames[ds] = _.bind(this.suggestApps, this, datasource);
}
}, {
key: 'suggestGroups',
value: function suggestGroups(datasource, query, callback) {
return datasource.zabbix.getAllGroups().then(function (groups) {
return _.map(groups, 'name');
}).then(callback);
}
}, {
key: 'suggestHosts',
value: function suggestHosts(datasource, query, callback) {
var groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
return datasource.zabbix.getAllHosts(groupFilter).then(function (hosts) {
return _.map(hosts, 'name');
}).then(callback);
}
}, {
key: 'suggestApps',
value: function suggestApps(datasource, query, callback) {
var groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
var hostFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].host.filter);
return datasource.zabbix.getAllApps(groupFilter, hostFilter).then(function (apps) {
return _.map(apps, 'name');
}).then(callback);
}
}, {
key: 'datasourcesChanged',
value: function datasourcesChanged() {
var _this2 = this;
_.each(this.panel.datasources, function (ds) {
if (!_this2.panel.targets[ds]) {
_this2.panel.targets[ds] = DEFAULT_TARGET;
}
});
this.parseTarget();
}
}, {
key: 'parseTarget',
value: function parseTarget() {
var _this3 = this;
this.initDatasources().then(function () {
var newTarget = _.cloneDeep(_this3.panel.targets);
if (!_.isEqual(_this3.oldTarget, newTarget)) {
_this3.oldTarget = newTarget;
}
_this3.panelCtrl.refresh();
});
}
}, {
key: 'isRegex',
value: function isRegex(str) {
return utils.isRegex(str);
}
}, {
key: 'isVariable',
value: function isVariable(str) {
return utils.isTemplateVariable(str, this.templateSrv.variables);
}
}]);
return TriggersTabCtrl;
}();
}
};
});
//# sourceMappingURL=triggers_tab.js.map

1
dist/panel-triggers/triggers_tab.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@@ -5,6 +5,7 @@
"description": "Zabbix plugin for Grafana",
"scripts": {
"test": "jest",
"jest": "jest --notify --watch",
"build": "grunt && jest",
"watch": "grunt watch",
"codecov": "grunt && jest --coverage && codecov",
@@ -50,7 +51,8 @@
"tether-drop": "^1.4.2"
},
"dependencies": {
"lodash": "~4.0.0"
"lodash": "~4.0.0",
"systemjs": "^0.20.19"
},
"homepage": "http://grafana-zabbix.org"
}

49
src/panel-triggers/datasource-selector.directive.js Normal file
View File

@@ -0,0 +1,49 @@
import angular from 'angular';
import _ from 'lodash';
const template = `
<value-select-dropdown variable="ctrl.dsOptions" on-updated="ctrl.onChange(ctrl.dsOptions)">
</value-select-dropdown>
`;
angular
.module('grafana.directives')
.directive('datasourceSelector', () => {
return {
scope: {
datasources: "=",
options: "=",
onChange: "&"
},
controller: DatasourceSelectorCtrl,
controllerAs: 'ctrl',
template: template
};
});
class DatasourceSelectorCtrl {
/** @ngInject */
constructor($scope) {
this.scope = $scope;
let datasources = $scope.datasources;
let options = $scope.options;
this.dsOptions = {
multi: true,
current: {value: datasources, text: datasources.join(" + ")},
options: _.map(options, (ds) => {
return {text: ds, value: ds, selected: _.includes(datasources, ds)};
})
};
}
onChange(updatedOptions) {
let newDataSources = updatedOptions.current.value;
this.scope.datasources = newDataSources;
// Run after model was changed
this.scope.$$postDigest(() => {
this.scope.onChange();
});
}
}

293
src/panel-triggers/editor.html
View File

@@ -1,293 +0,0 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Select triggers</h5>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label>
<input type="text"
ng-model="editor.panel.triggers.group.filter"
bs-typeahead="editor.getGroupNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.group.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.group.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Host</label>
<input type="text"
ng-model="editor.panel.triggers.host.filter"
bs-typeahead="editor.getHostNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.host.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.host.filter)
}">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label>
<input type="text"
ng-model="editor.panel.triggers.application.filter"
bs-typeahead="editor.getApplicationNames"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.application.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.application.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Trigger</label>
<input type="text"
ng-model="editor.panel.triggers.trigger.filter"
ng-blur="editor.parseTarget()"
placeholder="trigger name"
class="gf-form-input"
ng-style="editor.panel.triggers.trigger.style"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.triggers.trigger.filter),
'zbx-regex': editor.isRegex(editor.panel.triggers.trigger.filter)
}"
empty-to-null>
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Data source</h5>
<div class="gf-form-inline">
<div class="gf-form">
<div class="gf-form-select-wrapper">
<select class="gf-form-input"
ng-model="editor.panel.datasource"
ng-options="ds for ds in editor.datasources"
ng-change="editor.datasourceChanged()">
</select>
</div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showTriggers"
ng-options="f for f in editor.ackFilters"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<gf-form-switch class="gf-form"
label-class="width-13"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-9">
<select class="gf-form-input"
ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6"
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
label="Enable scroll"
checked="editor.panel.scroll"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label>
<input class="gf-form-input width-5"
type="number"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-8"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-12"
label="Host technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-5"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-5"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-7"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-4"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<gf-form-switch class="gf-form"
label-class="width-14"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="ctrl.render()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
<tip>See moment.js dosc for time format.</tip>
</a>
</label>
<input class="gf-form-input width-18"
type="text"
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Customize triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
<input type="text"
class="gf-form-input width-12"
empty-to-null
ng-model="trigger.severity"
style="color: white"
ng-style="{background: trigger.color}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="trigger.show"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-label width-12"
ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="editor.panel.markAckEvents"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
</div>
</div>

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

@@ -1,188 +0,0 @@
/**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
import _ from 'lodash';
import * as utils from '../datasource-zabbix/utils';
import '../datasource-zabbix/css/query-editor.css!';
class TriggerPanelEditorCtrl {
/** @ngInject */
constructor($scope, $rootScope, uiSegmentSrv, datasourceSrv, templateSrv, popoverSrv) {
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.datasourceSrv = datasourceSrv;
this.templateSrv = templateSrv;
this.popoverSrv = popoverSrv;
// Map functions for bs-typeahead
this.getGroupNames = _.partial(getMetricNames, this, 'groupList');
this.getHostNames = _.partial(getMetricNames, this, 'hostList');
this.getApplicationNames = _.partial(getMetricNames, this, 'appList');
// Update metric suggestion when template variable was changed
$rootScope.$on('template-variable-value-updated', () => this.onVariableChange());
this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
this.ackFilters = [
'all triggers',
'unacknowledged',
'acknowledged'
];
this.sortByFields = [
{ text: 'last change', value: 'lastchange' },
{ text: 'severity', value: 'priority' }
];
this.showEventsFields = [
{ text: 'All', value: [0,1] },
{ text: 'OK', value: [0] },
{ text: 'Problems', value: 1 }
];
// Load scope defaults
var scopeDefaults = {
metric: {},
inputStyles: {},
oldTarget: _.cloneDeep(this.panel.triggers)
};
_.defaults(this, scopeDefaults);
// Set default datasource
this.datasources = _.map(this.getZabbixDataSources(), 'name');
if (!this.panel.datasource) {
this.panel.datasource = this.datasources[0];
}
// Load datasource
this.datasourceSrv.get(this.panel.datasource)
.then(datasource => {
this.datasource = datasource;
this.zabbix = datasource.zabbix;
this.queryBuilder = datasource.queryBuilder;
this.initFilters();
this.panelCtrl.refresh();
});
}
initFilters() {
return Promise.all([
this.suggestGroups(),
this.suggestHosts(),
this.suggestApps()
]);
}
suggestGroups() {
return this.zabbix.getAllGroups()
.then(groups => {
this.metric.groupList = groups;
return groups;
});
}
suggestHosts() {
let groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
return this.zabbix.getAllHosts(groupFilter)
.then(hosts => {
this.metric.hostList = hosts;
return hosts;
});
}
suggestApps() {
let groupFilter = this.datasource.replaceTemplateVars(this.panel.triggers.group.filter);
let hostFilter = this.datasource.replaceTemplateVars(this.panel.triggers.host.filter);
return this.zabbix.getAllApps(groupFilter, hostFilter)
.then(apps => {
this.metric.appList = apps;
return apps;
});
}
onVariableChange() {
if (this.isContainsVariables()) {
this.targetChanged();
}
}
/**
* Check query for template variables
*/
isContainsVariables() {
return _.some(['group', 'host', 'application'], field => {
return utils.isTemplateVariable(this.panel.triggers[field].filter, this.templateSrv.variables);
});
}
targetChanged() {
this.initFilters();
this.panelCtrl.refresh();
}
parseTarget() {
this.initFilters();
var newTarget = _.cloneDeep(this.panel.triggers);
if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
this.oldTarget = newTarget;
this.panelCtrl.refresh();
}
}
refreshTriggerSeverity() {
_.each(this.triggerList, function(trigger) {
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
});
this.panelCtrl.refresh();
}
datasourceChanged() {
this.panelCtrl.refresh();
}
changeTriggerSeverityColor(trigger, color) {
this.panel.triggerSeverity[trigger.priority].color = color;
this.refreshTriggerSeverity();
}
isRegex(str) {
return utils.isRegex(str);
}
isVariable(str) {
return utils.isTemplateVariable(str, this.templateSrv.variables);
}
getZabbixDataSources() {
let ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
});
}
}
// Get list of metric names for bs-typeahead directive
function getMetricNames(scope, metricList) {
return _.uniq(_.map(scope.metric[metricList], 'name'));
}
export function triggerPanelEditor() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/editor.html',
controller: TriggerPanelEditorCtrl,
};
}

28
src/panel-triggers/migrations.js Normal file
View File

@@ -0,0 +1,28 @@
export function migratePanelSchema(panel) {
if (isEmptyPanel(panel)) {
return panel;
}
const schemaVersion = getSchemaVersion(panel);
switch (schemaVersion) {
case 1:
panel.datasources = [panel.datasource];
panel.targets = {};
panel.targets[panel.datasources[0]] = panel.triggers;
// delete old props
delete panel.triggers;
delete panel.datasource;
break;
}
return panel;
}
function getSchemaVersion(panel) {
return panel.schemaVersion || 1;
}
function isEmptyPanel(panel) {
return !panel.datasource && !panel.datasources && !panel.triggers && !panel.targets;
}

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

@@ -11,13 +11,8 @@
* Licensed under the Apache License, Version 2.0
*/
import _ from 'lodash';
import $ from 'jquery';
import moment from 'moment';
import {TriggerPanelCtrl} from './triggers_panel_ctrl';
import {loadPluginCss} from 'app/plugins/sdk';
import * as utils from '../datasource-zabbix/utils';
import {PanelCtrl} from 'app/plugins/sdk';
import {triggerPanelEditor} from './editor';
import './ack-tooltip.directive';
loadPluginCss({
@@ -25,358 +20,6 @@ loadPluginCss({
light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
});
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',
hideHostsInMaintenance: false,
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
triggerSeverity: defaultSeverity,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)',
scroll: true,
pageSize: 10,
fontSize: '100%',
};
var triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
};
var defaultTimeFormat = "DD MMM YYYY HH:mm:ss";
class TriggerPanelCtrl extends PanelCtrl {
/** @ngInject */
constructor($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
super($scope, $injector);
this.datasourceSrv = datasourceSrv;
this.templateSrv = templateSrv;
this.contextSrv = contextSrv;
this.dashboardSrv = dashboardSrv;
this.triggerStatusMap = triggerStatusMap;
this.defaultTimeFormat = defaultTimeFormat;
this.pageIndex = 0;
this.triggerList = [];
this.currentTriggersPage = [];
// Load panel defaults
// _.cloneDeep() need for prevent changing shared defaultSeverity.
// Load object "by value" istead "by reference".
_.defaults(this.panel, _.cloneDeep(panelDefaults));
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.events.on('refresh', this.onRefresh.bind(this));
}
onInitEditMode() {
this.addEditorTab('Options', triggerPanelEditor, 2);
}
onRefresh() {
// ignore fetching data if another panel is in fullscreen
if (this.otherPanelInFullscreenMode()) { return; }
// clear loading/error state
delete this.error;
this.loading = true;
return this.refreshData()
.then(triggerList => {
// Limit triggers number
this.triggerList = triggerList.slice(0, this.panel.limit);
this.getCurrentTriggersPage();
// Notify panel that request is finished
this.loading = false;
this.render(this.triggerList);
});
}
refreshData() {
return this.getTriggers()
.then(this.getAcknowledges.bind(this))
.then(this.filterTriggers.bind(this));
}
getTriggers() {
return this.datasourceSrv.get(this.panel.datasource)
.then(datasource => {
var zabbix = datasource.zabbix;
this.zabbix = zabbix;
this.datasource = datasource;
var showEvents = this.panel.showEvents.value;
var triggerFilter = this.panel.triggers;
var hideHostsInMaintenance = this.panel.hideHostsInMaintenance;
// Replace template variables
var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
let triggersOptions = {
showTriggers: showEvents,
hideHostsInMaintenance: hideHostsInMaintenance
};
return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
})
.then(triggers => {
return _.map(triggers, this.formatTrigger.bind(this));
});
}
getAcknowledges(triggerList) {
// Request acknowledges for trigger
var eventids = _.map(triggerList, trigger => {
return trigger.lastEvent.eventid;
});
return this.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 => {
let timestamp = moment.unix(ack.clock);
if (this.panel.customLastChangeFormat) {
ack.time = timestamp.format(this.panel.lastChangeFormat);
} else {
ack.time = timestamp.format(this.defaultTimeFormat);
}
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (this.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = this.panel.ackEventColor;
}
}
});
return triggerList;
});
}
filterTriggers(triggerList) {
// Filter triggers by description
var triggerFilter = this.panel.triggers.trigger.filter;
triggerFilter = this.datasource.replaceTemplateVars(triggerFilter);
if (triggerFilter) {
triggerList = filterTriggers(triggerList, triggerFilter);
}
// Filter acknowledged triggers
if (this.panel.showTriggers === 'unacknowledged') {
triggerList = _.filter(triggerList, trigger => {
return !trigger.acknowledges;
});
} else if (this.panel.showTriggers === 'acknowledged') {
triggerList = _.filter(triggerList, 'acknowledges');
} else {
triggerList = triggerList;
}
// Filter triggers by severity
triggerList = _.filter(triggerList, trigger => {
return this.panel.triggerSeverity[trigger.priority].show;
});
// Sort triggers
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
}
return triggerList;
}
formatTrigger(trigger) {
let triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
let timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
}
switchComment(trigger) {
trigger.showComment = !trigger.showComment;
}
acknowledgeTrigger(trigger, message) {
let eventid = trigger.lastEvent.eventid;
let grafana_user = this.contextSrv.user.name;
let ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource)
.then(datasource => {
let zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
})
.then(this.onRefresh.bind(this));
}
getCurrentTriggersPage() {
let pageSize = this.panel.pageSize || 10;
let startPos = this.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
}
return (panelHeight - 31) + 'px';
}
function switchPage(e) {
let el = $(e.currentTarget);
ctrl.pageIndex = (parseInt(el.text(), 10)-1);
let pageSize = ctrl.panel.pageSize || 10;
let startPos = ctrl.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply();
renderPanel();
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
var startPage = Math.max(ctrl.pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>');
for (var i = startPage; i < endPage; i++) {
var activeClass = i === ctrl.pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
paginationList.append(pageLinkElem);
}
footerElem.append(paginationList);
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({'font-size': panel.fontSize});
panelElem.addClass('triggers-panel-wrapper');
appendPaginationControls(footerElem);
rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
}
elem.on('click', '.triggers-panel-page-link', switchPage);
var unbindDestroy = scope.$on('$destroy', function() {
elem.off('click', '.triggers-panel-page-link');
unbindDestroy();
});
ctrl.events.on('render', (renderData) => {
data = renderData || data;
if (data) {
renderPanel();
}
ctrl.renderingCompleted();
});
}
}
TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
function filterTriggers(triggers, triggerFilter) {
if (utils.isRegex(triggerFilter)) {
return _.filter(triggers, function(trigger) {
return utils.buildRegex(triggerFilter).test(trigger.description);
});
} else {
return _.filter(triggers, function(trigger) {
return trigger.description === triggerFilter;
});
}
}
export {
TriggerPanelCtrl,
TriggerPanelCtrl as PanelCtrl
};

65
src/panel-triggers/options_tab.js Normal file
View File

@@ -0,0 +1,65 @@
/**
* Grafana-Zabbix
* Zabbix plugin for Grafana.
* http://github.com/alexanderzobnin/grafana-zabbix
*
* Trigger panel.
* This feature sponsored by CORE IT
* http://www.coreit.fr
*
* Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
* Licensed under the Apache License, Version 2.0
*/
import _ from 'lodash';
import './datasource-selector.directive';
import '../datasource-zabbix/css/query-editor.css!';
class TriggerPanelOptionsCtrl {
/** @ngInject */
constructor($scope) {
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%'];
this.ackFilters = [
'all triggers',
'unacknowledged',
'acknowledged'
];
this.sortByFields = [
{ text: 'last change', value: 'lastchange' },
{ text: 'severity', value: 'priority' }
];
this.showEventsFields = [
{ text: 'All', value: [0,1] },
{ text: 'OK', value: [0] },
{ text: 'Problems', value: 1 }
];
}
refreshTriggerSeverity() {
_.each(this.triggerList, function(trigger) {
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
});
this.panelCtrl.refresh();
}
changeTriggerSeverityColor(trigger, color) {
this.panel.triggerSeverity[trigger.priority].color = color;
this.refreshTriggerSeverity();
}
}
export function triggerPanelOptionsTab() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/options_tab.html',
controller: TriggerPanelOptionsCtrl,
};
}

199
src/panel-triggers/partials/options_tab.html Normal file
View File

@@ -0,0 +1,199 @@
<div class="editor-row">
<div class="section gf-form-group">
<h5 class="section-heading">Show fields</h5>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Host name"
checked="editor.panel.hostField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Technical name"
checked="editor.panel.hostTechNameField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Status"
checked="editor.panel.statusField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Severity"
checked="editor.panel.severityField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Last change"
checked="editor.panel.lastChangeField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Age"
checked="editor.panel.ageField"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-9"
label="Info"
checked="editor.panel.infoField"
on-change="ctrl.render()">
</gf-form-switch>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Options</h5>
<gf-form-switch class="gf-form"
label-class="width-15"
label="Hide hosts in maintenance"
checked="editor.panel.hideHostsInMaintenance"
on-change="ctrl.refresh()">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-8">Acknowledged</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showTriggers"
ng-options="f for f in editor.ackFilters"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Sort by</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.sortTriggersBy"
ng-options="f.text for f in editor.sortByFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Show events</label>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input"
ng-model="editor.panel.showEvents"
ng-options="f.text for f in editor.showEventsFields track by f.value"
ng-change="editor.panelCtrl.refresh()">
</select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Limit triggers</label>
<input class="gf-form-input width-5"
type="number"
ng-model="editor.panel.limit"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">View options</h5>
<div class="gf-form max-width-14">
<label class="gf-form-label width-8">Font size</label>
<div class="gf-form-select-wrapper max-width-6">
<select class="gf-form-input"
ng-model="editor.panel.fontSize"
ng-options="f for f in editor.fontSizes"
ng-change="editor.panelCtrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Page size</label>
<input class="gf-form-input width-6"
type="number"
ng-model="editor.panel.pageSize"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
</div>
<gf-form-switch class="gf-form"
label-class="width-8"
label="Enable scroll"
checked="editor.panel.scroll"
on-change="ctrl.render()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label-class="width-16"
label="Custom Last change format"
checked="editor.panel.customLastChangeFormat"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
<div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
<label class="gf-form-label width-3">
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
<tip>See moment.js dosc for time format.</tip>
</a>
</label>
<input class="gf-form-input width-18"
type="text"
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
empty-to-null
ng-model-onblur
ng-model="editor.panel.lastChangeFormat"
ng-change="editor.panelCtrl.refresh()">
</div>
</div>
<div class="section gf-form-group">
<h5 class="section-heading">Triggers severity and colors</h5>
<div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
<div class="gf-form">
<label class="gf-form-label width-3">{{ trigger.priority }}</label>
<input type="text"
class="gf-form-input width-12"
empty-to-null
ng-model="trigger.severity"
style="color: white"
ng-style="{background: trigger.color}"
ng-model-onblur
ng-change="editor.panelCtrl.refresh()">
<span class="gf-form-label">
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="trigger.show"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.ackEventColor}">
Acknowledged color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.ackEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
<gf-form-switch class="gf-form"
label-class="width-0"
label="Show"
checked="editor.panel.markAckEvents"
on-change="editor.panelCtrl.refresh()">
</gf-form-switch>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-3">&nbsp;</label>
<label class="gf-form-input width-12"
ng-style="{background:editor.panel.okEventColor}">
OK event color
</label>
<span class="gf-form-label">
<spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
</span>
</div>
</div>
</div>
</div>

83
src/panel-triggers/partials/triggers_tab.html Normal file
View File

@@ -0,0 +1,83 @@
<div class="editor-row">
<div class="section gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label width-7">Data sources</label>
</div>
<div class="gf-form">
<datasource-selector
datasources="editor.panel.datasources"
options="editor.panelCtrl.available_datasources"
on-change="editor.datasourcesChanged()">
</datasource-selector>
</div>
</div>
</div>
</div>
<div class="editor-row" ng-repeat="ds in editor.panel.datasources">
<div class="section gf-form-group">
<h5 class="section-heading">{{ ds }}</h5>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Group</label>
<input type="text"
ng-model="editor.panel.targets[ds].group.filter"
bs-typeahead="editor.getGroupNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].group.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].group.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Host</label>
<input type="text"
ng-model="editor.panel.targets[ds].host.filter"
bs-typeahead="editor.getHostNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].host.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].host.filter)
}">
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-20">
<label class="gf-form-label query-keyword width-7">Application</label>
<input type="text"
ng-model="editor.panel.targets[ds].application.filter"
bs-typeahead="editor.getApplicationNames[ds]"
ng-blur="editor.parseTarget()"
data-min-length=0
data-items=100
class="gf-form-input"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].application.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].application.filter)
}">
</div>
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Trigger</label>
<input type="text"
ng-model="editor.panel.targets[ds].trigger.filter"
ng-blur="editor.parseTarget()"
placeholder="trigger name"
class="gf-form-input"
ng-style="editor.panel.targets[ds].trigger.style"
ng-class="{
'zbx-variable': editor.isVariable(editor.panel.targets[ds].trigger.filter),
'zbx-regex': editor.isRegex(editor.panel.targets[ds].trigger.filter)
}"
empty-to-null>
</div>
</div>
</div>
</div>

110
src/panel-triggers/specs/migrations.spec.js Normal file
View File

@@ -0,0 +1,110 @@
import {TriggerPanelCtrl} from '../triggers_panel_ctrl';
import {DEFAULT_TARGET} from '../triggers_panel_ctrl';
import {DEFAULT_SEVERITY} from '../triggers_panel_ctrl';
describe('Triggers Panel schema migration', () => {
let ctx = {};
let datasourceSrvMock = {
getMetricSources: () => {
return [{ meta: {id: 'alexanderzobnin-zabbix-datasource'}, value: {}, name: 'zabbix_default' }];
},
get: () => Promise.resolve({})
};
beforeEach(() => {
ctx = {
scope: {
panel: {
datasource: 'zabbix',
triggers: DEFAULT_TARGET,
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
limit: 10,
showTriggers: 'all triggers',
hideHostsInMaintenance: false,
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)',
scroll: true,
pageSize: 10,
fontSize: '100%',
}
}
};
});
it('should update old panel schema', (done) => {
let updatedPanelCtrl = new TriggerPanelCtrl(ctx.scope, {}, {}, datasourceSrvMock, {}, {}, {});
let expected = {
schemaVersion: 2,
datasources: ['zabbix'],
targets: {
'zabbix': DEFAULT_TARGET
},
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
expect(updatedPanelCtrl.panel).toEqual(expected);
done();
});
it('should create new panel with default schema', (done) => {
ctx.scope.panel = {};
let updatedPanelCtrl = new TriggerPanelCtrl(ctx.scope, {}, {}, datasourceSrvMock, {}, {}, {});
let expected = {
schemaVersion: 2,
datasources: ['zabbix_default'],
targets: {
'zabbix_default': DEFAULT_TARGET
},
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
expect(updatedPanelCtrl.panel).toEqual(expected);
done();
});
});

437
src/panel-triggers/triggers_panel_ctrl.js Normal file
View File

@@ -0,0 +1,437 @@
import _ from 'lodash';
import $ from 'jquery';
import moment from 'moment';
import * as utils from '../datasource-zabbix/utils';
import {PanelCtrl} from 'app/plugins/sdk';
import {triggerPanelOptionsTab} from './options_tab';
import {triggerPanelTriggersTab} from './triggers_tab';
import {migratePanelSchema} from './migrations';
const ZABBIX_DS_ID = 'alexanderzobnin-zabbix-datasource';
export const DEFAULT_TARGET = {
group: {filter: ""},
host: {filter: ""},
application: {filter: ""},
trigger: {filter: ""}
};
export const DEFAULT_SEVERITY = [
{ 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 }
];
const DEFAULT_TIME_FORMAT = "DD MMM YYYY HH:mm:ss";
const panelDefaults = {
schemaVersion: 2,
datasources: [],
targets: {},
// Fields
hostField: true,
statusField: false,
severityField: false,
lastChangeField: true,
ageField: true,
infoField: true,
// Options
hideHostsInMaintenance: false,
showTriggers: 'all triggers',
sortTriggersBy: { text: 'last change', value: 'lastchange' },
showEvents: { text: 'Problems', value: '1' },
limit: 10,
// View options
fontSize: '100%',
pageSize: 10,
scroll: true,
customLastChangeFormat: false,
lastChangeFormat: "",
// Triggers severity and colors
triggerSeverity: DEFAULT_SEVERITY,
okEventColor: 'rgba(0, 245, 153, 0.45)',
ackEventColor: 'rgba(0, 0, 0, 0)'
};
const triggerStatusMap = {
'0': 'OK',
'1': 'Problem'
};
export class TriggerPanelCtrl extends PanelCtrl {
/** @ngInject */
constructor($scope, $injector, $element, datasourceSrv, templateSrv, contextSrv, dashboardSrv) {
super($scope, $injector);
this.datasourceSrv = datasourceSrv;
this.templateSrv = templateSrv;
this.contextSrv = contextSrv;
this.dashboardSrv = dashboardSrv;
this.editorTabIndex = 1;
this.triggerStatusMap = triggerStatusMap;
this.defaultTimeFormat = DEFAULT_TIME_FORMAT;
this.pageIndex = 0;
this.triggerList = [];
this.currentTriggersPage = [];
this.datasources = {};
this.panel = migratePanelSchema(this.panel);
_.defaults(this.panel, _.cloneDeep(panelDefaults));
this.available_datasources = _.map(this.getZabbixDataSources(), 'name');
if (this.panel.datasources.length === 0) {
this.panel.datasources.push(this.available_datasources[0]);
}
if (_.isEmpty(this.panel.targets)) {
this.panel.targets[this.panel.datasources[0]] = DEFAULT_TARGET;
}
this.initDatasources();
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.events.on('refresh', this.onRefresh.bind(this));
}
initDatasources() {
let promises = _.map(this.panel.datasources, (ds) => {
// Load datasource
return this.datasourceSrv.get(ds)
.then(datasource => {
this.datasources[ds] = datasource;
return datasource;
});
});
return Promise.all(promises);
}
getZabbixDataSources() {
return _.filter(this.datasourceSrv.getMetricSources(), datasource => {
return datasource.meta.id === ZABBIX_DS_ID && datasource.value;
});
}
onInitEditMode() {
this.addEditorTab('Triggers', triggerPanelTriggersTab, 1);
this.addEditorTab('Options', triggerPanelOptionsTab, 2);
}
setTimeQueryStart() {
this.timing.queryStart = new Date().getTime();
}
setTimeQueryEnd() {
this.timing.queryEnd = new Date().getTime();
}
onRefresh() {
// ignore fetching data if another panel is in fullscreen
if (this.otherPanelInFullscreenMode()) { return; }
// clear loading/error state
delete this.error;
this.loading = true;
this.setTimeQueryStart();
return this.getTriggers()
.then(triggerList => {
// Notify panel that request is finished
this.loading = false;
this.setTimeQueryEnd();
// Limit triggers number
this.triggerList = triggerList.slice(0, this.panel.limit);
this.getCurrentTriggersPage();
this.render(this.triggerList);
})
.catch(err => {
// if cancelled keep loading set to true
if (err.cancelled) {
console.log('Panel request cancelled', err);
return;
}
this.loading = false;
this.error = err.message || "Request Error";
if (err.data) {
if (err.data.message) {
this.error = err.data.message;
}
if (err.data.error) {
this.error = err.data.error;
}
}
this.events.emit('data-error', err);
console.log('Panel data error:', err);
});
}
getTriggers() {
let promises = _.map(this.panel.datasources, (ds) => {
return this.datasourceSrv.get(ds)
.then(datasource => {
var zabbix = datasource.zabbix;
var showEvents = this.panel.showEvents.value;
var triggerFilter = this.panel.targets[ds];
var hideHostsInMaintenance = this.panel.hideHostsInMaintenance;
// Replace template variables
var groupFilter = datasource.replaceTemplateVars(triggerFilter.group.filter);
var hostFilter = datasource.replaceTemplateVars(triggerFilter.host.filter);
var appFilter = datasource.replaceTemplateVars(triggerFilter.application.filter);
let triggersOptions = {
showTriggers: showEvents,
hideHostsInMaintenance: hideHostsInMaintenance
};
return zabbix.getTriggers(groupFilter, hostFilter, appFilter, triggersOptions);
}).then((triggers) => {
return this.getAcknowledges(triggers, ds);
}).then((triggers) => {
return this.filterTriggers(triggers, ds);
});
});
return Promise.all(promises)
.then(results => _.flatten(results))
.then((triggers) => {
return this.sortTriggers(triggers);
})
.then(triggers => {
return _.map(triggers, this.formatTrigger.bind(this));
});
}
getAcknowledges(triggerList, ds) {
// Request acknowledges for trigger
var eventids = _.map(triggerList, trigger => {
return trigger.lastEvent.eventid;
});
return this.datasources[ds].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 => {
let timestamp = moment.unix(ack.clock);
if (this.panel.customLastChangeFormat) {
ack.time = timestamp.format(this.panel.lastChangeFormat);
} else {
ack.time = timestamp.format(this.defaultTimeFormat);
}
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
return ack;
});
// Mark acknowledged triggers with different color
if (this.panel.markAckEvents && trigger.acknowledges.length) {
trigger.color = this.panel.ackEventColor;
}
}
});
return triggerList;
});
}
filterTriggers(triggerList, ds) {
// Filter triggers by description
var triggerFilter = this.panel.targets[ds].trigger.filter;
triggerFilter = this.datasources[ds].replaceTemplateVars(triggerFilter);
if (triggerFilter) {
triggerList = filterTriggers(triggerList, triggerFilter);
}
// Filter acknowledged triggers
if (this.panel.showTriggers === 'unacknowledged') {
triggerList = _.filter(triggerList, trigger => {
return !trigger.acknowledges;
});
} else if (this.panel.showTriggers === 'acknowledged') {
triggerList = _.filter(triggerList, 'acknowledges');
} else {
triggerList = triggerList;
}
// Filter triggers by severity
triggerList = _.filter(triggerList, trigger => {
return this.panel.triggerSeverity[trigger.priority].show;
});
return triggerList;
}
sortTriggers(triggerList) {
if (this.panel.sortTriggersBy.value === 'priority') {
triggerList = _.sortBy(triggerList, 'priority').reverse();
} else {
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
}
return triggerList;
}
formatTrigger(trigger) {
let triggerObj = trigger;
// Format last change and age
trigger.lastchangeUnix = Number(trigger.lastchange);
let timestamp = moment.unix(trigger.lastchangeUnix);
if (this.panel.customLastChangeFormat) {
// User defined format
triggerObj.lastchange = timestamp.format(this.panel.lastChangeFormat);
} else {
triggerObj.lastchange = timestamp.format(this.defaultTimeFormat);
}
triggerObj.age = timestamp.fromNow(true);
// Set host that the trigger belongs
if (trigger.hosts.length) {
triggerObj.host = trigger.hosts[0].name;
triggerObj.hostTechName = trigger.hosts[0].host;
}
// Set color
if (trigger.value === '1') {
// Problem state
triggerObj.color = this.panel.triggerSeverity[trigger.priority].color;
} else {
// OK state
triggerObj.color = this.panel.okEventColor;
}
triggerObj.severity = this.panel.triggerSeverity[trigger.priority].severity;
return triggerObj;
}
switchComment(trigger) {
trigger.showComment = !trigger.showComment;
}
acknowledgeTrigger(trigger, message) {
let eventid = trigger.lastEvent.eventid;
let grafana_user = this.contextSrv.user.name;
let ack_message = grafana_user + ' (Grafana): ' + message;
return this.datasourceSrv.get(this.panel.datasource)
.then(datasource => {
let zabbixAPI = datasource.zabbix.zabbixAPI;
return zabbixAPI.acknowledgeEvent(eventid, ack_message);
})
.then(this.onRefresh.bind(this));
}
getCurrentTriggersPage() {
let pageSize = this.panel.pageSize || 10;
let startPos = this.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, this.triggerList.length);
this.currentTriggersPage = this.triggerList.slice(startPos, endPos);
return this.currentTriggersPage;
}
link(scope, elem, attrs, ctrl) {
var data;
var panel = ctrl.panel;
var pageCount = 0;
data = ctrl.triggerList;
function getTableHeight() {
var panelHeight = ctrl.height;
if (pageCount > 1) {
panelHeight -= 26;
}
return (panelHeight - 31) + 'px';
}
function switchPage(e) {
let el = $(e.currentTarget);
ctrl.pageIndex = (parseInt(el.text(), 10)-1);
let pageSize = ctrl.panel.pageSize || 10;
let startPos = ctrl.pageIndex * pageSize;
let endPos = Math.min(startPos + pageSize, ctrl.triggerList.length);
ctrl.currentTriggersPage = ctrl.triggerList.slice(startPos, endPos);
scope.$apply(() => {
renderPanel();
});
}
function appendPaginationControls(footerElem) {
footerElem.empty();
var pageSize = ctrl.panel.pageSize || 5;
pageCount = Math.ceil(data.length / pageSize);
if (pageCount === 1) {
return;
}
var startPage = Math.max(ctrl.pageIndex - 3, 0);
var endPage = Math.min(pageCount, startPage + 9);
var paginationList = $('<ul></ul>');
for (var i = startPage; i < endPage; i++) {
var activeClass = i === ctrl.pageIndex ? 'active' : '';
var pageLinkElem = $('<li><a class="triggers-panel-page-link pointer ' + activeClass + '">' + (i+1) + '</a></li>');
paginationList.append(pageLinkElem);
}
footerElem.append(paginationList);
}
function renderPanel() {
var panelElem = elem.parents('.panel');
var rootElem = elem.find('.triggers-panel-scroll');
var footerElem = elem.find('.triggers-panel-footer');
elem.css({'font-size': panel.fontSize});
panelElem.addClass('triggers-panel-wrapper');
appendPaginationControls(footerElem);
rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' });
ctrl.renderingCompleted();
}
elem.on('click', '.triggers-panel-page-link', switchPage);
var unbindDestroy = scope.$on('$destroy', function() {
elem.off('click', '.triggers-panel-page-link');
unbindDestroy();
});
ctrl.events.on('render', (renderData) => {
data = renderData || data;
if (data) {
scope.$apply(() => {
renderPanel();
});
}
});
}
}
TriggerPanelCtrl.templateUrl = 'panel-triggers/module.html';
function filterTriggers(triggers, triggerFilter) {
if (utils.isRegex(triggerFilter)) {
return _.filter(triggers, function(trigger) {
return utils.buildRegex(triggerFilter).test(trigger.description);
});
} else {
return _.filter(triggers, function(trigger) {
return trigger.description === triggerFilter;
});
}
}

110
src/panel-triggers/triggers_tab.js Normal file
View File

@@ -0,0 +1,110 @@
import _ from 'lodash';
import * as utils from '../datasource-zabbix/utils';
import './datasource-selector.directive';
import '../datasource-zabbix/css/query-editor.css!';
import {DEFAULT_TARGET} from './triggers_panel_ctrl';
class TriggersTabCtrl {
/** @ngInject */
constructor($scope, $rootScope, uiSegmentSrv, templateSrv) {
$scope.editor = this;
this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel;
this.templateSrv = templateSrv;
this.datasources = this.panelCtrl.datasources;
// Load scope defaults
var scopeDefaults = {
getGroupNames: {},
getHostNames: {},
getApplicationNames: {},
oldTarget: _.cloneDeep(this.panel.targets)
};
_.defaultsDeep(this, scopeDefaults);
this.initDatasources();
this.panelCtrl.refresh();
}
initDatasources() {
return this.panelCtrl.initDatasources()
.then((datasources) => {
_.each(datasources, (datasource) => {
this.bindSuggestionFunctions(datasource);
});
});
}
bindSuggestionFunctions(datasource) {
// Map functions for bs-typeahead
let ds = datasource.name;
this.getGroupNames[ds] = _.bind(this.suggestGroups, this, datasource);
this.getHostNames[ds] = _.bind(this.suggestHosts, this, datasource);
this.getApplicationNames[ds] = _.bind(this.suggestApps, this, datasource);
}
suggestGroups(datasource, query, callback) {
return datasource.zabbix.getAllGroups()
.then(groups => {
return _.map(groups, 'name');
})
.then(callback);
}
suggestHosts(datasource, query, callback) {
let groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
return datasource.zabbix.getAllHosts(groupFilter)
.then(hosts => {
return _.map(hosts, 'name');
})
.then(callback);
}
suggestApps(datasource, query, callback) {
let groupFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].group.filter);
let hostFilter = datasource.replaceTemplateVars(this.panel.targets[datasource.name].host.filter);
return datasource.zabbix.getAllApps(groupFilter, hostFilter)
.then(apps => {
return _.map(apps, 'name');
})
.then(callback);
}
datasourcesChanged() {
_.each(this.panel.datasources, (ds) => {
if (!this.panel.targets[ds]) {
this.panel.targets[ds] = DEFAULT_TARGET;
}
});
this.parseTarget();
}
parseTarget() {
this.initDatasources()
.then(() => {
var newTarget = _.cloneDeep(this.panel.targets);
if (!_.isEqual(this.oldTarget, newTarget)) {
this.oldTarget = newTarget;
}
this.panelCtrl.refresh();
});
}
isRegex(str) {
return utils.isRegex(str);
}
isVariable(str) {
return utils.isTemplateVariable(str, this.templateSrv.variables);
}
}
export function triggerPanelTriggersTab() {
return {
restrict: 'E',
scope: true,
templateUrl: 'public/plugins/alexanderzobnin-zabbix-app/panel-triggers/partials/triggers_tab.html',
controller: TriggersTabCtrl,
};
}

8
src/test-setup/jest-setup.js
View File

@@ -2,6 +2,8 @@
/* globals global: false */
import {JSDOM} from 'jsdom';
import System from 'systemjs';
import {PanelCtrl} from './panelStub';
// Mock Grafana modules that are not available outside of the core project
// Required for loading module.js
@@ -17,9 +19,12 @@ jest.mock('angular', () => {
};
}, {virtual: true});
let mockPanelCtrl = PanelCtrl;
jest.mock('app/plugins/sdk', () => {
return {
QueryCtrl: null
QueryCtrl: null,
loadPluginCss: () => {},
PanelCtrl: mockPanelCtrl
};
}, {virtual: true});
@@ -48,3 +53,4 @@ let dom = new JSDOM('<html><head><script></script></head><body></body></html>');
global.window = dom.window;
global.document = global.window.document;
global.Node = window.Node;
global.System = System;

97
src/test-setup/panelStub.js Normal file
View File

@@ -0,0 +1,97 @@
// JSHint options
/* jshint ignore:start */
export class PanelCtrl {
constructor($scope, $injector) {
this.$injector = $injector;
this.$scope = $scope;
this.panel = $scope.panel;
this.events = {
on: () => {}
};
}
init() {
}
renderingCompleted() {
}
refresh() {
}
publishAppEvent(evtName, evt) {
}
changeView(fullscreen, edit) {
}
viewPanel() {
this.changeView(true, false);
}
editPanel() {
this.changeView(true, true);
}
exitFullscreen() {
this.changeView(false, false);
}
initEditMode() {
}
changeTab(newIndex) {
}
addEditorTab(title, directiveFn, index) {
}
getMenu() {
return [];
}
getExtendedMenu() {
return [];
}
otherPanelInFullscreenMode() {
return false;
}
calculatePanelHeight() {
}
render(payload) {
}
toggleEditorHelp(index) {
}
duplicate() {
}
updateColumnSpan(span) {
}
removePanel() {
}
editPanelJson() {
}
replacePanel(newPanel, oldPanel) {
}
sharePanel() {
}
getInfoMode() {
}
getInfoContent(options) {
}
openInspector() {
}
}