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

Refactoring - resolve code inspection problems.

Browse Source
This commit is contained in:
Alexander Zobnin
2015-07-24 19:33:22 +03:00
parent 0df92cf580
commit 12be5fff56
6 changed files with 107 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
zabbix/datasource.js
View File

@@ -115,7 +115,7 @@ function (angular, _, kbn) {
// Remove hostnames from item names and then // Remove hostnames from item names and then
// extract item names // extract item names
// "hostname: itemname" --> "itemname" // "hostname: itemname" --> "itemname"
var delete_hostname_pattern = /(?:\[[\w\.]+\]\:\s)/g; var delete_hostname_pattern = /(?:\[[\w\.]+]:\s)/g;
var itemnames = zabbixHelperSrv.splitMetrics(itemname.replace(delete_hostname_pattern, '')); var itemnames = zabbixHelperSrv.splitMetrics(itemname.replace(delete_hostname_pattern, ''));
// Find items by item names and perform queries // Find items by item names and perform queries
@@ -323,7 +323,7 @@ function (angular, _, kbn) {
annotation: annotation, annotation: annotation,
time: e.clock * 1000, time: e.clock * 1000,
title: Number(e.value) ? 'Problem' : 'OK', title: Number(e.value) ? 'Problem' : 'OK',
text: objects[e.objectid].description + formatted_acknowledges, text: objects[e.objectid].description + formatted_acknowledges
}); });
}); });
return events; return events;

12
zabbix/helperFunctions.js
View File

