added field selector to table panel, deprecated field panel
This commit is contained in:
Rashid Khan
@@ -0,0 +1,25 @@
|
||||
<a class="close" ng-click="dismiss()" href="">×</a>
|
||||
<h4>
|
||||
Micro Analysis of {{micropanel.field}}
|
||||
<i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();"></i>
|
||||
<i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();"></i>
|
||||
<br><small>{{micropanel.count}} events in the table set</small>
|
||||
</h4>
|
||||
<table style="width:480px" class='table table-bordered table-striped table-condensed'>
|
||||
<thead>
|
||||
<th>{{micropanel.field}}</th>
|
||||
<th>Action</th>
|
||||
<th>In set</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat='field in micropanel.values'>
|
||||
<td>{{{true: "__blank__",false:field[0]}[field[0] == ""]}}</td>
|
||||
<td>
|
||||
<i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i>
|
||||
<i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],true);dismiss();"></i>
|
||||
</td>
|
||||
<td>{{field[1]}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
|
||||
+85
-63
@@ -1,75 +1,97 @@
|
||||
<kibana-panel ng-controller='table' ng-init='init()'>
|
||||
<style>
|
||||
.table-doc-table {
|
||||
margin-left: 0px !important;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
|
||||
<div style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto">
|
||||
<div class="row-fluid" ng-show="panel.paging">
|
||||
<div class="span1 offset1" style="text-align:right">
|
||||
<i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
|
||||
<i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
|
||||
</div>
|
||||
<div class="span8" style="text-align:center">
|
||||
<strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
|
||||
<small> of {{data.length}} available for paging</small>
|
||||
</div>
|
||||
<div class="span1" style="text-align:left">
|
||||
<i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
|
||||
<div class="row-fluid">
|
||||
<div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list">
|
||||
<div class="sidebar-nav">
|
||||
<h5>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'" ng-show="panel.field_list"></i></h5>
|
||||
<ul class="unstyled" style="height:{{row.height}};overflow-y:auto;overflow-x:hidden;">
|
||||
<li ng-style="panel.style" ng-repeat="field in all_fields" >
|
||||
<i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i>
|
||||
<a data-unique="1" bs-popover="'panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="small" ng-show="panel.fields.length == 0">No columns configured. You may want to add a <strong>fields panel</strong>, or click the edit button in the top right of this panel to add some columns</div>
|
||||
<table class="table-hover table table-condensed" ng-style="panel.style">
|
||||
<thead ng-show="panel.header">
|
||||
|
||||
<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>
|
||||
<div style="{{panel.overflow}}:{{panel.height || row.height}};" ng-class="{'span9':panel.field_list,'span12':!panel.field_list}" class="table-doc-table">
|
||||
<i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
|
||||
<div class="row-fluid" ng-show="panel.paging">
|
||||
<div class="span1 offset1" style="text-align:right">
|
||||
<i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
|
||||
<i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
|
||||
</div>
|
||||
<div class="span8" style="text-align:center">
|
||||
<strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
|
||||
<small> of {{data.length}} available for paging</small>
|
||||
</div>
|
||||
<div class="span1" style="text-align:left">
|
||||
<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">No columns configured. You may want to add a <strong>fields panel</strong>, or click the edit button in the top right of this panel to add some columns</div>
|
||||
<table class="table-hover table table-condensed" ng-style="panel.style">
|
||||
<thead ng-show="panel.header">
|
||||
|
||||
<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>
|
||||
|
||||
<span class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
|
||||
{{field}}
|
||||
<i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
|
||||
</span>
|
||||
<span ng-show='!panel.sortable'>{{field}}</span>
|
||||
<i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
|
||||
</th>
|
||||
|
||||
</thead>
|
||||
<tbody ng-repeat="row in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
|
||||
<tr ng-click="toggle_details(row)" class="pointer">
|
||||
<td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(row.highlight[field]||row._source[field]) | highlight"></td>
|
||||
</tr>
|
||||
<tr ng-show="row.kibana.details">
|
||||
<td colspan=1000>
|
||||
<table class='table table-bordered table-condensed'>
|
||||
<thead>
|
||||
<th>Field</th>
|
||||
<th>Action</th>
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
<tr ng-repeat="(key,value) in row.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>
|
||||
<td>{{value}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row-fluid" ng-show="panel.paging">
|
||||
<div class="span1 offset3" style="text-align:right">
|
||||
<i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
|
||||
<i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
|
||||
</div>
|
||||
<div class="span4" style="text-align:center">
|
||||
<strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
|
||||
<small> of {{data.length}} available for paging</small>
|
||||
</div>
|
||||
<div class="span1" style="text-align:left">
|
||||
<i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
|
||||
<span class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
|
||||
{{field}}
|
||||
<i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
|
||||
</span>
|
||||
<span ng-show='!panel.sortable'>{{field}}</span>
|
||||
<i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
|
||||
</th>
|
||||
|
||||
</thead>
|
||||
<tbody ng-repeat="row in data | slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
|
||||
<tr ng-click="toggle_details(row)" class="pointer">
|
||||
<td ng-repeat="field in panel.fields" ng-bind-html-unsafe="(row.highlight[field]||row._source[field]) | highlight"></td>
|
||||
</tr>
|
||||
<tr ng-show="row.kibana.details">
|
||||
<td colspan=1000>
|
||||
<table class='table table-bordered table-condensed'>
|
||||
<thead>
|
||||
<th>Field</th>
|
||||
<th>Action</th>
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
<tr ng-repeat="(key,value) in row.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>
|
||||
<td>{{value}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row-fluid" ng-show="panel.paging">
|
||||
<div class="span1 offset3" style="text-align:right">
|
||||
<i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
|
||||
<i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
|
||||
</div>
|
||||
<div class="span4" style="text-align:center">
|
||||
<strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
|
||||
<small> of {{data.length}} available for paging</small>
|
||||
</div>
|
||||
<div class="span1" style="text-align:left">
|
||||
<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>
|
||||
|
||||
+21
-33
@@ -53,26 +53,28 @@ angular.module('kibana.table', [])
|
||||
highlight : [],
|
||||
sortable: true,
|
||||
header : true,
|
||||
paging : true,
|
||||
spyable: true
|
||||
paging : true,
|
||||
field_list: true,
|
||||
spyable : true
|
||||
};
|
||||
_.defaults($scope.panel,_d);
|
||||
|
||||
$scope.init = function () {
|
||||
$scope.set_listeners($scope.panel.group);
|
||||
$scope.Math = Math;
|
||||
|
||||
$scope.$on('refresh',function(){$scope.get_data();});
|
||||
|
||||
$scope.get_data();
|
||||
};
|
||||
|
||||
$scope.set_listeners = function(group) {
|
||||
$scope.$on('refresh',function(){$scope.get_data();});
|
||||
eventBus.register($scope,'sort', function(event,sort){
|
||||
$scope.panel.sort = _.clone(sort);
|
||||
$scope.get_data();
|
||||
});
|
||||
eventBus.register($scope,'selected_fields', function(event, fields) {
|
||||
$scope.panel.fields = _.clone(fields);
|
||||
});
|
||||
$scope.toggle_micropanel = function(field) {
|
||||
var docs = _.pluck($scope.data,'_source');
|
||||
$scope.micropanel = {
|
||||
field: field,
|
||||
values : kbn.top_field_values(docs,field,10),
|
||||
related : kbn.get_related_fields(docs,field),
|
||||
count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true']
|
||||
};
|
||||
};
|
||||
|
||||
$scope.set_sort = function(field) {
|
||||
@@ -90,7 +92,6 @@ angular.module('kibana.table', [])
|
||||
} else {
|
||||
$scope.panel.fields.push(field);
|
||||
}
|
||||
broadcast_results();
|
||||
};
|
||||
|
||||
$scope.toggle_highlight = function(field) {
|
||||
@@ -124,6 +125,11 @@ angular.module('kibana.table', [])
|
||||
dashboard.refresh();
|
||||
};
|
||||
|
||||
$scope.fieldExists = function(field,mandate) {
|
||||
filterSrv.set({type:'exists',field:field,mandate:mandate});
|
||||
dashboard.refresh();
|
||||
};
|
||||
|
||||
$scope.get_data = function(segment,query_id) {
|
||||
$scope.panel.error = false;
|
||||
|
||||
@@ -132,7 +138,7 @@ angular.module('kibana.table', [])
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.panel.loading = true;
|
||||
$scope.panelMeta.loading = true;
|
||||
|
||||
$scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
|
||||
|
||||
@@ -166,7 +172,7 @@ angular.module('kibana.table', [])
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
$scope.panel.loading = false;
|
||||
$scope.panelMeta.loading = false;
|
||||
|
||||
if(_segment === 0) {
|
||||
$scope.hits = 0;
|
||||
@@ -210,7 +216,6 @@ angular.module('kibana.table', [])
|
||||
|
||||
// This breaks, use $scope.data for this
|
||||
$scope.all_fields = kbn.get_all_fields(_.pluck($scope.data,'_source'));
|
||||
broadcast_results();
|
||||
|
||||
// If we're not sorting in reverse chrono order, query every index for
|
||||
// size*pages results
|
||||
@@ -242,23 +247,6 @@ angular.module('kibana.table', [])
|
||||
};
|
||||
};
|
||||
|
||||
// Broadcast a list of all fields. Note that receivers of field array
|
||||
// events should be able to receive from multiple sources, merge, dedupe
|
||||
// and sort on the fly if needed.
|
||||
function broadcast_results() {
|
||||
eventBus.broadcast($scope.$id,$scope.panel.group,"fields", {
|
||||
all : $scope.all_fields,
|
||||
sort : $scope.panel.sort,
|
||||
active: $scope.panel.fields
|
||||
});
|
||||
eventBus.broadcast($scope.$id,$scope.panel.group,"table_documents",
|
||||
{
|
||||
query: querySrv.list[querySrv.ids[0]].query,
|
||||
docs : _.pluck($scope.data,'_source'),
|
||||
index: $scope.index
|
||||
});
|
||||
}
|
||||
|
||||
$scope.set_refresh = function (state) {
|
||||
$scope.refresh = state;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user