Added ability to customize interval in histogram, issue #7. Also fixed bug that caused editor and panel to be in different scopes

js/directives.js

@@ -15,6 +15,19 @@ 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+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'"></div>';
+          elem.html($compile(angular.element(template))(scope));
+        }
+      })
+    }
+  };
+})
 .directive('arrayJoin', function() {
   return {
     restrict: 'A',

panels/column/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="column">
+<div>
   <div class="row-fluid">
     <h4>Add Panel to Column</h4>
     <select class="input-medium" ng-model="new_panel.type" ng-options="f for f in _.without(config.modules,'column')| stringSort" ng-change="reset_panel(new_panel.type);send_render();"></select>

panels/dashcontrol/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="dashcontrol">
+<div>
   <h5>Allow saving to</h5>
   <div class="row-fluid">    
     <div class="span2">

panels/debug/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="debug">    
+  <div class="row-fluid">    
   <div class="row-fluid">    
     <div class="span3">
       <h5>Length</h5>

panels/fields/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="fields">    
+  <div class="row-fluid">    
     <div class="span3"><h6>Popup Position</h6> 
       <select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span>
     </div>

panels/fields/module.js

@@ -13,7 +13,7 @@
   ### Group Events
   #### Recieves
   * table_documents :: An object containing the documents in the table panel
-  *** Sends
+  #### Sends
   * fields :: an object containing the sort order, existing fields and selected fields
 
 */
@@ -42,7 +42,6 @@ angular.module('kibana.fields', [])
       $scope.docs = docs.docs;
     });
     eventBus.register($scope,"get_fields", function(event,id) {
-        console.log("field.get_fields");
       eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active);
     });
   }
@@ -79,7 +78,7 @@ angular.module('kibana.fields', [])
   }
 
   $scope.build_search = function(field, value,negate) {
-    $scope.panel.query = add_to_query($scope.panel.query,field,value,negate)
+    $scope.panel.query = [add_to_query($scope.panel.query,field,value,negate)]
     eventBus.broadcast($scope.$id,$scope.panel.group,'query',$scope.panel.query);
   }
 

panels/histogram/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller='histogram'>
+<div>
   <div class="row-fluid">
     <div class="span3">
       <form style="margin-bottom: 0px">
@@ -23,9 +23,8 @@
       </form>
     </div>
     <div class="span8">
-      <form class="input-append" style="margin-bottom: 0px">
-        <input type="text" style="width:80%" ng-model="q.query">
-        <button class="btn" ng-click="get_data()"><i class="icon-search"></i></button>
+      <form style="margin-bottom: 0px">
+        <input type="text" style="width:80%" ng-model="q.query" ng-change="set_refresh(true)">
       </form>
     </div>
     <div class="span1">
@@ -34,29 +33,38 @@
   </div>
   <h5>Chart Options</h5>
   <div class="row-fluid" style="margin-bottom:10px;">
-    <div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
-    <div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
-    <div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
-    <div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
-    <div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
-    <div class="span1"> <label class="small">xAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
-    <div class="span1"> <label class="small">yAxis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
+    <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
+    <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
+    <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
+    <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
+    <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
+    <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
+    <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
     <div class="span2" ng-show="panel.lines">
       <label class="small">Line Fill</label> 
-      <select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
+      <select class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
     <div class="span2" ng-show="panel.lines">
       <label class="small">Line Width</label> 
-      <select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
+      <select class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
   </div> 
-  <div class="row-fluid">    
+  <div class="row-fluid">  
     <div class="span3">
       <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>
+      <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
+    </div>
+    <div class="span2"> 
+      <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
     </div>
     <div class="span2"> 
-      <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks">
+      <label class="small">Auto-interval</label><input type="checkbox" ng-model="panel.auto_int" ng-checked="panel.auto_int" />
+    </div>
+    <div class="span2" ng-hide='panel.auto_int'> 
+      <label class="small">Interval</label><input type="text" class='input-mini' ng-model="panel.interval" ng-change='set_refresh(true)'/>
+    </div>
+    <div class="span3" ng-hide='panel.auto_int'> 
+      <label class="small">Use Elasticsearch date math format (eg 1m, 5m, 1d, 2w, 1y)</label>
     </div>
   </div>
   <h5>Panel Spy</h5>

panels/histogram/module.js

@@ -10,7 +10,8 @@
   * query ::  an array of objects as such: {query: 'somequery', label 'legent text'}.
               this is usually populated by a stringquery panel wher the query and label
               parameter are the same
-  * interval :: Generated automatically. Tells ES how to bucket the data points
+  * auto_int :: Auto calculate data point interval?
+  * interval :: Datapoint interval in elasticsearch date math format (eg 1d, 1w, 1y, 5y)
   * fill :: Only applies to line charts. Level of area shading from 0-10
   * linewidth ::  Only applies to line charts. How thick the line should be in pixels
                   While the editor only exposes 0-10, this can be any numeric value. 
