added terms facet button to table micropanel

src/app/components/extend-jquery.js

@@ -20,6 +20,7 @@ function ($) {
         'font-weight' : 200,
         'background-color': '#1f1f1f',
         'border-radius': '5px',
+        'z-index': 9999
       }
     };
 

src/app/directives/kibanaSimplePanel.js

@@ -1,12 +1,19 @@
 define([
-  'angular'
+  'angular',
+  'underscore'
 ],
-function (angular) {
+function (angular, _) {
   'use strict';
 
   angular
     .module('kibana.directives')
     .directive('kibanaSimplePanel', function($compile) {
+      var panelLoading = '<span ng-show="panelMeta.loading == true">' +
+        '<span style="font-size:72px;font-weight:200">'+
+          '<i class="icon-spinner icon-spin"></i> loading ...' +
+        '</span>'+
+      '</span>';
+
       return {
         restrict: 'E',
         link: function($scope, elem, attr) {
@@ -22,10 +29,10 @@ function (angular) {
             elem.removeClass("ng-cloak");
           }
 
-          $scope.$watch(attr.type, function (name) {
+          function loadController(name) {
             elem.addClass("ng-cloak");
-
             // load the panels module file, then render it in the dom.
+
             $scope.require([
               'jquery',
               'text!panels/'+name+'/module.html'
@@ -37,6 +44,7 @@ function (angular) {
               $controllers = $controllers.add($module.find('ngcontroller, [ng-controller], .ng-controller'));
 
               if ($controllers.length) {
+                $controllers.first().prepend(panelLoading);
                 $scope.require([
                   'panels/'+name+'/module'
                 ], function() {
@@ -46,6 +54,19 @@ function (angular) {
                 loadModule($module);
               }
             });
+          }
+
+          $scope.$watch(attr.type, function (name) {
+            loadController(name);
+          });
+
+          $scope.$watch(attr.panel, function (panel) {
+            // If the panel attribute is specified, create a new scope. This ruins configuration
+            // so don't do it with anything that needs to use editor.html
+            if(!_.isUndefined(panel)) {
+              $scope = $scope.$new();
+              $scope.panel = angular.fromJson(panel);
+            }
           });
         }
       };

src/app/panels/table/micropanel.html

@@ -41,4 +41,12 @@
 <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 track by $index'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
+<div>
+  <span ng-repeat='(field,count) in micropanel.related track by $index'><a ng-click="toggle_field(field)">{{field}}</a> ({{Math.round((count / micropanel.count) * 100)}}%), </span>
+</div>
+<div class="row-fluid">
+  <div class="span12">
+    <h5>Facets</h5>
+    <button class="btn" ng-click="termsModal(field);dismiss();"><i class="icon-list-ol"></i> Terms</button>
+  </div>
+</div>

src/app/panels/table/modal.html

@@ -0,0 +1,45 @@
+  <div class="modal-body">
+    <style>
+      .timepicker-to-column {
+        margin-top: 10px;
+      }
+
+      .timepicker-input input {
+        outline: 0 !important;
+        border: 0px !important;
+        -webkit-box-shadow: 0;
+        -moz-box-shadow: 0;
+        box-shadow: 0;
+        position: relative;
+      }
+
+      .timepicker-input input::-webkit-outer-spin-button,
+      .timepicker-input input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+      }
+
+      input.timepicker-date {
+        width: 90px;
+      }
+      input.timepicker-hms {
+        width: 20px;
+      }
+      input.timepicker-ms {
+        width: 25px;
+      }
+      div.timepicker-now {
+        float: right;
+      }
+    </style>
+    <h4>Top 10 terms in field {{modalField}}</h4>
+    <div>
+      <kibana-simple-panel ng-click="dismiss();" type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <form name="input" style="margin-bottom:0">
+    <button ng-click="dismiss();" class="btn btn-danger">Close</button>
+    </form>
+  </div>

src/app/panels/table/module.html

@@ -13,7 +13,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,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
+            <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: _.contains(panel.fields,field)}">{{field}}</a>
           </li>
         </ul>
 

src/app/panels/table/module.js

@@ -33,7 +33,7 @@ function (angular, app, _, kbn, moment) {
   var module = angular.module('kibana.panels.table', []);
   app.useModule(module);
 
-  module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
+  module.controller('table', function($rootScope, $scope, $modal, $q, $compile, fields, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
       modals : [
         {
@@ -93,8 +93,42 @@ function (angular, app, _, kbn, moment) {
       $scope.get_data();
     };
 
+    // Create a percent function for the view
     $scope.percent = kbn.to_percent;
 
+    $scope.termsModal = function(field) {
+      $scope.modalField = field;
+      showModal(
+        '{"height":"200px","chart":"bar","field":"'+field+'"}','terms');
+    };
+
+    $scope.statsModal = function(field) {
+      $scope.modalField = field;
+      showModal(
+        '{"field":"'+field+'"}','statistics');
+    };
+
+    var showModal = function(panel,type) {
+
+      $scope.facetPanel = panel;
+      $scope.facetType = type;
+
+      // create a new modal. Can't reuse one modal unforunately as the directive will not
+      // re-render on show.
+      var panelModal = $modal({
+        template: './app/panels/table/modal.html',
+        persist: true,
+        show: false,
+        scope: $scope,
+        keyboard: false
+      });
+
+      // and show it
+      $q.when(panelModal).then(function(modalEl) {
+        modalEl.modal('show');
+      });
+    };
+
     $scope.toggle_micropanel = function(field,groups) {
       var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
       var topFieldValues = kbn.top_field_values(docs,field,10,groups);

src/app/partials/dashLoader.html

@@ -4,7 +4,7 @@
   }
 </style>
 
-<li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" panel="pulldown" ng-cloak></kibana-simple-panel></li>
+<li ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"><kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel></li>
 
 <li><a bs-tooltip="'Goto saved default'" data-placement="bottom" href='#/dashboard'><i class='icon-home'></i></a></li>
 <li class="dropdown" bs-tooltip="'Load'" data-placement="bottom" ng-show="showDropdown('load')" >