Make panel extra icons more obvious, fix overlap, add tooltips, add method for panels to define custom modals

src/app/directives/kibanaPanel.js

@@ -10,9 +10,24 @@ function (angular) {
       var editorTemplate =
         '<i class="icon-spinner small icon-spin icon-large panel-loading"' +
           'ng-show="panelMeta.loading == true && !panel.title"></i>' +
-        '<span class="editlink panelextra pointer" style="right:15px;top:0px"' +
-          'bs-modal="\'app/partials/paneleditor.html\'" ng-show="panel.editable != false">' +
-        '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i></span>' +
+
+        // Editor link
+        '<span class="panelextra">' +
+
+
+          '<span ng-repeat="task in panelMeta.modals" ng-show="task.show">' +
+            '<span bs-modal="task.partial" class="pointer"><i ' +
+              'bs-tooltip="task.description" ng-class="task.icon" class="pointer"></i></span>'+
+          ' / </span>' +
+
+          '<span ng-show="panel.editable != false">' +
+            '<span bs-modal="\'app/partials/paneleditor.html\'" class="pointer">'+
+            '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
+          ' / </span>' +
+
+          '<span class="small strong">{{panel.type}}</span> ' +
+        '</span>' +
+
         '<h4 ng-show="panel.title">' +
           '{{panel.title}}' +
           '<i class="icon-spinner smaller icon-spin icon-large"' +

src/app/panels/bettermap/module.html

@@ -1,7 +1,4 @@
 <div ng-controller='bettermap' ng-init="init()">
-  <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
-    <i bs-modal="'app/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">
     <div bettermap id='bettermap' params="{{panel}}" style="height:100%"></div>

src/app/panels/bettermap/module.js

@@ -32,6 +32,14 @@ function (angular, app, _, L, localRequire) {
           src: 'app/partials/querySelect.html'
         }
       ],
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       status  : "Experimental",
       description : "Displays geo points in clustered groups on a map. The cavaet for this panel is"+
         " that, for better or worse, it does NOT use the terms facet and it <b>does</b> query "+

src/app/panels/derivequeries/module.html

@@ -17,10 +17,6 @@
     box-sizing: border-box;         /* Opera/IE 8+ */
   }
 </style>
-  <span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
-      <i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
-  </span>
-
   <label class="small">Create new queries from
     <span class="panel-derive-field" ng-show="!editing" ng-click="editing=true">{{panel.field}}</span>
     <select ng-show="editing && fields.list.length>1" class="input-medium" ng-model="panel.field" ng-options="f for f in fields.list" ng-change='editing=false' ng-blur="editing=false"></select>

src/app/panels/derivequeries/module.js