@@ -44,7 +45,8 @@ angular.module('kibana.histogram', [])
   var _d = {
     group     : "default",
     query     : [ {query: "*", label:"Query"} ],
-    interval  : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
+    auto_int  : true,
+    interval  : '5m',
     fill      : 3,
     linewidth : 3,
     timezone  : 'browser', // browser, utc or a standard timezone
@@ -102,6 +104,9 @@ angular.module('kibana.histogram', [])
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.time))
       return
 
+    if ($scope.panel.auto_int)
+      $scope.panel.interval = secondsToHms(calculate_interval($scope.time.from,$scope.time.to,50,0)/1000);
+
     $scope.panel.loading = true;
     var _segment = _.isUndefined(segment) ? 0 : segment
     var request = $scope.ejs.Request().indices($scope.panel.index[_segment]);
@@ -206,7 +211,7 @@ angular.module('kibana.histogram', [])
   // function $scope.zoom
   // factor :: Zoom factor, so 0.5 = cuts timespan in half, 2 doubles timespan
   $scope.zoom = function(factor) {
-    eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor)
+    eventBus.broadcast($scope.$id,$scope.panel.group,'zoom',factor);
   }
 
   // I really don't like this function, too much dom manip. Break out into directive?
@@ -220,11 +225,24 @@ angular.module('kibana.histogram', [])
     } 
   }
 
+  $scope.set_refresh = function (state) { 
+    $scope.refresh = state; 
+  }
+
+  $scope.close_edit = function() {
+    if($scope.refresh)
+      $scope.get_data();
+    $scope.refresh =  false;
+    $scope.$emit('render');
+  }
+
   $scope.set_time = function(time) {
     $scope.time = time;
-    $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
-    $scope.panel.interval = secondsToHms(
-      calculate_interval(time.from,time.to,50,0)/1000);
+    // Should I be storing the index on the panel? It causes errors if the index
+    // goes away. Hmmm.
+    $scope.panel.index = time.index || $scope.panel.index
+    // Only calculate interval if auto_int is set, otherwise don't touch it
+    
     $scope.get_data();
   }
 
@@ -234,8 +252,6 @@ angular.module('kibana.histogram', [])
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
 
-      var height = scope.panel.height || scope.row.height;
-
       // Receive render events
       scope.$on('render',function(){
         render_panel();
@@ -248,6 +264,7 @@ angular.module('kibana.histogram', [])
 
       // Function for rendering panel
       function render_panel() {
+ 
         // Set barwidth based on specified interval
         var barwidth = interval_to_seconds(scope.panel.interval)*1000
 
@@ -288,7 +305,7 @@ angular.module('kibana.histogram', [])
               },
               selection: {
                 mode: "x",
-                color: '#999'
+                color: '#ccc'
               },
               grid: {
                 backgroundColor: '#fff',
@@ -323,15 +340,16 @@ angular.module('kibana.histogram', [])
       }
 
       function tt(x, y, contents) {
+        // If the tool tip already exists, don't recreate it, just update it
         var tooltip = $('#pie-tooltip').length ? 
           $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
-        //var tooltip = $('#pie-tooltip')
+
         tooltip.html(contents).css({
           position: 'absolute',
           top     : y + 5,
           left    : x + 5,
           color   : "#000",
-          border  : '2px solid #000',
+          border  : '1px solid #000',
           padding : '10px',
           'font-size': '11pt',
           'font-weight' : 200,

panels/hits/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="hits">
+<div>
   <div class="row-fluid">
     <div class="span3"> 
       <label class="small">Style</label> 

panels/map/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="map">
+  <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>

panels/pie/editor.html

@@ -1,4 +1,4 @@
-<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
+<div class="row-fluid" ng-switch="panel.mode">
   <div ng-switch-when="terms">
     <div class="row-fluid">
       <div class="span3">

panels/stringquery/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="stringquery">
+<div>
   <div class="row-fluid">    
     <div class="span2">
       <label class="small">Mulit-query</label><input type="checkbox" ng-change="set_multi(panel.multi) "ng-model="panel.multi" ng-checked="panel.multi">

panels/table/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="table">    
+  <div class="row-fluid">    
     <div style="width:90%">
       <form class="input-append">
         <h6>Query</h6>

panels/text/editor.html

@@ -1,4 +1,4 @@
-<div ng-controller="text">
+<div>
   <div class="row-fluid">
     <div class="span4">
       <label class="small">Mode</label> <select class="input-medium" ng-model="panel.mode" ng-options="f for f in ['html','markdown','text']"></select>

panels/timepicker/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid" ng-controller="timepicker">    
+  <div class="row-fluid">    
     <div class="span3">
       <h6>Default Mode</h6>
       <select style="width:85%" ng-model="panel.mode" ng-options="f for f in ['relative','absolute','since']"></select>

partials/paneleditor.html

@@ -13,5 +13,6 @@
   
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss();close_edit()">Close</button>
+  <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
+  <button type="button" class="btn btn-success" ng-click="close_edit();dismiss()">Close</button>
 </div>

partials/roweditor.html

@@ -25,7 +25,7 @@
     <div ng-show="!(_.isUndefined(panel.type))">
       <div ng-include src="'partials/panelgeneral.html'"></div>
 
-      <div ng-include src="edit_path(panel.type)"></div>
+      <div add-panel="{{panel.type}}"></div>
       <button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
     </div>
   </div>