Skip to content

N
nexpie-grafana-theme
Commit c088783d by Rashid Khan
Options

Added toggle between single and grouped analysis to micropanel

parent 7dd2735c
Showing with 50 additions and 20 deletions
src/app/components/kbn.js
...@@ -61,23 +61,41 @@ function($, _) { ...@@ -61,23 +61,41 @@ function($, _) {
return value; return value;
}; };
kbn.top_field_values = function(docs,field,count) { kbn.top_field_values = function(docs,field,count,grouped) {
var all_values = _.pluck(docs,field), var all_values = _.pluck(docs,field),
groups = {}; groups = {},
counts,
hasArrays;
// manually grouping into pairs allows us to keep the original value, // manually grouping into pairs allows us to keep the original value,
_.each(all_values, function (value) { _.each(all_values, function (value) {
var key = _.isUndefined(value) ? '' : value.toString(); var k;
if (_.has(groups, key)) { if(_.isArray(value)) {
groups[key][1] ++; hasArrays = true;
}
if(_.isArray(value) && !grouped) {
k = value;
} else { } else {
groups[key] = [value, 1]; k = _.isUndefined(value) ? '' : [value.toString()];
} }
_.each(k, function(key) {
if (_.has(groups, key)) {
groups[key][1] ++;
} else {
groups[key] = [(grouped ? value : key), 1];
}
});
}); });
return _.values(groups).sort(function(a, b) { counts = _.values(groups).sort(function(a, b) {
return a[1] - b[1]; return a[1] - b[1];
}).reverse().slice(0,count); }).reverse().slice(0,count);
console.log(hasArrays);
return {
counts: counts,
hasArrays : hasArrays
};
}; };
/** /**
......
src/app/panels/table/micropanel.html
...@@ -3,22 +3,30 @@ ...@@ -3,22 +3,30 @@
Micro Analysis of {{micropanel.field}} Micro Analysis of {{micropanel.field}}
<i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();"></i> <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> <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();"></i>
<br><small>{{micropanel.count}} events in the table set</small> <br>
<small>
{{micropanel.count}} events in the table set
<span ng-show="micropanel.hasArrays">
as
<a class="link" ng-class="{'strong':micropanel.grouped}" ng-click="toggle_micropanel(micropanel.field,true)">Groups</a> /
<a class="link" ng-class="{'strong':!micropanel.grouped}" ng-click="toggle_micropanel(micropanel.field,false)">Singles</a>
</span>
</small>
</h4> </h4>
<table style="width:100%" class='table table-striped table-condensed'> <table style="width:100%;table-layout:fixed" class='table table-striped table-condensed'>
<thead> <thead>
<th>{{micropanel.field}}</th> <th style="width:260px">{{micropanel.field}}</th>
<th>Action</th> <th style="width:40px">Action</th>
<th style="text-align:right">Count</th> <th style="width:100px;text-align:right">Count</th>
</thead> </thead>
<tbody> <tbody>
<tr ng-repeat='field in micropanel.values'> <tr ng-repeat='field in micropanel.values'>
<td>{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</td> <td style="word-wrap:break-word">{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</td>
<td style="width:40px"> <td>
<i class="pointer icon-search" ng-click="build_search(micropanel.field,field[0]);dismiss();"></i> <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> <i class="pointer icon-ban-circle" ng-click="build_search(micropanel.field,field[0],true);dismiss();"></i>
</td> </td>
<td class="progress" style="width:100px;position:relative"> <td class="progress" style="position:relative">
<style scoped> <style scoped>
.progress { .progress {
overflow: visible; overflow: visible;
...@@ -30,7 +38,7 @@ ...@@ -30,7 +38,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="progress"> <div class="progress" ng-show="micropanel.grouped">
<div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div> <div ng-repeat='field in micropanel.values' bs-tooltip="field[0]+' ('+percent(field[1],data.length)+')'" class="bar {{micropanelColor($index)}}" ng-style="{width: percent(field[1],data.length)};"></div>
</div> </div>
<span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span> <span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
\ No newline at end of file
src/app/panels/table/module.html
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;"> <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;">
<li ng-style="panel.style" ng-repeat="field in fields.list" > <li ng-style="panel.style" ng-repeat="field in fields.list" >
<i class="pointer" ng-class="{'icon-check': _.contains(panel.fields,field),'icon-check-empty': !_.contains(panel.fields,field)}" ng-click="toggle_field(field)"></i> <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 class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a> <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="right" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
</li> </li>
</ul> </ul>
......
src/app/panels/table/module.js
...@@ -87,11 +87,14 @@ function (angular, app, _, kbn, moment) { ...@@ -87,11 +87,14 @@ function (angular, app, _, kbn, moment) {
$scope.percent = kbn.to_percent; $scope.percent = kbn.to_percent;
$scope.toggle_micropanel = function(field) { $scope.toggle_micropanel = function(field,groups) {
var docs = _.pluck($scope.data,'_source'); var docs = _.pluck($scope.data,'_source');
var topFieldValues = kbn.top_field_values(docs,field,10,groups);
$scope.micropanel = { $scope.micropanel = {
field: field, field: field,
values : kbn.top_field_values(docs,field,10), grouped: groups,
values : topFieldValues.counts,
hasArrays : topFieldValues.hasArrays,
related : kbn.get_related_fields(docs,field), related : kbn.get_related_fields(docs,field),
count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true'] count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true']
}; };
......
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