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

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

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

@@ -11,8 +11,12 @@ define([
module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) { module.controller('ZabbixAPIQueryCtrl', function ($scope, $sce, templateSrv, zabbixHelperSrv) {
var zabbixCache = $scope.datasource.zabbixCache;
$scope.init = function () { $scope.init = function () {
$scope.targetLetters = targetLetters; $scope.targetLetters = targetLetters;
$scope.metric = {};
if (!$scope.target.mode || $scope.target.mode !== 1) { if (!$scope.target.mode || $scope.target.mode !== 1) {
$scope.downsampleFunctionList = [ $scope.downsampleFunctionList = [
{name: "avg", value: "avg"}, {name: "avg", value: "avg"},
@@ -24,20 +28,22 @@ define([
if (!$scope.target.downsampleFunction) { if (!$scope.target.downsampleFunction) {
$scope.target.downsampleFunction = $scope.downsampleFunctionList[0]; $scope.target.downsampleFunction = $scope.downsampleFunctionList[0];
} }
if (!$scope.metric) {
$scope.metric = { if (zabbixCache._initialized) {
hostGroupList: [], $scope.getMetricsFromCache();
hostList: [{name: '*', visible_name: 'All'}], console.log("Cached", $scope.metric);
applicationList: [{name: '*', visible_name: 'All'}], } else {
itemList: [{name: 'All'}] zabbixCache.refresh().then(function () {
}; $scope.getMetricsFromCache();
console.log("From server", $scope.metric);
});
} }
// Update host group, host, application and item lists // Update host group, host, application and item lists
$scope.updateGroupList(); /*$scope.updateGroupList();
$scope.updateHostList(); $scope.updateHostList();
$scope.updateAppList(); $scope.updateAppList();
$scope.updateItemList(); $scope.updateItemList();*/
setItemAlias(); setItemAlias();
} }
@@ -56,11 +62,32 @@ define([
$scope.target.errors = validateTarget($scope.target); $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. * Switch query editor to specified mode.
* Modes: * Modes:
* 0 - items * 0 - items
* 1 - IT services * 1 - IT services
* 2 - Text metrics
*/ */
$scope.switchEditorMode = function (mode) { $scope.switchEditorMode = function (mode) {
$scope.target.mode = mode; $scope.target.mode = mode;

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

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