IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Started on row editor, removed lots of 's for nice speed increase

Browse Source
This commit is contained in:
Rashid Khan 2013-02-12 16:25:39 -07:00
parent 0703dd8799
commit 81962c831b
13 changed files with 105 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
common/css/main.css
View File

@ -20,20 +20,32 @@
z-index: 2000;
}
span.editlink {
.panel i.editlink {
position: absolute;
right: 5px;
z-index: 800;
display: none;
}
.panel:hover span.editlink {
.panel:hover i.editlink {
display: block;
opacity: 0.3;
}
.panel span.editlink:hover {
display: block;
.panel i.editlink:hover {
opacity: 1;
}
.row-header i.editlink {
display: none;
}
.row-header:hover i.editlink {
display: inline-block;
opacity: 0.3;
}
.row-header i.editlink:hover {
opacity: 1;
}

3
index.html
View File

@ -32,10 +32,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="brand"><small><small>Kibana Preview</small></small></span>
<span class="brand"><small>Kibana Preview</small></span>
<span class="brand">{{dashboards.title}}</span>
<div class="brand"><i class='icon-download pointer' ng-click="export()" bs-tooltip="'Export this dashboard'" data-placement="bottom"></i></div>
<div class="brand"><i class='icon-bookmark pointer' ng-click="default()" bs-tooltip="'Set as default dashboard'" data-placement="bottom"></i></div>
<div class="brand"><i class='icon-ban-circle pointer' ng-click="purge()" bs-tooltip="'Clear default dashboard settings'" data-placement="bottom"></i></div>
<div class='pull-right' style="padding-top: 5px; padding-left: 10px"><input type="file" id="upload" upload /></div>
</div>

32
js/controllers.js
View File

@ -6,9 +6,13 @@ angular.module('kibana.controllers', [])
.controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
$scope.config = config;
$scope._ = _;
if (Modernizr.localstorage && !(_.isUndefined(localStorage['dashboard']))) {
if (Modernizr.localstorage &&
!(_.isUndefined(localStorage['dashboard'])) &&
localStorage['dashboard'] !== ''
) {
$scope.dashboards = JSON.parse(localStorage['dashboard']);
} else {
$scope.dashboards = dashboards;
@ -16,11 +20,6 @@ angular.module('kibana.controllers', [])
var ejs = $scope.ejs = ejsResource(config.elasticsearch);
$scope.toggle_row = function(row) {
$scope.$broadcast('toggle_row',row)
row.collapse = row.collapse ? false : true;
}
$scope.export = function() {
var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"});
saveAs(blob, $scope.dashboards.title+"-"+new Date().getTime());
@ -35,6 +34,27 @@ angular.module('kibana.controllers', [])
}
}
$scope.purge = function() {
if (Modernizr.localstorage) {
localStorage['dashboard'] = '';
alert('Default dashboard cleared')
} else {
alert("Sorry, your browser is too old for this functionality");
}
}
})
.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
$scope.toggle_row = function(row) {
row.collapse = row.collapse ? false : true;
if (!row.collapse) {
$timeout(function() {
$scope.$broadcast('render')
});
}
}
});

15
js/directives.js
View File

