Initial ES6 migration. module.js and datasource.js are migrated to ES6.
This commit is contained in:
Alexander Zobnin
288
src/panel-triggers/editor.html
Normal file
288
src/panel-triggers/editor.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<div class="editor-row">
|
||||
<div class="section tight-form-container" style="margin-bottom: 20px">
|
||||
<h5>Select triggers</h5>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 80px">
|
||||
Group
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="editor.panel.triggers.group.filter"
|
||||
bs-typeahead="editor.getGroupNames"
|
||||
ng-change="editor.onTargetPartChange(editor.panel.triggers.group)"
|
||||
ng-blur="editor.parseTarget()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-large tight-form-input"
|
||||
ng-style="editor.panel.triggers.group.style">
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 50px">
|
||||
Host
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="editor.panel.triggers.host.filter"
|
||||
bs-typeahead="editor.getHostNames"
|
||||
ng-change="editor.onTargetPartChange(editor.panel.triggers.host)"
|
||||
ng-blur="editor.parseTarget()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-large tight-form-input last"
|
||||
ng-style="editor.panel.triggers.host.style">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 80px">
|
||||
Application
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="editor.panel.triggers.application.filter"
|
||||
bs-typeahead="editor.getApplicationNames"
|
||||
ng-change="editor.onTargetPartChange(editor.panel.triggers.application)"
|
||||
ng-blur="editor.parseTarget()"
|
||||
data-min-length=0
|
||||
data-items=100
|
||||
class="input-large tight-form-input"
|
||||
ng-style="editor.panel.triggers.application.style">
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 50px">
|
||||
Trigger
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="editor.panel.triggers.trigger.filter"
|
||||
ng-change="editor.onTargetPartChange(editor.panel.triggers.trigger)"
|
||||
ng-blur="editor.parseTarget()"
|
||||
placeholder="trigger name"
|
||||
class="input-large tight-form-input last"
|
||||
ng-style="editor.panel.triggers.trigger.style"
|
||||
empty-to-null>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5>Data source</h5>
|
||||
<div class="section tight-form-container" style="margin-bottom: 20px">
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li>
|
||||
<select class="tight-form-input input-large last"
|
||||
ng-model="editor.panel.datasource"
|
||||
ng-options="ds for ds in editor.datasources"
|
||||
ng-change="editor.datasourceChanged()">
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Options</h5>
|
||||
<div class="tight-form-container" style="margin-bottom: 20px">
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 100px">
|
||||
<strong>Acknowledged</strong>
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-medium tight-form-input"
|
||||
ng-model="editor.panel.showTriggers"
|
||||
ng-options="f for f in editor.ackFilters"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</select>
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 13em">
|
||||
<strong>Limit triggers number to</strong>
|
||||
</li>
|
||||
<li>
|
||||
<input class="input-small tight-form-input"
|
||||
type="number"
|
||||
ng-model="editor.panel.limit"
|
||||
ng-model-onblur
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 100px">
|
||||
<strong>Sort by</strong>
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-medium tight-form-input"
|
||||
ng-model="editor.panel.sortTriggersBy"
|
||||
ng-options="f.text for f in editor.sortByFields track by f.value"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</select>
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 13em">
|
||||
<strong>Show events</strong>
|
||||
</li>
|
||||
<li>
|
||||
<select class="tight-form-input input-medium"
|
||||
ng-model="editor.panel.showEvents"
|
||||
ng-options="f.text for f in editor.showEventsFields track by f.value"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 100px">
|
||||
<strong>Show fields</strong>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="hostField">Host</label>
|
||||
<input class="cr1"
|
||||
id="hostField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.hostField"
|
||||
ng-checked="editor.panel.hostField">
|
||||
<label for="hostField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="statusField">Status</label>
|
||||
<input class="cr1"
|
||||
id="statusField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.statusField"
|
||||
ng-checked="editor.panel.statusField">
|
||||
<label for="statusField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="severityField">Severity</label>
|
||||
<input class="cr1"
|
||||
id="severityField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.severityField"
|
||||
ng-checked="editor.panel.severityField">
|
||||
<label for="severityField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="lastChangeField">Last change</label>
|
||||
<input class="cr1"
|
||||
id="lastChangeField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.lastChangeField"
|
||||
ng-checked="editor.panel.lastChangeField">
|
||||
<label for="lastChangeField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="ageField">Age</label>
|
||||
<input class="cr1"
|
||||
id="ageField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.ageField"
|
||||
ng-checked="editor.panel.ageField">
|
||||
<label for="ageField" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item last">
|
||||
<label class="checkbox-label" for="infoField">Info</label>
|
||||
<input class="cr1"
|
||||
id="infoField"
|
||||
type="checkbox"
|
||||
ng-model="editor.panel.infoField"
|
||||
ng-checked="editor.panel.infoField">
|
||||
<label for="infoField" class="cr1"></label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<strong>Custom Last change format</strong>
|
||||
<label class="checkbox-label" for="customLastChangeFormat"> </label>
|
||||
<input class="cr1"
|
||||
id="customLastChangeFormat"
|
||||
type="checkbox"
|
||||
ng-change="editor.panelCtrl.refreshData()"
|
||||
ng-model="editor.panel.customLastChangeFormat"
|
||||
ng-checked="editor.panel.customLastChangeFormat">
|
||||
<label for="customLastChangeFormat" class="cr1"></label>
|
||||
</li>
|
||||
<li ng-if="editor.panel.customLastChangeFormat">
|
||||
<input type="text"
|
||||
ng-model="editor.panel.lastChangeFormat"
|
||||
ng-blur="editor.panelCtrl.refreshData()"
|
||||
placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
|
||||
class="tight-form-input"
|
||||
style="width: 300px"
|
||||
empty-to-null>
|
||||
</li>
|
||||
<li class="tight-form-item last" ng-if="editor.panel.customLastChangeFormat">
|
||||
<a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
|
||||
<i class="fa fa-question-circle"
|
||||
bs-tooltip="'See moment.js dosc for time format.'">
|
||||
</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5>Customize triggers severity and colors</h5>
|
||||
<div class="tight-form" ng-repeat="trigger in editor.panel.triggerSeverity">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 10px">
|
||||
{{ trigger.priority }}
|
||||
</li>
|
||||
<li>
|
||||
<input class="tight-form-input input-medium"
|
||||
type="text"
|
||||
empty-to-null
|
||||
ng-model="trigger.severity"
|
||||
style="color: white"
|
||||
ng-style="{background: trigger.color}"
|
||||
ng-model-onblur
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="trigger.color" ng-change="editor.panelCtrl.refreshData()"></spectrum-picker>
|
||||
</li>
|
||||
<li class="tight-form-item last" style="width: 28px">
|
||||
<label class="checkbox-label" for="{{ 'trigger-show-' + $index }}"></label>
|
||||
<input class="cr1"
|
||||
ng-attr-id="{{ 'trigger-show-' + $index }}"
|
||||
type="checkbox"
|
||||
ng-model="trigger.show"
|
||||
ng-checked="trigger.show"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
<label for="{{ 'trigger-show-' + $index }}" class="cr1"></label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item"
|
||||
ng-style="{background:editor.panel.okEventColor}"
|
||||
style="width: 160px; color: white">
|
||||
<span style="padding-left: 25px"> OK event color </span>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker
|
||||
ng-model="editor.panel.okEventColor"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</spectrum-picker>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
205
src/panel-triggers/editor.js
Normal file
205
src/panel-triggers/editor.js
Normal file
@@ -0,0 +1,205 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
define([
|
||||
'angular',
|
||||
'lodash',
|
||||
'jquery'
|
||||
],
|
||||
function (angular, _, $) {
|
||||
'use strict';
|
||||
|
||||
function TriggerPanelEditorCtrl($scope, $q, 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, 'filteredHosts');
|
||||
this.getApplicationNames = _.partial(getMetricNames, this, 'filteredApplications');
|
||||
this.getItemNames = _.partial(getMetricNames, this, 'filteredItems');
|
||||
|
||||
this.ackFilters = [
|
||||
'all triggers',
|
||||
'unacknowledged',
|
||||
'acknowledged'
|
||||
];
|
||||
|
||||
this.sortByFields = [
|
||||
{ text: 'last change', value: 'lastchange' },
|
||||
{ text: 'severity', value: 'priority' }
|
||||
];
|
||||
|
||||
this.showEventsFields = [
|
||||
{ text: 'all events', value: [0,1] },
|
||||
{ text: 'Ok events', value: 0 },
|
||||
{ text: 'Problem events', value: 1 }
|
||||
];
|
||||
|
||||
// Load scope defaults
|
||||
var scopeDefaults = {
|
||||
metric: {},
|
||||
inputStyles: {},
|
||||
oldTarget: _.cloneDeep(this.panel.triggers),
|
||||
defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
|
||||
};
|
||||
_.defaults(this, scopeDefaults);
|
||||
|
||||
var self = this;
|
||||
|
||||
// Get zabbix data sources
|
||||
var datasources = _.filter(this.datasourceSrv.getMetricSources(), function(datasource) {
|
||||
return datasource.meta.id === 'zabbix';
|
||||
});
|
||||
this.datasources = _.map(datasources, 'name');
|
||||
|
||||
// Set default datasource
|
||||
if (!this.panel.datasource) {
|
||||
this.panel.datasource = this.datasources[0];
|
||||
}
|
||||
// Load datasource
|
||||
this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
|
||||
self.datasource = datasource;
|
||||
self.initFilters();
|
||||
self.panelCtrl.refreshData();
|
||||
});
|
||||
}
|
||||
|
||||
var p = TriggerPanelEditorCtrl.prototype;
|
||||
|
||||
// Get list of metric names for bs-typeahead directive
|
||||
function getMetricNames(scope, metricList) {
|
||||
return _.uniq(_.map(scope.metric[metricList], 'name'));
|
||||
}
|
||||
|
||||
p.initFilters = function () {
|
||||
this.filterGroups();
|
||||
this.filterHosts();
|
||||
this.filterApplications();
|
||||
};
|
||||
|
||||
p.filterGroups = function() {
|
||||
var self = this;
|
||||
this.datasource.queryProcessor.filterGroups().then(function(groups) {
|
||||
self.metric.groupList = groups;
|
||||
});
|
||||
};
|
||||
|
||||
p.filterHosts = function() {
|
||||
var self = this;
|
||||
var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
|
||||
this.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
|
||||
self.metric.filteredHosts = hosts;
|
||||
});
|
||||
};
|
||||
|
||||
p.filterApplications = function() {
|
||||
var self = this;
|
||||
var groupFilter = this.templateSrv.replace(this.panel.triggers.group.filter);
|
||||
var hostFilter = this.templateSrv.replace(this.panel.triggers.host.filter);
|
||||
this.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
|
||||
.then(function(apps) {
|
||||
self.metric.filteredApplications = apps;
|
||||
});
|
||||
};
|
||||
|
||||
p.onTargetPartChange = function(targetPart) {
|
||||
var regexStyle = {'color': '#CCA300'};
|
||||
targetPart.isRegex = isRegex(targetPart.filter);
|
||||
targetPart.style = targetPart.isRegex ? regexStyle : {};
|
||||
};
|
||||
|
||||
function isRegex(str) {
|
||||
// Pattern for testing regex
|
||||
var regexPattern = /^\/(.*)\/([gmi]*)$/m;
|
||||
return regexPattern.test(str);
|
||||
}
|
||||
|
||||
p.parseTarget = function() {
|
||||
this.initFilters();
|
||||
var newTarget = _.cloneDeep(this.panel.triggers);
|
||||
if (!_.isEqual(this.oldTarget, this.panel.triggers)) {
|
||||
this.oldTarget = newTarget;
|
||||
this.panelCtrl.refreshData();
|
||||
}
|
||||
};
|
||||
|
||||
p.refreshTriggerSeverity = function() {
|
||||
_.each(this.triggerList, function(trigger) {
|
||||
trigger.color = this.panel.triggerSeverity[trigger.priority].color;
|
||||
trigger.severity = this.panel.triggerSeverity[trigger.priority].severity;
|
||||
});
|
||||
this.panelCtrl.refreshData();
|
||||
};
|
||||
|
||||
p.datasourceChanged = function() {
|
||||
this.panelCtrl.refreshData();
|
||||
};
|
||||
|
||||
p.changeTriggerSeverityColor = function(trigger, color) {
|
||||
this.panel.triggerSeverity[trigger.priority].color = color;
|
||||
this.refreshTriggerSeverity();
|
||||
};
|
||||
|
||||
function getTriggerIndexForElement(el) {
|
||||
return el.parents('[data-trigger-index]').data('trigger-index');
|
||||
}
|
||||
|
||||
p.openTriggerColorSelector = function(event) {
|
||||
var el = $(event.currentTarget);
|
||||
var index = getTriggerIndexForElement(el);
|
||||
var popoverScope = this.$new();
|
||||
popoverScope.trigger = this.panel.triggerSeverity[index];
|
||||
popoverScope.changeTriggerSeverityColor = this.changeTriggerSeverityColor;
|
||||
|
||||
this.popoverSrv.show({
|
||||
element: el,
|
||||
placement: 'top',
|
||||
templateUrl: 'public/plugins/triggers/trigger.colorpicker.html',
|
||||
scope: popoverScope
|
||||
});
|
||||
};
|
||||
|
||||
p.openOkEventColorSelector = function(event) {
|
||||
var el = $(event.currentTarget);
|
||||
var popoverScope = this.$new();
|
||||
popoverScope.trigger = {color: this.panel.okEventColor};
|
||||
popoverScope.changeTriggerSeverityColor = function(trigger, color) {
|
||||
this.panel.okEventColor = color;
|
||||
this.refreshTriggerSeverity();
|
||||
};
|
||||
|
||||
this.popoverSrv.show({
|
||||
element: el,
|
||||
placement: 'top',
|
||||
templateUrl: 'public/plugins/triggers/trigger.colorpicker.html',
|
||||
scope: popoverScope
|
||||
});
|
||||
};
|
||||
|
||||
var triggerPanelEditor = function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: true,
|
||||
templateUrl: 'public/plugins/triggers/editor.html',
|
||||
controller: TriggerPanelEditorCtrl,
|
||||
};
|
||||
};
|
||||
|
||||
return triggerPanelEditor;
|
||||
});
|
||||
136
src/panel-triggers/module.html
Normal file
136
src/panel-triggers/module.html
Normal file
@@ -0,0 +1,136 @@
|
||||
<div class="table-panel-container">
|
||||
<div class="table-panel-header-bg"></div>
|
||||
<div class="table-panel-scroll">
|
||||
<table class="table-panel-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th ng-if="ctrl.panel.hostField" style="width: 15%">
|
||||
<div class="table-panel-table-header-inner pointer">
|
||||
Host
|
||||
</div>
|
||||
</th>
|
||||
<th ng-if="ctrl.panel.statusField" style="width: 85px">
|
||||
<div class="table-panel-table-header-inner pointer">Status</div>
|
||||
</th>
|
||||
<th ng-if="ctrl.panel.severityField" style="width: 120px">
|
||||
<div class="table-panel-table-header-inner pointer">Severity</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="table-panel-table-header-inner pointer">Issue</div>
|
||||
</th>
|
||||
<th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
|
||||
<div class="table-panel-table-header-inner pointer">Last change</div>
|
||||
</th>
|
||||
<th ng-if="ctrl.panel.ageField" style="width: 180px">
|
||||
<div class="table-panel-table-header-inner pointer">Age</div>
|
||||
</th>
|
||||
<th ng-if="ctrl.panel.infoField" style="width: 100px">
|
||||
<div class="table-panel-table-header-inner pointer">Info</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="trigger in ctrl.triggerList">
|
||||
<td ng-if="ctrl.panel.hostField">
|
||||
<div>
|
||||
<span><strong>{{trigger.host}}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="ctrl.panel.statusField" style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{ctrl.triggerStatusMap[trigger.value]}}
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="ctrl.panel.severityField" style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{trigger.severity}}
|
||||
</div>
|
||||
</td>
|
||||
<td style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{trigger.description}}
|
||||
<a ng-if="trigger.comments"
|
||||
class="pointer"
|
||||
style="float: right; padding-right: 8px"
|
||||
data-toggle="collapse"
|
||||
data-target="#comments-{{trigger.triggerid}}"
|
||||
bs-tooltip="'Show additional trigger description'"
|
||||
data-placement="top">
|
||||
<i class="fa fa-file-text-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Trigger comments -->
|
||||
<div class="collapse"
|
||||
id="comments-{{trigger.triggerid}}"
|
||||
ng-if="trigger.comments">
|
||||
<div>
|
||||
<small>{{trigger.comments}}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trigger acknowledges -->
|
||||
<div class="collapse"
|
||||
id="acknowledges-{{trigger.triggerid}}"
|
||||
ng-if="trigger.acknowledges">
|
||||
<div style="padding-top: 12px;">
|
||||
<table class="table table-condensed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><small>Time</small></th>
|
||||
<th><small>User</small></th>
|
||||
<th><small>Comments</small></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="ack in trigger.acknowledges">
|
||||
<td>
|
||||
<small>{{ack.time}}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small>{{ack.user}}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small>{{ack.message}}</small>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="ctrl.panel.lastChangeField">
|
||||
{{trigger.lastchange}}
|
||||
</td>
|
||||
<td ng-if="ctrl.panel.ageField">
|
||||
{{trigger.age}}
|
||||
</td>
|
||||
<td ng-if="ctrl.panel.infoField">
|
||||
|
||||
<!-- Trigger Url -->
|
||||
<a ng-if="trigger.url"
|
||||
href="{{trigger.url}}"
|
||||
target="_blank">
|
||||
<i class="fa fa-external-link"></i>
|
||||
</a>
|
||||
|
||||
<!-- Trigger state -->
|
||||
<span ng-if="trigger.state === '1'"
|
||||
bs-tooltip="'{{trigger.error}}'">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
|
||||
<!-- Trigger acknowledges -->
|
||||
<a ng-if="trigger.acknowledges"
|
||||
bs-tooltip="'Acknowledges ({{trigger.acknowledges.length}})'"
|
||||
data-toggle="collapse"
|
||||
data-target="#acknowledges-{{trigger.triggerid}}">
|
||||
<i class="fa fa-comments"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-panel-footer"></div>
|
||||
230
src/panel-triggers/module.js
Normal file
230
src/panel-triggers/module.js
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
define([
|
||||
'app/plugins/sdk',
|
||||
'angular',
|
||||
'lodash',
|
||||
'jquery',
|
||||
'moment',
|
||||
'./editor'
|
||||
],
|
||||
function (sdk, angular, _, $, moment, triggerPanelEditor) {
|
||||
'use strict';
|
||||
|
||||
var defaultSeverity = [
|
||||
{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true },
|
||||
{ priority: 1, severity: 'Information', color: '#82B5D8', show: true },
|
||||
{ priority: 2, severity: 'Warning', color: '#E5AC0E', show: true },
|
||||
{ priority: 3, severity: 'Average', color: '#C15C17', show: true },
|
||||
{ priority: 4, severity: 'High', color: '#BF1B00', show: true },
|
||||
{ priority: 5, severity: 'Disaster', color: '#890F02', show: true }
|
||||
];
|
||||
|
||||
var panelDefaults = {
|
||||
datasource: null,
|
||||
triggers: {
|
||||
group: {filter: ""},
|
||||
host: {filter: ""},
|
||||
application: {filter: ""},
|
||||
trigger: {filter: ""}
|
||||
},
|
||||
hostField: true,
|
||||
statusField: false,
|
||||
severityField: false,
|
||||
lastChangeField: true,
|
||||
ageField: true,
|
||||
infoField: true,
|
||||
limit: 10,
|
||||
showTriggers: 'all triggers',
|
||||
sortTriggersBy: { text: 'last change', value: 'lastchange' },
|
||||
showEvents: { text: 'Problem events', value: '1' },
|
||||
triggerSeverity: defaultSeverity,
|
||||
okEventColor: '#890F02',
|
||||
};
|
||||
|
||||
var triggerStatusMap = {
|
||||
'0': 'OK',
|
||||
'1': 'Problem'
|
||||
};
|
||||
|
||||
var TriggerPanelCtrl = (function(_super) {
|
||||
|
||||
/** @ngInject */
|
||||
function TriggerPanelCtrl($scope, $injector, $q, $element, datasourceSrv) {
|
||||
_super.call(this, $scope, $injector);
|
||||
this.datasourceSrv = datasourceSrv;
|
||||
this.triggerStatusMap = triggerStatusMap;
|
||||
|
||||
// Load panel defaults
|
||||
_.defaults(this.panel, panelDefaults);
|
||||
|
||||
this.triggerList = [];
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
TriggerPanelCtrl.templateUrl = 'module.html';
|
||||
|
||||
TriggerPanelCtrl.prototype = Object.create(_super.prototype);
|
||||
TriggerPanelCtrl.prototype.constructor = TriggerPanelCtrl;
|
||||
|
||||
// Add panel editor
|
||||
TriggerPanelCtrl.prototype.initEditMode = function() {
|
||||
_super.prototype.initEditMode();
|
||||
this.icon = "fa fa-lightbulb-o";
|
||||
this.addEditorTab('Options', triggerPanelEditor, 2);
|
||||
};
|
||||
|
||||
TriggerPanelCtrl.prototype.refreshData = function() {
|
||||
var self = this;
|
||||
|
||||
// Load datasource
|
||||
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
|
||||
var zabbix = datasource.zabbixAPI;
|
||||
var queryProcessor = datasource.queryProcessor;
|
||||
var triggerFilter = self.panel.triggers;
|
||||
var showEvents = self.panel.showEvents.value;
|
||||
var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
|
||||
triggerFilter.host.filter,
|
||||
triggerFilter.application.filter);
|
||||
return buildQuery.then(function(query) {
|
||||
return zabbix.getTriggers(query.groupids,
|
||||
query.hostids,
|
||||
query.applicationids,
|
||||
showEvents)
|
||||
.then(function(triggers) {
|
||||
return _.map(triggers, function (trigger) {
|
||||
var triggerObj = trigger;
|
||||
|
||||
// Format last change and age
|
||||
trigger.lastchangeUnix = Number(trigger.lastchange);
|
||||
var timestamp = moment.unix(trigger.lastchangeUnix);
|
||||
if (self.panel.customLastChangeFormat) {
|
||||
// User defined format
|
||||
triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
|
||||
} else {
|
||||
triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
|
||||
}
|
||||
triggerObj.age = timestamp.fromNow(true);
|
||||
|
||||
// Set color
|
||||
if (trigger.value === '1') {
|
||||
triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
|
||||
} else {
|
||||
triggerObj.color = self.panel.okEventColor;
|
||||
}
|
||||
|
||||
triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
|
||||
return triggerObj;
|
||||
});
|
||||
})
|
||||
.then(function (triggerList) {
|
||||
|
||||
// Request acknowledges for trigger
|
||||
var eventids = _.map(triggerList, function(trigger) {
|
||||
return trigger.lastEvent.eventid;
|
||||
});
|
||||
|
||||
return zabbix.getAcknowledges(eventids)
|
||||
.then(function (events) {
|
||||
|
||||
// Map events to triggers
|
||||
_.each(triggerList, function(trigger) {
|
||||
var event = _.find(events, function(event) {
|
||||
return event.eventid === trigger.lastEvent.eventid;
|
||||
});
|
||||
|
||||
if (event) {
|
||||
trigger.acknowledges = _.map(event.acknowledges, function (ack) {
|
||||
var time = new Date(+ack.clock * 1000);
|
||||
ack.time = time.toLocaleString();
|
||||
ack.user = ack.alias + ' (' + ack.name + ' ' + ack.surname + ')';
|
||||
return ack;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Filter triggers by description
|
||||
var triggerFilter = self.panel.triggers.trigger.filter;
|
||||
if (triggerFilter) {
|
||||
triggerList = filterTriggers(triggerList, triggerFilter);
|
||||
}
|
||||
|
||||
// Filter acknowledged triggers
|
||||
if (self.panel.showTriggers === 'unacknowledged') {
|
||||
triggerList = _.filter(triggerList, function (trigger) {
|
||||
return !trigger.acknowledges;
|
||||
});
|
||||
} else if (self.panel.showTriggers === 'acknowledged') {
|
||||
triggerList = _.filter(triggerList, 'acknowledges');
|
||||
} else {
|
||||
triggerList = triggerList;
|
||||
}
|
||||
|
||||
// Filter triggers by severity
|
||||
triggerList = _.filter(triggerList, function (trigger) {
|
||||
return self.panel.triggerSeverity[trigger.priority].show;
|
||||
});
|
||||
|
||||
// Sort triggers
|
||||
if (self.panel.sortTriggersBy.value === 'priority') {
|
||||
triggerList = _.sortBy(triggerList, 'priority').reverse();
|
||||
} else {
|
||||
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
|
||||
}
|
||||
|
||||
// Limit triggers number
|
||||
self.triggerList = _.first(triggerList, self.panel.limit);
|
||||
|
||||
self.renderingCompleted();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function filterTriggers(triggers, triggerFilter) {
|
||||
if (isRegex(triggerFilter)) {
|
||||
return _.filter(triggers, function(trigger) {
|
||||
return buildRegex(triggerFilter).test(trigger.description);
|
||||
});
|
||||
} else {
|
||||
return _.filter(triggers, function(trigger) {
|
||||
return trigger.description === triggerFilter;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function isRegex(str) {
|
||||
// Pattern for testing regex
|
||||
var regexPattern = /^\/(.*)\/([gmi]*)$/m;
|
||||
return regexPattern.test(str);
|
||||
}
|
||||
|
||||
function buildRegex(str) {
|
||||
var regexPattern = /^\/(.*)\/([gmi]*)$/m;
|
||||
var matches = str.match(regexPattern);
|
||||
var pattern = matches[1];
|
||||
var flags = matches[2] !== "" ? matches[2] : undefined;
|
||||
return new RegExp(pattern, flags);
|
||||
}
|
||||
|
||||
return TriggerPanelCtrl;
|
||||
|
||||
})(sdk.PanelCtrl);
|
||||
|
||||
return {
|
||||
PanelCtrl: TriggerPanelCtrl
|
||||
};
|
||||
|
||||
});
|
||||
8
src/panel-triggers/plugin.json
Normal file
8
src/panel-triggers/plugin.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"type": "panel",
|
||||
"name": "Zabbix triggers",
|
||||
"id": "triggers",
|
||||
|
||||
"module": "plugins/triggers/module",
|
||||
"staticRoot": "."
|
||||
}
|
||||
13
src/panel-triggers/trigger.colorpicker.html
Normal file
13
src/panel-triggers/trigger.colorpicker.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<div class="graph-legend-popover">
|
||||
<a class="close"
|
||||
href=""
|
||||
ng-click="dismiss();">×</a>
|
||||
|
||||
<div class="editor-row">
|
||||
<i ng-repeat="color in colors" class="pointer"
|
||||
ng-class="{'fa fa-circle-o': color === trigger.color,'fa fa-circle': color !== trigger.color}"
|
||||
ng-style="{color:color}"
|
||||
ng-click="changeTriggerSeverityColor(trigger, color);dismiss();"> </i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user