Skip to content

N
nexpie-grafana-theme
Commit 6b6355e6 by Rashid Khan
Options

Added ability to customize interval in histogram, issue #7. Also fixed bug that… 

Added ability to customize interval in histogram, issue #7. Also fixed bug that caused editor and panel to be in different scopes
parent c5678139
Showing with 83 additions and 43 deletions
js/directives.js
...@@ -15,6 +15,19 @@ angular.module('kibana.directives', []) ...@@ -15,6 +15,19 @@ angular.module('kibana.directives', [])
} }
}; };
}) })
.directive('addPanel', function($compile) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
scope.$watch('panel.type', function(n,o) {
if(!_.isUndefined(scope.panel.type)) {
var template = '<div ng-controller="'+scope.panel.type+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'"></div>';
elem.html($compile(angular.element(template))(scope));
}
})
}
};
})
.directive('arrayJoin', function() { .directive('arrayJoin', function() {
return { return {
restrict: 'A', restrict: 'A',
......
panels/column/editor.html
<div ng-controller="column"> <div>
<div class="row-fluid"> <div class="row-fluid">
<h4>Add Panel to Column</h4> <h4>Add Panel to Column</h4>
<select class="input-medium" ng-model="new_panel.type" ng-options="f for f in _.without(config.modules,'column')| stringSort" ng-change="reset_panel(new_panel.type);send_render();"></select> <select class="input-medium" ng-model="new_panel.type" ng-options="f for f in _.without(config.modules,'column')| stringSort" ng-change="reset_panel(new_panel.type);send_render();"></select>
......
panels/dashcontrol/editor.html
<div ng-controller="dashcontrol"> <div>
<h5>Allow saving to</h5> <h5>Allow saving to</h5>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
......
panels/debug/editor.html
<div class="row-fluid" ng-controller="debug"> <div class="row-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<h5>Length</h5> <h5>Length</h5>
......
panels/fields/editor.html
<div class="row-fluid" ng-controller="fields"> <div class="row-fluid">
<div class="span3"><h6>Popup Position</h6> <div class="span3"><h6>Popup Position</h6>
<select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span> <select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span>
</div> </div>
......
panels/fields/module.js
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
### Group Events ### Group Events
#### Recieves #### Recieves
* table_documents :: An object containing the documents in the table panel * table_documents :: An object containing the documents in the table panel
*** Sends #### Sends
* fields :: an object containing the sort order, existing fields and selected fields * fields :: an object containing the sort order, existing fields and selected fields
*/ */
...@@ -42,7 +42,6 @@ angular.module('kibana.fields', []) ...@@ -42,7 +42,6 @@ angular.module('kibana.fields', [])
$scope.docs = docs.docs; $scope.docs = docs.docs;
}); });
eventBus.register($scope,"get_fields", function(event,id) { eventBus.register($scope,"get_fields", function(event,id) {
console.log("field.get_fields");
eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active); eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active);
}); });
} }
...@@ -79,7 +78,7 @@ angular.module('kibana.fields', []) ...@@ -79,7 +78,7 @@ angular.module('kibana.fields', [])
} }
$scope.build_search = function(field, value,negate) { $scope.build_search = function(field, value,negate) {
$scope.panel.query = add_to_query($scope.panel.query,field,value,negate) $scope.panel.query = [add_to_query($scope.panel.query,field,value,negate)]
eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query); eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query);
} }
......
panels/histogram/editor.html
<div ng-controller='histogram'> <div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<form style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
...@@ -23,9 +23,8 @@ ...@@ -23,9 +23,8 @@
</form> </form>
</div> </div>
<div class="span8"> <div class="span8">
<form class="input-append" style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query"> <input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form> </form>
</div> </div>
<div class="span1"> <div class="span1">
...@@ -34,29 +33,38 @@ ...@@ -34,29 +33,38 @@
</div> </div>
<h5>Chart Options</h5> <h5>Chart Options</h5>
<div class="row-fluid" style="margin-bottom:10px;"> <div class="row-fluid" style="margin-bottom:10px;">
<div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div> <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
<div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div> <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
<div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div> <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
<div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div> <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
<div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div> <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
<div class="span1"> <label class="small">xAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div> <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
<div class="span1"> <label class="small">yAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div> <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
<div class="span2" ng-show="panel.lines"> <div class="span2" ng-show="panel.lines">
<label class="small">Line Fill</label> <label class="small">Line Fill</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select> <select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div> </div>
<div class="span2" ng-show="panel.lines"> <div class="span2" ng-show="panel.lines">
<label class="small">Line Width</label> <label class="small">Line Width</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select> <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div> </div>
</div> </div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<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-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
</div> </div>
<div class="span2"> <div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks"> <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
</div>
<div class="span2" ng-hide='panel.auto_int'>
<label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
</div>
<div class="span3" ng-hide='panel.auto_int'>
<label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
</div> </div>
</div> </div>
<h5>Panel Spy</h5> <h5>Panel Spy</h5>
......
panels/histogram/module.js
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
* query :: an array of objects as such: {query: 'somequery', label 'legent text'}. * query :: an array of objects as such: {query: 'somequery', label 'legent text'}.
this is usually populated by a stringquery panel wher the query and label this is usually populated by a stringquery panel wher the query and label
parameter are the same parameter are the same
* interval :: Generated automatically. Tells ES how to bucket the data points * auto_int :: Auto calculate data point interval?
* interval :: Datapoint interval in elasticsearch date math format (eg 1d, 1w, 1y, 5y)
* fill :: Only applies to line charts. Level of area shading from 0-10 * fill :: Only applies to line charts. Level of area shading from 0-10
* linewidth :: Only applies to line charts. How thick the line should be in pixels * linewidth :: Only applies to line charts. How thick the line should be in pixels
While the editor only exposes 0-10, this can be any numeric value. While the editor only exposes 0-10, this can be any numeric value.
...@@ -44,7 +45,8 @@ angular.module('kibana.histogram', []) ...@@ -44,7 +45,8 @@ angular.module('kibana.histogram', [])
var _d = { var _d = {
group : "default", group : "default",
query : [ {query: "*", label:"Query"} ], query : [ {query: "*", label:"Query"} ],
interval : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), auto_int : true,
interval : '5m',
fill : 3, fill : 3,
linewidth : 3, linewidth : 3,
timezone : 'browser', // browser, utc or a standard timezone timezone : 'browser', // browser, utc or a standard timezone
...@@ -102,6 +104,9 @@ angular.module('kibana.histogram', []) ...@@ -102,6 +104,9 @@ angular.module('kibana.histogram', [])
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time)) if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
return return
if ($scope.panel.auto_int)
$scope.panel.interval = secondsToHms(calculate_interval($scope.time.from,$scope.time.to,50,0)/1000);
$scope.panel.loading = true; $scope.panel.loading = true;
var _segment = _.isUndefined(segment) ? 0 : segment var _segment = _.isUndefined(segment) ? 0 : segment
var request = $scope.ejs.Request().indices($scope.panel.index[_segment]); var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
...@@ -206,7 +211,7 @@ angular.module('kibana.histogram', []) ...@@ -206,7 +211,7 @@ angular.module('kibana.histogram', [])
// function $scope.zoom // function $scope.zoom
// factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan
$scope.zoom = function(factor) { $scope.zoom = function(factor) {
eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor) eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor);
} }
// I really don't like this function, too much dom manip. Break out into directive? // I really don't like this function, too much dom manip. Break out into directive?
...@@ -220,11 +225,24 @@ angular.module('kibana.histogram', []) ...@@ -220,11 +225,24 @@ angular.module('kibana.histogram', [])
} }
} }
$scope.set_refresh = function (state) {
$scope.refresh = state;
}
$scope.close_edit = function() {
if($scope.refresh)
$scope.get_data();
$scope.refresh = false;
$scope.$emit('render');
}
$scope.set_time = function(time) { $scope.set_time = function(time) {
$scope.time = time; $scope.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index // Should I be storing the index on the panel? It causes errors if the index
$scope.panel.interval = secondsToHms( // goes away. Hmmm.
calculate_interval(time.from,time.to,50,0)/1000); $scope.panel.index = time.index || $scope.panel.index
// Only calculate interval if auto_int is set, otherwise don't touch it
$scope.get_data(); $scope.get_data();
} }
...@@ -234,8 +252,6 @@ angular.module('kibana.histogram', []) ...@@ -234,8 +252,6 @@ angular.module('kibana.histogram', [])
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
var height = scope.panel.height || scope.row.height;
// Receive render events // Receive render events
scope.$on('render',function(){ scope.$on('render',function(){
render_panel(); render_panel();
...@@ -248,6 +264,7 @@ angular.module('kibana.histogram', []) ...@@ -248,6 +264,7 @@ angular.module('kibana.histogram', [])
// Function for rendering panel // Function for rendering panel
function render_panel() { function render_panel() {
// Set barwidth based on specified interval // Set barwidth based on specified interval
var barwidth = interval_to_seconds(scope.panel.interval)*1000 var barwidth = interval_to_seconds(scope.panel.interval)*1000
...@@ -288,7 +305,7 @@ angular.module('kibana.histogram', []) ...@@ -288,7 +305,7 @@ angular.module('kibana.histogram', [])
}, },
selection: { selection: {
mode: "x", mode: "x",
color: '#999' color: '#ccc'
}, },
grid: { grid: {
backgroundColor: '#fff', backgroundColor: '#fff',
...@@ -323,15 +340,16 @@ angular.module('kibana.histogram', []) ...@@ -323,15 +340,16 @@ angular.module('kibana.histogram', [])
} }
function tt(x, y, contents) { function tt(x, y, contents) {
// If the tool tip already exists, don't recreate it, just update it
var tooltip = $('#pie-tooltip').length ? var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>'); $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
//var tooltip = $('#pie-tooltip')
tooltip.html(contents).css({ tooltip.html(contents).css({
position: 'absolute', position: 'absolute',
top : y + 5, top : y + 5,
left : x + 5, left : x + 5,
color : "#000", color : "#000",
border : '2px solid #000', border : '1px solid #000',
padding : '10px', padding : '10px',
'font-size': '11pt', 'font-size': '11pt',
'font-weight' : 200, 'font-weight' : 200,
......
panels/hits/editor.html
<div ng-controller="hits"> <div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<label class="small">Style</label> <label class="small">Style</label>
......
panels/map/editor.html
<div class="row-fluid" ng-controller="map"> <div class="row-fluid">
<div class="span11"> <div class="span11">
The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong> The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
</div> </div>
......
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie"> <div class="row-fluid" ng-switch="panel.mode">
<div ng-switch-when="terms"> <div ng-switch-when="terms">
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
......
panels/stringquery/editor.html
<div ng-controller="stringquery"> <div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
<label class="small">Mulit-query</label><input type="checkbox" ng-change="set_multi(panel.multi) "ng-model="panel.multi" ng-checked="panel.multi"> <label class="small">Mulit-query</label><input type="checkbox" ng-change="set_multi(panel.multi) "ng-model="panel.multi" ng-checked="panel.multi">
......
panels/table/editor.html
<div class="row-fluid" ng-controller="table"> <div class="row-fluid">
<div style="width:90%"> <div style="width:90%">
<form class="input-append"> <form class="input-append">
<h6>Query</h6> <h6>Query</h6>
......
panels/text/editor.html
<div ng-controller="text"> <div>
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select> <label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>
......
panels/timepicker/editor.html
<div class="row-fluid" ng-controller="timepicker"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<h6>Default Mode</h6> <h6>Default Mode</h6>
<select style="width:85%" ng-model="panel.mode" ng-options="f for f in ['relative','absolute','since']"></select> <select style="width:85%" ng-model="panel.mode" ng-options="f for f in ['relative','absolute','since']"></select>
......
partials/paneleditor.html
...@@ -13,5 +13,6 @@ ...@@ -13,5 +13,6 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();close_edit()">Close</button> <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
<button type="button" class="btn btn-success" ng-click="close_edit();dismiss()">Close</button>
</div> </div>
\ No newline at end of file
partials/roweditor.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div ng-show="!(_.isUndefined(panel.type))"> <div ng-show="!(_.isUndefined(panel.type))">
<div ng-include src="'partials/panelgeneral.html'"></div> <div ng-include src="'partials/panelgeneral.html'"></div>
<div ng-include src="edit_path(panel.type)"></div> <div add-panel="{{panel.type}}"></div>
<button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br> <button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
</div> </div>
</div> </div>
......
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