added ability to add new tabs to editor panels

js/controllers.js

@@ -71,6 +71,14 @@ angular.module('kibana.controllers', [])
     }
   };
 
+  $scope.setEditorTabs = function(panelMeta) {
+    $scope.editorTabs = ['General','Panel'];
+    if(!_.isUndefined(panelMeta.editorTabs)) {
+      $scope.editorTabs =  _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
+    }
+    return $scope.editorTabs;
+  };
+
   // This is whoafully incomplete, but will do for now 
   $scope.parse_error = function(data) {
     var _error = data.match("nested: (.*?);");
@@ -125,8 +133,7 @@ angular.module('kibana.controllers', [])
     $scope.panel = {
       error   : false,
       span    : 3,
-      editable: true,
-      group   : ['default']
+      editable: true
     };
   };
 

js/directives.js

@@ -26,10 +26,9 @@ angular.module('kibana.directives', [])
     link: function(scope, elem, attrs) {
       scope.$watch('panel.type', function(n,o) {
         if(!_.isUndefined(scope.panel.type)) {
-          var template = '<div>'+
-          '<div ng-controller="'+scope.panel.type+'" ng-include src="\'partials/panelgeneral.html\'"></div>'+
-          '<div ng-controller="'+scope.panel.type+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'">'+
-          '</div>';
+          var template = '<div ng-controller="'+scope.panel.type+'">'+
+            '<span ng-include src="\'partials/paneladd.html\'"></span>'+
+            '</div>';
           elem.html($compile(angular.element(template))(scope));
         }
       });

js/services.js

@@ -166,7 +166,6 @@ angular.module('kibana.services', [])
     }
   }
 })
