From 4b9310ea880bc80b1b2b25bb6e12857af98b903f Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 5 Feb 2013 16:24:46 -0700 Subject: [PATCH] Added comments to default dashboard, added multi group binding to timepicker, added text panel --- config.js | 2 +- dashboards.js | 173 ++++++++++++++++++++++++++++++------ panels/pie/module.js | 30 ++++++- panels/timepicker/module.js | 17 ++-- 4 files changed, 186 insertions(+), 36 deletions(-) diff --git a/config.js b/config.js index 332384aa78b..f186a5da401 100644 --- a/config.js +++ b/config.js @@ -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, diff --git a/dashboards.js b/dashboards.js index 75961b8834f..2ae02f74ebc 100644 --- a/dashboards.js +++ b/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.", + }, ] } ] diff --git a/panels/pie/module.js b/panels/pie/module.js index 979a219c8ce..68ca313d92c 100644 --- a/panels/pie/module.js +++ b/panels/pie/module.js @@ -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 '
'+ @@ -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') : $('
'); + //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(); + } + }); } } }; diff --git a/panels/timepicker/module.js b/panels/timepicker/module.js index 0fbcefe4cca..9a2f6502ac9 100644 --- a/panels/timepicker/module.js +++ b/panels/timepicker/module.js @@ -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