@@ -24,6 +24,14 @@ function (angular, app, _) {
 
   module.controller('derivequeries', function($scope, $rootScope, querySrv, fields, dashboard, filterSrv) {
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       status  : "Experimental",
       description : "Creates a new set of queries using the Elasticsearch terms facet. For example,"+
        " you might want to create 5 queries showing the most frequent HTTP response codes. Be "+

src/app/panels/histogram/module.html

@@ -25,9 +25,6 @@
       margin: 0px 0px 0px 10px !important;
     }
   </style>
-  <span ng-show="panel.spyable" class='spy panelextra pointer'>
-      <i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
-  </span>
   <div>
     <span ng-show='panel.options'>
       <a class="link underline small" ng-show='panel.options' ng-click="options=!options">

src/app/panels/histogram/module.js

@@ -52,6 +52,14 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
   module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       editorTabs : [
         {
           title:'Queries',

src/app/panels/hits/module.html

@@ -1,7 +1,4 @@
 <div ng-controller='hits' ng-init="init()">
-  <span ng-show="panel.spyable" class='spy panelextra pointer'>
-      <i bs-modal="'app/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'">

src/app/panels/hits/module.js

@@ -28,6 +28,14 @@ define([
 
   module.controller('hits', function($scope, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       editorTabs : [
         {title:'Queries', src:'app/partials/querySelect.html'}
       ],

src/app/panels/map/module.html

@@ -59,8 +59,5 @@
         z-index: 99;
     }
   </style>
-  <span ng-show="panel.spyable" class='spy panelextra pointer'>
-    <i bs-modal="'app/partials/modal.html'" class="icon-eye-open"></i>
-  </span>
   <div class="jvectormap" map params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
 </div>

src/app/panels/map/module.js

@@ -22,7 +22,7 @@ define([
   'config',
   './lib/jquery.jvectormap.min'
 ],
-function (angular, app, _, $, config) {
+function (angular, app, _, $) {
   'use strict';
 
   var module = angular.module('kibana.panels.map', []);
@@ -33,6 +33,14 @@ function (angular, app, _, $, config) {
       editorTabs : [
         {title:'Queries', src:'app/partials/querySelect.html'}
       ],
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       status  : "Stable",
       description : "Displays a map of shaded regions using a field containing a 2 letter country "+
        ", or US state, code. Regions with more hit are shaded darker. Node that this does use the"+
@@ -108,13 +116,7 @@ function (angular, app, _, $, config) {
 
     // 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.build_search = function(field,value) {

src/app/panels/pie/module.html

@@ -1,8 +1,4 @@
 <div ng-controller='pie' ng-init="init()">
-  <span ng-show='panel.spyable' style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
-      <i bs-modal="'app/partials/modal.html'" class="icon-eye-open"></i>
-  </span>
-
   <div ng-show="panel.legend == 'above'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div><br>

src/app/panels/pie/module.js

@@ -23,7 +23,7 @@ define([
   'jquery',
   'kbn',
   'config'
-], function (angular, app, _, $, kbn, config) {
+], function (angular, app, _, $, kbn) {
   'use strict';
 
   var module = angular.module('kibana.panels.pie', []);
@@ -32,6 +32,17 @@ define([
   module.controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
 
     $scope.panelMeta = {
+      editorTabs : [
+        {title:'Queries', src:'app/partials/querySelect.html'}
+      ],
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       status  : "Deprecated",
       description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+
         " point this at not_analyzed fields for that reason. This panel is going away soon, it has"+
@@ -40,9 +51,6 @@ define([
 
     // Set and populate defaults
     var _d = {
-      editorTabs : [
-        {title:'Queries', src:'app/partials/querySelect.html'}
-      ],
       query   : { field:"_type", goal: 100},
       queries     : {
         mode        : 'all',
@@ -123,7 +131,7 @@ define([
                 filterSrv.getBoolFilter(filterSrv.ids)
                 )))).size(0);
 
-        $scope.populate_modal(request);
+        $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
 
         results = request.doSearch();
 
@@ -148,7 +156,7 @@ define([
           .filter(filterSrv.getBoolFilter(filterSrv.ids))
           .size(0);
 
-        $scope.populate_modal(request);
+        $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
 
         results = request.doSearch();
 
@@ -165,17 +173,6 @@ define([
       }
     };
 
-    // 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>",
-      };
-    };
-
   });
 
   module.directive('pie', function(querySrv, filterSrv, dashboard) {

src/app/panels/table/module.html

@@ -6,11 +6,6 @@
       overflow-x: scroll;
     }
   </style>
-
-  <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
-      <i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
-  </span>
-
   <div class="row-fluid">
     <div ng-class="{'span3':panel.field_list}" ng-show="panel.field_list">
       <div class="sidebar-nav">

src/app/panels/table/module.js

@@ -35,6 +35,14 @@ function (angular, app, _, kbn, moment) {
 
   module.controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       editorTabs : [
         {
           title:'Paging',

src/app/panels/terms/module.html

@@ -1,7 +1,4 @@
 <div ng-controller='terms' ng-init="init()">
-  <span ng-show="panel.spyable" class='spy panelextra pointer'>
-      <i bs-modal="'app/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 -->

src/app/panels/terms/module.js

@@ -25,6 +25,14 @@ function (angular, app, _, $, kbn) {
 
   module.controller('terms', function($scope, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       editorTabs : [
         {title:'Queries', src:'app/partials/querySelect.html'}
       ],

src/app/panels/trends/editor.html

@@ -1,16 +1,7 @@
 <div>
-  <div class="row-fluid">
-    <div class="span12">
-      The trends panel will give you a percentage representation of how your query
-      has moved in your current timespan compared a specified amount of time ago. For
-      example, if the time is 1:10pm, your time picker was set to "Last 10m", and the 
-      "Time Ago" parameter was set to '1h', the panel would show how much the query 
-      results have changed since 12:00-12:10pm
-    </div>
-  </div>
   <h4>Settings</h4>
   <div class="row-fluid">
-    <div class="span3" ng-hide='panel.auto_int'> 
+    <div class="span3" ng-hide='panel.auto_int'>
       <label class="small">Use Elasticsearch date math format here (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
     <div class="span3">
@@ -18,11 +9,11 @@
         <input type="text" class="input-small" ng-model="panel.ago" ng-change="set_refresh(true)">
     </div>
     <div class="span2">
-      <label class="small">Font Size</label> 
+      <label class="small">Font Size</label>
       <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
     </div>
     <div class="span3">
-      <label class="small" >List Format</label> 
+      <label class="small" >List Format</label>
       <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
     </div>
   </div>

src/app/panels/trends/module.js

@@ -21,7 +21,16 @@ function (angular, app, _, kbn) {
   app.useModule(module);
 
   module.controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) {
+
     $scope.panelMeta = {
+      modals : [
+        {
+          description: "Inspect",
+          icon: "icon-info-sign",
+          partial: "app/partials/inspector.html",
+          show: $scope.panel.spyable
+        }
+      ],
       editorTabs : [
         {title:'Queries', src:'app/partials/querySelect.html'}
       ],
@@ -32,7 +41,6 @@ function (angular, app, _, kbn) {
       " since 12:00-12:10pm"
     };
 
-
     // Set and populate defaults
     var _d = {
       queries     : {
@@ -42,6 +50,7 @@ function (angular, app, _, kbn) {
       style   : { "font-size": '14pt'},
       ago     : '1d',
       arrangement : 'vertical',
+      spyable: true
     };
     _.defaults($scope.panel,_d);
 
@@ -122,8 +131,8 @@ function (angular, app, _, kbn) {
       });
 
 
-      // TODO: Spy for trend panel
-      //$scope.populate_modal(request);
+      // Populate the inspector panel
+      $scope.inspector = angular.toJson(JSON.parse(request.toString()),true);
 
       // If we're on the first segment we need to get our indices
       if (_segment === 0) {

src/app/partials/modal.html

@@ -5,7 +5,7 @@
 <div class="modal-body">
 
   <div ng-bind-html='modal.body'></div>
-  
+
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-danger" ng-click="dismiss()">Close</button>

src/app/partials/panelgeneral.html

@@ -10,12 +10,12 @@
     <div class="span2" ng-hide="panel.sizeable == false">
       <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
     </div>
-    <div class="span2"> 
+    <div class="span2">
       <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
     </div>
-    <div class="span2" ng-show="!_.isUndefined(panel.spyable)"> 
+    <div class="span2" ng-show="!_.isUndefined(panel.spyable)">
       <label class="small">
-        Spyable <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
+        Inspect <i class="icon-question-sign" bs-tooltip="'Allow query reveal via <i class=icon-eye-open></i>'"></i>
       </label>
       <input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
     </div>

src/vendor/bootstrap/less/overrides.less

@@ -10,6 +10,8 @@
   color: @black;
 }
 
+
+
 .editor-title {
   margin-right: 10px;
   font-size: 1.7em;
@@ -109,14 +111,20 @@
   position: absolute;
   z-index: 800;
   display: none;
+  opacity: 0.7;
+  right:15px;
+  top:-13px;
+}
+
+.panel span.panelextra .link {
+  margin-right: 5px;
 }
 
 .panel:hover span.panelextra {
   display: block;
-  opacity: 0.3;
 }
 
-.panel span.panelextra:hover {
+.panel span.panelextra .editlink:hover {
   opacity: 1;
 }