Skip to content

Commit

Permalink
Merge pull request #33 from rashidkpc/master
Browse files Browse the repository at this point in the history
More prettiness, and a bar chart for the hits panel
  • Loading branch information
Rashid Khan committed Apr 6, 2013
2 parents e9ae8be + b7eaae3 commit f0faf66
Show file tree
Hide file tree
Showing 10 changed files with 369 additions and 124 deletions.
40 changes: 40 additions & 0 deletions common/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<p class="navbar-text pull-right"><small>Kibana 3 Preview</small></p>
<p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 1</small></small></p>
<span class="brand">{{dashboards.title}}</span>
<div class="brand"><i class='icon-edit pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div>
</div>
Expand Down
118 changes: 62 additions & 56 deletions panels/histogram/editor.html
Original file line number Diff line number Diff line change
@@ -1,61 +1,67 @@
<div class="row-fluid" ng-controller='histogram'>
<div class="span3">
<form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
<div ng-controller='histogram'>
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
<h6>Label</h6>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span1">
</div>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<h6>Query</h6>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1">
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
<div class="span1">
<div class="row-fluid">
<div class="span3">
<label class="small">Chart Options</label>
<select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
</div>
<div class="span2">
<label class="small">Line Fill</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
<div class="span2">
<label class="small">Line Width</label>
<select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
</div>
<div class="span3">
<label class="small">Time correction</label>
<select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
</div>
</div>
</div>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label">
</form>
</div>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1">
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label class="small">Chart Options</label>
<select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
</div>
<div class="span3">
<label class="small">Line Fill (1 - 10)</label>
<input ng-change="$emit('render')" type="number" class="input-mini" ng-model="panel.fill">
</div>
<div class="span3">
<label class="small">Time correction</label>
<select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
</div>
<div class="span2">
<label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
</div>
</div>
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
<h5>Panel Spy</h5>
<div class="row-fluid">
<div class="span2">
<label class="small">Spyable</label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
</div>
<div class="span9 small">
The panel spy shows 'behind the scenes' information about a panel. It can
be accessed by clicking the <i class='icon-eye-open'></i> in the top right
of the panel.
</div>
</div>
</div>
8 changes: 4 additions & 4 deletions panels/histogram/module.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
<i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
</span>
<center ng-show='panel.zoomlinks && data'>
<div>
<span ng-show='panel.zoomlinks && data'>
<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a>
</center>
<div>
</span> |
<span ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
<div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div>
<div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
</span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>
</div>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
<div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
<div histogram-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel>
32 changes: 20 additions & 12 deletions panels/histogram/module.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -251,7 +256,8 @@ angular.module('kibana.histogram', [])
color: "#000",
},
selection: {
mode: "x"
mode: "x",
color: '#666'
},
grid: {
backgroundColor: '#fff',
Expand Down Expand Up @@ -294,23 +300,25 @@ angular.module('kibana.histogram', [])
var tooltip = $('#pie-tooltip').length ?
$('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
//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) + " @ " +
"<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
item.datapoint[1].toFixed(0) + " @ " +
new Date(item.datapoint[0]).format('mm/dd HH:MM:ss'));
} else {
$("#pie-tooltip").remove();
Expand Down
56 changes: 41 additions & 15 deletions panels/hits/editor.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,49 @@
<div class="row-fluid" ng-controller="hits">
<div ng-controller="hits">
<div class="row-fluid">
<div class="span2"><label class="small">Font Size</label>
<select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
</div>
<div class="span2">
<label class="small">Run Query</label><input type="checkbox" ng-model="panel.run_query" ng-checked="panel.run_query">
<label class="small">Aggregate</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
</div>
<div class="span3" ng-show="!panel.aggregate"><label class="small">Counter Style</label>
<select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
</div>
<div class="span2" ng-show="!panel.aggregate">
<label class="small">Chart</label><input type="checkbox" ng-model="panel.chart" ng-checked="panel.chart">
</div>
</div>
<div class="row-fluid">
<div class="span3">
<form style="margin-bottom: 0px">
<label class="small">Label</label>
<input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
</form>
</div>
<div class="span9" ng-show='!panel.run_query'>
With query running disabled, this panel receives its hit count from a histogram panel. If multiple queries are running this <strong>will show the total of all queries</strong>.
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<label class="small">Query</label>
<input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
<button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
</form>
</div>
<div class="span9" ng-show='panel.run_query'>
This shows a simple count of how many records match your filtered query. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
<div class="span1">
</div>
</div>

<div class="row-fluid">
<div class="span9" ng-show='panel.run_query'>
<form class="input-append">
<h6>Query</h6>
<input type="text" style="width:85%" ng-model="panel.query">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
<div class="row-fluid" ng-repeat="q in panel.query">
<div class="span3">
<form style="margin-bottom: 0px">
<input type="text" style="width:70%" ng-model="q.label">
</form>
</div>
<div class="span3"><h6>Font Size</h6>
<select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
<div class="span8">
<form class="input-append" style="margin-bottom: 0px">
<input type="text" style="width:80%" ng-model="q.query">
<button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1">
<i class="icon-remove pointer" ng-click="remove_query(q)"></i>
</div>
</div>
</div>
13 changes: 12 additions & 1 deletion panels/hits/module.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
<kibana-panel ng-controller='hits' ng-init="init()">
<p ng-style="panel.style">&#8805 {{hits}}</p>
<div ng-show="panel.counters">
<p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
<table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">
<tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
<td ng-show="panel.chart" style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.hits}}</td>
</tr>
</table>
<div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart'><div style="display:inline-block;background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
</div><br>
</div><div style="clear:both"></div>
<div ng-show='panel.chart && panel.query.length > 1' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel>
Loading

0 comments on commit f0faf66

Please sign in to comment.