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

Refactored panel communication to use an angular service, started work on panel editing interface

Browse Source
This commit is contained in:
Rashid Khan 2013-02-07 15:05:55 -07:00
parent 085b688850
commit ee65f81a2b
18 changed files with 178 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
common/css/main.css
View File

@ -51,4 +51,11 @@
.tiny {
font-size: 50%;
}
}
.remove:hover {
color: #A60000;
text-decoration: line-through;
}
.typeahead { z-index: 1051; }

7
dashboards.js
View File

@ -45,7 +45,7 @@ var dashboards =
index : "\"shakespeare\"",
refresh : {
enable : true,
interval: 30,
interval: 3,
min : 10
},
timefield: '@timestamp',
@ -70,7 +70,7 @@ var dashboards =
index : "\"shakespeare\"",
refresh : {
enable : true,
interval: 30,
interval: 3,
min : 10
},
timefield: '@timestamp',
@ -208,6 +208,7 @@ var dashboards =
},
{
title : "Newest Lines",
editable: true,
type : "table",
span : 6,
query : "*",
@ -221,6 +222,7 @@ var dashboards =
},
]
},
{
title: "Monkey Monitoring",
collapse: false,
@ -260,5 +262,6 @@ var dashboards =
},
]
}
]
};

2
index.html
View File

@ -12,9 +12,9 @@
<title>Kibana Dashboard</title>
<link rel="stylesheet" href="common/css/normalize.min.css">
<link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/bootstrap.min.css">
<link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="common/css/main.css">
<link rel="stylesheet" href="common/css/elasticjs.css">
<link rel="stylesheet" href="common/css/timepicker.css">

2
js/app.js
View File