-
 .service('timer', function($timeout) {
   // This service really just tracks a list of $timeout promises to give us a
   // method for cancelling them all when we need to
@@ -451,7 +450,7 @@ angular.module('kibana.services', [])
 
   // TOFIX: Error handling when there is more than one field
   this.timeField = function() {
-    return self.getByType('time')[0].field;
+    return _.pluck(self.getByType('time'),'field');
   };
 
   // This special function looks for all time filters, and returns a time range according to the mode

panels/bettermap/editor.html

@@ -15,7 +15,6 @@
       <input type="number" class="input-small" ng-model="panel.size">
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/bettermap/module.js

@@ -18,6 +18,9 @@ angular.module('kibana.bettermap', [])
 .controller('bettermap', function($scope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     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 "+

panels/column/module.js

@@ -55,7 +55,6 @@ angular.module('kibana.column', [])
       span: 12,
       height: "150px",
       editable: true,
-      group: ['default'],
       type: type,
     };
   };

panels/fields/module.js

@@ -21,7 +21,6 @@ angular.module('kibana.fields', [])
 
   // Set and populate defaults
   var _d = {
-    group   : "default",
     style   : {},
     arrange : 'vertical',
     micropanel_position : 'right', 

panels/histogram/editor.html

@@ -60,7 +60,6 @@
       <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/histogram/module.js

@@ -37,6 +37,9 @@ angular.module('kibana.histogram', [])
 .controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     status  : "Stable",
     description : "A bucketed time series chart of the current query or queries. Uses the "+
       "Elasticsearch date_histogram facet. If using time stamped indices this panel will query"+

panels/hits/editor.html

@@ -26,7 +26,6 @@
       <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/hits/module.js

@@ -21,6 +21,9 @@ angular.module('kibana.hits', [])
 .controller('hits', function($scope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     status  : "Stable",
     description : "The total hits for a query or set of queries. Can be a pie chart, bar chart, "+
       "list, or absolute total of all queries combined"

panels/map/editor.html

-  <div class="row-fluid">
-    <div class="span11">
-    The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
-    </div>
-  </div>
-
   <div class="row-fluid">    
     <div class="span3">
       <form>
@@ -15,7 +9,6 @@
       <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/map/module.js

@@ -23,6 +23,9 @@ angular.module('kibana.map', [])
 .controller('map', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     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"+

panels/pie/editor.html

@@ -48,7 +48,6 @@
       <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/pie/module.js

@@ -33,6 +33,9 @@ angular.module('kibana.pie', [])
 
   // Set and populate defaults
   var _d = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     query   : { field:"_type", goal: 100}, 
     queries     : {
       mode        : 'all',

panels/query/module.js

@@ -60,4 +60,6 @@ angular.module('kibana.query', [])
     }
   };
 
+  $scope.init();
+
 });
\ No newline at end of file

panels/table/editor.html

@@ -71,8 +71,7 @@
       <h6>Page Overflow</h6>
       <select class="input-small" ng-model="panel.overflow" ng-options="f.value as f.key for f in [{key:'scroll',value:'height'},{key:'expand',value:'min-height'}]"></select>
     </div>
-  </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
+  </div>  
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 
@@ -84,4 +83,3 @@
       of the panel.
     </div>
   </div>
-

panels/table/module.js

@@ -26,6 +26,9 @@ angular.module('kibana.table', [])
 .controller('table', function($rootScope, $scope, fields, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     status: "Stable",
     description: "A paginated table of records matching your query or queries. Click on a row to "+
       "expand it and review all of the fields associated with that document. <p>"
@@ -221,7 +224,7 @@ angular.module('kibana.table', [])
       // size*pages results
       // Otherwise, only get size*pages results then stop querying
       if (($scope.data.length < $scope.panel.size*$scope.panel.pages ||
-        !(($scope.panel.sort[0] === filterSrv.timeField()) && $scope.panel.sort[1] === 'desc')) &&
+        !((_.contains(filterSrv.timeField(),$scope.panel.sort[0])) && $scope.panel.sort[1] === 'desc')) &&
         _segment+1 < dashboard.indices.length) {
         $scope.get_data(_segment+1,$scope.query_id);
       }

panels/terms/editor.html

@@ -50,7 +50,6 @@
       <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
   <h5>Panel Spy</h5>
   <div class="row-fluid">
     <div class="span2"> 

panels/terms/module.js

@@ -22,6 +22,9 @@ angular.module('kibana.terms', [])
 .controller('terms', function($scope, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     status  : "Beta",
     description : "Displays the results of an elasticsearch facet as a pie chart, bar chart, or a "+ 
       "table"

panels/timepicker/module.js

@@ -43,9 +43,6 @@ angular.module('kibana.timepicker', [])
   };
   _.defaults($scope.panel,_d);
 
-  var _groups = _.isArray($scope.panel.group) ? 
-    $scope.panel.group : [$scope.panel.group];
-
   $scope.init = function() {
     // Private refresh interval that we can use for view display without causing
     // unnecessary refreshes during changes

panels/trends/editor.html

@@ -26,5 +26,4 @@
       <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
     </div>
   </div>
-  <div class="row-fluid" ng-include="'partials/querySelect.html'"></div>
 </div>

panels/trends/module.js

@@ -17,6 +17,9 @@ angular.module('kibana.trends', [])
 .controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) {
 
   $scope.panelMeta = {
+    editorTabs : [
+      {title:'Queries', src:'partials/querySelect.html'}
+    ],
     status  : "Beta",
     description : "A stock-ticker style representation of how queries are moving over time. "+
     "For example, if the time is 1:10pm, your time picker was set to \"Last 10m\", and the \"Time "+

partials/dasheditor.html

@@ -2,7 +2,7 @@
   <div class="pull-right editor-title">Dashboard settings</div>
 
   <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in ['General','Index','Rows']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['General','Index','Rows','Date/Time']" data-title="{{tab}}">
     </div>
   </div>
 
@@ -86,11 +86,11 @@
       </div>
     </form>
   </div>
-  <div class="row-fluid" ng-show="editor.index == 3">
-  </div>
+  <!--<div class="row-fluid" ng-show="editor.index == 3">
+    <h6>Region</h6><select class="input-small" ng-model="dashboard.current.time.region" ng-options='f for f in ["africa","america","asia","atlantic","australia","europe","indian","pacific"]'></select>
+  </div>-->
 </div>
 <div class="modal-footer">
   <button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 2">Create Row</button>
-
   <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
 </div>
\ No newline at end of file

partials/inspector.html

 <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-  <h3>Inspector</h3>
+  <h3>Last Elasticsearch Query</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>

partials/paneleditor.html

-<div class="modal-body" >
+<div class="modal-body">
   <div class="pull-right editor-title">{{panel.type}} settings</div>
-
   <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in ['General','Panel']" data-title="{{tab}}">
+    <div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
     </div>
   </div>
-  <div ng-show="editor.index == 0">
+  <div ng-show="editorTabs[editor.index] == 'General'">
     <div ng-include src="'partials/panelgeneral.html'"></div>
   </div>
   
-  <div ng-show="editor.index == 1">
-    <div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div>
+  <div ng-show="editorTabs[editor.index] == 'Panel'">
+    <div ng-include src="edit_path(panel.type)"></div>
   </div>
 
+  <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
+    <div ng-include src="tab.src"></div>
+  </div>
 </div>
+
 <div class="modal-footer">
   <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
   <button type="button" class="btn btn-danger" ng-click="editor.index=0;close_edit();dismiss()">Close</button>

partials/querySelect.html

-  <style>
-    .querySelect .query {
-      margin-right: 5px;
-    }
-    .querySelect .selected {
-      border: 3px solid;
-    }
-    .querySelect .unselected {
-      border: 0px solid;
-    }
-  </style>
-  <h4>Queries</h4>
-  <div class="span2" style="margin-left:0px">
-    <select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','unpinned','selected']"></select>
-  </div>
-  <div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
-    <span ng-style="{'border-color': querySrv.list[id].color}" ng-class="{selected:_.contains(panel.queries.ids,id),unselected:!_.contains(panel.queries.ids,id)}" ng-repeat="id in querySrv.ids" ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" class="query pointer badge">
-      <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i>
-      <span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
-    </span>
+  <div class="row-fluid">
+    <style>
+      .querySelect .query {
+        margin-right: 5px;
+      }
+      .querySelect .selected {
+        border: 3px solid;
+      }
+      .querySelect .unselected {
+        border: 0px solid;
+      }
+    </style>
+    <div class="span2" style="margin-left:0px">
+      <label class="small">Queries</label>
+      <select class="input-small" ng-change="set_refresh(true);" ng-model="panel.queries.mode" ng-options="f for f in ['all','pinned','unpinned','selected']"></select>
+    </div>
+    <div class="span9 querySelect" ng-show="panel.queries.mode == 'selected'">
+      <label class="small">Selected Queries</label>
+      <span ng-style="{'border-color': querySrv.list[id].color}" ng-class="{selected:_.contains(panel.queries.ids,id),unselected:!_.contains(panel.queries.ids,id)}" ng-repeat="id in querySrv.ids" ng-click="panel.queries.ids = _.toggleInOut(panel.queries.ids,id);set_refresh(true);" class="query pointer badge">
+        <i class="icon-circle" ng-style="{color: querySrv.list[id].color}"></i>
+        <span> {{querySrv.list[id].alias || querySrv.list[id].query}}</span>
+      </span>
+    </div>
   </div>