From d685fddcbebf2fc203f33d27e52ffda846d2a895 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Fri, 5 Apr 2013 20:52:35 -0700 Subject: [PATCH 1/2] prettied up histogram hover, added line width options, fixed excessive refresh on string query --- panels/histogram/editor.html | 118 +++++++++++++++++---------------- panels/histogram/module.js | 27 +++++--- panels/hits/editor.html | 53 ++++++++++----- panels/hits/module.html | 10 ++- panels/hits/module.js | 104 ++++++++++++++++++++++------- panels/stringquery/module.html | 2 +- 6 files changed, 206 insertions(+), 108 deletions(-) diff --git a/panels/histogram/editor.html b/panels/histogram/editor.html index 6863844c58e121..76fdca5733dc80 100644 --- a/panels/histogram/editor.html +++ b/panels/histogram/editor.html @@ -1,61 +1,67 @@ -
-
-
-
Label
- -
+
+
+
+
+
Label
+ +
+
+
+
+
Query
+ + +
+
+
+
-
-
-
Query
- - -
+
+
+
+ +
+
+
+
+ + +
+
+
+ +
-
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
-
-
-
-
- -
-
-
-
- - -
-
-
- -
-
-
-
- - -
-
- - -
-
- - -
-
- -
-
-
Panel Spy
-
-
- -
-
- The panel spy shows 'behind the scenes' information about a panel. It can - be accessed by clicking the in the top right - of the panel. +
Panel Spy
+
+
+ +
+
+ The panel spy shows 'behind the scenes' information about a panel. It can + be accessed by clicking the in the top right + of the panel. +
diff --git a/panels/histogram/module.js b/panels/histogram/module.js index 1bc9d5b34b3d3a..7e9c515b25cca4 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -7,6 +7,7 @@ angular.module('kibana.histogram', []) interval : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000), show : ['bars','y-axis','x-axis','legend'], fill : 3, + linewidth : 3, timezone : 'browser', // browser, utc or a standard timezone spyable : true, zoomlinks : true, @@ -148,7 +149,6 @@ angular.module('kibana.histogram', []) i++; }); - eventBus.broadcast($scope.$id,$scope.panel.group,'hits',$scope.hits) $scope.$emit('render') if(_segment < $scope.panel.index.length-1) { $scope.get_data(_segment+1,query_id) @@ -236,7 +236,12 @@ angular.module('kibana.histogram', []) }, series: { stack: show.stack, - lines: { show: show.lines, fill: scope.panel.fill/10 }, + lines: { + show: show.lines, + fill: scope.panel.fill/10, + lineWidth: scope.panel.linewidth, + steps: true + }, bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 }, points: { show: show.points, fill: 1, fillColor: false}, shadowSize: 1 @@ -294,23 +299,25 @@ angular.module('kibana.histogram', []) var tooltip = $('#pie-tooltip').length ? $('#pie-tooltip') : $('
'); //var tooltip = $('#pie-tooltip') - tooltip.text(contents).css({ + tooltip.html(contents).css({ position: 'absolute', top : y + 5, left : x + 5, - color : "#FFF", - border : '1px solid #FFF', - padding : '2px', - 'font-size': '8pt', - 'background-color': '#000', + color : "#000", + border : '3px solid #000', + padding : '10px', + 'font-size': '11pt', + 'font-weight' : 'bold', + 'background-color': '#FFF', + 'border-radius': '10px', }).appendTo("body"); } elem.bind("plothover", function (event, pos, item) { if (item) { - var percent = parseFloat(item.series.percent).toFixed(1) + "%"; tt(pos.pageX, pos.pageY, - item.datapoint[1].toFixed(1) + " @ " + + "
"+ + item.datapoint[1].toFixed(0) + " @ " + new Date(item.datapoint[0]).format('mm/dd HH:MM:ss')); } else { $("#pie-tooltip").remove(); diff --git a/panels/hits/editor.html b/panels/hits/editor.html index d4833703c26687..0af41993a3aaaf 100644 --- a/panels/hits/editor.html +++ b/panels/hits/editor.html @@ -1,23 +1,46 @@ -
-
- +
+
+
Font Size
+
-
- With query running disabled, this panel receives its hit count from a histogram panel. If multiple queries are running this will show the total of all queries. +
+
-
- This shows a simple count of how many records match your filtered query. If multiple queries are sent from a single panel the first query will be displayed +
Arrangement
+
- -
-
-
+
+
+ +
Label
+ + +
+
+
Query
- - + +
-
Font Size
- +
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ +
+
diff --git a/panels/hits/module.html b/panels/hits/module.html index cc1dd32888f738..ab9015ed005e0c 100644 --- a/panels/hits/module.html +++ b/panels/hits/module.html @@ -1,3 +1,11 @@ -