@ -4,9 +4,9 @@
// Base modules
var modules = [
'kibana.services',
'kibana.controllers',
'kibana.filters',
'kibana.services',
'kibana.directives',
'elasticjs.service',
'$strap.directives',

4
js/controllers.js
View File

@ -3,7 +3,7 @@
'use strict';
angular.module('kibana.controllers', [])
.controller('DashCtrl', function($scope, ejsResource) {
.controller('DashCtrl', function($scope, $rootScope, ejsResource) {
$scope.config = config;
$scope.dashboards = dashboards
@ -14,7 +14,7 @@ angular.module('kibana.controllers', [])
$scope.$broadcast('toggle_row',row)
row.collapse = row.collapse ? false : true;
}
});

24
js/directives.js
View File

@ -12,13 +12,35 @@ angular.module('kibana.directives', [])
return (attrs.panel && scope.index) ? true : false;
}, function (ready) {
if (ready) {
element.html($compile("<div "+attrs.panel+" params={{panel}} style='height:{{row.height}}'></div>")(scope))
element.html($compile("<div "+attrs.panel+" params={{panel}} "+
"style='height:{{row.height}}'></div>")(scope))
}
});
}
}
}
})
.directive('arrayJoin', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
function split_array(text) {
return (text || '').split(',');
}
function join_array(text) {
if(_.isArray(text))
return (text || '').join(',');
else
return text
}
ngModel.$parsers.push(split_array);
ngModel.$formatters.push(join_array);
}
};
})
.directive('upload', function(){
return {
restrict: 'A',

36
js/services.js
View File

@ -2,4 +2,38 @@
/*global angular:true */
'use strict';
angular.module('kibana.services', []);
angular.module('kibana.services', [])
.service('eventBus', function($rootScope) {
this.broadcast = function(from,to,type,data) {
if(_.isUndefined(data))
var data = from
$rootScope.$broadcast(type,{
from: from,
to: to,
data: data
});
}
// This sets up an $on listener that checks to see if the event (packet) is
// addressed to the scope in question and runs the registered function if it
// is.
this.register = function(scope,type,fn) {
scope.$on(type,function(event,packet){
var _id = scope.$id;
var _to = packet.to;
var _from = packet.from;
if(!(_.isArray(_to)))
_to = [_to];
if(!(_.isArray(scope.panel.group)))
scope.panel.group = [scope.panel.group];
if(_.intersection(_to,scope.panel.group).length > 0 || _.indexOf(_to,_id) > -1) {
fn(event,packet.data);
}
});
}
});

7
panels/fields/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.fields', [])
.controller('fields', function($scope, $rootScope) {
.controller('fields', function($scope, eventBus) {
var _id = _.uniqueId();
@ -12,7 +12,7 @@ angular.module('kibana.fields', [])
$scope.init = function() {
$scope.fields = [];
$scope.$on($scope.panel.group+"-fields", function(event, fields) {
eventBus.register($scope,'fields', function(event, fields) {
$scope.panel.sort = _.clone(fields.sort);
$scope.fields = _.union(fields.all,$scope.fields);
$scope.active = _.clone(fields.active);
@ -28,7 +28,8 @@ angular.module('kibana.fields', [])
$scope.active = _.without($scope.active,field)
else
$scope.active.push(field)
$rootScope.$broadcast($scope.panel.group+"-selected_fields",$scope.active)
eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active)
}
$scope.is_active = function(field) {

9
panels/histogram/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.histogram', [])
.controller('histogram', function($scope, $rootScope) {
.controller('histogram', function($scope, eventBus) {
var _id = _.uniqueId();
@ -15,14 +15,13 @@ angular.module('kibana.histogram', [])
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
eventBus.register($scope,'time', function(event,time){set_time(time)});
eventBus.register($scope,'query', function(event, query) {
$scope.panel.query[0].query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.get_data = function() {

10
panels/hits/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.hits', [])
.controller('hits', function($scope, $rootScope, $location) {
.controller('hits', function($scope, eventBus) {
var _id = _.uniqueId();
@ -12,15 +12,13 @@ angular.module('kibana.hits', [])
_.defaults($scope.panel,_d)
$scope.init = function () {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
eventBus.register($scope,'time', function(event,time){set_time(time)});
eventBus.register($scope,'query', function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.get_data = function() {

9
panels/map/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.map', [])
.controller('map', function($scope, $rootScope) {
.controller('map', function($scope, eventBus) {
var _id = _.uniqueId();
@ -15,14 +15,13 @@ angular.module('kibana.map', [])
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
eventBus.register($scope,'time', function(event,time){set_time(time)});
eventBus.register($scope,'query', function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.get_data = function() {

9
panels/pie/module.js
View File

@ -2,7 +2,7 @@ labjs = labjs.script("common/lib/panels/jquery.flot.js")
.script("common/lib/panels/jquery.flot.pie.js")
angular.module('kibana.pie', [])
.controller('pie', function($scope, $rootScope) {
.controller('pie', function($scope, eventBus) {
var _id = _.uniqueId();
@ -20,16 +20,15 @@ angular.module('kibana.pie', [])
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
eventBus.register($scope,'time', function(event,time){set_time(time)});
if(!(_.isArray($scope.panel.query))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
eventBus.register($scope,'query', function(event, query) {
$scope.panel.query.query = query;
$scope.get_data();
});
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
}
$scope.get_data = function() {

10
panels/sort/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.sort', [])
.controller('sort', function($scope, $rootScope) {
.controller('sort', function($scope, eventBus) {
var _id = _.uniqueId();
@ -15,19 +15,21 @@ angular.module('kibana.sort', [])
$scope.init = function() {
$scope.fields = [];
$scope.$on($scope.panel.group+"-fields", function(event, fields) {
eventBus.register($scope,'fields',function(event, fields) {
$scope.panel.sort = _.clone(fields.sort);
$scope.fields = _.union(fields.all,$scope.fields);
});
}
$scope.set_sort = function() {
$rootScope.$broadcast($scope.panel.group+"-sort",$scope.panel.sort)
console.log($scope)
eventBus.broadcast($scope.$id,$scope.panel.group,"sort",$scope.panel.sort)
}
$scope.toggle_sort = function() {
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
$rootScope.$broadcast($scope.panel.group+"-sort",$scope.panel.sort)
$scope.set_sort();
}
$scope.init();
})

6
panels/stringquery/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.stringquery', [])
.controller('stringquery', function($scope, $rootScope) {
.controller('stringquery', function($scope, eventBus) {
var _id = _.uniqueId();
@ -18,9 +18,7 @@ angular.module('kibana.stringquery', [])
$scope.init = function() {
$scope.send_query = function(query) {
_.each(_groups,function(group) {
$rootScope.$broadcast(group+"-query", query)
});
eventBus.broadcast($scope.$id,$scope.panel.group,'query',query)
}
}
$scope.init();

30
panels/table/editor.html Normal file
View File

@ -0,0 +1,30 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>{{panel.title}}</h3>
</div>
<div class="modal-body">
<h4>Panel Settings</h4>
<form class="form-inline">
<label>Span</label> <input type="number" class="input-mini" ng-model="panel.span"><br>
<label class="checkbox"> Editable <input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable"></label>
</form>
<label>Group(s)</label><input array-join type="text" class="input-large" ng-model='panel.group'></input> <small>Comma seperated</small>
<div class="row-fluid">
<div class="span4">
<form class="input-append">
<h4>Add field</h4>
<input bs-typeahead="all_fields" type="text" class="input-small" ng-model='newfield'>
<button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span8">
<h4>Selected fields <small>Click to a field to remove it</small></h4>
<span ng-click="toggle_field(field)" ng-repeat="field in panel.fields" class="remove pointer">{{field}} </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" ng-click="dismiss()">Close</button>
<button class="btn btn-primary" ng-click="dismiss()">Save changes</button>
</div>

2
panels/table/module.html
View File

@ -1,5 +1,5 @@
<div ng-controller='table'>
<h4>{{panel.title}}</h4>
<h4>{{panel.title}} <small class="pointer" bs-modal="'panels/table/editor.html'" ng-hide="!panel.editable"><i class="icon-edit"></i></small></h4>
<div style="height:{{row.height}};overflow-y:auto;overflow-x:auto">
<table class="table table-condensed table-striped" ng-style="panel.style">
<thead>

65
panels/table/module.js
View File

@ -1,5 +1,5 @@
angular.module('kibana.table', [])
.controller('table', function($scope, $rootScope, $location) {
.controller('table', function($scope, eventBus) {
var _id = _.uniqueId();
@ -15,25 +15,29 @@ angular.module('kibana.table', [])
_.defaults($scope.panel,_d)
$scope.init = function () {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
console.log($scope.panel)
$scope.panel.query = query;
$scope.get_data();
});
$scope.$on($scope.panel.group+"-sort", function(event,sort){
$scope.panel.sort = _.clone(sort);
});
$scope.$on($scope.panel.group+"-selected_fields", function(event, fields) {
$scope.panel.fields = _.clone(fields)
});
$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
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
}
$scope.set_listeners = function(group) {
eventBus.register($scope,'time',function(event,time) {
set_time(time)
});
eventBus.register($scope,'query',function(event,query) {
$scope.panel.query = query;
$scope.get_data();
});
eventBus.register($scope,'sort', function(event,sort){
$scope.panel.sort = _.clone(sort);
});
eventBus.register($scope,'selected_fields', function(event, fields) {
$scope.panel.fields = _.clone(fields)
});
}
$scope.set_sort = function(field) {
@ -43,6 +47,14 @@ angular.module('kibana.table', [])
$scope.panel.sort[0] = field;
}
$scope.toggle_field = function(field) {
if (_.indexOf($scope.panel.fields,field) > -1)
$scope.panel.fields = _.without($scope.panel.fields,field)
else
$scope.panel.fields.push(field)
broadcast_fields();
}
$scope.get_data = function() {
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@ -71,17 +83,9 @@ angular.module('kibana.table', [])
$scope.panel.error = false;
$scope.hits = results.hits.total;
$scope.data = results.hits.hits;
$scope.all_fields = get_all_fields(results);
// 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 (!(_.isUndefined($scope.panel.group)))
$rootScope.$broadcast(
$scope.panel.group+"-fields", {
all : get_all_fields(results),
sort : $scope.panel.sort,
active: $scope.panel.fields
});
broadcast_fields();
});
}
@ -89,6 +93,17 @@ angular.module('kibana.table', [])
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.
function broadcast_fields() {
eventBus.broadcast($scope.$id,$scope.panel.group,"fields", {
all : $scope.all_fields,
sort : $scope.panel.sort,
active: $scope.panel.fields
});
}
function set_time(time) {
$scope.panel.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index

12
panels/timepicker/module.js
View File

@ -24,7 +24,7 @@ a pattern
*/
angular.module('kibana.timepicker', [])
.controller('timepicker', function($scope, $rootScope, $timeout, $http) {
.controller('timepicker', function($scope, eventBus, $timeout, $http) {
var _id = _.uniqueId();
@ -78,10 +78,8 @@ angular.module('kibana.timepicker', [])
// In the case that a panel is not ready to receive a time event, it may
// request one be sent by broadcasting a 'get_time' with its _id to its group
// This panel can handle multiple groups
_.each(_groups,function(group){
$scope.$on(group+"-get_time", function(event,id) {
$rootScope.$broadcast(id+"-time", $scope.time)
});
eventBus.register($scope,"get_time", function(event,id) {
eventBus.broadcast($scope.$id,id,'time',$scope.time)
});
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
@ -175,9 +173,7 @@ angular.module('kibana.timepicker', [])
indices($scope.time.from,$scope.time.to).then(function (p) {
$scope.time.index = p.join();
// Broadcast time
_.each(_groups,function(group){
$rootScope.$broadcast(group+"-time", $scope.time)
});
eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
});
// Update panel's string representation of the time object