Iss #152 - fixed trigger panel (used new plugin API).
This commit is contained in:
Alexander Zobnin
@@ -8,28 +8,28 @@
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="panel.triggers.group.filter"
|
||||
bs-typeahead="getGroupNames"
|
||||
ng-change="onTargetPartChange(panel.triggers.group)"
|
||||
ng-blur="parseTarget()"
|
||||
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="panel.triggers.group.style">
|
||||
ng-style="editor.panel.triggers.group.style">
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 50px">
|
||||
Host
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="panel.triggers.host.filter"
|
||||
bs-typeahead="getHostNames"
|
||||
ng-change="onTargetPartChange(panel.triggers.host)"
|
||||
ng-blur="parseTarget()"
|
||||
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="panel.triggers.host.style">
|
||||
ng-style="editor.panel.triggers.host.style">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -41,26 +41,26 @@
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="panel.triggers.application.filter"
|
||||
bs-typeahead="getApplicationNames"
|
||||
ng-change="onTargetPartChange(panel.triggers.application)"
|
||||
ng-blur="parseTarget()"
|
||||
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="panel.triggers.application.style">
|
||||
ng-style="editor.panel.triggers.application.style">
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 50px">
|
||||
Trigger
|
||||
</li>
|
||||
<li>
|
||||
<input type="text"
|
||||
ng-model="panel.triggers.trigger.filter"
|
||||
ng-change="onTargetPartChange(panel.triggers.trigger)"
|
||||
ng-blur="parseTarget()"
|
||||
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="panel.triggers.trigger.style"
|
||||
ng-style="editor.panel.triggers.trigger.style"
|
||||
empty-to-null>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -74,9 +74,9 @@
|
||||
<ul class="tight-form-list">
|
||||
<li>
|
||||
<select class="tight-form-input input-large last"
|
||||
ng-model="panel.datasource"
|
||||
ng-options="ds for ds in datasources"
|
||||
ng-change="datasourceChanged()">
|
||||
ng-model="editor.panel.datasource"
|
||||
ng-options="ds for ds in editor.datasources"
|
||||
ng-change="editor.datasourceChanged()">
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -96,9 +96,9 @@
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-medium tight-form-input"
|
||||
ng-model="panel.showTriggers"
|
||||
ng-options="f for f in ackFilters"
|
||||
ng-change="get_data()">
|
||||
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">
|
||||
@@ -107,9 +107,9 @@
|
||||
<li>
|
||||
<input class="input-small tight-form-input"
|
||||
type="number"
|
||||
ng-model="panel.limit"
|
||||
ng-model="editor.panel.limit"
|
||||
ng-model-onblur
|
||||
ng-change="get_data()">
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -121,9 +121,9 @@
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-medium tight-form-input"
|
||||
ng-model="panel.sortTriggersBy"
|
||||
ng-options="f.text for f in sortByFields track by f.value"
|
||||
ng-change="get_data()">
|
||||
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">
|
||||
@@ -131,9 +131,9 @@
|
||||
</li>
|
||||
<li>
|
||||
<select class="tight-form-input input-medium"
|
||||
ng-model="panel.showEvents"
|
||||
ng-options="f.text for f in showEventsFields track by f.value"
|
||||
ng-change="get_data()">
|
||||
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>
|
||||
@@ -145,58 +145,58 @@
|
||||
<strong>Show fields</strong>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<label class="checkbox-label" for="panel.hostField">Host</label>
|
||||
<label class="checkbox-label" for="hostField">Host</label>
|
||||
<input class="cr1"
|
||||
id="panel.hostField"
|
||||
id="hostField"
|
||||
type="checkbox"
|
||||
ng-model="panel.hostField"
|
||||
ng-checked="panel.hostField">
|
||||
<label for="panel.hostField" class="cr1"></label>
|
||||
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="panel.severityField">Status</label>
|
||||
<label class="checkbox-label" for="statusField">Status</label>
|
||||
<input class="cr1"
|
||||
id="panel.statusField"
|
||||
id="statusField"
|
||||
type="checkbox"
|
||||
ng-model="panel.statusField"
|
||||
ng-checked="panel.statusField">
|
||||
<label for="panel.statusField" class="cr1"></label>
|
||||
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="panel.severityField">Severity</label>
|
||||
<label class="checkbox-label" for="severityField">Severity</label>
|
||||
<input class="cr1"
|
||||
id="panel.severityField"
|
||||
id="severityField"
|
||||
type="checkbox"
|
||||
ng-model="panel.severityField"
|
||||
ng-checked="panel.severityField">
|
||||
<label for="panel.severityField" class="cr1"></label>
|
||||
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="panel.lastChangeField">Last change</label>
|
||||
<label class="checkbox-label" for="lastChangeField">Last change</label>
|
||||
<input class="cr1"
|
||||
id="panel.lastChangeField"
|
||||
id="lastChangeField"
|
||||
type="checkbox"
|
||||
ng-model="panel.lastChangeField"
|
||||
ng-checked="panel.lastChangeField">
|
||||
<label for="panel.lastChangeField" class="cr1"></label>
|
||||
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="panel.ageField">Age</label>
|
||||
<label class="checkbox-label" for="ageField">Age</label>
|
||||
<input class="cr1"
|
||||
id="panel.ageField"
|
||||
id="ageField"
|
||||
type="checkbox"
|
||||
ng-model="panel.ageField"
|
||||
ng-checked="panel.ageField">
|
||||
<label for="panel.ageField" class="cr1"></label>
|
||||
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="panel.infoField">Info</label>
|
||||
<label class="checkbox-label" for="infoField">Info</label>
|
||||
<input class="cr1"
|
||||
id="panel.infoField"
|
||||
id="infoField"
|
||||
type="checkbox"
|
||||
ng-model="panel.infoField"
|
||||
ng-checked="panel.infoField">
|
||||
<label for="panel.infoField" class="cr1"></label>
|
||||
ng-model="editor.panel.infoField"
|
||||
ng-checked="editor.panel.infoField">
|
||||
<label for="infoField" class="cr1"></label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@@ -205,25 +205,25 @@
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item">
|
||||
<strong>Custom Last change format</strong>
|
||||
<label class="checkbox-label" for="panel.customLastChangeFormat"> </label>
|
||||
<label class="checkbox-label" for="customLastChangeFormat"> </label>
|
||||
<input class="cr1"
|
||||
id="panel.customLastChangeFormat"
|
||||
id="customLastChangeFormat"
|
||||
type="checkbox"
|
||||
ng-change="get_data()"
|
||||
ng-model="panel.customLastChangeFormat"
|
||||
ng-checked="panel.customLastChangeFormat">
|
||||
<label for="panel.customLastChangeFormat" class="cr1"></label>
|
||||
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="panel.customLastChangeFormat">
|
||||
<li ng-if="editor.panel.customLastChangeFormat">
|
||||
<input type="text"
|
||||
ng-model="panel.lastChangeFormat"
|
||||
ng-blur="get_data()"
|
||||
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="panel.customLastChangeFormat">
|
||||
<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.'">
|
||||
@@ -237,8 +237,7 @@
|
||||
</div>
|
||||
<div class="section">
|
||||
<h5>Customize triggers severity and colors</h5>
|
||||
<div class="tight-form"
|
||||
ng-repeat="trigger in panel.triggerSeverity">
|
||||
<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 }}
|
||||
@@ -251,10 +250,10 @@
|
||||
style="color: white"
|
||||
ng-style="{background: trigger.color}"
|
||||
ng-model-onblur
|
||||
ng-change="get_data()">
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="trigger.color" ng-change="get_data()"></spectrum-picker>
|
||||
<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>
|
||||
@@ -263,7 +262,7 @@
|
||||
type="checkbox"
|
||||
ng-model="trigger.show"
|
||||
ng-checked="trigger.show"
|
||||
ng-change="get_data()">
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
<label for="{{ 'trigger-show-' + $index }}" class="cr1"></label>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -272,12 +271,15 @@
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item"
|
||||
ng-style="{background:panel.okEventColor}"
|
||||
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="panel.okEventColor" ng-change="get_data()"></spectrum-picker>
|
||||
<spectrum-picker
|
||||
ng-model="editor.panel.okEventColor"
|
||||
ng-change="editor.panelCtrl.refreshData()">
|
||||
</spectrum-picker>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
205
plugins/panel-triggers/editor.js
Normal file
205
plugins/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;
|
||||
});
|
||||
@@ -1,140 +1,136 @@
|
||||
<div class="table-panel-wrapper">
|
||||
<grafana-panel>
|
||||
<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="panel.hostField" style="width: 15%">
|
||||
<div class="table-panel-table-header-inner pointer">
|
||||
Host
|
||||
</div>
|
||||
</th>
|
||||
<th ng-if="panel.statusField" style="width: 85px">
|
||||
<div class="table-panel-table-header-inner pointer">Status</div>
|
||||
</th>
|
||||
<th ng-if="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="panel.lastChangeField" style="width: 220px">
|
||||
<div class="table-panel-table-header-inner pointer">Last change</div>
|
||||
</th>
|
||||
<th ng-if="panel.ageField" style="width: 180px">
|
||||
<div class="table-panel-table-header-inner pointer">Age</div>
|
||||
</th>
|
||||
<th ng-if="panel.infoField" style="width: 100px">
|
||||
<div class="table-panel-table-header-inner pointer">Info</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="trigger in triggerList">
|
||||
<td ng-if="panel.hostField">
|
||||
<div>
|
||||
<span><strong>{{trigger.host}}</strong></span>
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="panel.statusField" style="background-color: {{trigger.color}}; color: white">
|
||||
<div>
|
||||
{{triggerStatusMap[trigger.value]}}
|
||||
</div>
|
||||
</td>
|
||||
<td ng-if="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>
|
||||
<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 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="panel.lastChangeField">
|
||||
{{trigger.lastchange}}
|
||||
</td>
|
||||
<td ng-if="panel.ageField">
|
||||
{{trigger.age}}
|
||||
</td>
|
||||
<td ng-if="panel.infoField">
|
||||
<!-- 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 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 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>
|
||||
</grafana-panel>
|
||||
<!-- 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>
|
||||
|
||||
@@ -12,127 +12,88 @@
|
||||
*/
|
||||
|
||||
define([
|
||||
'app/plugins/sdk',
|
||||
'angular',
|
||||
'app/app',
|
||||
'lodash',
|
||||
'jquery',
|
||||
'moment',
|
||||
'app/core/config',
|
||||
'app/features/panel/panel_meta'
|
||||
'./editor'
|
||||
],
|
||||
function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
function (sdk, angular, _, $, moment, triggerPanelEditor) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.triggers', []);
|
||||
app.useModule(module);
|
||||
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 }
|
||||
];
|
||||
|
||||
/** @ngInject */
|
||||
function TriggerPanelCtrl($q, $scope, $element, datasourceSrv, panelSrv, templateSrv, popoverSrv) {
|
||||
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',
|
||||
};
|
||||
|
||||
$scope.panelMeta = new PanelMeta({
|
||||
panelName: 'Zabbix triggers',
|
||||
editIcon: "fa fa-lightbulb-o",
|
||||
fullscreen: true,
|
||||
});
|
||||
var triggerStatusMap = {
|
||||
'0': 'OK',
|
||||
'1': 'Problem'
|
||||
};
|
||||
|
||||
$scope.panelMeta.addEditorTab('Options', 'public/plugins/triggers/editor.html');
|
||||
var TriggerPanelCtrl = (function(_super) {
|
||||
|
||||
$scope.ackFilters = [
|
||||
'all triggers',
|
||||
'unacknowledged',
|
||||
'acknowledged'
|
||||
];
|
||||
/** @ngInject */
|
||||
function TriggerPanelCtrl($scope, $injector, $q, $element, datasourceSrv) {
|
||||
_super.call(this, $scope, $injector);
|
||||
this.datasourceSrv = datasourceSrv;
|
||||
this.triggerStatusMap = triggerStatusMap;
|
||||
|
||||
$scope.sortByFields = [
|
||||
{ text: 'last change', value: 'lastchange' },
|
||||
{ text: 'severity', value: 'priority' }
|
||||
];
|
||||
// Load panel defaults
|
||||
_.defaults(this.panel, panelDefaults);
|
||||
|
||||
$scope.showEventsFields = [
|
||||
{ text: 'all events', value: [0,1] },
|
||||
{ text: 'Ok events', value: 0 },
|
||||
{ text: 'Problem events', value: 1 }
|
||||
];
|
||||
this.triggerList = [];
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
$scope.triggerStatusMap = {
|
||||
'0': 'OK',
|
||||
'1': 'Problem'
|
||||
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);
|
||||
};
|
||||
|
||||
var grafanaDefaultSeverity = [
|
||||
{ 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: grafanaDefaultSeverity,
|
||||
okEventColor: '#890F02',
|
||||
};
|
||||
|
||||
_.defaults($scope.panel, panelDefaults);
|
||||
$scope.triggerList = [];
|
||||
|
||||
$scope.init = function() {
|
||||
panelSrv.init($scope);
|
||||
if ($scope.isNewPanel()) {
|
||||
$scope.panel.title = "Zabbix Triggers";
|
||||
}
|
||||
|
||||
// Load scope defaults
|
||||
var scopeDefaults = {
|
||||
metric: {},
|
||||
inputStyles: {},
|
||||
oldTarget: _.cloneDeep($scope.panel.triggers),
|
||||
defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
|
||||
};
|
||||
_.defaults($scope, scopeDefaults);
|
||||
|
||||
// Get zabbix data sources
|
||||
var datasources = _.filter(datasourceSrv.getMetricSources(), function(datasource) {
|
||||
return datasource.meta.id === 'zabbix';
|
||||
});
|
||||
$scope.datasources = _.map(datasources, 'name');
|
||||
|
||||
// Set default datasource
|
||||
if (!$scope.panel.datasource) {
|
||||
$scope.panel.datasource = $scope.datasources[0];
|
||||
}
|
||||
// Load datasource
|
||||
datasourceSrv.get($scope.panel.datasource).then(function (datasource) {
|
||||
$scope.datasource = datasource;
|
||||
$scope.initFilters();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.refreshData = function() {
|
||||
TriggerPanelCtrl.prototype.refreshData = function() {
|
||||
var self = this;
|
||||
|
||||
// Load datasource
|
||||
return datasourceSrv.get($scope.panel.datasource).then(function (datasource) {
|
||||
return this.datasourceSrv.get(this.panel.datasource).then(function (datasource) {
|
||||
var zabbix = datasource.zabbixAPI;
|
||||
var queryProcessor = datasource.queryProcessor;
|
||||
var triggerFilter = $scope.panel.triggers;
|
||||
var showEvents = $scope.panel.showEvents.value;
|
||||
var triggerFilter = self.panel.triggers;
|
||||
var showEvents = self.panel.showEvents.value;
|
||||
var buildQuery = queryProcessor.buildTriggerQuery(triggerFilter.group.filter,
|
||||
triggerFilter.host.filter,
|
||||
triggerFilter.application.filter);
|
||||
@@ -148,22 +109,22 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
// Format last change and age
|
||||
trigger.lastchangeUnix = Number(trigger.lastchange);
|
||||
var timestamp = moment.unix(trigger.lastchangeUnix);
|
||||
if ($scope.panel.customLastChangeFormat) {
|
||||
if (self.panel.customLastChangeFormat) {
|
||||
// User defined format
|
||||
triggerObj.lastchange = timestamp.format($scope.panel.lastChangeFormat);
|
||||
triggerObj.lastchange = timestamp.format(self.panel.lastChangeFormat);
|
||||
} else {
|
||||
triggerObj.lastchange = timestamp.format($scope.defaultTimeFormat);
|
||||
triggerObj.lastchange = timestamp.format(self.defaultTimeFormat);
|
||||
}
|
||||
triggerObj.age = timestamp.fromNow(true);
|
||||
|
||||
// Set color
|
||||
if (trigger.value === '1') {
|
||||
triggerObj.color = $scope.panel.triggerSeverity[trigger.priority].color;
|
||||
triggerObj.color = self.panel.triggerSeverity[trigger.priority].color;
|
||||
} else {
|
||||
triggerObj.color = $scope.panel.okEventColor;
|
||||
triggerObj.color = self.panel.okEventColor;
|
||||
}
|
||||
|
||||
triggerObj.severity = $scope.panel.triggerSeverity[trigger.priority].severity;
|
||||
triggerObj.severity = self.panel.triggerSeverity[trigger.priority].severity;
|
||||
return triggerObj;
|
||||
});
|
||||
})
|
||||
@@ -173,6 +134,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
var eventids = _.map(triggerList, function(trigger) {
|
||||
return trigger.lastEvent.eventid;
|
||||
});
|
||||
|
||||
return zabbix.getAcknowledges(eventids)
|
||||
.then(function (events) {
|
||||
|
||||
@@ -193,17 +155,17 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
});
|
||||
|
||||
// Filter triggers by description
|
||||
var triggerFilter = $scope.panel.triggers.trigger.filter;
|
||||
var triggerFilter = self.panel.triggers.trigger.filter;
|
||||
if (triggerFilter) {
|
||||
triggerList = filterTriggers(triggerList, triggerFilter);
|
||||
}
|
||||
|
||||
// Filter acknowledged triggers
|
||||
if ($scope.panel.showTriggers === 'unacknowledged') {
|
||||
if (self.panel.showTriggers === 'unacknowledged') {
|
||||
triggerList = _.filter(triggerList, function (trigger) {
|
||||
return !trigger.acknowledges;
|
||||
});
|
||||
} else if ($scope.panel.showTriggers === 'acknowledged') {
|
||||
} else if (self.panel.showTriggers === 'acknowledged') {
|
||||
triggerList = _.filter(triggerList, 'acknowledges');
|
||||
} else {
|
||||
triggerList = triggerList;
|
||||
@@ -211,65 +173,26 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
|
||||
// Filter triggers by severity
|
||||
triggerList = _.filter(triggerList, function (trigger) {
|
||||
return $scope.panel.triggerSeverity[trigger.priority].show;
|
||||
return self.panel.triggerSeverity[trigger.priority].show;
|
||||
});
|
||||
|
||||
// Sort triggers
|
||||
if ($scope.panel.sortTriggersBy.value === 'priority') {
|
||||
if (self.panel.sortTriggersBy.value === 'priority') {
|
||||
triggerList = _.sortBy(triggerList, 'priority').reverse();
|
||||
} else {
|
||||
triggerList = _.sortBy(triggerList, 'lastchangeUnix').reverse();
|
||||
}
|
||||
|
||||
// Limit triggers number
|
||||
$scope.triggerList = _.first(triggerList, $scope.panel.limit);
|
||||
self.triggerList = _.first(triggerList, self.panel.limit);
|
||||
|
||||
$scope.panelRenderingComplete();
|
||||
self.renderingCompleted();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.initFilters = function () {
|
||||
$scope.filterGroups();
|
||||
$scope.filterHosts();
|
||||
$scope.filterApplications();
|
||||
};
|
||||
|
||||
// Get list of metric names for bs-typeahead directive
|
||||
function getMetricNames(scope, metricList) {
|
||||
return _.uniq(_.map(scope.metric[metricList], 'name'));
|
||||
}
|
||||
|
||||
// Map functions for bs-typeahead
|
||||
$scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
|
||||
$scope.getHostNames = _.partial(getMetricNames, $scope, 'filteredHosts');
|
||||
$scope.getApplicationNames = _.partial(getMetricNames, $scope, 'filteredApplications');
|
||||
$scope.getItemNames = _.partial(getMetricNames, $scope, 'filteredItems');
|
||||
|
||||
$scope.filterGroups = function() {
|
||||
$scope.datasource.queryProcessor.filterGroups().then(function(groups) {
|
||||
$scope.metric.groupList = groups;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.filterHosts = function() {
|
||||
var groupFilter = templateSrv.replace($scope.panel.triggers.group.filter);
|
||||
$scope.datasource.queryProcessor.filterHosts(groupFilter).then(function(hosts) {
|
||||
$scope.metric.filteredHosts = hosts;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.filterApplications = function() {
|
||||
var groupFilter = templateSrv.replace($scope.panel.triggers.group.filter);
|
||||
var hostFilter = templateSrv.replace($scope.panel.triggers.host.filter);
|
||||
$scope.datasource.queryProcessor.filterApplications(groupFilter, hostFilter)
|
||||
.then(function(apps) {
|
||||
$scope.metric.filteredApplications = apps;
|
||||
});
|
||||
};
|
||||
|
||||
function filterTriggers(triggers, triggerFilter) {
|
||||
if (isRegex(triggerFilter)) {
|
||||
return _.filter(triggers, function(trigger) {
|
||||
@@ -282,12 +205,6 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
}
|
||||
}
|
||||
|
||||
$scope.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;
|
||||
@@ -302,106 +219,12 @@ function (angular, app, _, $, moment, config, PanelMeta) {
|
||||
return new RegExp(pattern, flags);
|
||||
}
|
||||
|
||||
$scope.parseTarget = function() {
|
||||
$scope.initFilters();
|
||||
var newTarget = _.cloneDeep($scope.panel.triggers);
|
||||
if (!_.isEqual($scope.oldTarget, $scope.panel.triggers)) {
|
||||
$scope.oldTarget = newTarget;
|
||||
$scope.get_data();
|
||||
}
|
||||
};
|
||||
return TriggerPanelCtrl;
|
||||
|
||||
$scope.refreshTriggerSeverity = function() {
|
||||
_.each($scope.triggerList, function(trigger) {
|
||||
trigger.color = $scope.panel.triggerSeverity[trigger.priority].color;
|
||||
trigger.severity = $scope.panel.triggerSeverity[trigger.priority].severity;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.datasourceChanged = function() {
|
||||
$scope.refreshData();
|
||||
};
|
||||
|
||||
$scope.changeTriggerSeverityColor = function(trigger, color) {
|
||||
$scope.panel.triggerSeverity[trigger.priority].color = color;
|
||||
$scope.refreshTriggerSeverity();
|
||||
};
|
||||
|
||||
function getTriggerIndexForElement(el) {
|
||||
return el.parents('[data-trigger-index]').data('trigger-index');
|
||||
}
|
||||
|
||||
$scope.openTriggerColorSelector = function(event) {
|
||||
var el = $(event.currentTarget);
|
||||
var index = getTriggerIndexForElement(el);
|
||||
var popoverScope = $scope.$new();
|
||||
popoverScope.trigger = $scope.panel.triggerSeverity[index];
|
||||
popoverScope.changeTriggerSeverityColor = $scope.changeTriggerSeverityColor;
|
||||
|
||||
popoverSrv.show({
|
||||
element: el,
|
||||
placement: 'top',
|
||||
templateUrl: 'public/plugins/triggers/trigger.colorpicker.html',
|
||||
scope: popoverScope
|
||||
});
|
||||
};
|
||||
|
||||
$scope.openOkEventColorSelector = function(event) {
|
||||
var el = $(event.currentTarget);
|
||||
var popoverScope = $scope.$new();
|
||||
popoverScope.trigger = {color: $scope.panel.okEventColor};
|
||||
popoverScope.changeTriggerSeverityColor = function(trigger, color) {
|
||||
$scope.panel.okEventColor = color;
|
||||
$scope.refreshTriggerSeverity();
|
||||
};
|
||||
|
||||
popoverSrv.show({
|
||||
element: el,
|
||||
placement: 'top',
|
||||
templateUrl: 'public/plugins/triggers/trigger.colorpicker.html',
|
||||
scope: popoverScope
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert event age from Unix format (milliseconds sins 1970)
|
||||
* to Zabbix format (like at Last 20 issues panel).
|
||||
* @param {Date} AgeUnix time in Unix format
|
||||
* @return {string} Formatted time
|
||||
*/
|
||||
function toZabbixAgeFormat(ageUnix) {
|
||||
var age = new Date(+ageUnix);
|
||||
var ageZabbix = age.getSeconds() + 's';
|
||||
if (age.getMinutes()) {
|
||||
ageZabbix = age.getMinutes() + 'm ' + ageZabbix;
|
||||
}
|
||||
if (age.getHours()) {
|
||||
ageZabbix = age.getHours() + 'h ' + ageZabbix;
|
||||
}
|
||||
if (age.getDate() - 1) {
|
||||
ageZabbix = age.getDate() - 1 + 'd ' + ageZabbix;
|
||||
}
|
||||
if (age.getMonth()) {
|
||||
ageZabbix = age.getMonth() + 'M ' + ageZabbix;
|
||||
}
|
||||
if (age.getYear() - 70) {
|
||||
ageZabbix = age.getYear() -70 + 'y ' + ageZabbix;
|
||||
}
|
||||
return ageZabbix;
|
||||
}
|
||||
|
||||
$scope.init();
|
||||
}
|
||||
|
||||
function triggerPanelDirective() {
|
||||
return {
|
||||
controller: TriggerPanelCtrl,
|
||||
templateUrl: 'public/plugins/triggers/module.html',
|
||||
};
|
||||
}
|
||||
})(sdk.PanelCtrl);
|
||||
|
||||
return {
|
||||
panel: triggerPanelDirective
|
||||
PanelCtrl: TriggerPanelCtrl
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user