merged master

Gruntfile.js

@@ -53,6 +53,17 @@ module.exports = function (grunt) {
         cwd:'<%= srcDir %>/vendor/bootstrap/less/',
         src: ['bootstrap.dark.less', 'bootstrap.light.less'],
         dest: '<%= tempDir %>/css/',
+      },
+      // Compile to src when not building
+      src:{
+        options: {
+          paths: ["<%= srcDir %>/vendor/bootstrap/less"],
+          yuicompress:true
+        },
+        files: {
+          "<%= srcDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.dark.less",
+          "<%= srcDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/vendor/bootstrap/less/bootstrap.light.less"
+        }
       }
     },
     cssmin: {
@@ -240,12 +251,12 @@ module.exports = function (grunt) {
   grunt.initConfig(config);
 
   // Default task.
-  grunt.registerTask('default', ['jshint:source','less']);
+  grunt.registerTask('default', ['jshint:source','less:src']);
   grunt.registerTask('build', [
     'jshint:source',
     'clean:on_start',
     'htmlmin',
-    'less',
+    'less:dist',
     'cssmin',
     'copy:everthing_left_in_src',
     'ngmin',

src/app/components/kbn.js

@@ -61,23 +61,41 @@ function($, _) {
     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),
-      groups = {};
-
+      groups = {},
+      counts,
+      hasArrays;
     // manually grouping into pairs allows us to keep the original value,
     _.each(all_values, function (value) {
-      var key = _.isUndefined(value) ? '' : value.toString();
-      if (_.has(groups, key)) {
-        groups[key][1] ++;
-      } else {
-        groups[key] = [value, 1];
+      var k;
+      if(_.isArray(value)) {
+        hasArrays =  true;
       }
+      if(_.isArray(value) && !grouped) {
+        k = value;
+      } else {
+        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];
     }).reverse().slice(0,count);
+
+    console.log(hasArrays);
+
+    return {
+      counts: counts,
+      hasArrays : hasArrays
+    };
   };
 
    /**

src/app/panels/table/micropanel.html

@@ -3,22 +3,30 @@
   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>
+  <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>
-<table style="width:100%" class='table table-striped table-condensed'>
+<table style="width:100%;table-layout:fixed" class='table table-striped table-condensed'>
   <thead>
-    <th>{{micropanel.field}}</th>
-    <th>Action</th>
-    <th style="text-align:right">Count</th>
+    <th style="width:260px">{{micropanel.field}}</th>
+    <th style="width:40px">Action</th>
+    <th style="width:100px;text-align:right">Count</th>
   </thead>
   <tbody>
     <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="width:40px">
+      <td style="word-wrap:break-word">{{{true: "__blank__", false:field[0] }[field[0] == '' || field[0] == undefined]|tableTruncate:panel.trimFactor:3}}</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 class="progress" style="width:100px;position:relative">
+      <td class="progress" style="position:relative">
         <style scoped>
           .progress {
             overflow: visible;
@@ -30,7 +38,7 @@
     </tr>
   </tbody>
 </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>
 <span ng-repeat='(field,count) in micropanel.related'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>

src/app/panels/table/module.html

@@ -18,7 +18,7 @@
         <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" >
             <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>
         </ul>
 

src/app/panels/table/module.js

@@ -87,11 +87,14 @@ function (angular, app, _, kbn, moment) {
 
     $scope.percent = kbn.to_percent;
 
-    $scope.toggle_micropanel = function(field) {
+    $scope.toggle_micropanel = function(field,groups) {
       var docs = _.pluck($scope.data,'_source');
+      var topFieldValues = kbn.top_field_values(docs,field,10,groups);
       $scope.micropanel = {
         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),
         count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true']
       };