Added row editor

common/lib/shared.js

@@ -437,4 +437,19 @@ function htmlEntities(str) {
       /</g, '&lt;').replace(
       />/g, '&gt;').replace(
       /"/g, '&quot;');
-}
+}
+
+
+_.mixin({
+    move: function (array, fromIndex, toIndex) {
+      array.splice(toIndex, 0, array.splice(fromIndex, 1)[0] );
+      return array;
+    } 
+});
+
+_.mixin({
+    remove: function (array, index) {
+      array.splice(index, 1);
+      return array;
+    } 
+});

js/controllers.js

@@ -9,6 +9,7 @@ angular.module('kibana.controllers', [])
   $scope._ = _;
 
 
+  // The global dashboards object should be moved to an $http request for json
   if (Modernizr.localstorage && 
     !(_.isUndefined(localStorage['dashboard'])) &&
     localStorage['dashboard'] !== ''
@@ -46,6 +47,10 @@ angular.module('kibana.controllers', [])
 })
 .controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
 
+  $scope.init = function(){
+    $scope.reset_panel();
+  }
+
   $scope.toggle_row = function(row) {
     row.collapse = row.collapse ? false : true;
     if (!row.collapse) {
@@ -55,6 +60,21 @@ angular.module('kibana.controllers', [])
     }
   }
 
+  $scope.add_panel = function(row,panel) {
+    console.log(panel)
+    $scope.row.panels.push(panel);
+  }
+
+  $scope.reset_panel = function() {
+    $scope.panel = {
+      span: 1,
+      editable: true,
+      groups: ['default'],
+    };
+  };
+
+  $scope.init();
+
 });
 
 

panels/histogram/editor.html

@@ -1,4 +1,4 @@
-<div class="row-fluid">  
+<div class="row-fluid" ng-controller="histogram">  
   <div class="span3">
     <form style="margin-bottom: 0px">
       <h6>Label</h6>
@@ -18,7 +18,7 @@
 <div class="row-fluid" ng-repeat="q in panel.query">        
   <div class="span3">
     <form style="margin-bottom: 0px">
-      <input type="text" style="width:70%" ng-model="q.label" ng-change="render_panel()">
+      <input type="text" style="width:70%" ng-model="q.label">
     </form>
   </div>
   <div class="span8">
@@ -34,10 +34,10 @@
 <div class="row-fluid">    
   <div class="span3">
     <label class="small">Effect Options</label> 
-    <select multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
+    <select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines']"></select>
   </div>
   <div class="span2">
     <label class="small">Fill (0.0 - 1.0)</label> 
-    <input type="number" class="input-mini" ng-model="panel.fill">
+    <input ng-change="$emit('render')" type="number" class="input-mini" ng-model="panel.fill">
   </div>
 </div>

panels/histogram/module.js

