More paging improvements, moved spy settings to general

js/controllers.js

@@ -128,12 +128,12 @@ angular.module('kibana.controllers', [])
     $scope.row.panels.push(panel);
   };
 
-  $scope.reset_panel = function() {
-
+  $scope.reset_panel = function(type) {
     $scope.panel = {
       error   : false,
       span    : 3,
-      editable: true
+      editable: true,
+      type    : type
     };
   };
 

js/directives.js

@@ -23,13 +23,15 @@ angular.module('kibana.directives', [])
 .directive('addPanel', function($compile) {
   return {
     restrict: 'A',
-    link: function(scope, elem, attrs) {
-      scope.$watch('panel.type', function(n,o) {
-        if(!_.isUndefined(scope.panel.type)) {
-          var template = '<div ng-controller="'+scope.panel.type+'">'+
+    link: function($scope, elem, attrs) {
+      $scope.$watch('panel.type', function(n,o) {
+        var _type = $scope.panel.type;
+        $scope.reset_panel(_type);
+        if(!_.isUndefined($scope.panel.type)) {
+          var template = '<div ng-controller="'+$scope.panel.type+'">'+
             '<span ng-include src="\'partials/paneladd.html\'"></span>'+
             '</div>';
-          elem.html($compile(angular.element(template))(scope));
+          elem.html($compile(angular.element(template))($scope));
         }
       });
     }

panels/bettermap/editor.html

@@ -15,14 +15,3 @@
       <input type="number" class="input-small" ng-model="panel.size">
     </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/editor.html

@@ -1,4 +1,3 @@
-<div>
   <div class="row-fluid">
     <div class="span2">
       <label class="small">Mode</label> 
@@ -60,15 +59,3 @@
       <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
     </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>
-</div>

panels/hits/editor.html

@@ -26,15 +26,4 @@
       <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </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>
 </div>

panels/map/editor.html

@@ -9,9 +9,3 @@
       <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>

panels/pie/editor.html

@@ -1,4 +1,3 @@
-<div>
   <div class="row-fluid" ng-switch="panel.mode">
     <div class="row-fluid">
       <div class="span2">
@@ -47,16 +46,4 @@
       <label class="small">Legend</label> 
       <select class="input-small" ng-model="panel.legend" ng-options="f for f in ['above','below','none']"></select></span>
     </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>
-</div>
+  </div>

panels/table/editor.html

@@ -1,7 +1,7 @@
   <div class="row-fluid">    
     <div class="span4">
       <form class="input-append">
-        <h6>Add field</h6>
+        <h6>Add Column</h6>
         <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
         <button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
       </form>
@@ -41,45 +41,8 @@
     <div class="span2"><h6>Font Size</h6> 
       <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="span2"> 
-      <h6>Page Control</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
-    </div>
     <div class="span2">
       <h6>Trim Factor <i class="icon-question-sign" bs-tooltip="'Trim fields to this long divided by # of rows'"></i></h6>
       <input type="number" class="input-small" ng-model="panel.trimFactor">
     </div>
-  </div>
-  <h5>Paging</h5>
-  <div class="row-fluid">
-    <div class="span2">
-      <h6>Per Page</h6>
-      <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
-    </div>
-    <div class="span1">
-      <h6>&nbsp;</h6>
-      <center><i class='icon-remove'></i><center>
-    </div>
-    <div class="span2">
-      <h6>Page limit</h6>
-      <input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
-    </div>
-    <div class="span2 large">
-      <h6>Pageable</h6>
-      <strong>= {{panel.size * panel.pages}}</strong>
-    </div>
-    <div class="span3">
-      <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>  
-  <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/table/module.js

@@ -27,6 +27,7 @@ angular.module('kibana.table', [])
 
   $scope.panelMeta = {
     editorTabs : [
+      {title:'Paging', src:'panels/table/pagination.html'},
       {title:'Queries', src:'partials/querySelect.html'}
     ],
     status: "Stable",

panels/table/pagination.html

@@ -0,0 +1,27 @@
+  <div class="row-fluid">
+    <div class="span3"> 
+      <h6>Show Controls</h6><input type="checkbox" ng-model="panel.paging" ng-checked="panel.paging">
+    </div>
+    <div class="span2">
+      <h6>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">
+    <div class="span2">
+      <h6>Per Page</h6>
+      <input type="number" class="input-mini" ng-model="panel.size" ng-change="get_data()">
+    </div>
+    <div class="span1">
+      <h6>&nbsp;</h6>
+      <center><i class='icon-remove'></i><center>
+    </div>
+    <div class="span2">
+      <h6>Page limit</h6>
+      <input type="number" class="input-mini" ng-model="panel.pages" ng-change="get_data()">
+    </div>
+    <div class="span2 large">
+      <h6>Pageable</h6>
+      <strong class="large">= {{panel.size * panel.pages}}</strong>
+    </div>
+  </div>

panels/terms/editor.html

@@ -1,4 +1,3 @@
-<div>
   <div class="row-fluid">
     <div class="span2">
       <label class="small">Field</label>
@@ -50,15 +49,3 @@
       <label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">
     </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>
-</div>

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','Date/Time']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['General','Index','Rows']" data-title="{{tab}}">
     </div>
   </div>
 

partials/panelgeneral.html

@@ -13,4 +13,10 @@
     <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)"> 
+      <label class="small">
+        Spyable <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>
   </div>