IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

added field selector to table panel, deprecated field panel

Browse Source
This commit is contained in:
Rashid Khan 2013-07-27 15:28:49 -07:00
parent 30b8de9aac
commit e993654c19
15 changed files with 154 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/controllers.js
View File

@ -131,7 +131,6 @@ angular.module('kibana.controllers', [])
$scope.reset_panel = function() {
$scope.panel = {
loading : false,
error : false,
span : 3,
editable: true,

2
js/directives.js
View File

@ -7,7 +7,7 @@ angular.module('kibana.directives', [])
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+
var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panelMeta.loading == true">'+
' <span class="editlink panelextra pointer" style="right:15px;top:0px" ' +
'bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
'<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+

4
panels/bettermap/module.js
View File

@ -96,7 +96,7 @@ angular.module('kibana.bettermap', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
if(_segment === 0) {
$scope.hits = 0;
@ -174,7 +174,7 @@ angular.module('kibana.bettermap', [])
var map, markers, layerGroup, mcg;
function render_panel() {
scope.panel.loading = false;
scope.panelMeta.loading = false;
var scripts = $LAB.script("panels/bettermap/lib/leaflet.js").wait()
.script("panels/bettermap/lib/plugins.js");

4
panels/derivequeries/module.js
View File

@ -57,7 +57,7 @@ angular.module('kibana.derivequeries', [])
return;
}
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
var request = $scope.ejs.Request().indices(dashboard.indices);
// Terms mode
@ -78,7 +78,7 @@ angular.module('kibana.derivequeries', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
var suffix,
data = [];
if ($scope.panel.query === '' || $scope.panel.mode === 'terms only') {

7
panels/fields/module.html
View File

@ -1,8 +1,3 @@
<kibana-panel ng-controller='fields' ng-init="init()">
<ul class="unstyled" style="height:{{row.height}};overflow-y:auto;overflow-x:hidden;" ng-class="{'inline': panel.arrange == 'horizontal'}">
<li ng-style="panel.style" ng-repeat="field in fields" >
<i class="pointer" ng-class="{'icon-check': _.indexOf(active,field)>-1,'icon-check-empty': _.indexOf(active,field)<0}" ng-click="toggle_field(field)"></i>
<a data-unique="1" bs-popover="'panels/fields/micropanel.html'" data-placement="{{panel.micropanel_position}}" ng-click="toggle_micropanel(field)" ng-class="{label: _.indexOf(active,field)>-1}">{{field}}</a>
</li>
</ul>
<h4>The 'fields' panel is deprecated.</h4> The table panel now integrates a field selector.
</kibana-panel>

9
panels/fields/module.js
View File

@ -3,7 +3,7 @@
/*
## Fields
## Fields (DEPRECATED)
### Parameters
@ -25,10 +25,9 @@ angular.module('kibana.fields', [])
.controller('fields', function($scope, eventBus, $timeout, dashboard, filterSrv) {
$scope.panelMeta = {
status : "Deprecating Soon",
description : "Allows for enabling and disabling of fields in the table panel as well as a "+
"micro anaylsis panel for analyzing the events in the table panel. This panel will soon be"+
"combined with the table panel"
status : "Deprecated",
description : "You should not use this table, it does not work anymore. The table panel now"+
"integrates a field selector. This module will soon be removed."
};

4
panels/histogram/module.js
View File

@ -98,7 +98,7 @@ angular.module('kibana.histogram', [])
kbn.calculate_interval(_range.from,_range.to,$scope.panel.resolution,0)/1000);
}
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
var _segment = _.isUndefined(segment) ? 0 : segment;
var request = $scope.ejs.Request().indices(dashboard.indices[_segment]);
@ -133,7 +133,7 @@ angular.module('kibana.histogram', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
if(_segment === 0) {
$scope.hits = 0;
$scope.data = [];

4
panels/hits/module.js
View File

@ -54,7 +54,7 @@ angular.module('kibana.hits', [])
$scope.get_data = function(segment,query_id) {
delete $scope.panel.error;
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
// Make sure we have everything for the request to complete
if(dashboard.indices.length === 0) {
@ -85,7 +85,7 @@ angular.module('kibana.hits', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
if(_segment === 0) {
$scope.hits = 0;
$scope.data = [];

4
panels/map/module.js
View File

@ -55,7 +55,7 @@ angular.module('kibana.map', [])
if(dashboard.indices.length === 0) {
return;
}
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
var request;
@ -86,7 +86,7 @@ angular.module('kibana.map', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
$scope.hits = results.hits.total;
$scope.data = {};
_.each(results.facets.map.terms, function(v) {

6
panels/pie/module.js
View File

@ -87,7 +87,7 @@ angular.module('kibana.pie', [])
}
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
var request = $scope.ejs.Request().indices(dashboard.indices);
$scope.panel.queries.ids = querySrv.idsByMode($scope.panel.queries);
@ -119,7 +119,7 @@ angular.module('kibana.pie', [])
// Populate scope when we have results
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
$scope.hits = results.hits.total;
$scope.data = [];
var k = 0;
@ -143,7 +143,7 @@ angular.module('kibana.pie', [])
results = request.doSearch();
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
var complete = results.hits.total;
var remaining = $scope.panel.query.goal - complete;
$scope.data = [

25
panels/table/micropanel.html Normal file
View File

@ -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>

148
panels/table/module.html
View File

@ -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>

54
panels/table/module.js
View File

@ -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;
};

4
panels/terms/module.js
View File

@ -64,7 +64,7 @@ angular.module('kibana.terms', [])
return;
}
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
var request,
results,
boolQuery;
@ -97,7 +97,7 @@ angular.module('kibana.terms', [])
// Populate scope when we have results
results.then(function(results) {
var k = 0;
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
$scope.hits = results.hits.total;
$scope.data = [];
_.each(results.facets.terms.terms, function(v) {

4
panels/trends/module.js
View File

@ -47,7 +47,7 @@ angular.module('kibana.trends', [])
$scope.get_data = function(segment,query_id) {
delete $scope.panel.error;
$scope.panel.loading = true;
$scope.panelMeta.loading = true;
// Make sure we have everything for the request to complete
if(dashboard.indices.length === 0) {
@ -138,7 +138,7 @@ angular.module('kibana.trends', [])
// Populate scope when we have results
var process_results = function(results,_segment,query_id) {
results.then(function(results) {
$scope.panel.loading = false;
$scope.panelMeta.loading = false;
if(_segment === 0) {
$scope.hits = {};
$scope.data = [];