mirror of https://github.com/grafana/grafana
Merge pull request #33 from rashidkpc/master
More prettiness, and a bar chart for the hits panelpull/7/head
Rashid Khan
12 years ago
commit
f0faf66c0e
@ -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> |
||||
|
||||
@ -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> |
||||
|
||||
@ -1,3 +1,14 @@ |
||||
<kibana-panel ng-controller='hits' ng-init="init()"> |
||||
<p ng-style="panel.style">≥ {{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…
Reference in new issue