Skip to content

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

Added debug panel (not by default), added inspector link to pie and table

parent ffe392c0
Showing with 169 additions and 22 deletions
common/css/main.css
...@@ -31,30 +31,25 @@ ...@@ -31,30 +31,25 @@
z-index: 800; z-index: 800;
} }
.panel i.editlink { .panel span.panelextra {
position: absolute; position: absolute;
right: 5px;
z-index: 800; z-index: 800;
display: none; display: none;
} }
.panel i.editlink span { .panel:hover span.panelextra {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pointer:hover {
color: #0088CC;
}
.panel:hover i.editlink {
display: block; display: block;
opacity: 0.3; opacity: 0.3;
} }
.panel i.editlink:hover { .panel span.panelextra:hover {
opacity: 1; opacity: 1;
} }
.pointer:hover {
color: #0088CC;
}
.popover { .popover {
max-width: 500px; max-width: 500px;
} }
......
js/directives.js
...@@ -7,8 +7,10 @@ angular.module('kibana.directives', []) ...@@ -7,8 +7,10 @@ angular.module('kibana.directives', [])
return { return {
restrict: 'E', restrict: 'E',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true"><i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"> <span class="small">{{panel.type}}</span></i>'+ var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+
'<h4>{{panel.title}}</h4>'; '<span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<span class="small">{{panel.type}}</span> <i class="icon-edit pointer"></i>'+
'</span><h4>{{panel.title}}</h4>';
elem.prepend($compile(angular.element(template))(scope)); elem.prepend($compile(angular.element(template))(scope));
} }
}; };
......
js/services.js
...@@ -5,10 +5,24 @@ ...@@ -5,10 +5,24 @@
angular.module('kibana.services', []) angular.module('kibana.services', [])
.service('eventBus', function($rootScope) { .service('eventBus', function($rootScope) {
// An array of registed types
var _types = []
this.broadcast = function(from,to,type,data) { this.broadcast = function(from,to,type,data) {
if(_.isUndefined(data)) if(_.isUndefined(data))
var data = from var data = from
var packet = {
time: new Date(),
type: type,
from: from,
to: to,
data: data
}
if(_.contains(_types,'$kibana_debug'))
$rootScope.$broadcast('$kibana_debug',packet);
//console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data)) //console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data))
$rootScope.$broadcast(type,{ $rootScope.$broadcast(type,{
from: from, from: from,
...@@ -21,10 +35,15 @@ angular.module('kibana.services', []) ...@@ -21,10 +35,15 @@ angular.module('kibana.services', [])
// addressed to the scope in question and runs the registered function if it // addressed to the scope in question and runs the registered function if it
// is. // is.
this.register = function(scope,type,fn) { this.register = function(scope,type,fn) {
_types = _.union(_types,[type])
scope.$on(type,function(event,packet){ scope.$on(type,function(event,packet){
var _id = scope.$id; var _id = scope.$id;
var _to = packet.to; var _to = packet.to;
var _from = packet.from; var _from = packet.from;
var _type = packet.type
var _time = packet.time
var _group = (!(_.isUndefined(scope.panel))) ? scope.panel.group : ["NONE"] var _group = (!(_.isUndefined(scope.panel))) ? scope.panel.group : ["NONE"]
//console.log('registered:' + type + " for " + scope.panel.title + " " + scope.$id) //console.log('registered:' + type + " for " + scope.panel.title + " " + scope.$id)
...@@ -33,13 +52,17 @@ angular.module('kibana.services', []) ...@@ -33,13 +52,17 @@ angular.module('kibana.services', [])
if(!(_.isArray(_group))) if(!(_.isArray(_group)))
_group = [_group]; _group = [_group];
// Transmit even only if the send is not the receiver AND one of the following:
// 1) Receiver has group in _to 2) Receiver's $id is in _to
// 3) Event is addressed to ALL 4) Receiver is in ALL group
if((_.intersection(_to,_group).length > 0 || if((_.intersection(_to,_group).length > 0 ||
_.indexOf(_to,_id) > -1 || _.indexOf(_to,_id) > -1 ||
_.indexOf(_group,'ALL') > -1 ||
_.indexOf(_to,'ALL') > -1) && _.indexOf(_to,'ALL') > -1) &&
_from !== _id _from !== _id
) { ) {
//console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data)) //console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data))
fn(event,packet.data); fn(event,packet.data,{time:_time,to:_to,from:_from,type:_type});
} }
}); });
} }
......
panels/debug/editor.html 0 → 100644
<div class="row-fluid" ng-controller="debug">
<div class="row-fluid">
<div class="span3">
<h5>Length</h5>
<input type="number" class="input-mini" ng-model="panel.size">
</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','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
\ No newline at end of file
panels/debug/module.html 0 → 100644
<kibana-panel ng-controller='debug' ng-init='init()'>
<table class="table-hover table table-condensed" ng-style="panel.style" style="height:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto">
<thead>
<th style="white-space:nowrap" ng-repeat="th in ['timestamp','from','to','type']">
{{th}}
</th>
</thead>
<tbody ng-repeat="event in events" ng-class-odd="'odd'">
<tr ng-click="toggle_details(event)">
<td>{{event.header.time}}</td>
<td>{{event.header.from}}</td>
<td>{{event.header.to}}</td>
<td>{{event.header.type}}</td>
</tr>
<tr ng-show="event.details">
<td>
<h6>Event header</h6>
<pre ng-style="panel.style">{{event.header | json}}</pre>
</td>
<td colspan=1000>
<h6>Event payload</h6>
<pre ng-style="panel.style">{{event.data | json}}</pre>
</td>
</tr>
</tbody>
</table>
</kibana-panel>
\ No newline at end of file
panels/debug/module.js 0 → 100644
angular.module('kibana.debug', [])
.controller('debug', function($scope, eventBus) {
// Set and populate defaults
var _d = {
group : "ALL",
style : {'font-size':'9pt'},
size : 20
}
_.defaults($scope.panel,_d)
$scope.init = function () {
$scope.set_listeners($scope.panel.group)
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
$scope.events = []
}
$scope.toggle_details = function(event) {
event.details = event.details ? false : true;
}
$scope.set_listeners = function(group) {
eventBus.register($scope,'$kibana_debug',function(event,data,header) {
if($scope.events.length >= $scope.panel.size)
$scope.events = $scope.events.slice(0,$scope.panel.size-1)
$scope.events.unshift({header:header,data:data})
});
}
});
\ No newline at end of file
panels/pie/module.html
<kibana-panel ng-controller='pie' ng-init="init()"> <kibana-panel ng-controller='pie' ng-init="init()">
<span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/pie/module.js
...@@ -98,6 +98,7 @@ angular.module('kibana.pie', []) ...@@ -98,6 +98,7 @@ angular.module('kibana.pie', [])
.facetFilter(ejs.QueryFilter(v)) .facetFilter(ejs.QueryFilter(v))
) )
}) })
$scope.populate_modal(request);
var results = request.doSearch(); var results = request.doSearch();
// Populate scope when we have results // Populate scope when we have results
...@@ -118,7 +119,7 @@ angular.module('kibana.pie', []) ...@@ -118,7 +119,7 @@ angular.module('kibana.pie', [])
}); });
// If we don't have an array, assume its a term facet. // If we don't have an array, assume its a term facet.
} else if ($scope.panel.mode == "terms") { } else if ($scope.panel.mode == "terms") {
var results = request request = request
.facet(ejs.TermsFacet('pie') .facet(ejs.TermsFacet('pie')
.field($scope.panel.query.field || $scope.panel.default_field) .field($scope.panel.query.field || $scope.panel.default_field)
.size($scope.panel['size']) .size($scope.panel['size'])
...@@ -131,7 +132,10 @@ angular.module('kibana.pie', []) ...@@ -131,7 +132,10 @@ angular.module('kibana.pie', [])
.to($scope.time.to) .to($scope.time.to)
.cache(false) .cache(false)
)))).size(0) )))).size(0)
.doSearch();
$scope.populate_modal(request);
var results = request.doSearch();
// Populate scope when we have results // Populate scope when we have results
results.then(function(results) { results.then(function(results) {
...@@ -153,7 +157,7 @@ angular.module('kibana.pie', []) ...@@ -153,7 +157,7 @@ angular.module('kibana.pie', [])
$scope.$emit('render'); $scope.$emit('render');
}); });
} else { } else {
var results = request request = request
.query(ejs.QueryStringQuery($scope.panel.query.query || '*')) .query(ejs.QueryStringQuery($scope.panel.query.query || '*'))
.filter(ejs.RangeFilter($scope.time.field) .filter(ejs.RangeFilter($scope.time.field)
.from($scope.time.from) .from($scope.time.from)
...@@ -161,6 +165,11 @@ angular.module('kibana.pie', []) ...@@ -161,6 +165,11 @@ angular.module('kibana.pie', [])
.cache(false)) .cache(false))
.size(0) .size(0)
.doSearch(); .doSearch();
$scope.populate_modal(request);
var results = request.doSearch();
results.then(function(results) { results.then(function(results) {
$scope.panel.loading = false; $scope.panel.loading = false;
var complete = results.hits.total; var complete = results.hits.total;
...@@ -173,6 +182,16 @@ angular.module('kibana.pie', []) ...@@ -173,6 +182,16 @@ angular.module('kibana.pie', [])
} }
} }
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Pie Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
}
}
function set_time(time) { function set_time(time) {
$scope.time = time; $scope.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
......
panels/table/module.html
<kibana-panel ng-controller='table' ng-init='init()'> <kibana-panel ng-controller='table' ng-init='init()'>
<span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<div style="height:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto"> <div style="height:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto">
<div class="row-fluid"> <div class="row-fluid">
<div class="span1 offset3" style="text-align:right"> <div class="span1 offset3" style="text-align:right">
......
panels/table/module.js
...@@ -78,9 +78,8 @@ angular.module('kibana.table', []) ...@@ -78,9 +78,8 @@ angular.module('kibana.table', [])
return return
$scope.panel.loading = true; $scope.panel.loading = true;
var request = $scope.ejs.Request().indices($scope.panel.index);
var results = request var request = $scope.ejs.Request().indices($scope.panel.index)
.query(ejs.FilteredQuery( .query(ejs.FilteredQuery(
ejs.QueryStringQuery($scope.panel.query || '*'), ejs.QueryStringQuery($scope.panel.query || '*'),
ejs.RangeFilter($scope.time.field) ejs.RangeFilter($scope.time.field)
...@@ -90,8 +89,11 @@ angular.module('kibana.table', []) ...@@ -90,8 +89,11 @@ angular.module('kibana.table', [])
) )
.size($scope.panel.size) .size($scope.panel.size)
.from($scope.panel.offset) .from($scope.panel.offset)
.sort($scope.panel.sort[0],$scope.panel.sort[1]) .sort($scope.panel.sort[0],$scope.panel.sort[1]);
.doSearch();
$scope.populate_modal(request)
var results = request.doSearch();
// Populate scope when we have results // Populate scope when we have results
results.then(function(results) { results.then(function(results) {
...@@ -112,6 +114,16 @@ angular.module('kibana.table', []) ...@@ -112,6 +114,16 @@ angular.module('kibana.table', [])
}); });
} }
$scope.populate_modal = function(request) {
$scope.modal = {
title: "Table Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+
"'</pre>",
}
}
$scope.without_kibana = function (row) { $scope.without_kibana = function (row) {
row = _.clone(row) row = _.clone(row)
delete row.kibana delete row.kibana
......
partials/modal.html 0 → 100644
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{modal.title}}</h3>
</div>
<div class="modal-body">
<div ng-bind-html='modal.body'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();send_render()">Close</button>
</div>
\ No newline at end of file
scripts/indexme.json deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
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