apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #482 from rashidkpc/master

Browse Source 
Pointer, timepicker cleanup and show _source by default in table
pull/7/head
Rashid Khan 12 years ago
parent f7c0e4280e 8b5ac5e56e
commit 5f1b6984ed
7 changed files with 53 additions and 40 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      js/filters.js
  2. 10
      panels/histogram/module.html
  3. 4
      panels/pie/module.html
  4. 14
      panels/table/module.html
  5. 4
      panels/table/module.js
  6. 12
      panels/terms/module.html
  7. 43
      panels/timepicker/module.html

6
js/filters.js
Unescape View File

@ -29,7 +29,11 @@ angular.module('kibana.filters', [])
}).filter('stringify', function() {
return function(arr, start, end) {
if(!_.isUndefined(arr)) {
return arr.toString();
if(_.isObject(arr) && !_.isArray(arr)) {
return angular.toJson(arr);
} else {
return arr.toString();
}
}
};
}).filter('noXml', function() {

10
panels/histogram/module.html
Unescape View File

@ -8,10 +8,10 @@
display:inline-block;
height:10px;
width:10px;
border-radius:5px;
border-radius:5px;
}
.histogram-legend-item {
display:inline-block;
display:inline-block;
}
.histogram-chart {
position:relative;
@ -23,7 +23,7 @@
<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> |
<a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
</span>
<span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
<i class='icon-circle' ng-style="{color: series.info.color}"></i>
@ -32,5 +32,5 @@
<span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
</div>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
<div histogram-chart class="histogram-chart" params="{{panel}}"></div>
</kibana-panel>
<div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
</kibana-panel>

4
panels/pie/module.html
Unescape View File

@ -8,9 +8,9 @@
</div><br>
<div style="clear:both"></div>
<div pie params="{{panel}}" style="position:relative"></div>
<div pie class="pointer" params="{{panel}}" style="position:relative"></div>
<div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
<span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
</div>
</kibana-panel>
</kibana-panel>

14
panels/table/module.html
Unescape View File

@ -39,10 +39,12 @@
<i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
</div>
</div>
<div class="small" ng-show="panel.fields.length == 0"><center>No columns configured. You may want to select some from the list on the left.</center></div>
<table class="table-hover table table-condensed" ng-style="panel.style">
<thead ng-show="panel.header">
<th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
<th style="white-space:nowrap" ng-repeat="field in panel.fields">
<i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
@ -58,7 +60,8 @@
<tbody ng-repeat="event in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
<tr ng-click="toggle_details(event)" class="pointer">
<!--<td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) | tableFieldFormat:field:event:this |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>-->
<td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
<td ng-show="panel.fields.length<1">{{event._source|stringify|tableTruncate:panel.trimFactor:1}}</td>
<td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields" ng-bind-html-unsafe="(event.highlight[field]||event._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length"></td>
</tr>
<tr ng-show="event.kibana.details">
<td colspan=1000>
@ -70,9 +73,10 @@
</thead>
<tr ng-repeat="(key,value) in event.kibana.details._source" ng-class-odd="'odd'">
<td>{{key}}</td>
<td>
<i class='icon-search pointer' ng-click="build_search(key,value)"></i>
<i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)"></i>
<td style="white-space:nowrap">
<i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
<i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
<i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
</td>
<!-- At some point we need to create a more efficient way of applying the filter pipeline -->
<td style="white-space:pre-wrap" ng-bind-html-unsafe="value|noXml|urlLink|stringify"></td>

4
panels/table/module.js
Unescape View File

@ -45,10 +45,10 @@ angular.module('kibana.table', [])
size : 100, // Per page
pages : 5, // Pages available
offset : 0,
sort : ['@timestamp','desc'],
sort : ['_score','desc'],
group : "default",
style : {'font-size': '9pt'},
overflow: 'height',
overflow: 'min-height',
fields : [],
highlight : [],
sortable: true,

12
panels/terms/module.html
Unescape View File

@ -5,7 +5,7 @@
<!-- START Pie or bar chart -->
<div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend above -->
<table class="small" ng-show="panel.arrangement == 'vertical'">
<table class="small" ng-show="panel.arrangement == 'vertical'">
<tr ng-repeat="term in legend">
<td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
</tr>
@ -21,11 +21,11 @@
<!-- keep legend from over lapping -->
<div style="clear:both"></div>
<div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative"></div>
<div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer"></div>
<div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend below -->
<table class="small" ng-show="panel.arrangement == 'vertical'">
<table class="small" ng-show="panel.arrangement == 'vertical'">
<tr ng-repeat="term in legend">
<td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
</tr>
@ -39,7 +39,7 @@
</div>
<!-- END Pie or Bar chart -->
<table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
<table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
<thead>
<th>Term</th> <th>Count</th> <th>Action</th>
</thead>
@ -48,11 +48,11 @@
<td>{{term.data[0][1]}}</td>
<td>
<span ng-hide="term.meta == 'other'">
<i class='icon-search pointer' ng-click="build_search(term)"></i>
<i class='icon-search pointer' ng-click="build_search(term)"></i>
<i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
</span>
</td>
</tr>
</table>
</kibana-panel>
</kibana-panel>

43
panels/timepicker/module.html
Unescape View File

@ -1,36 +1,41 @@
<kibana-panel ng-controller='timepicker' ng-init="init()">
<div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
<div ng-switch-when="absolute">
<div class="span5">
<style>
.timepicker-block {
display: inline-block;
}
</style>
<div class="row-fluid form-horizontal" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
<div ng-switch-when="absolute" >
<div class="timepicker-block">
<form class="nomargin">
<label><small>From</small></label>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
</form>
</div>
<div class="span5" style="margin-left:10px">
<div class="timepicker-block" style="margin-left:10px">
<form class="nomargin">
<label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker>
</form>
</div>
<div class="span1">
<div class="timepicker-block">
<form class="nomargin">
<label><small><br></small></label>
<button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
<button class="btn" ng-click="time_apply()"><i class="icon-ok"></i></button>
</form>
</div>
</div>
<div ng-switch-when="since">
<div class="span5">
<div class="timepicker-block">
<form class="nomargin">
<label><small>Since</small></label>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
<input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
</form>
</div>
<div class="span1" style="margin-left:10px">
<div class="timepicker-block" style="margin-left:10px">
<form class="nomargin">
<label><small><br></small></label>
<button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
@ -38,7 +43,7 @@
</div>
</div>
<div ng-switch-when="relative">
<div class="span11">
<div class="timepicker-block">
<form class="nomargin input-append">
<label><small>The last</small></label>
<button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
@ -56,18 +61,18 @@
</div>
<div class="row-fluid nomargin">
<div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
<a ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
<a ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
<a ng-click="set_mode('since')" ng-class="{'strong': (panel.mode == 'since')}">Since</a>
<span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
<input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
<a class="link" ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
<a class="link" ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
<a class="link" ng-click="set_mode('since')" ng-class="{'strong': (panel.mode == 'since')}">Since</a>
<span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
<input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
<span ng-class="{'ng-cloak': !panel.refresh.enable}">
every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
</span>
</span>
</div>
<div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
<a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
<a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
</div>
</div>
</kibana-panel>
Write Preview
Loading…
Cancel
Save