@@ -5,7 +5,7 @@ angular.module('kibana.histogram', [])
 
   // Set and populate defaults
   var _d = {
-    query   : { query: "*" },
+    query   : [ {query: "*", label:"Query"} ],
     interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
     show    : ['bars'],
     fill    : false,
@@ -31,6 +31,8 @@ angular.module('kibana.histogram', [])
   }
 
   $scope.add_query = function(label,query) {
+    if(!(_.isArray($scope.panel.query)))
+      $scope.panel.query = new Array();
     $scope.panel.query.unshift({
       query: query,
       label: label, 
@@ -111,7 +113,7 @@ angular.module('kibana.histogram', [])
     restrict: 'A',
     link: function(scope, elem, attrs, ctrl) {
 
-      // If the data or row state changes, re-render
+      // Receive render events
       scope.$on('render',function(){
         render_panel();
       });

panels/hits/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid">    
+  <div class="row-fluid" ng-controller="hits">    
     <div class="span9">
       <form class="input-append">
         <h6>Query</h6>

panels/map/editor.html

@@ -1,11 +1,19 @@
-  <div class="row-fluid">    
-    <div class="span9">
+  <div class="row-fluid" ng-controller="map">    
+    <div class="span6">
       <form class="input-append">
         <h6>Query</h6>
-        <input type="text" style="width:85%" ng-model="panel.query">
+        <input type="text" ng-model="panel.query">
         <button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
       </form>
     </div>
-    <div class="span3"><h6>Map</h6> 
-      <select class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select></span>
+    <div class="span4">
+     <form class="input-append">
+        <h6>Field</h6>
+        <input type="text" class="input-small" ng-model="panel.field">
+        <button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
+      </form>
+    </div>
+    <div class="span1"><h6>Map</h6> 
+      <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
+    </div>
   </div>

panels/pie/editor.html

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

panels/table/editor.html

@@ -1,4 +1,4 @@
-  <div class="row-fluid">    
+  <div class="row-fluid" ng-controller="table">    
     <div class="span12">
       <form class="input-append">
         <h5>Query</h5>

panels/text/editor.html

@@ -1,3 +1,5 @@
-<label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
-<label class=small>Content</label>
-<textarea ng-model="panel.content" rows="6" style="width:95%"></textarea>
+<div ng-controller="text">
+  <label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
+  <label class=small>Content</label>
+  <textarea ng-model="panel.content" rows="6" style="width:95%"></textarea>
+</div>

partials/paneleditor.html

@@ -4,22 +4,9 @@
 </div>
 <div class="modal-body">
 
+  <h4>General <small> panel settings</small></h4>
+  <div ng-include src="'partials/panelgeneral.html'"></div>
 
-  <h4>General</h4>
-  <div class="row-fluid">
-    <div class="span4">
-      <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
-    </div>
-    <div class="span4">
-      <label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
-    </div>
-    <div class="span2">
-      <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="span1"> 
-      <label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
-    </div>
-  </div>
   
   <h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4>
   <div ng-include src="'panels/'+panel.type+'/editor.html'">No additional settings are available for this type of panel.</div>

partials/panelgeneral.html

@@ -0,0 +1,14 @@
+  <div class="row-fluid">
+    <div class="span4">
+      <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
+    </div>
+    <div class="span4">
+      <label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
+    </div>
+    <div class="span2">
+      <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="span1"> 
+      <label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
+    </div>
+  </div>

partials/roweditor.html

@@ -1,11 +1,9 @@
 <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-  <h3>{{row.title}} <small>editor</small></h3>
+  <h3>{{row.title}} <small>row editor</small></h3>
 </div>
 <div class="modal-body">
-
-
-  <h4>General</h4>
+  <h4>Row Control</h4>
   <div class="row-fluid">
     <div class="span4">
       <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
@@ -14,10 +12,38 @@
       <label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input>
     </div>
     <div class="span1"> 
-      <label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable">
+      <label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="row.editable" />
     </div>
   </div>
+  <div class="row-fluid">
+    <div class="span12">
+      <h4>Panels</h4>
+      <table class="table table-condensed table-striped">
+        <thead>
+          <th>Title</th>
+          <th>Type</th>
+          <th>Delete</th>
+          <th>Move</th>
+        </thead>
+        <tr ng-repeat="panel in row.panels">
+          <td>{{panel.title}}</td>
+          <td>{{panel.type}}</td>
+          <td><i ng-click="row.panels = _.without(row.panels,panel)" class="icon-remove"></i></td>
+          <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="icon-arrow-up"></i></td>
+          <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="icon-arrow-down"></i></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <h4>New Panel</h4>
+  <select class="input-medium" ng-model="panel.type" ng-options="f for f in config.modules"></select>
+  <small>Select Type</small>
+  <div ng-show="!(_.isUndefined(panel.type))">
+    <div ng-include src="'partials/panelgeneral.html'"></div>
+    <div ng-include src="'panels/'+panel.type+'/editor.html'"></div>
+    <button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
+  </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();">Close</button>
 </div>