@ -7,23 +7,12 @@ angular.module('kibana.directives', [])
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var template = '<span class="pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<i class="icon-edit"></i></span><h4>{{panel.title}}</h4>';
var template = '<i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"></i>'+
'<h4>{{panel.title}}</h4>';
elem.prepend($compile(angular.element(template))(scope));
}
};
})
.directive('panelEdit', function(){
return {
restrict: 'E',
replace: true,
scope: {
'panel': '=panel'
},
templateUrl: 'panels/table/editor.html',
//controller: 'ChildElement'
}
})
.directive('arrayJoin', function() {
return {
restrict: 'A',

2
js/services.js
View File

@ -9,6 +9,7 @@ angular.module('kibana.services', [])
if(_.isUndefined(data))
var data = from
//console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data))
$rootScope.$broadcast(type,{
from: from,
to: to,
@ -31,6 +32,7 @@ angular.module('kibana.services', [])
scope.panel.group = [scope.panel.group];
if(_.intersection(_to,scope.panel.group).length > 0 || _.indexOf(_to,_id) > -1) {
//console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data))
fn(event,packet.data);
}
});

22
panels/histogram/module.js
View File

@ -19,8 +19,10 @@ angular.module('kibana.histogram', [])
$scope.panel.query[0].query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
// Now that we're all setup, request the time from our group if we don't
// have it yet
if(_.isUndefined($scope.time))
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.remove_query = function(q) {
@ -88,6 +90,7 @@ angular.module('kibana.histogram', [])
series.data.color = $scope.panel.query[k].color;
$scope.data.push(series.data)
});
$scope.$emit('render')
});
}
@ -109,20 +112,17 @@ angular.module('kibana.histogram', [])
link: function(scope, elem, attrs, ctrl) {
// If the data or row state changes, re-render
scope.$watch(function () {
return angular.toJson([scope.data, scope.row])
}, function() {
if(!(_.isUndefined(scope.data)))
render_panel(scope,elem,attrs);
scope.$on('render',function(){
render_panel();
});
// Re-render if the window is resized
angular.element(window).bind('resize', function(){
render_panel(scope,elem,attrs);
render_panel();
});
// Function for rendering panel
function render_panel(scope,elem,attrs) {
function render_panel() {
// Determine format
var show = _.isUndefined(scope.panel.show) ? {
bars: true, lines: false, points: false
@ -142,7 +142,7 @@ angular.module('kibana.histogram', [])
// Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function(){
// Populate element
// Populate element
$.plot(elem, scope.data, {
legend: {
position: "nw",

14
panels/map/module.js
View File

@ -53,6 +53,7 @@ angular.module('kibana.map', [])
_.each(results.facets.map.terms, function(v) {
$scope.data[v.term.toUpperCase()] = v.count;
});
$scope.$emit('render')
});
}
@ -70,20 +71,17 @@ angular.module('kibana.map', [])
restrict: 'A',
link: function(scope, elem, attrs) {
// If the data or row state changes, re-render
scope.$watch(function () {
return angular.toJson([scope.data, scope.row])
}, function() {
if(!(_.isUndefined(scope.data)))
render_panel(scope,elem,attrs);
// Receive render events
scope.$on('render',function(){
render_panel();
});
// Or if the window is resized
angular.element(window).bind('resize', function(){
render_panel(scope,elem,attrs);
render_panel();
});
function render_panel(scope,elem,attrs) {
function render_panel() {
// Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("panels/map/lib/jquery.jvectormap.min.js")
.script("panels/map/lib/map."+scope.panel.map+".js")

15
panels/pie/module.js
View File

@ -92,6 +92,7 @@ angular.module('kibana.pie', [])
slice.color = $scope.panel.query[k].color;
$scope.data.push(slice)
});
$scope.$emit('render');
});
// If we don't have an array, assume its a term facet.
} else {
@ -126,6 +127,7 @@ angular.module('kibana.pie', [])
$scope.data.push(slice)
k = k + 1;
});
$scope.$emit('render');
});
}
}
@ -145,21 +147,18 @@ angular.module('kibana.pie', [])
restrict: 'A',
link: function(scope, elem, attrs) {
// Watch if data or row state changes
scope.$watch(function () {
return angular.toJson([scope.data, scope.row])
}, function() {
if(!(_.isUndefined(scope.data)))
render_panel(scope,elem,attrs);
// Receive render events
scope.$on('render',function(){
render_panel();
});
// Or if the window is resized
angular.element(window).bind('resize', function(){
render_panel(scope,elem,attrs);
render_panel();
});
// Function for rendering panel
function render_panel(scope,elem,attrs) {
function render_panel() {
var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
.script("common/lib/panels/jquery.flot.pie.js")

1
panels/sort/module.js
View File

@ -22,7 +22,6 @@ angular.module('kibana.sort', [])
}
$scope.set_sort = function() {
console.log($scope)
eventBus.broadcast($scope.$id,$scope.panel.group,"sort",$scope.panel.sort)
}

9
panels/table/module.js
View File

@ -17,9 +17,6 @@ angular.module('kibana.table', [])
$scope.init = function () {
$scope.set_listeners($scope.panel.group)
$scope.$watch(function() {
return angular.toJson($scope.panel.sort)
}, function(){$scope.get_data()});
// Now that we're all setup, request the time from our group
eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
}
@ -34,6 +31,7 @@ angular.module('kibana.table', [])
});
eventBus.register($scope,'sort', function(event,sort){
$scope.panel.sort = _.clone(sort);
$scope.get_data();
});
eventBus.register($scope,'selected_fields', function(event, fields) {
$scope.panel.fields = _.clone(fields)
@ -45,6 +43,7 @@ angular.module('kibana.table', [])
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
else
$scope.panel.sort[0] = field;
$scope.get_data();
}
$scope.toggle_field = function(field) {
@ -89,10 +88,6 @@ angular.module('kibana.table', [])
});
}
$scope.move_field = function(field,dir) {
console.log(field,dir)
}
// Broadcast a list of all fields. Note that receivers of field array
// events should be able to receive from multiple sources, merge, dedupe
// and sort on the fly if needed.

8
panels/timepicker/module.js
View File

@ -102,11 +102,11 @@ angular.module('kibana.timepicker', [])
$scope.refresh = function() {
if ($scope.panel.refresh.enable) {
$scope.time_apply();
timer.cancel($scope.refresh_timer)
$scope.refresh_timer = timer.register($timeout(
$scope.refresh,
$scope.panel.refresh.interval*1000
$scope.refresh_timer = timer.register($timeout(function() {
$scope.refresh();
$scope.time_apply();
},$scope.panel.refresh.interval*1000
));
} else {
timer.cancel($scope.refresh_timer)

7
partials/dashboard.html
View File

@ -1,12 +1,13 @@
<div class="row-fluid container" style="margin-top:50px">
<!-- Rows -->
<div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows">
<div class="row-fluid" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows">
<div class="span12">
<div class="row-fluid" style="padding:0px;margin:0px;height:0px">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
<div class="span12" style="min-height:5px;vertical-align:bottom">
<i class="pointer" ng-class="{'icon-minus': !row.collapse,'icon-plus': row.collapse}" ng-click="toggle_row(row)"></i>
<span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span>
<span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span>
<i class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
</div>
</div>
<div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">

23
partials/roweditor.html Normal file
View File

@ -0,0 +1,23 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{row.title}} <small>editor</small></h3>
</div>
<div class="modal-body">
<h4>General</h4>
<div class="row-fluid">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
</div>
<div class="span2">
<label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
</div>