mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added comments to default dashboard, added multi group binding to timepicker, added text panel
This commit is contained in:
Rashid Khan
parent
a733991560
commit
4b9310ea88
@ -30,7 +30,7 @@ var config = new Settings(
|
||||
timefield: '@timestamp',
|
||||
indexpattern: '"shakespeare"',
|
||||
modules: ['histogram','map','pie','table','stringquery','sort',
|
||||
'timepicker'],
|
||||
'timepicker','text'],
|
||||
|
||||
defaultfields: ['line_text'],
|
||||
perpage: 50,
|
||||
|
||||
173
dashboards.js
173
dashboards.js
@ -29,26 +29,156 @@ var dashboards =
|
||||
},
|
||||
timespan : '1h',
|
||||
timefield: '@timestamp',
|
||||
group: ['default','pies'],
|
||||
},
|
||||
{
|
||||
type : "sort",
|
||||
span : 4,
|
||||
},
|
||||
{
|
||||
type : "text",
|
||||
fontsize : "85%",
|
||||
span: 3,
|
||||
content : "Panels can send events to other panels. In the case of" +
|
||||
" the sort panel, it also receives a field event that it uses" +
|
||||
" to populate its list of fields from the table panel"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Top 3 Characters",
|
||||
collapse: false,
|
||||
height: "160px",
|
||||
panels: [
|
||||
{
|
||||
type : "text",
|
||||
title : "About",
|
||||
fontsize : "85%",
|
||||
span: 2,
|
||||
content : "These pies demonstrate configurable binding. They are" +
|
||||
" bound only to the time selector, not to the query input. Thus" +
|
||||
" they will change when you select a new time range, but not if" +
|
||||
" you enter a search. Try hovering over a pie slice.",
|
||||
},
|
||||
{
|
||||
title : "Hamlet",
|
||||
type : "pie",
|
||||
span : 2,
|
||||
size : 3,
|
||||
legend : false,
|
||||
labels : false,
|
||||
donut : true,
|
||||
colors : ['#20805E','#26527C','#BF8530','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "speaker", query : "play_name:Hamlet" },
|
||||
group : "pies"
|
||||
},
|
||||
{
|
||||
title : "Othello",
|
||||
type : "pie",
|
||||
span : 2,
|
||||
size : 3,
|
||||
legend : false,
|
||||
labels : false,
|
||||
donut : true,
|
||||
colors : ['#35D59D','#FFB140','#F43D6B','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "speaker", query : "play_name:Othello" },
|
||||
group : "pies"
|
||||
},
|
||||
{
|
||||
title : "A Winters Tale",
|
||||
type : "pie",
|
||||
span : 2,
|
||||
size : 3,
|
||||
legend : false,
|
||||
labels : false,
|
||||
donut : true,
|
||||
colors : ['#78AF2C','#BF4630','#6A237E','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "speaker", query : 'play_name:"A Winters Tale"' },
|
||||
group : "pies"
|
||||
},
|
||||
{
|
||||
title : "The Tempest",
|
||||
type : "pie",
|
||||
span : 2,
|
||||
size : 3,
|
||||
legend : false,
|
||||
labels : false,
|
||||
donut : true,
|
||||
colors : ['#2A4480','#BFA730','#BF7130','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "speaker", query : 'play_name:"The Tempest"' },
|
||||
group : "pies"
|
||||
},
|
||||
{
|
||||
title : "King Lear",
|
||||
type : "pie",
|
||||
span : 2,
|
||||
size : 3,
|
||||
legend : false,
|
||||
labels : false,
|
||||
donut : true,
|
||||
colors : ['#01939A','#FFAB00','#FF0700','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "speaker", query : 'play_name:"King Lear"' },
|
||||
group : "pies"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Lines of Plays",
|
||||
height: "250px",
|
||||
collapse: true,
|
||||
panels: [
|
||||
{
|
||||
title : "Plays",
|
||||
type : "pie",
|
||||
span : 4,
|
||||
size : 8,
|
||||
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "play_name", query : "*" },
|
||||
},
|
||||
{
|
||||
type : "text",
|
||||
title : "About",
|
||||
fontsize : "85%",
|
||||
span: 2,
|
||||
content : "The table panel can be sorted via a sort panel, or by" +
|
||||
" clicking the table header. Unlike the pie charts above, this" +
|
||||
" pie is bound to the query input. Try searching for a speaker" +
|
||||
" (eg, FALSTAFF) to see a break down of the plays they appear in.",
|
||||
},
|
||||
{
|
||||
title : "Newest Lines",
|
||||
type : "table",
|
||||
span : 6,
|
||||
query : "*",
|
||||
fields : ['@timestamp','play_name','speaker','text_entry'],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Monkey Monitoring",
|
||||
collapse: false,
|
||||
height: "300px",
|
||||
height: "275px",
|
||||
panels: [
|
||||
{
|
||||
title : "Monkey Shakespeare Lines",
|
||||
type : "histogram",
|
||||
span : 6,
|
||||
show : ['lines'],
|
||||
span : 5,
|
||||
show : ['lines','stack'],
|
||||
fill : 0.3,
|
||||
query : [
|
||||
{ label : "Query", query : "*", color: '#86B32D' },
|
||||
{ label : "Query Hits", query : "*", color: '#86B32D' },
|
||||
{ label : "Hamlet", query : "play_name:Hamlet" },
|
||||
{ label : "Macbeth", query : "play_name:macbeth" },
|
||||
],
|
||||
@ -58,34 +188,21 @@ var dashboards =
|
||||
type : "map",
|
||||
map : 'world',
|
||||
field : "country",
|
||||
span : 6,
|
||||
span : 5,
|
||||
size : 500,
|
||||
query : "*",
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Lines of Plays",
|
||||
height: "250px",
|
||||
panels: [
|
||||
{
|
||||
title : "Plays",
|
||||
type : "pie",
|
||||
span : 4,
|
||||
size : 8,
|
||||
donut : true,
|
||||
colors : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "play_name", query : "*" },
|
||||
},
|
||||
{
|
||||
title : "Newest Lines",
|
||||
type : "table",
|
||||
span : 8,
|
||||
query : "*",
|
||||
fields : ['@timestamp','play_name','speaker','text_entry'],
|
||||
}
|
||||
type : "text",
|
||||
title : "About",
|
||||
fontsize : "85%",
|
||||
span: 2,
|
||||
content : "Histograms can show multiple queries. In the case that a" +
|
||||
" multi-query histogram is bound to a query input, only the first" +
|
||||
" data series will be altered. All panels exist in the 'default'" +
|
||||
" group by default. The map panel can be used to visualize events" +
|
||||
" with attached geo data.",
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -14,6 +14,7 @@ angular.module('kibana.pie', [])
|
||||
donut : false,
|
||||
tilt : false,
|
||||
legend : true,
|
||||
labels : true,
|
||||
group : "default"
|
||||
}
|
||||
_.defaults($scope.panel,_d)
|
||||
@ -152,7 +153,7 @@ angular.module('kibana.pie', [])
|
||||
label: 'The Rest'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
show: scope.panel.labels,
|
||||
radius: 2/3,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
|
||||
@ -163,6 +164,7 @@ angular.module('kibana.pie', [])
|
||||
}
|
||||
},
|
||||
//grid: { hoverable: true, clickable: true },
|
||||
grid: { hoverable: true, clickable: true },
|
||||
legend: { show: scope.panel.legend }
|
||||
};
|
||||
|
||||
@ -170,7 +172,31 @@ angular.module('kibana.pie', [])
|
||||
if(elem.is(":visible")){
|
||||
$.plot(elem, scope.data, pie);
|
||||
}
|
||||
//elem.show();
|
||||
|
||||
function piett(x, y, contents) {
|
||||
var tooltip = $('#pie-tooltip').length ?
|
||||
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
|
||||
//var tooltip = $('#pie-tooltip')
|
||||
tooltip.text(contents).css({
|
||||
position: 'absolute',
|
||||
top : y + 5,
|
||||
left : x + 5,
|
||||
color : "#FFF",
|
||||
border : '1px solid #FFF',
|
||||
padding : '2px',
|
||||
'font-size': '8pt',
|
||||
'background-color': '#000',
|
||||
}).appendTo("body");
|
||||
}
|
||||
|
||||
elem.bind("plothover", function (event, pos, item) {
|
||||
if (item) {
|
||||
var percent = parseFloat(item.series.percent).toFixed(2) + "%";
|
||||
piett(pos.pageX, pos.pageY, percent + " " + item.series.label);
|
||||
} else {
|
||||
$("#pie-tooltip").remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -43,6 +43,9 @@ angular.module('kibana.timepicker', [])
|
||||
}
|
||||
_.defaults($scope.panel,_d)
|
||||
|
||||
var _groups = _.isArray($scope.panel.group) ?
|
||||
$scope.panel.group : [$scope.panel.group];
|
||||
|
||||
$scope.init = function() {
|
||||
// Private refresh interval that we can use for view display without causing
|
||||
// unnecessary refreshes during changes
|
||||
@ -74,11 +77,13 @@ 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
|
||||
$scope.$on($scope.panel.group+"-get_time", function(event,id) {
|
||||
console.log('time request: '+id)
|
||||
$rootScope.$broadcast(id+"-time", $scope.time)
|
||||
// This panel can handle multiple groups
|
||||
_.each(_groups,function(group){
|
||||
$scope.$on(group+"-get_time", function(event,id) {
|
||||
$rootScope.$broadcast(id+"-time", $scope.time)
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
|
||||
$scope.$watch('panel.refresh.interval', function() {
|
||||
$timeout(function(){
|
||||
@ -170,7 +175,9 @@ angular.module('kibana.timepicker', [])
|
||||
indices($scope.time.from,$scope.time.to).then(function (p) {
|
||||
$scope.time.index = p.join();
|
||||
// Broadcast time
|
||||
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
|
||||
_.each(_groups,function(group){
|
||||
$rootScope.$broadcast(group+"-time", $scope.time)
|
||||
});
|
||||
});
|
||||
|
||||
// Update panel's string representation of the time object
|
||||
|
||||
Loading…
Reference in New Issue
Block a user