public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prettied up histogram hover, added line width options, fixed excessive refresh on string query

Browse Source
This commit is contained in:
Rashid Khan
2013-04-05 20:52:35 -07:00
parent 3c1f9457bd
commit d685fddcbe
6 changed files with 208 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panels/hits/editor.html
+39 -16
View File
@@ -1,23 +1,46 @@
<div class="row-fluid" ng-controller="hits">
<div ng-controller="hits">
<div class="row-fluid">
<div class="span3"><h6>Font Size</h6>
<select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="span2">
<label class="small">Run Query</label><input type="checkbox" ng-model="panel.run_query" ng-checked="panel.run_query">
<label class="small">Aggregate Queries</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
</div>
<div class="span9" ng-show='!panel.run_query'>
With query running disabled, this panel receives its hit count from a histogram panel. If multiple queries are running this <strong>will show the total of all queries</strong>.
</div>
<div class="span9" ng-show='panel.run_query'>
This shows a simple count of how many records match your filtered query. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
<div class="span3" ng-show="!panel.aggregate"><h6>Arrangement</h6>
<select class="input-medium" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
</div>
<div class="row-fluid">
<div class="span9" ng-show='panel.run_query'>
<form class="input-append">
<h6>Query</h6>
<input type="text" style="width:85%" ng-model="panel.query">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span3"><h6>Font Size</h6>
<select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span1">
</div>
</div>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1">
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
</div>
panels/hits/module.html
+9 -1
View File
@@ -1,3 +1,11 @@
<kibana-panel ng-controller='hits' ng-init="init()">
<p ng-style="panel.style">&#8805 {{hits}}</p>
<p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
<table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
<td style="padding-right:10px">{{query.label}}</td><td>{{query.hits}}</td>
</tr>
</table>
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left; padding-left: 10px">
{{query.label}} {{query.hits}} <span ng-show="!$last">|</span>
</div>
</kibana-panel>
panels/hits/module.js
+79 -25
View File
@@ -5,60 +5,114 @@ angular.module('kibana.hits', [])
var _d = {
query : "*",
group : "default",
style : { "font-size": '36pt', "font-weight": "bold" },
run_query : false
style : { "font-size": '36pt'},
aggregate : true,
arrangement : 'vertical'
}
_.defaults($scope.panel,_d)
$scope.init = function () {
$scope.hits = 0;
eventBus.register($scope,'time', function(event,time){
if($scope.panel.run_query)
set_time(time)
set_time(time)
});
eventBus.register($scope,'query', function(event, query) {
$scope.panel.query = _.isArray(query) ? query[0] : query;
if($scope.panel.run_query)
$scope.get_data();
$scope.panel.query = _.map(query,function(q) {
return {query: q, label: q};
})
$scope.get_data();
});
eventBus.register($scope,'hits', function(event, hits) {
$scope.hits = hits;
})
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.get_data = function() {
$scope.get_data = function(segment,query_id) {
delete $scope.panel.error
$scope.panel.loading = true;
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return
$scope.panel.loading = true;
var request = $scope.ejs.Request().indices($scope.panel.index);
var results = request
.query(ejs.FilteredQuery(
ejs.QueryStringQuery($scope.panel.query || '*'),
var _segment = _.isUndefined(segment) ? 0 : segment
var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
// Build the question part of the query
var queries = [];
_.each($scope.panel.query, function(v) {
queries.push($scope.ejs.FilteredQuery(
ejs.QueryStringQuery(v.query || '*'),
ejs.RangeFilter($scope.time.field)
.from($scope.time.from)
.to($scope.time.to)
)
.to($scope.time.to))
)
.size(0)
.doSearch();
});
// Build the facet part
_.each(queries, function(v) {
request = request
.facet($scope.ejs.QueryFacet("query"+_.indexOf(queries,v))
.query(v)
).size(0)
})
// TODO: Spy for hits panel
//$scope.populate_modal(request);
// Then run it
var results = request.doSearch();
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
if(_.isUndefined(results)) {
$scope.panel.error = 'Your query was unsuccessful';
if(_segment == 0) {
$scope.hits = 0;
$scope.data = [];
query_id = $scope.query_id = new Date().getTime();
}
// Check for error and abort if found
if(!(_.isUndefined(results.error))) {
$scope.panel.error = $scope.parse_error(results.error);
return;
}
$scope.panel.error = false;
$scope.hits = results.hits.total;
if($scope.query_id === query_id) {
var i = 0;
_.each(results.facets, function(v, k) {
var hits = _.isUndefined($scope.data[i]) || _segment == 0 ?
v.count : $scope.data[i].hits+v.count
$scope.hits += v.count
// Create series
$scope.data[i] = {
label: $scope.panel.query[i].label || "query"+(parseInt(i)+1),
hits: hits
};
i++;
});
if(_segment < $scope.panel.index.length-1)
$scope.get_data(_segment+1,query_id)
}
});
}
$scope.remove_query = function(q) {
$scope.panel.query = _.without($scope.panel.query,q);
$scope.get_data();
}
$scope.add_query = function(label,query) {
$scope.panel.query.unshift({
query: query,
label: label,
});
$scope.get_data();
}
function set_time(time) {
$scope.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index