Updated inspector template

common/css/main.css

@@ -25,10 +25,6 @@
   top:0px;
 }
 
-.navbar .brand {
-  color: #eee;
-}
-
 .navbar-inner {
   border-width: 0 0 0px;
   padding-left: 0px;

js/filters.js

@@ -26,4 +26,10 @@ angular.module('kibana.filters', [])
       return arr.slice(start, end);
     }
   };
+}).filter('stringify', function() {
+  return function(arr, start, end) {
+    if(!_.isUndefined(arr)) {
+      return arr.toString();
+    }
+  };
 });

js/services.js

@@ -441,7 +441,7 @@ angular.module('kibana.services', [])
     index: {
       interval: 'none',
       pattern: '_all',
-      default: '_all'
+      default: 'INDEX_MISSING'
     },
   };
 

panels/bettermap/module.html

@@ -4,7 +4,7 @@
   <link rel="stylesheet" href="panels/bettermap/lib/plugins.css" />
 
   <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>
+    <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
   </span>
   <!-- This solution might work well for other panels that have trouble with heights -->
   <div  style="padding-right:10px;padding-top:10px;height:{{panel.height|| row.height}};overflow:hidden">

panels/bettermap/module.js

@@ -140,15 +140,8 @@ angular.module('kibana.bettermap', [])
     });
   };
 
-  // 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+'/'+dashboard.indices+"/_search?pretty -d'\n"+
-          angular.toJson(JSON.parse(request.toString()),true)+
-        "'</pre>", 
-    }; 
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
   };
 
 })

panels/derivequeries/module.html

@@ -18,7 +18,7 @@
   }
 </style>
   <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>
+      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
   </span>
 
   <label class="small">Create new queries from 

panels/derivequeries/module.js

@@ -134,13 +134,7 @@ angular.module('kibana.derivequeries', [])
   };
 
   $scope.populate_modal = function(request) {
-    $scope.modal = {
-      title: "Inspector",
-      body : "<h5>Last Elasticsearch Query</h5><pre>"+
-          'curl -XGET '+config.elasticsearch+'/'+dashboard.indices+"/_search?pretty -d'\n"+
-          angular.toJson(JSON.parse(request.toString()),true)+
-        "'</pre>", 
-    }; 
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
   };
 
   var update_history = function(query) {

panels/histogram/module.html

@@ -18,7 +18,7 @@
     }
   </style>
   <span ng-show="panel.spyable" class='spy panelextra pointer'>
-      <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
+      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
   </span>
   <div>
     <span ng-show='panel.zoomlinks && data'>

panels/histogram/module.js

@@ -241,13 +241,7 @@ 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+'/'+dashboard.indices+"/_search?pretty -d'\n"+
-          angular.toJson(JSON.parse(request.toString()),true)+
-        "'</pre>", 
-    }; 
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
   };
 
   $scope.set_refresh = function (state) { 

panels/hits/editor.html

@@ -27,4 +27,15 @@
     </div>
   </div>
   <div class="row-fluid" ng-include="'partials/querySelect.html'"></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>
 </div>

panels/hits/module.html

@@ -1,5 +1,7 @@
 <kibana-panel ng-controller='hits' ng-init="init()">
-
+  <span ng-show="panel.spyable" class='spy panelextra pointer'>
+      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
+  </span>
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend -->
     <table class="small" ng-show="panel.arrangement == 'vertical'">  

panels/hits/module.js

@@ -38,7 +38,8 @@ angular.module('kibana.hits', [])
     counter_pos : 'above',
     donut   : false,
     tilt    : false,
-    labels  : true
+    labels  : true,
+    spyable : true
   };
   _.defaults($scope.panel,_d);
 
@@ -77,8 +78,8 @@ angular.module('kibana.hits', [])
         ).size(0);
     });
 
-    // TODO: Spy for hits panel
-    //$scope.populate_modal(request);
+    // Populate the inspector panel
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
 
     // Then run it
     var results = request.doSearch();

panels/table/module.html

@@ -8,7 +8,7 @@
   </style>
 
   <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>
+      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
   </span>
 
   <div class="row-fluid">

panels/table/module.js

@@ -226,13 +226,7 @@ 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+'/'+dashboard.indices+"/_search?pretty -d'\n"+
-          angular.toJson(JSON.parse(request.toString()),true)+
-        "'</pre>", 
-    }; 
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
   };
 
   $scope.without_kibana = function (row) {

panels/terms/editor.html

@@ -51,4 +51,15 @@
     </div>
   </div>
   <div class="row-fluid" ng-include="'partials/querySelect.html'"></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>
 </div>

panels/terms/module.html

@@ -1,5 +1,7 @@
 <kibana-panel ng-controller='terms' ng-init="init()">
-
+  <span ng-show="panel.spyable" class='spy panelextra pointer'>
+      <i bs-modal="'partials/inspector.html'" class="icon-eye-open"></i>
+  </span>
   <!-- START Pie or bar chart -->
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend above -->

panels/terms/module.js

@@ -45,7 +45,8 @@ angular.module('kibana.terms', [])
     labels  : true,
     arrangement : 'horizontal',
     chart       : 'bar',
-    counter_pos : 'above'
+    counter_pos : 'above',
+    spyable     : true
   };
   _.defaults($scope.panel,_d);
 
@@ -92,7 +93,8 @@ angular.module('kibana.terms', [])
             filterSrv.getBoolFilter(filterSrv.ids)
             )))).size(0);
 
-    //$scope.populate_modal(request);
+    // Populate the inspector panel
+    $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
 
     results = request.doSearch();
 

partials/inspector.html

@@ -0,0 +1,16 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>Inspector</h3>
+</div>
+<div class="modal-body">
+
+  <div>
+    <h5>Last Elasticsearch Query</h5>
+    <pre>curl -XGET '{{config.elasticsearch}}/{{dashboard.indices|stringify}}/_search?pretty' -d '{{inspector}}'
+    </pre>"
+  </div>
+  
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
+</div>