≥ {{hits}}

+

{{hits}}

+ + + + +
{{query.label}}{{query.hits}}
+
+ {{query.label}} {{query.hits}} | +
\ No newline at end of file diff --git a/panels/hits/module.js b/panels/hits/module.js index cb697fb76b4b21..2a1ca5fcffca06 100644 --- a/panels/hits/module.js +++ b/panels/hits/module.js @@ -5,60 +5,114 @@ angular.module('kibana.hits', []) var _d = { query : "*", group : "default", - style : { "font-size": '36pt', "font-weight": "bold" }, - run_query : false + style : { "font-size": '36pt'}, + aggregate : true, + arrangement : 'vertical' } _.defaults($scope.panel,_d) $scope.init = function () { $scope.hits = 0; eventBus.register($scope,'time', function(event,time){ - if($scope.panel.run_query) - set_time(time) + set_time(time) }); eventBus.register($scope,'query', function(event, query) { - $scope.panel.query = _.isArray(query) ? query[0] : query; - if($scope.panel.run_query) - $scope.get_data(); + $scope.panel.query = _.map(query,function(q) { + return {query: q, label: q}; + }) + $scope.get_data(); }); - eventBus.register($scope,'hits', function(event, hits) { - $scope.hits = hits; - }) // Now that we're all setup, request the time from our group eventBus.broadcast($scope.$id,$scope.panel.group,'get_time') } - $scope.get_data = function() { + $scope.get_data = function(segment,query_id) { + delete $scope.panel.error + $scope.panel.loading = true; + // Make sure we have everything for the request to complete if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time)) return - $scope.panel.loading = true; - var request = $scope.ejs.Request().indices($scope.panel.index); - - var results = request - .query(ejs.FilteredQuery( - ejs.QueryStringQuery($scope.panel.query || '*'), + var _segment = _.isUndefined(segment) ? 0 : segment + var request = $scope.ejs.Request().indices($scope.panel.index[_segment]); + + // Build the question part of the query + var queries = []; + _.each($scope.panel.query, function(v) { + queries.push($scope.ejs.FilteredQuery( + ejs.QueryStringQuery(v.query || '*'), ejs.RangeFilter($scope.time.field) .from($scope.time.from) - .to($scope.time.to) - ) + .to($scope.time.to)) ) - .size(0) - .doSearch(); + }); + + // Build the facet part + _.each(queries, function(v) { + request = request + .facet($scope.ejs.QueryFacet("query"+_.indexOf(queries,v)) + .query(v) + ).size(0) + }) + + // TODO: Spy for hits panel + //$scope.populate_modal(request); + + // Then run it + var results = request.doSearch(); // Populate scope when we have results results.then(function(results) { + $scope.panel.loading = false; - if(_.isUndefined(results)) { - $scope.panel.error = 'Your query was unsuccessful'; + if(_segment == 0) { + $scope.hits = 0; + $scope.data = []; + query_id = $scope.query_id = new Date().getTime(); + } + + // Check for error and abort if found + if(!(_.isUndefined(results.error))) { + $scope.panel.error = $scope.parse_error(results.error); return; } - $scope.panel.error = false; - $scope.hits = results.hits.total; + if($scope.query_id === query_id) { + var i = 0; + _.each(results.facets, function(v, k) { + var hits = _.isUndefined($scope.data[i]) || _segment == 0 ? + v.count : $scope.data[i].hits+v.count + $scope.hits += v.count + + // Create series + $scope.data[i] = { + label: $scope.panel.query[i].label || "query"+(parseInt(i)+1), + hits: hits + }; + + i++; + }); + + if(_segment < $scope.panel.index.length-1) + $scope.get_data(_segment+1,query_id) + + } }); } + $scope.remove_query = function(q) { + $scope.panel.query = _.without($scope.panel.query,q); + $scope.get_data(); + } + + $scope.add_query = function(label,query) { + $scope.panel.query.unshift({ + query: query, + label: label, + }); + $scope.get_data(); + } + function set_time(time) { $scope.time = time; $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index diff --git a/panels/stringquery/module.html b/panels/stringquery/module.html index 651b398688433d..c4b6af3fe5c22d 100644 --- a/panels/stringquery/module.html +++ b/panels/stringquery/module.html @@ -31,7 +31,7 @@ - +
From b7eaae3c8bf67cf357db4de2a0a2beed6b36b1aa Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Sat, 6 Apr 2013 16:34:04 -0700 Subject: [PATCH 2/2] Lots of visual tweaks, added bar chart options to hit panel --- common/css/main.css | 40 +++++++++++++ index.html | 2 +- panels/histogram/module.html | 8 +-- panels/histogram/module.js | 5 +- panels/hits/editor.html | 17 +++--- panels/hits/module.html | 21 ++++--- panels/hits/module.js | 104 +++++++++++++++++++++++++++++++-- panels/stringquery/module.html | 2 +- partials/dashboard.html | 20 ++++--- 9 files changed, 183 insertions(+), 36 deletions(-) diff --git a/common/css/main.css b/common/css/main.css index c7a17b0f0c9ed5..bb53d3f6704b81 100644 --- a/common/css/main.css +++ b/common/css/main.css @@ -6,6 +6,46 @@ color: #000; } +.kibana-row { + margin-left: 15px; + margin-bottom: 15px; +} + +.navbar .brand { + color: #eee; +} + +.row-close { + color: #bbb; + position: absolute; + font-size: 9pt; + font-weight: 200; + padding-left: 35px; + padding-top:0px; +} + +.row-open { + text-align: right; + color: #bbb; + margin-top:30px; + position: absolute; + font-size: 13pt; + font-weight: 200; + -moz-transform-origin: 40px; + -ms-transform-origin: 40px; + -o-transform-origin: 40px; + -webkit-transform-origin: 40px; + transform-origin: 40px; + transform: rotate(-90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); +} + +.row-open i { + font-size: 10pt; +} + .odd { background-color: #f9f9f9; } diff --git a/index.html b/index.html index 7af6855a2173de..5a23ff69de6fe3 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@
-

Kibana 3 Preview

+

Kibana 3 milestone 1

{{dashboards.title}}
diff --git a/panels/histogram/module.html b/panels/histogram/module.html index 3e646faad12a19..406c061d576e0e 100644 --- a/panels/histogram/module.html +++ b/panels/histogram/module.html @@ -2,16 +2,16 @@ -
+
-
+ |
{{series.label}} ({{series.hits}})
 per {{panel.interval}} | ({{hits}} total)
-
+
\ No newline at end of file diff --git a/panels/histogram/module.js b/panels/histogram/module.js index 7e9c515b25cca4..c2049e80f17602 100644 --- a/panels/histogram/module.js +++ b/panels/histogram/module.js @@ -184,7 +184,7 @@ angular.module('kibana.histogram', []) } }) -.directive('histogram', function(eventBus) { +.directive('histogramChart', function(eventBus) { return { restrict: 'A', link: function(scope, elem, attrs, ctrl) { @@ -256,7 +256,8 @@ angular.module('kibana.histogram', []) color: "#000", }, selection: { - mode: "x" + mode: "x", + color: '#666' }, grid: { backgroundColor: '#fff', diff --git a/panels/hits/editor.html b/panels/hits/editor.html index 0af41993a3aaaf..0c21fcb206a7b0 100644 --- a/panels/hits/editor.html +++ b/panels/hits/editor.html @@ -1,25 +1,28 @@
-
Font Size
- +
+
- +
-
Arrangement
- +
+ +
+
+
-
Label
+
-
Query
+
diff --git a/panels/hits/module.html b/panels/hits/module.html index ab9015ed005e0c..809aea771b05ba 100644 --- a/panels/hits/module.html +++ b/panels/hits/module.html @@ -1,11 +1,14 @@ -

{{hits}}

- - - - -
{{query.label}}{{query.hits}}
-
- {{query.label}} {{query.hits}} | -
+
+

{{hits}}

+ + + + +
{{query.label}}{{query.hits}}
+
+
{{query.label}} ({{query.hits}}) | +

+
+
\ No newline at end of file diff --git a/panels/hits/module.js b/panels/hits/module.js index 2a1ca5fcffca06..a9acca4105b06b 100644 --- a/panels/hits/module.js +++ b/panels/hits/module.js @@ -5,9 +5,12 @@ angular.module('kibana.hits', []) var _d = { query : "*", group : "default", - style : { "font-size": '36pt'}, + style : { "font-size": '10pt'}, aggregate : true, - arrangement : 'vertical' + arrangement : 'vertical', + chart : true, + counters: true, + count_pos: 'above' } _.defaults($scope.panel,_d) @@ -87,15 +90,17 @@ angular.module('kibana.hits', []) // Create series $scope.data[i] = { label: $scope.panel.query[i].label || "query"+(parseInt(i)+1), - hits: hits + hits: hits, + data: [[i,hits]] }; i++; }); + $scope.$emit('render'); if(_segment < $scope.panel.index.length-1) $scope.get_data(_segment+1,query_id) - + } }); } @@ -119,4 +124,95 @@ angular.module('kibana.hits', []) $scope.get_data(); } +}).directive('hitsChart', function(eventBus) { + return { + restrict: 'A', + link: function(scope, elem, attrs, ctrl) { + + // Receive render events + scope.$on('render',function(){ + render_panel(); + }); + + // Re-render if the window is resized + angular.element(window).bind('resize', function(){ + render_panel(); + }); + + // Function for rendering panel + function render_panel() { + + var scripts = $LAB.script("common/lib/panels/jquery.flot.js") + + // Populate element. Note that jvectormap appends, does not replace. + scripts.wait(function(){ + console.log(scope.data) + + // Populate element + try { + var plot = $.plot(elem, scope.data, { + legend: { show: false }, + series: { + lines: { show: false, }, + bars: { show: true, fill: 1, barWidth: 0.8, horizontal: false }, + shadowSize: 1 + }, + yaxis: { show: true, min: 0, color: "#000" }, + xaxis: { show: false }, + grid: { + backgroundColor: '#fff', + borderWidth: 0, + borderColor: '#eee', + color: "#eee", + hoverable: true, + }, + colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F'] + }) + + var i = 0; + _.each(plot.getData(),function(series) { + scope.data[i].color = series.color; + i++; + }) + + // Work around for missing legend at initialization + if(!scope.$$phase) + scope.$apply() + + } catch(e) { + elem.text(e) + } + }) + } + + function tt(x, y, contents) { + var tooltip = $('#pie-tooltip').length ? + $('#pie-tooltip') : $('
'); + //var tooltip = $('#pie-tooltip') + tooltip.html(contents).css({ + position: 'absolute', + top : y + 5, + left : x + 5, + color : "#000", + border : '3px solid #000', + padding : '10px', + 'font-size': '11pt', + 'font-weight' : 'bold', + 'background-color': '#FFF', + 'border-radius': '10px', + }).appendTo("body"); + } + + elem.bind("plothover", function (event, pos, item) { + if (item) { + tt(pos.pageX, pos.pageY, + "
"+ + item.datapoint[1].toFixed(0)) + } else { + $("#pie-tooltip").remove(); + } + }); + + } + }; }) diff --git a/panels/stringquery/module.html b/panels/stringquery/module.html index c4b6af3fe5c22d..ca9a789580bb0e 100644 --- a/panels/stringquery/module.html +++ b/panels/stringquery/module.html @@ -21,7 +21,7 @@
-
+ diff --git a/partials/dashboard.html b/partials/dashboard.html index f88f599ad03c04..797298b533b63f 100644 --- a/partials/dashboard.html +++ b/partials/dashboard.html @@ -1,17 +1,21 @@ -
+
-
-
+
+
-
- - {{row.title}} - {{row.title}} +
+
+
+ {{row.title}} + +
+
+ {{row.title}}
-
+