@@ -14,6 +14,8 @@ function (angular, _) {
* Convert Zabbix API history.get response to Grafana format * Convert Zabbix API history.get response to Grafana format
* *
* @param {Array} items Array of Zabbix Items * @param {Array} items Array of Zabbix Items
* @param alias
* @param scale
* @param {Array} history Array of Zabbix History * @param {Array} history Array of Zabbix History
* *
* @return {Array} Array of timeseries in Grafana format * @return {Array} Array of timeseries in Grafana format
@@ -44,7 +46,7 @@ function (angular, _) {
var self = this; var self = this;
return $q.when(_.map(grouped_history, function (history, itemid) { return $q.when(_.map(grouped_history, function (history, itemid) {
var item = indexed_items[itemid]; var item = indexed_items[itemid];
var series = { return {
target: (item.hosts ? item.hosts[0].name+': ' : '') target: (item.hosts ? item.hosts[0].name+': ' : '')
+ (alias ? alias : self.expandItemName(item)), + (alias ? alias : self.expandItemName(item)),
datapoints: _.map(history, function (p) { datapoints: _.map(history, function (p) {
@@ -59,7 +61,6 @@ function (angular, _) {
return [value, p.clock * 1000]; return [value, p.clock * 1000];
}) })
}; };
return series;
})).then(function (result) { })).then(function (result) {
return _.sortBy(result, 'target'); return _.sortBy(result, 'target');
}); });
@@ -69,6 +70,8 @@ function (angular, _) {
* Convert Zabbix API trends.get response to Grafana format * Convert Zabbix API trends.get response to Grafana format
* *
* @param {Array} items Array of Zabbix Items * @param {Array} items Array of Zabbix Items
* @param alias
* @param scale
* @param {Array} trends Array of Zabbix Trends * @param {Array} trends Array of Zabbix Trends
* *
* @return {Array} Array of timeseries in Grafana format * @return {Array} Array of timeseries in Grafana format
@@ -86,7 +89,7 @@ function (angular, _) {
var self = this; var self = this;
return $q.when(_.map(grouped_trends, function (trends, itemid) { return $q.when(_.map(grouped_trends, function (trends, itemid) {
var item = indexed_items[itemid]; var item = indexed_items[itemid];
var series = { return {
target: (item.hosts ? item.hosts[0].name+': ' : '') target: (item.hosts ? item.hosts[0].name+': ' : '')
+ (alias ? alias : self.expandItemName(item)), + (alias ? alias : self.expandItemName(item)),
datapoints: _.map(trends, function (p) { datapoints: _.map(trends, function (p) {
@@ -101,7 +104,6 @@ function (angular, _) {
return [value, p.clock * 1000]; return [value, p.clock * 1000];
}) })
}; };
return series;
})).then(function (result) { })).then(function (result) {
return _.sortBy(result, 'target'); return _.sortBy(result, 'target');
}); });
@@ -112,7 +114,7 @@ function (angular, _) {
* CPU $2 time ($3) --> CPU system time (avg1) * CPU $2 time ($3) --> CPU system time (avg1)
* *
* @param item: zabbix api item object * @param item: zabbix api item object
* @return: expanded item name (string) * @return {string} expanded item name (string)
*/ */
this.expandItemName = function(item) { this.expandItemName = function(item) {
var name = item.name; var name = item.name;

24
zabbix/partials/annotations.editor.html
View File

@@ -1,16 +1,24 @@
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Zabbix trigger <tip>Example: Lack of free swap space</tip></h5> <h5>Zabbix trigger
<div class="editor-option"> <tip>Example: Lack of free swap space</tip>
<input type="text" class="span10" ng-model="currentAnnotation.query" placeholder="Lack of free swap space"></input> </h5>
</div> <div class="editor-option">
</div> <input type="text" class="span10"
ng-model="currentAnnotation.query"
placeholder="Lack of free swap space">
</div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Options</h5> <h5>Options</h5>
<input type="checkbox" class="cr1" id="currentAnnotation.showOkEvents" ng-model="currentAnnotation.showOkEvents" ng-checked="currentAnnotation.showOkEvents"> <input type="checkbox" class="cr1" id="currentAnnotation.showOkEvents"
<label for="currentAnnotation.showOkEvents" class="cr1">Show OK events <tip>Show events, generated when trigger release to OK state</tip></label> ng-model="currentAnnotation.showOkEvents"
ng-checked="currentAnnotation.showOkEvents">
<label for="currentAnnotation.showOkEvents" class="cr1">Show OK events
<tip>Show events, generated when trigger release to OK state</tip>
</label>
</div> </div>
</div> </div>

20
zabbix/partials/config.html
View File

@@ -10,13 +10,17 @@
User User
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-large" ng-model='current.jsonData.username' placeholder=""></input> <input type="text" class="tight-form-input input-large"
ng-model='current.jsonData.username'
placeholder="">
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Password Password
</li> </li>
<li> <li>
<input type="password" class="tight-form-input input-large" ng-model='current.jsonData.password' placeholder=""></input> <input type="password" class="tight-form-input input-large"
ng-model='current.jsonData.password'
placeholder="">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
@@ -28,14 +32,18 @@
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
Enable&nbsp; Enable&nbsp;
<input class="cr1" id="current.jsonData.trends" type="checkbox" ng-model="current.jsonData.trends" ng-checked="current.jsonData.trends"> <input class="cr1" id="current.jsonData.trends" type="checkbox"
ng-model="current.jsonData.trends"
ng-checked="current.jsonData.trends">
<label for="current.jsonData.trends" class="cr1"></label> <label for="current.jsonData.trends" class="cr1"></label>
</li> </li>
<li class="tight-form-item" ng-if="current.jsonData.trends"> <li class="tight-form-item" ng-if="current.jsonData.trends">
Use trends from Use trends from
</li> </li>
<li ng-if="current.jsonData.trends"> <li ng-if="current.jsonData.trends">
<input type="text" class="tight-form-input input-small" ng-model='current.basicAuthUser' placeholder="7d"></input> <input type="text" class="tight-form-input input-small"
ng-model='current.basicAuthUser'
placeholder="7d">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
@@ -46,7 +54,9 @@
Metrics limit Metrics limit
</li> </li>
<li> <li>
<input type="text" class="tight-form-input input-small" ng-model='current.jsonData.limitMetrics' placeholder="100"></input> <input type="text" class="tight-form-input input-small"
ng-model='current.jsonData.limitMetrics'
placeholder="100">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>

117
zabbix/partials/query.editor.html
View File

@@ -1,18 +1,18 @@
<div class="editor-row"> <div class="editor-row">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets"
class="tight-form-container" class="tight-form-container"
ng-class="{'tight-form-disabled': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="ZabbixAPIQueryCtrl" ng-controller="ZabbixAPIQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list pull-right"> <ul class="tight-form-list pull-right">
<li class="tight-form-item"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
tabindex="1"> tabindex="1">
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
@@ -34,10 +34,10 @@
{{targetLetters[$index]}} {{targetLetters[$index]}}
</li> </li>
<li> <li>
<a class="tight-form-item" <a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();" ng-click="target.hide = !target.hide; get_data();"
role="menuitem"> role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</a> </a>
</li> </li>
</ul> </ul>
@@ -55,13 +55,15 @@
<!-- Select Host Group --> <!-- Select Host Group -->
<li class="tight-form-item input-small" style="width: 5em">Group</li> <li class="tight-form-item input-small" style="width: 5em">Group</li>
<li> <li>
<select class="tight-form-input input-large" <label>
ng-change="selectHostGroup()" <select class="tight-form-input input-large"
ng-model="target.group" ng-change="selectHostGroup()"
bs-tooltip="target.group.name.length > 25 ? target.group.name : ''" ng-model="target.group"
ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name" > bs-tooltip="target.group.name.length > 25 ? target.group.name : ''"
ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name">
<option value="">-- Select host group --</option> <option value="">-- Select host group --</option>
</select> </select>
</label>
<a bs-tooltip="target.errors.metric" <a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)" style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric"> ng-show="target.errors.metric">
@@ -71,23 +73,26 @@
<!-- Select Host --> <!-- Select Host -->
<li class="tight-form-item input-small" style="width: 3em">Host</li> <li class="tight-form-item input-small" style="width: 3em">Host</li>
<li> <li>
<label>
<select class="tight-form-input input-large" <select class="tight-form-input input-large"
ng-change="selectHost()" ng-change="selectHost()"
ng-model="target.host" ng-model="target.host"
bs-tooltip="target.host.name.length > 25 ? target.host.name : ''" bs-tooltip="target.host.name.length > 25 ? target.host.name : ''"
ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name" > ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name">
<option value="">-- Select host --</option> <option value="">-- Select host --</option>
</select> </select>
<a bs-tooltip="target.errors.metric" </label>
style="color: rgb(229, 189, 28)" <a bs-tooltip="target.errors.metric"
ng-show="target.errors.metric"> style="color: rgb(229, 189, 28)"
<i class="icon-warning-sign"></i> ng-show="target.errors.metric">
</a> <i class="icon-warning-sign"></i>
</a>
</li> </li>
<!-- Host filter --> <!-- Host filter -->
<li class="tight-form-item"> <li class="tight-form-item">
Filter Filter
<i class="fa fa-question-circle" bs-tooltip="'Filtering hosts by regex. Select All in items and specify regex for host names.'"></i> <i class="fa fa-question-circle"
bs-tooltip="'Filtering hosts by regex. Select All in items and specify regex for host names.'"></i>
</li> </li>
<li> <li>
<input type="text" <input type="text"
@@ -100,9 +105,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu"> <ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="min-width: 15px; text-align: center">&nbsp</li> <li class="tight-form-item" style="min-width: 15px; text-align: center">&nbsp</li>
<li class="tight-form-item"> <li class="tight-form-item">
@@ -113,39 +116,44 @@
<!-- Select Application --> <!-- Select Application -->
<li class="tight-form-item input-small" style="width: 5em">Application</li> <li class="tight-form-item input-small" style="width: 5em">Application</li>
<li> <li>
<label>
<select class="tight-form-input input-large" <select class="tight-form-input input-large"
ng-change="selectApplication()" ng-select="selectApplication()"
ng-model="target.application" ng-model="target.application"
bs-tooltip="target.application.name.length > 15 ? target.application.name : ''" bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name" > ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name">
<option value="">-- Select application --</option> <option value="">-- Select application --</option>
</select> </select>
<a bs-tooltip="target.errors.metric" </label>
style="color: rgb(229, 189, 28)" <a bs-tooltip="target.errors.metric"
ng-show="target.errors.metric"> style="color: rgb(229, 189, 28)"
<i class="icon-warning-sign"></i> ng-show="target.errors.metric">
</a> <i class="icon-warning-sign"></i>
</a>
</li> </li>
<!-- Select Item --> <!-- Select Item -->
<li class="tight-form-item input-small" style="width: 3em">Item</li> <li class="tight-form-item input-small" style="width: 3em">Item</li>
<li> <li>
<label>
<select class="tight-form-input input-large" <select class="tight-form-input input-large"
ng-change="selectItem()" ng-change="selectItem()"
ng-model="target.item" ng-model="target.item"
bs-tooltip="target.item.name.length > 25 ? target.item.name : ''" bs-tooltip="target.item.name.length > 25 ? target.item.name : ''"
ng-options="item.name for item in metric.itemList track by item.name" > ng-options="item.name for item in metric.itemList track by item.name">
<option value="">-- Select item --</option> <option value="">-- Select item --</option>
</select> </select>
<a bs-tooltip="target.errors.metric" </label>
style="color: rgb(229, 189, 28)" <a bs-tooltip="target.errors.metric"
ng-show="target.errors.metric"> style="color: rgb(229, 189, 28)"
<i class="icon-warning-sign"></i> ng-show="target.errors.metric">
</a> <i class="icon-warning-sign"></i>
</a>
</li> </li>
<!-- Item filter --> <!-- Item filter -->
<li class="tight-form-item"> <li class="tight-form-item">
Filter Filter
<i class="fa fa-question-circle" bs-tooltip="'Filtering items by regex. Select All in items and specify regex for item names.'"></i> <i class="fa fa-question-circle"
bs-tooltip="'Filtering items by regex. Select All in items and specify regex for item names.'"></i>
</li> </li>
<li> <li>
<input type="text" <input type="text"
@@ -158,7 +166,8 @@
<!-- Scale --> <!-- Scale -->
<li class="tight-form-item"> <li class="tight-form-item">
Scale Scale
<i class="fa fa-question-circle" bs-tooltip="'Set a custom multiplier for series values, for example -1 to invert series'"></i> <i class="fa fa-question-circle"
bs-tooltip="'Set a custom multiplier for series values, for example -1 to invert series'"></i>
</li> </li>
<li> <li>
<input type="text" <input type="text"
@@ -186,13 +195,13 @@
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="input-mini tight-form-input" class="input-mini tight-form-input"
ng-model="panel.maxDataPoints" ng-model="panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'" bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right" data-placement="right"
ng-model-onblur ng-change="get_data()" ng-model-onblur ng-change="get_data()"
spellcheck='false' spellcheck='false'
placeholder="auto"> placeholder="auto">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
@@ -218,7 +227,9 @@
<div class="grafana-info-box span6" ng-if="editorHelpIndex === 1"> <div class="grafana-info-box span6" ng-if="editorHelpIndex === 1">
<h5>Max data points</h5> <h5>Max data points</h5>
<ul> <ul>
<li>Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this number</li> <li>Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this
number
</li>
<li>If there are more real values, then by default they will be consolidated using averages</li> <li>If there are more real values, then by default they will be consolidated using averages</li>
<li>This could hide real peaks and max values in your series</li> <li>This could hide real peaks and max values in your series</li>
<li>Point consolidation will effect series legend values (min,max,total,current)</li> <li>Point consolidation will effect series legend values (min,max,total,current)</li>

6
zabbix/zabbixAPIWrapper.js
View File

@@ -1,7 +1,7 @@
define([ define([
'angular', 'angular',
'lodash', 'lodash'
], ],
function (angular, _) { function (angular, _) {
'use strict'; 'use strict';
@@ -94,7 +94,7 @@ function (angular, _) {
}, },
auth: null, auth: null,
id: 1 id: 1
}, }
}; };
if (this.basicAuth || this.withCredentials) { if (this.basicAuth || this.withCredentials) {