Skip to content

N
nexpie-grafana-theme
Commit 5f1b6984 by Rashid Khan
Options

Merge pull request #482 from rashidkpc/master 

Pointer, timepicker cleanup and show _source by default in table
parents f7c0e428 8b5ac5e5
Showing with 37 additions and 23 deletions
js/filters.js
...@@ -29,8 +29,12 @@ angular.module('kibana.filters', []) ...@@ -29,8 +29,12 @@ angular.module('kibana.filters', [])
}).filter('stringify', function() { }).filter('stringify', function() {
return function(arr, start, end) { return function(arr, start, end) {
if(!_.isUndefined(arr)) { if(!_.isUndefined(arr)) {
if(_.isObject(arr) && !_.isArray(arr)) {
return angular.toJson(arr);
} else {
return arr.toString(); return arr.toString();
} }
}
}; };
}).filter('noXml', function() { }).filter('noXml', function() {
var noXml = function(text) { var noXml = function(text) {
......
panels/histogram/module.html
...@@ -32,5 +32,5 @@ ...@@ -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> <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> </div>
<center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center> <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
<div histogram-chart class="histogram-chart" params="{{panel}}"></div> <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
</kibana-panel> </kibana-panel>
\ No newline at end of file
panels/pie/module.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div><br> </div><br>
<div style="clear:both"></div> <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;"> <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> <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>
......
panels/table/module.html
...@@ -39,10 +39,12 @@ ...@@ -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> <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> </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"> <table class="table-hover table table-condensed" ng-style="panel.style">
<thead ng-show="panel.header"> <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"> <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> <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
...@@ -58,7 +60,8 @@ ...@@ -58,7 +60,8 @@
<tbody ng-repeat="event in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'"> <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"> <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]) | 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>
<tr ng-show="event.kibana.details"> <tr ng-show="event.kibana.details">
<td colspan=1000> <td colspan=1000>
...@@ -70,9 +73,10 @@ ...@@ -70,9 +73,10 @@
</thead> </thead>
<tr ng-repeat="(key,value) in event.kibana.details._source" ng-class-odd="'odd'"> <tr ng-repeat="(key,value) in event.kibana.details._source" ng-class-odd="'odd'">
<td>{{key}}</td> <td>{{key}}</td>
<td> <td style="white-space:nowrap">
<i class='icon-search pointer' ng-click="build_search(key,value)"></i> <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)"></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> </td>
<!-- At some point we need to create a more efficient way of applying the filter pipeline --> <!-- 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> <td style="white-space:pre-wrap" ng-bind-html-unsafe="value|noXml|urlLink|stringify"></td>
......
panels/table/module.js
...@@ -45,10 +45,10 @@ angular.module('kibana.table', []) ...@@ -45,10 +45,10 @@ angular.module('kibana.table', [])
size : 100, // Per page size : 100, // Per page
pages : 5, // Pages available pages : 5, // Pages available
offset : 0, offset : 0,
sort : ['@timestamp','desc'], sort : ['_score','desc'],
group : "default", group : "default",
style : {'font-size': '9pt'}, style : {'font-size': '9pt'},
overflow: 'height', overflow: 'min-height',
fields : [], fields : [],
highlight : [], highlight : [],
sortable: true, sortable: true,
......
panels/terms/module.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<!-- keep legend from over lapping --> <!-- keep legend from over lapping -->
<div style="clear:both"></div> <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'> <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
<!-- vertical legend below --> <!-- vertical legend below -->
......
panels/timepicker/module.html
<kibana-panel ng-controller='timepicker' ng-init="init()"> <kibana-panel ng-controller='timepicker' ng-init="init()">
<div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0"> <style>
<div ng-switch-when="absolute"> .timepicker-block {
<div class="span5"> 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"> <form class="nomargin">
<label><small>From</small></label> <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> <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> </form>
</div> </div>
<div class="span5" style="margin-left:10px"> <div class="timepicker-block" style="margin-left:10px">
<form class="nomargin"> <form class="nomargin">
<label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label> <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> <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> </form>
</div> </div>
<div class="span1"> <div class="timepicker-block">
<form class="nomargin"> <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> </form>
</div> </div>
</div> </div>
<div ng-switch-when="since"> <div ng-switch-when="since">
<div class="span5"> <div class="timepicker-block">
<form class="nomargin"> <form class="nomargin">
<label><small>Since</small></label> <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> <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> </form>
</div> </div>
<div class="span1" style="margin-left:10px"> <div class="timepicker-block" style="margin-left:10px">
<form class="nomargin"> <form class="nomargin">
<label><small><br></small></label> <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>
...@@ -38,7 +43,7 @@ ...@@ -38,7 +43,7 @@
</div> </div>
</div> </div>
<div ng-switch-when="relative"> <div ng-switch-when="relative">
<div class="span11"> <div class="timepicker-block">
<form class="nomargin input-append"> <form class="nomargin input-append">
<label><small>The last</small></label> <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> <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,9 +61,9 @@ ...@@ -56,9 +61,9 @@
</div> </div>
<div class="row-fluid nomargin"> <div class="row-fluid nomargin">
<div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0"> <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 class="link" 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 class="link" 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> <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'"> | <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
<input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
<span ng-class="{'ng-cloak': !panel.refresh.enable}"> <span ng-class="{'ng-cloak': !panel.refresh.enable}">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment