Skip to content

N
nexpie-grafana-theme
Commit b94ea26b by Rashid Khan
Options

Added pie and histogram editors

parent 19798b08
Showing with 153 additions and 38 deletions
dashboards.js
...@@ -193,8 +193,8 @@ var dashboards = ...@@ -193,8 +193,8 @@ var dashboards =
labels : false, labels : false,
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'], colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
field : 'country', field : 'country',
//query : { query: "*", field: "country"} mode : "query",
query : { field : "play_name", query : "*" }, query : { query:"falstaff" }
}, },
{ {
type : "text", type : "text",
......
panels/histogram/editor.html
<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="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" ng-change="render_panel()">
</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" ng-click="remove_query(q);get_data()"></i>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label class="small">Effect Options</label>
<select multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
</div>
<div class="span2">
<label class="small">Fill (0.0 - 1.0)</label>
<input type="number" class="input-mini" ng-model="panel.fill">
</div>
</div>
\ No newline at end of file
panels/histogram/module.js
...@@ -5,9 +5,8 @@ angular.module('kibana.histogram', []) ...@@ -5,9 +5,8 @@ angular.module('kibana.histogram', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query : { query: "*" },
interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
color : "#27508C",
show : ['bars'], show : ['bars'],
fill : false, fill : false,
group : "default", group : "default",
...@@ -24,6 +23,18 @@ angular.module('kibana.histogram', []) ...@@ -24,6 +23,18 @@ angular.module('kibana.histogram', [])
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
} }
$scope.remove_query = function(q) {
$scope.panel.query = _.without($scope.panel.query,q);
}
$scope.add_query = function(label,query) {
$scope.panel.query.unshift({
query: query,
label: label,
});
$scope.get_data();
}
$scope.get_data = function() { $scope.get_data = function() {
// Make sure we have everything for the request to complete // Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time)) if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
...@@ -68,7 +79,7 @@ angular.module('kibana.histogram', []) ...@@ -68,7 +79,7 @@ angular.module('kibana.histogram', [])
data.push([$scope.panel.time.to.getTime(), null]) data.push([$scope.panel.time.to.getTime(), null])
var series = { data: { var series = { data: {
label: $scope.panel.query[k].label, label: $scope.panel.query[k].label || k,
data: data, data: data,
}}; }};
......
panels/pie/editor.html
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4> <div class="row-fluid" ng-switch="panel.mode">
<div class="row-fluid"> <div ng-switch-when="terms">
<div class="span4"> <div class="row-fluid">
<form class="input-append"> <div class="span4">
<h5>Field</h5> <form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="panel.query.field"> <h6> Field</h6>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <input type="text" style="width:90%" ng-model="panel.query.field">
</form> </form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" style="width:80%" ng-model="panel.query.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span1">
<h6>Length</h6>
<input type="number" style="width:80%" ng-model="panel.size" ng-change="get_data()">
</div>
<div class="span11">
<form class="input-append" style="margin-bottom: 0px">
<h6>Exclude Terms(s) (comma seperated)</h6>
<input array-join type="text" style="width:90%" ng-model='panel.exclude'></input>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
</div>
</div> </div>
<div class="span8"> <div ng-switch-when="query">
<form class="input-append"> <div class="row-fluid">
<h5>Query</h5> <div class="span1">
<input type="text" style="width:80%" ng-model="panel.query.query"> </div>
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button> <div class="span3">
</form> <form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<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>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span1">
<i class="icon-remove" ng-click="remove_query(q)"></i>
</div>
<div class="span4">
<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>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
...@@ -28,15 +78,8 @@ ...@@ -28,15 +78,8 @@
<div class="span1"> <div class="span1">
<label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels"> <label class="small"> Labels </label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
</div> </div>
</div> <div class="span2">
<div class="row-fluid"> <label class="small">Mode</label>
<div class="span4"> <select class="input-small" ng-model="panel.mode" ng-options="f for f in ['query','terms']"></select>
<h5>Sort</h5>
<select style="width:85%" ng-model="panel.sort[0]" ng-options="f for f in all_fields"></select>
<i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
</div>
<div class="span1">
<h5>Length</h5>
<input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
</div> </div>
</div> </div>
\ No newline at end of file
panels/pie/module.js
...@@ -8,29 +8,41 @@ angular.module('kibana.pie', []) ...@@ -8,29 +8,41 @@ angular.module('kibana.pie', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : "*", query : { field:"_all", query:"*" },
size : 100, size : 100,
exclude : [], exclude : [],
donut : false, donut : false,
tilt : false, tilt : false,
legend : true, legend : true,
labels : true, labels : true,
group : "default" mode : "terms",
group : "default",
default_field : '_all'
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
$scope.init = function() { $scope.init = function() {
eventBus.register($scope,'time', function(event,time){set_time(time)}); eventBus.register($scope,'time', function(event,time){set_time(time)});
if(!(_.isArray($scope.panel.query))) { eventBus.register($scope,'query', function(event, query) {
eventBus.register($scope,'query', function(event, query) { if($scope.panel.mode === 'terms') {
$scope.panel.query.query = query; $scope.panel.query.query = query;
$scope.get_data(); $scope.get_data();
}); }
} });
// Now that we're all setup, request the time from our group // Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
} }
$scope.add_query = function(label,query) {
if($scope.panel.mode !== 'query')
return false;
$scope.panel.query.unshift({
query: query,
label: label,
});
$scope.get_data();
}
$scope.get_data = function() { $scope.get_data = function() {
// Make sure we have everything for the request to complete // Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time)) if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
...@@ -39,7 +51,9 @@ angular.module('kibana.pie', []) ...@@ -39,7 +51,9 @@ angular.module('kibana.pie', [])
var request = $scope.ejs.Request().indices($scope.panel.index); var request = $scope.ejs.Request().indices($scope.panel.index);
// If we have an array, use query facet // If we have an array, use query facet
if(_.isArray($scope.panel.query)) { if($scope.panel.mode == "query") {
if(!(_.isArray($scope.panel.query)))
$scope.panel.query = [$scope.panel.query];
var queries = []; var queries = [];
// Build the question part of the query // Build the question part of the query
_.each($scope.panel.query, function(v) { _.each($scope.panel.query, function(v) {
...@@ -66,7 +80,9 @@ angular.module('kibana.pie', []) ...@@ -66,7 +80,9 @@ angular.module('kibana.pie', [])
$scope.data = []; $scope.data = [];
_.each(results.facets, function(v, k) { _.each(results.facets, function(v, k) {
var series = {}; var series = {};
var slice = { label : $scope.panel.query[k].label, data : v.count }; var label = _.isUndefined($scope.panel.query[k].label) ?
$scope.panel.query[k].query : $scope.panel.query[k].label
var slice = { label : label, data : v.count };
if (!(_.isUndefined($scope.panel.query[k].color))) if (!(_.isUndefined($scope.panel.query[k].color)))
slice.color = $scope.panel.query[k].color; slice.color = $scope.panel.query[k].color;
$scope.data.push(slice) $scope.data.push(slice)
...@@ -76,7 +92,7 @@ angular.module('kibana.pie', []) ...@@ -76,7 +92,7 @@ angular.module('kibana.pie', [])
} else { } else {
var results = request var results = request
.facet(ejs.TermsFacet('pie') .facet(ejs.TermsFacet('pie')
.field($scope.panel.query.field) .field($scope.panel.query.field || $scope.panel.default_field)
.size($scope.panel['size']) .size($scope.panel['size'])
.exclude($scope.panel.exclude) .exclude($scope.panel.exclude)
.facetFilter(ejs.QueryFilter( .facetFilter(ejs.QueryFilter(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment