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

Working on new query editor - changed dropdown to input with

Browse Source 
autocomplete.
This commit is contained in:
Alexander Zobnin
2016-01-16 21:16:22 +03:00
parent 48816ecccb
commit d9bc27c4af
3 changed files with 82 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
plugins/datasource-zabbix/partials/query.editor.html
View File

@@ -76,7 +76,7 @@
<ul class="tight-form-list" role="menu" ng-hide="target.mode == 1">
<!-- Alias -->
<li ng-hide="target.mode == 2">
<li>
<input type="text"
class="tight-form-input input-medium"
ng-model="target.alias"
@@ -84,52 +84,31 @@
placeholder="Alias"
ng-blur="targetBlur()">
</li>
<!-- Select Host Group -->
<li class="tight-form-item input-small" style="width: 5em">Group</li>
<li>
<select class="tight-form-input input-large"
ng-change="selectHostGroup()"
ng-model="target.group"
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>
</select>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="fa fa-warning"></i>
</a>
<input type="text"
ng-model="target.groupFilter"
bs-typeahead="getGroupNames"
ng-blur="render()"
data-min-length=0
data-items=100
class="input-medium tight-form-input" >
</li>
<!-- Select Host -->
<li class="tight-form-item input-small" style="width: 3em">Host</li>
<li>
<select class="tight-form-input input-large"
ng-change="selectHost()"
ng-model="target.host"
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">
<option value="">-- Select host --</option>
</select>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="icon-warning-sign"></i>
</a>
</li>
<!-- Host filter -->
<li class="tight-form-item" ng-hide="target.mode == 2">
Filter
<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 ng-hide="target.mode == 2">
<input type="text"
class="tight-form-input input-large"
ng-model="target.hostFilter"
spellcheck='false'
placeholder="Host filter (regex)"
ng-blur="targetBlur()">
bs-typeahead="getHostNames"
ng-blur="render()"
data-min-length=0
data-items=100
class="input-large tight-form-input" >
</li>
<!-- Downsampling function -->
<li class="tight-form-item input-medium" ng-hide="target.mode == 2">
Downsampling
@@ -154,54 +133,32 @@
<div class="tight-form" ng-hide="target.mode == 1">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 44px">&nbsp</li>
<li class="tight-form-item" style="width: 194px">&nbsp</li>
<!-- Select Application -->
<li class="tight-form-item input-small" style="width: 5em">Application</li>
<li>
<select class="tight-form-input input-large"
ng-change="selectApplication()"
ng-model="target.application"
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">
<option value="">-- Select application --</option>
</select>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="icon-warning-sign"></i>
</a>
<input type="text"
ng-model="target.applicationFilter"
bs-typeahead="getApplicationNames"
ng-blur="render()"
data-min-length=0
data-items=100
class="input-medium tight-form-input" >
</li>
<!-- Select Item -->
<li class="tight-form-item input-small" style="width: 3em">Item</li>
<li>
<select class="tight-form-input input-large"
ng-change="selectItem()"
ng-model="target.item"
bs-tooltip="target.item.name.length > 25 ? target.item.name : ''"
ng-options="item.name for item in metric.itemList track by item.name">
<option value="">-- Select item --</option>
</select>
<a bs-tooltip="target.errors.metric"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.metric">
<i class="icon-warning-sign"></i>
</a>
</li>
<!-- Item filter -->
<li class="tight-form-item" ng-hide="target.mode == 2">
Filter
<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 ng-hide="target.mode == 2">
<input type="text"
class="tight-form-input input-large"
ng-model="target.itemFilter"
spellcheck='false'
placeholder="Item filter (regex)"
ng-blur="targetBlur()">
bs-typeahead="getItemNames"
ng-blur="render()"
data-min-length=0
data-items=100
class="input-large tight-form-input" >
</li>
<!-- Scale -->
<li class="tight-form-item" ng-hide="target.mode == 2">
Scale
@@ -220,7 +177,7 @@
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-hide="target.mode == 1">
<div class="tight-form" ng-show="target.mode == 2">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 44px">&nbsp</li>
<!-- Text metric regex -->

45
plugins/datasource-zabbix/queryCtrl.js
View File

@@ -11,8 +11,12 @@ define([
module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) {
var zabbixCache = $scope.datasource.zabbixCache;
$scope.init = function () {
$scope.targetLetters = targetLetters;
$scope.metric = {};
if (!$scope.target.mode || $scope.target.mode !== 1) {
$scope.downsampleFunctionList = [
{name: "avg", value: "avg"},
@@ -24,20 +28,22 @@ define([
if (!$scope.target.downsampleFunction) {
$scope.target.downsampleFunction = $scope.downsampleFunctionList[0];
}
if (!$scope.metric) {
$scope.metric = {
hostGroupList: [],
hostList: [{name: '*', visible_name: 'All'}],
applicationList: [{name: '*', visible_name: 'All'}],
itemList: [{name: 'All'}]
};
if (zabbixCache._initialized) {
$scope.getMetricsFromCache();
console.log("Cached", $scope.metric);
} else {
zabbixCache.refresh().then(function () {
$scope.getMetricsFromCache();
console.log("From server", $scope.metric);
});
}
// Update host group, host, application and item lists
$scope.updateGroupList();
/*$scope.updateGroupList();
$scope.updateHostList();
$scope.updateAppList();
$scope.updateItemList();
$scope.updateItemList();*/
setItemAlias();
}
@@ -56,11 +62,32 @@ define([
$scope.target.errors = validateTarget($scope.target);
};
$scope.getMetricsFromCache = function () {
$scope.metric = {
groupList: zabbixCache.getGroups(),
hostList: zabbixCache.getHosts(),
applicationList: zabbixCache.getApplications(),
itemList: zabbixCache.getItems()
};
};
// Get list of metric names for bs-typeahead directive
function getMetricNames(scope, metricList) {
return _.map(scope.metric[metricList], 'name');
}
// Map functions
$scope.getGroupNames = _.partial(getMetricNames, $scope, 'groupList');
$scope.getHostNames = _.partial(getMetricNames, $scope, 'hostList');
$scope.getApplicationNames = _.partial(getMetricNames, $scope, 'applicationList');
$scope.getItemNames = _.partial(getMetricNames, $scope, 'itemList');
/**
* Switch query editor to specified mode.
* Modes:
* 0 - items
* 1 - IT services
* 2 - Text metrics
*/
$scope.switchEditorMode = function (mode) {
$scope.target.mode = mode;

18
plugins/datasource-zabbix/zabbixCacheSrv.js
View File

@@ -10,15 +10,21 @@ function (angular, _) {
module.factory('ZabbixCache', function($q) {
function ZabbixCache(zabbixAPI, lifetime) {
var self = this;
this.zabbixAPI = zabbixAPI;
this.lifetime = lifetime;
this._groups = [];
this._hosts = [];
this._applications = [];
this._items = [];
this._groups = undefined;
this._hosts = undefined;
this._applications = undefined;
this._items = undefined;
this.refresh();
this._initialized = undefined;
this.refresh().then(function () {
self._initialized = true;
});
}
var p = ZabbixCache.prototype;
@@ -32,7 +38,7 @@ function (angular, _) {
this.zabbixAPI.getItems()
];
$q.all(promises).then(function (results) {
return $q.all(promises).then(function (results) {
if (results.length) {
self._groups = results[0];