Added spy panels to map and histogram, added editor toggle to enable/disable spy

config.js

@@ -15,7 +15,7 @@ If you need to configure the default dashboard, please see default.json
 */
 var config = new Settings(
 {
-  elasticsearch:  'http://demo.kibana.org',
+  elasticsearch:  'http://localhost:9200',
   kibana_index:   "kibana-int", 
   timeformat:     'mm/dd HH:MM:ss',
   modules:        ['histogram','map','pie','table','stringquery','sort',

panels/histogram/editor.html

@@ -44,4 +44,15 @@
     <label class="small">Time correction</label> 
     <select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
   </div>
-</div>
+</div>
+<h5>Panel Spy</h5>
+<div class="row-fluid">
+  <div class="span2"> 
+    <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+  </div>
+  <div class="span9 small">
+    The panel spy shows 'behind the scenes' information about a panel. It can
+    be accessed by clicking the <i class='icon-eye-open'></i> in the top right
+    of the panel.
+  </div>
+</div>

panels/histogram/module.html

@@ -1,3 +1,6 @@
 <kibana-panel ng-controller='histogram' ng-init="init()" style="height:{{panel.height || row.height}}">
+  <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 histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         

panels/histogram/module.js

@@ -76,6 +76,8 @@ angular.module('kibana.histogram', [])
         ).size(0)
     })
 
+    $scope.populate_modal(request);
+
     // Then run it
     var results = request.doSearch();
 
@@ -120,6 +122,17 @@ angular.module('kibana.histogram', [])
     });
   }
 
+  // I really don't like this function, too much dom manip. Break out into directive?
+  $scope.populate_modal = function(request) {
+    $scope.modal = {
+      title: "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

panels/map/editor.html

@@ -22,3 +22,14 @@
       <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
     </div>
   </div>
+  <h5>Panel Spy</h5>
+  <div class="row-fluid">
+    <div class="span2"> 
+      <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+    </div>
+    <div class="span9 small">
+      The panel spy shows 'behind the scenes' information about a panel. It can
+      be accessed by clicking the <i class='icon-eye-open'></i> in the top right
+      of the panel.
+    </div>
+  </div>

panels/map/module.html

@@ -1,3 +1,6 @@
 <kibana-panel ng-controller='map' ng-init="init()">
+  <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 map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
 </kibana-panel>

panels/map/module.js

@@ -31,7 +31,7 @@ angular.module('kibana.map', [])
     var request = $scope.ejs.Request().indices($scope.panel.index);
 
     // Then the insert into facet and make the request
-    var results = request
+    var request = request
       .facet(ejs.TermsFacet('map')
         .field($scope.panel.field)
         .size($scope.panel['size'])
@@ -42,8 +42,11 @@ angular.module('kibana.map', [])
             ejs.RangeFilter($scope.time.field)
               .from($scope.time.from)
               .to($scope.time.to)
-            )))).size(0)
-      .doSearch();
+            )))).size(0);
+
+    $scope.populate_modal(request);
+
+    var results = request.doSearch();
 
     // Populate scope when we have results
     results.then(function(results) {
@@ -57,6 +60,17 @@ angular.module('kibana.map', [])
     });
   }
 
+  // I really don't like this function, too much dom manip. Break out into directive?
+  $scope.populate_modal = function(request) {
+    $scope.modal = {
+      title: "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

panels/pie/editor.html

@@ -99,4 +99,15 @@
     <label class="small">Mode</label> 
     <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['query','terms','goal']"></select>
   </div>
+</div>
+<h5>Panel Spy</h5>
+<div class="row-fluid">
+  <div class="span2"> 
+    <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+  </div>
+  <div class="span9 small">
+    The panel spy shows 'behind the scenes' information about a panel. It can
+    be accessed by clicking the <i class='icon-eye-open'></i> in the top right
+    of the panel.
+  </div>
 </div>

panels/pie/module.html

@@ -1,5 +1,5 @@
 <kibana-panel ng-controller='pie' ng-init="init()">
-  <span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
+  <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>
   

panels/pie/module.js

@@ -12,7 +12,8 @@ angular.module('kibana.pie', [])
     labels  : true,
     mode    : "terms",
     group   : "default",
-    default_field : '_all'
+    default_field : '_all',
+    spyable : true,
   }
   _.defaults($scope.panel,_d)
 
@@ -182,9 +183,10 @@ angular.module('kibana.pie', [])
     }
   }
 
+  // I really don't like this function, too much dom manip. Break out into directive?
   $scope.populate_modal = function(request) {
     $scope.modal = {
-      title: "Pie Inspector",
+      title: "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)+

panels/table/editor.html

@@ -33,4 +33,17 @@
     </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','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
-  </div>
+    </div>
+  </div>
+  <h5>Panel Spy</h5>
+  <div class="row-fluid">
+    <div class="span2"> 
+      <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+    </div>
+    <div class="span9 small">
+      The panel spy shows 'behind the scenes' information about a panel. It can
+      be accessed by clicking the <i class='icon-eye-open'></i> in the top right
+      of the panel.
+    </div>
+  </div>
+

panels/table/module.html

@@ -1,6 +1,6 @@
 <kibana-panel ng-controller='table' ng-init='init()'>
 
-  <span style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
+  <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>