Added debug panel (not by default), added inspector link to pie and t…

…able
rsecar · Mar 12, 2013 · a7a42b3 · a7a42b3
1 parent ffe392c
commit a7a42b3
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 222,816 deletions.
diff --git a/common/css/main.css b/common/css/main.css
@@ -31,30 +31,25 @@
   z-index: 800;
 }
 
-.panel i.editlink {
+.panel span.panelextra {
   position: absolute;
-  right: 5px;
   z-index: 800;
   display: none;
 }
 
-.panel i.editlink span {
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-}
-
-.pointer:hover {
-  color: #0088CC;
-}
-
-.panel:hover i.editlink {
+.panel:hover span.panelextra {
   display: block;
   opacity: 0.3;
 }
 
-.panel i.editlink:hover {
+.panel span.panelextra:hover {
   opacity: 1;
 }
 
+.pointer:hover {
+  color: #0088CC;
+}
+
 .popover {
   max-width: 500px;
 }

diff --git a/js/directives.js b/js/directives.js
@@ -7,8 +7,10 @@ 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"><i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"> <span class="small">{{panel.type}}</span></i>'+
-                    '<h4>{{panel.title}}</h4>';
+      var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.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-edit pointer"></i>'+
+        '</span><h4>{{panel.title}}</h4>';
       elem.prepend($compile(angular.element(template))(scope));
     }
   };

diff --git a/js/services.js b/js/services.js
@@ -5,10 +5,24 @@
 angular.module('kibana.services', [])
 .service('eventBus', function($rootScope) {
 
+  // An array of registed types
+  var _types = []
+
   this.broadcast = function(from,to,type,data) {
     if(_.isUndefined(data))
       var data = from
 
+    var packet = {
+      time: new Date(),
+      type: type,
+      from: from,
+      to: to,
+      data: data
+    }
+
+    if(_.contains(_types,'$kibana_debug'))
+      $rootScope.$broadcast('$kibana_debug',packet);
+
     //console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data))
     $rootScope.$broadcast(type,{
       from: from,
@@ -21,10 +35,15 @@ angular.module('kibana.services', [])
   // addressed to the scope in question and runs the registered function if it
   // is.
   this.register = function(scope,type,fn) {
+
+    _types = _.union(_types,[type])
+
     scope.$on(type,function(event,packet){
       var _id     = scope.$id;
       var _to     = packet.to;
       var _from   = packet.from;
+      var _type   = packet.type
+      var _time   = packet.time
       var _group  = (!(_.isUndefined(scope.panel))) ? scope.panel.group : ["NONE"] 
 
       //console.log('registered:' + type + " for " + scope.panel.title + " " + scope.$id)
@@ -33,13 +52,17 @@ angular.module('kibana.services', [])
       if(!(_.isArray(_group)))
         _group = [_group];
 
+      // Transmit even only if the send is not the receiver AND one of the following:
+      // 1) Receiver has group in _to 2) Receiver's $id is in _to
+      // 3) Event is addressed to ALL 4) Receiver is in ALL group 
       if((_.intersection(_to,_group).length > 0 || 
         _.indexOf(_to,_id) > -1 ||
+        _.indexOf(_group,'ALL') > -1 ||
         _.indexOf(_to,'ALL') > -1) &&
         _from !== _id
-        ) {
+      ) {
         //console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data))
-        fn(event,packet.data);
+        fn(event,packet.data,{time:_time,to:_to,from:_from,type:_type});
       }
     });
   }

diff --git a/panels/debug/editor.html b/panels/debug/editor.html
@@ -0,0 +1,9 @@
+  <div class="row-fluid" ng-controller="debug">    
+  <div class="row-fluid">    
+    <div class="span3">
+      <h5>Length</h5>
+      <input type="number" class="input-mini" ng-model="panel.size">
+    </div>
+    <div class="span3"><h6>Font Size</h6> 
+      <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
+  </div>
diff --git a/panels/debug/module.html b/panels/debug/module.html
@@ -0,0 +1,27 @@
+<kibana-panel ng-controller='debug' ng-init='init()'>
+<table class="table-hover table table-condensed" ng-style="panel.style" style="height:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto">
+  <thead>
+    <th style="white-space:nowrap" ng-repeat="th in ['timestamp','from','to','type']">
+      {{th}} 
+    </th>
+  </thead>
+  <tbody ng-repeat="event in events" ng-class-odd="'odd'">
+    <tr ng-click="toggle_details(event)">
+      <td>{{event.header.time}}</td>
+      <td>{{event.header.from}}</td>
+      <td>{{event.header.to}}</td>
+      <td>{{event.header.type}}</td>
+    </tr>
+    <tr ng-show="event.details">
+      <td>
+        <h6>Event header</h6>
+        <pre ng-style="panel.style">{{event.header | json}}</pre>
+      </td>
+      <td colspan=1000>
+        <h6>Event payload</h6>
+        <pre ng-style="panel.style">{{event.data | json}}</pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</kibana-panel>         
diff --git a/panels/debug/module.js b/panels/debug/module.js
@@ -0,0 +1,34 @@
+angular.module('kibana.debug', [])
+.controller('debug', function($scope, eventBus) {
+
+  // Set and populate defaults
+  var _d = {
+    group   : "ALL",
+    style   : {'font-size':'9pt'},
+    size   : 20
+  }
+  _.defaults($scope.panel,_d)
+
+  $scope.init = function () {
+
+    $scope.set_listeners($scope.panel.group)
+    // Now that we're all setup, request the time from our group
+    eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
+
+    $scope.events = []
+  }
+
+  $scope.toggle_details = function(event) {
+    event.details = event.details ? false : true;
+  }
+
+  $scope.set_listeners = function(group) {
+    eventBus.register($scope,'$kibana_debug',function(event,data,header) {
+      if($scope.events.length >= $scope.panel.size)
+        $scope.events = $scope.events.slice(0,$scope.panel.size-1)
+
+      $scope.events.unshift({header:header,data:data})
+    });
+  }
+
+});
diff --git a/panels/pie/module.html b/panels/pie/module.html
@@ -1,3 +1,7 @@
 <kibana-panel ng-controller='pie' ng-init="init()">
+  <span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
+      <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
+  </span>
+
   <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         
diff --git a/panels/pie/module.js b/panels/pie/module.js
@@ -98,6 +98,7 @@ angular.module('kibana.pie', [])
           .facetFilter(ejs.QueryFilter(v))
         )
       })
+      $scope.populate_modal(request);
       var results = request.doSearch();
 
       // Populate scope when we have results
@@ -118,7 +119,7 @@ angular.module('kibana.pie', [])
       });
     // If we don't have an array, assume its a term facet.
     } else if ($scope.panel.mode == "terms") {
-      var results = request
+      request = request
         .facet(ejs.TermsFacet('pie')
           .field($scope.panel.query.field || $scope.panel.default_field)
           .size($scope.panel['size'])
@@ -131,7 +132,10 @@ angular.module('kibana.pie', [])
                 .to($scope.time.to)
                 .cache(false)
               )))).size(0)
