Skip to content

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

Added row editor

parent 81962c83
Showing with 117 additions and 41 deletions
common/lib/shared.js
...@@ -437,4 +437,19 @@ function htmlEntities(str) { ...@@ -437,4 +437,19 @@ function htmlEntities(str) {
/</g, '&lt;').replace( /</g, '&lt;').replace(
/>/g, '&gt;').replace( />/g, '&gt;').replace(
/"/g, '&quot;'); /"/g, '&quot;');
} }
\ No newline at end of file
_.mixin({
move: function (array, fromIndex, toIndex) {
array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] );
return array;
}
});
_.mixin({
remove: function (array, index) {
array.splice(index, 1);
return array;
}
});
js/controllers.js
...@@ -9,6 +9,7 @@ angular.module('kibana.controllers', []) ...@@ -9,6 +9,7 @@ angular.module('kibana.controllers', [])
$scope._ = _; $scope._ = _;
// The global dashboards object should be moved to an $http request for json
if (Modernizr.localstorage && if (Modernizr.localstorage &&
!(_.isUndefined(localStorage['dashboard'])) && !(_.isUndefined(localStorage['dashboard'])) &&
localStorage['dashboard'] !== '' localStorage['dashboard'] !== ''
...@@ -46,6 +47,10 @@ angular.module('kibana.controllers', []) ...@@ -46,6 +47,10 @@ angular.module('kibana.controllers', [])
}) })
.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) { .controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
$scope.init = function(){
$scope.reset_panel();
}
$scope.toggle_row = function(row) { $scope.toggle_row = function(row) {
row.collapse = row.collapse ? false : true; row.collapse = row.collapse ? false : true;
if (!row.collapse) { if (!row.collapse) {
...@@ -55,6 +60,21 @@ angular.module('kibana.controllers', []) ...@@ -55,6 +60,21 @@ angular.module('kibana.controllers', [])
} }
} }
$scope.add_panel = function(row,panel) {
console.log(panel)
$scope.row.panels.push(panel);
}
$scope.reset_panel = function() {
$scope.panel = {
span: 1,
editable: true,
groups: ['default'],
};
};
$scope.init();
}); });
......
panels/histogram/editor.html
<div class="row-fluid"> <div class="row-fluid" ng-controller="histogram">
<div class="span3"> <div class="span3">
<form style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
<h6>Label</h6> <h6>Label</h6>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="row-fluid" ng-repeat="q in panel.query"> <div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3"> <div class="span3">
<form style="margin-bottom: 0px"> <form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label" ng-change="render_panel()"> <input type="text" style="width:70%" ng-model="q.label">
</form> </form>
</div> </div>
<div class="span8"> <div class="span8">
...@@ -34,10 +34,10 @@ ...@@ -34,10 +34,10 @@
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<label class="small">Effect Options</label> <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> <select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
</div> </div>
<div class="span2"> <div class="span2">
<label class="small">Fill (0.0 - 1.0)</label> <label class="small">Fill (0.0 - 1.0)</label>
<input type="number" class="input-mini" ng-model="panel.fill"> <input ng-change="$emit('render')" type="number" class="input-mini" ng-model="panel.fill">
</div> </div>
</div> </div>
\ No newline at end of file
panels/histogram/module.js
...@@ -5,7 +5,7 @@ angular.module('kibana.histogram', []) ...@@ -5,7 +5,7 @@ angular.module('kibana.histogram', [])
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
query : { query: "*" }, query : [ {query: "*", label:"Query"} ],
interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
show : ['bars'], show : ['bars'],
fill : false, fill : false,
...@@ -31,6 +31,8 @@ angular.module('kibana.histogram', []) ...@@ -31,6 +31,8 @@ angular.module('kibana.histogram', [])
} }
$scope.add_query = function(label,query) { $scope.add_query = function(label,query) {
if(!(_.isArray($scope.panel.query)))
$scope.panel.query = new Array();
$scope.panel.query.unshift({ $scope.panel.query.unshift({
query: query, query: query,
label: label, label: label,
...@@ -111,7 +113,7 @@ angular.module('kibana.histogram', []) ...@@ -111,7 +113,7 @@ angular.module('kibana.histogram', [])
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
// If the data or row state changes, re-render // Receive render events
scope.$on('render',function(){ scope.$on('render',function(){
render_panel(); render_panel();
}); });
......
panels/hits/editor.html
<div class="row-fluid"> <div class="row-fluid" ng-controller="hits">
<div class="span9"> <div class="span9">
<form class="input-append"> <form class="input-append">
<h6>Query</h6> <h6>Query</h6>
......
panels/map/editor.html
<div class="row-fluid"> <div class="row-fluid" ng-controller="map">
<div class="span9"> <div class="span6">
<form class="input-append"> <form class="input-append">
<h6>Query</h6> <h6>Query</h6>
<input type="text" style="width:85%" ng-model="panel.query"> <input type="text" ng-model="panel.query">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button> <button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form> </form>
</div> </div>
<div class="span3"><h6>Map</h6> <div class="span4">
<select class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select></span> <form class="input-append">
<h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1"><h6>Map</h6>
<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>
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode"> <div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
<div ng-switch-when="terms"> <div ng-switch-when="terms">
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
......
panels/table/editor.html
<div class="row-fluid"> <div class="row-fluid" ng-controller="table">
<div class="span12"> <div class="span12">
<form class="input-append"> <form class="input-append">
<h5>Query</h5> <h5>Query</h5>
......
panels/text/editor.html
<label class="small">Font Size</label> <select class="input-mini" 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> <div ng-controller="text">
<label class=small>Content</label> <label class="small">Font Size</label> <select class="input-mini" 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>
<textarea ng-model="panel.content" rows="6" style="width:95%"></textarea> <label class=small>Content</label>
\ No newline at end of file <textarea ng-model="panel.content" rows="6" style="width:95%"></textarea>
</div>
\ No newline at end of file
partials/paneleditor.html
...@@ -4,22 +4,9 @@ ...@@ -4,22 +4,9 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4>General <small> panel settings</small></h4>
<div ng-include src="'partials/panelgeneral.html'"></div>
<h4>General</h4>
<div class="row-fluid">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="span4">
<label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
</div>
<div class="span2">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
</div>
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4> <h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4>
<div ng-include src="'panels/'+panel.type+'/editor.html'">No additional settings are available for this type of panel.</div> <div ng-include src="'panels/'+panel.type+'/editor.html'">No additional settings are available for this type of panel.</div>
......
partials/panelgeneral.html 0 → 100644
<div class="row-fluid">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="span4">
<label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
</div>
<div class="span2">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
</div>
\ No newline at end of file
partials/roweditor.html
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{row.title}} <small>editor</small></h3> <h3>{{row.title}} <small>row editor</small></h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<h4>Row Control</h4>
<h4>General</h4>
<div class="row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input> <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
...@@ -14,10 +12,38 @@ ...@@ -14,10 +12,38 @@
<label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input> <label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
</div> </div>
<div class="span1"> <div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable"> <label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable" />
</div> </div>
</div> </div>
<div class="row-fluid">
<div class="span12">
<h4>Panels</h4>
<table class="table table-condensed table-striped">
<thead>
<th>Title</th>
<th>Type</th>
<th>Delete</th>
<th>Move</th>
</thead>
<tr ng-repeat="panel in row.panels">
<td>{{panel.title}}</td>
<td>{{panel.type}}</td>
<td><i ng-click="row.panels = _.without(row.panels,panel)" class="icon-remove"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="icon-arrow-up"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="icon-arrow-down"></i></td>
</tr>
</table>
</div>
</div>
<h4>New Panel</h4>
<select class="input-medium" ng-model="panel.type" ng-options="f for f in config.modules"></select>
<small>Select Type</small>
<div ng-show="!(_.isUndefined(panel.type))">
<div ng-include src="'partials/panelgeneral.html'"></div>
<div ng-include src="'panels/'+panel.type+'/editor.html'"></div>
<button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
</div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss()">Close</button> <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();">Close</button>
</div> </div>
\ No newline at end of file
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