Skip to content

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

Added spy panels to map and histogram, added editor toggle to enable/disable spy

parent c1b70967
Showing with 94 additions and 12 deletions
config.js
...@@ -15,7 +15,7 @@ If you need to configure the default dashboard, please see default.json ...@@ -15,7 +15,7 @@ If you need to configure the default dashboard, please see default.json
*/ */
var config = new Settings( var config = new Settings(
{ {
elasticsearch: 'http://demo.kibana.org', elasticsearch: 'http://localhost:9200',
kibana_index: "kibana-int", kibana_index: "kibana-int",
timeformat: 'mm/dd HH:MM:ss', timeformat: 'mm/dd HH:MM:ss',
modules: ['histogram','map','pie','table','stringquery','sort', modules: ['histogram','map','pie','table','stringquery','sort',
......
panels/histogram/editor.html
...@@ -44,4 +44,15 @@ ...@@ -44,4 +44,15 @@
<label class="small">Time correction</label> <label class="small">Time correction</label>
<select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select> <select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div> </div>
</div> </div>
\ No newline at end of file <h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
panels/histogram/module.html
<kibana-panel ng-controller='histogram' ng-init="init()" style="height:{{panel.height || row.height}}"> <kibana-panel ng-controller='histogram' ng-init="init()" style="height:{{panel.height || row.height}}">
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div> <div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/histogram/module.js
...@@ -76,6 +76,8 @@ angular.module('kibana.histogram', []) ...@@ -76,6 +76,8 @@ angular.module('kibana.histogram', [])
).size(0) ).size(0)
}) })
$scope.populate_modal(request);
// Then run it // Then run it
var results = request.doSearch(); var results = request.doSearch();
...@@ -120,6 +122,17 @@ angular.module('kibana.histogram', []) ...@@ -120,6 +122,17 @@ angular.module('kibana.histogram', [])
}); });
} }
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "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/map/editor.html
...@@ -22,3 +22,14 @@ ...@@ -22,3 +22,14 @@
<select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select> <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
</div> </div>
</div> </div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
panels/map/module.html
<kibana-panel ng-controller='map' ng-init="init()"> <kibana-panel ng-controller='map' ng-init="init()">
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<div map params="{{panel}}" style="height:{{panel.height || row.height}}"></div> <div map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/map/module.js
...@@ -31,7 +31,7 @@ angular.module('kibana.map', []) ...@@ -31,7 +31,7 @@ angular.module('kibana.map', [])
var request = $scope.ejs.Request().indices($scope.panel.index); var request = $scope.ejs.Request().indices($scope.panel.index);
// Then the insert into facet and make the request // Then the insert into facet and make the request
var results = request var request = request
.facet(ejs.TermsFacet('map') .facet(ejs.TermsFacet('map')
.field($scope.panel.field) .field($scope.panel.field)
.size($scope.panel['size']) .size($scope.panel['size'])
...@@ -42,8 +42,11 @@ angular.module('kibana.map', []) ...@@ -42,8 +42,11 @@ angular.module('kibana.map', [])
ejs.RangeFilter($scope.time.field) ejs.RangeFilter($scope.time.field)
.from($scope.time.from) .from($scope.time.from)
.to($scope.time.to) .to($scope.time.to)
)))).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) {
...@@ -57,6 +60,17 @@ angular.module('kibana.map', []) ...@@ -57,6 +60,17 @@ angular.module('kibana.map', [])
}); });
} }
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) {
$scope.modal = {
title: "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/pie/editor.html
...@@ -99,4 +99,15 @@ ...@@ -99,4 +99,15 @@
<label class="small">Mode</label> <label class="small">Mode</label>
<select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['query','terms','goal']"></select> <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['query','terms','goal']"></select>
</div> </div>
</div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div> </div>
\ 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'> <span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span> </span>
......
panels/pie/module.js
...@@ -12,7 +12,8 @@ angular.module('kibana.pie', []) ...@@ -12,7 +12,8 @@ angular.module('kibana.pie', [])
labels : true, labels : true,
mode : "terms", mode : "terms",
group : "default", group : "default",
default_field : '_all' default_field : '_all',
spyable : true,
} }
_.defaults($scope.panel,_d) _.defaults($scope.panel,_d)
...@@ -182,9 +183,10 @@ angular.module('kibana.pie', []) ...@@ -182,9 +183,10 @@ angular.module('kibana.pie', [])
} }
} }
// I really don't like this function, too much dom manip. Break out into directive?
$scope.populate_modal = function(request) { $scope.populate_modal = function(request) {
$scope.modal = { $scope.modal = {
title: "Pie Inspector", title: "Inspector",
body : "<h5>Last Elasticsearch Query</h5><pre>"+ body : "<h5>Last Elasticsearch Query</h5><pre>"+
'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+ 'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
angular.toJson(JSON.parse(request.toString()),true)+ angular.toJson(JSON.parse(request.toString()),true)+
......
panels/table/editor.html
...@@ -33,4 +33,17 @@ ...@@ -33,4 +33,17 @@
</div> </div>
<div class="span3"><h6>Font Size</h6> <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> <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> </div>
\ No newline at end of file </div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
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'> <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i> <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span> </span>
......
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