-        .doSearch();
+
+      $scope.populate_modal(request);
+
+      var results = request.doSearch();
 
       // Populate scope when we have results
       results.then(function(results) {
@@ -153,14 +157,19 @@ angular.module('kibana.pie', [])
         $scope.$emit('render');
       });
     } else {
-      var results = request
+      request = request
         .query(ejs.QueryStringQuery($scope.panel.query.query || '*'))
         .filter(ejs.RangeFilter($scope.time.field)
           .from($scope.time.from)
           .to($scope.time.to)
           .cache(false))
         .size(0)
         .doSearch();
+
+      $scope.populate_modal(request);
+
+      var results = request.doSearch();
+
       results.then(function(results) {
         $scope.panel.loading = false;
         var complete  = results.hits.total;
@@ -173,6 +182,16 @@ angular.module('kibana.pie', [])
     }
   }
 
+  $scope.populate_modal = function(request) {
+    $scope.modal = {
+      title: "Pie Inspector",
+      body : "<h5>Last Elasticsearch Query</h5><pre>"+
+          'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
+          angular.toJson(JSON.parse(request.toString()),true)+
+        "'</pre>", 
+    } 
+  }
+
   function set_time(time) {
     $scope.time = time;
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index

diff --git a/panels/table/module.html b/panels/table/module.html
@@ -1,4 +1,9 @@
 <kibana-panel ng-controller='table' ng-init='init()'>
+
+  <span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
+      <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
+  </span>
+
   <div style="height:{{panel.height || row.height}};overflow-y:auto;overflow-x:auto">
     <div class="row-fluid">
       <div class="span1 offset3" style="text-align:right">
@@ -62,4 +67,4 @@
       </div>
     </div>
   </div>
-</kibana-panel>         
+</kibana-panel>
diff --git a/panels/table/module.js b/panels/table/module.js
@@ -78,9 +78,8 @@ angular.module('kibana.table', [])
       return
 
     $scope.panel.loading = true;
-    var request = $scope.ejs.Request().indices($scope.panel.index);
 
-    var results = request
+    var request = $scope.ejs.Request().indices($scope.panel.index)
       .query(ejs.FilteredQuery(
         ejs.QueryStringQuery($scope.panel.query || '*'),
         ejs.RangeFilter($scope.time.field)
@@ -90,8 +89,11 @@ angular.module('kibana.table', [])
       )
       .size($scope.panel.size)
       .from($scope.panel.offset)
-      .sort($scope.panel.sort[0],$scope.panel.sort[1])
-      .doSearch();
+      .sort($scope.panel.sort[0],$scope.panel.sort[1]);
+
+    $scope.populate_modal(request)
+
+    var results = request.doSearch();
 
     // Populate scope when we have results
     results.then(function(results) {
@@ -112,6 +114,16 @@ angular.module('kibana.table', [])
     });
   }
 
+  $scope.populate_modal = function(request) {
+    $scope.modal = {
+      title: "Table Inspector",
+      body : "<h5>Last Elasticsearch Query</h5><pre>"+
+          'curl -XGET '+config.elasticsearch+'/'+$scope.panel.index+"/_search?pretty -d'\n"+
+          angular.toJson(JSON.parse(request.toString()),true)+
+        "'</pre>", 
+    } 
+  }
+
   $scope.without_kibana = function (row) {
     row = _.clone(row)
     delete row.kibana

diff --git a/partials/modal.html b/partials/modal.html
@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>{{modal.title}}</h3>
+</div>
+<div class="modal-body">
+
+  <div ng-bind-html='modal.body'></div>
+
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-success" ng-click="dismiss();send_render()">Close</button>
+</div>