Started on row editor, removed lots of 's for nice speed increase

common/css/main.css

@@ -20,20 +20,32 @@
   z-index: 2000;
 }
 
-span.editlink {
+.panel i.editlink {
   position: absolute;
   right: 5px;
   z-index: 800;
   display: none;
 }
 
-.panel:hover span.editlink {
+.panel:hover i.editlink {
   display: block;
   opacity: 0.3;
 }
 
-.panel span.editlink:hover {
-  display: block;
+.panel i.editlink:hover {
+  opacity: 1;
+}
+
+.row-header i.editlink {
+  display: none;
+}
+
+.row-header:hover i.editlink {
+  display: inline-block;
+  opacity: 0.3;
+}
+
+.row-header i.editlink:hover {
   opacity: 1;
 }
 

index.html

@@ -32,10 +32,11 @@
   <div class="navbar navbar-fixed-top">
     <div class="navbar-inner">
       <div class="container-fluid">
-        <span class="brand"><small><small>Kibana Preview</small></small></span>
+        <span class="brand"><small>Kibana Preview</small></span>
         <span class="brand">{{dashboards.title}}</span>
         <div class="brand"><i class='icon-download pointer' ng-click="export()" bs-tooltip="'Export this dashboard'" data-placement="bottom"></i></div>
         <div class="brand"><i class='icon-bookmark pointer' ng-click="default()" bs-tooltip="'Set as default dashboard'" data-placement="bottom"></i></div>
+        <div class="brand"><i class='icon-ban-circle pointer' ng-click="purge()" bs-tooltip="'Clear default dashboard settings'" data-placement="bottom"></i></div>
         <div class='pull-right' style="padding-top: 5px; padding-left: 10px"><input type="file" id="upload" upload /></div>
         
       </div>

js/controllers.js

@@ -6,9 +6,13 @@ angular.module('kibana.controllers', [])
 .controller('DashCtrl', function($scope, $rootScope, ejsResource, timer) {
 
   $scope.config = config;
+  $scope._ = _;
 
 
-  if (Modernizr.localstorage && !(_.isUndefined(localStorage['dashboard']))) {
+  if (Modernizr.localstorage && 
+    !(_.isUndefined(localStorage['dashboard'])) &&
+    localStorage['dashboard'] !== ''
+  ) {
     $scope.dashboards = JSON.parse(localStorage['dashboard']);
   } else {
     $scope.dashboards = dashboards;
@@ -16,11 +20,6 @@ angular.module('kibana.controllers', [])
 
   var ejs = $scope.ejs = ejsResource(config.elasticsearch);  
 
-  $scope.toggle_row = function(row) {
-    $scope.$broadcast('toggle_row',row)
-    row.collapse = row.collapse ? false : true;
-  }
-
   $scope.export = function() {
     var blob = new Blob([angular.toJson($scope.dashboards)], {type: "application/json;charset=utf-8"});
     saveAs(blob, $scope.dashboards.title+"-"+new Date().getTime());
@@ -35,6 +34,27 @@ angular.module('kibana.controllers', [])
     }  
   }
 
+  $scope.purge = function() {
+    if (Modernizr.localstorage) {
+      localStorage['dashboard'] = '';
+      alert('Default dashboard cleared')
+    } else {
+      alert("Sorry, your browser is too old for this functionality");
+    }  
+  }
+
+})
+.controller('RowCtrl', function($scope, $rootScope, $timeout, ejsResource, timer) {
+
+  $scope.toggle_row = function(row) {
+    row.collapse = row.collapse ? false : true;
+    if (!row.collapse) {
+      $timeout(function() {
+        $scope.$broadcast('render')
+      });
+    }
+  }
+
 });
 
 

js/directives.js

@@ -7,23 +7,12 @@ angular.module('kibana.directives', [])
   return {
     restrict: 'E',
     link: function(scope, elem, attrs) {
-      var template = '<span class="pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
-        '<i class="icon-edit"></i></span><h4>{{panel.title}}</h4>';
+      var template = '<i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"></i>'+
+                    '<h4>{{panel.title}}</h4>';
       elem.prepend($compile(angular.element(template))(scope));
     }
   };
 })
-.directive('panelEdit', function(){
-    return {
-        restrict: 'E',
-        replace: true,
-        scope: {
-          'panel': '=panel'
-        },
-        templateUrl: 'panels/table/editor.html',
-        //controller: 'ChildElement'
-    }
-})
 .directive('arrayJoin', function() {
   return {
     restrict: 'A',

js/services.js

@@ -9,6 +9,7 @@ angular.module('kibana.services', [])
     if(_.isUndefined(data))
       var data = from
 
+    //console.log('Sent: '+type + ' to ' + to + ' from ' + from + ': ' + angular.toJson(data))
     $rootScope.$broadcast(type,{
       from: from,
       to: to,
@@ -31,6 +32,7 @@ angular.module('kibana.services', [])
         scope.panel.group = [scope.panel.group];
       
       if(_.intersection(_to,scope.panel.group).length > 0 || _.indexOf(_to,_id) > -1) {
+        //console.log('Got: '+type + ' from ' + _from + ' to ' + _to + ': ' + angular.toJson(packet.data))
         fn(event,packet.data);
       }
     });

panels/histogram/module.js

@@ -19,8 +19,10 @@ angular.module('kibana.histogram', [])
       $scope.panel.query[0].query = query;
       $scope.get_data();
     });
-    // Now that we're all setup, request the time from our group
-    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
+    // Now that we're all setup, request the time from our group if we don't 
+    // have it yet
+    if(_.isUndefined($scope.time))
+      eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
   $scope.remove_query = function(q) {
@@ -88,6 +90,7 @@ angular.module('kibana.histogram', [])
           series.data.color = $scope.panel.query[k].color;
         $scope.data.push(series.data)
       });
+      $scope.$emit('render')
     });
   }
 
@@ -109,20 +112,17 @@ angular.module('kibana.histogram', [])
     link: function(scope, elem, attrs, ctrl) {
 
       // If the data or row state changes, re-render
-      scope.$watch(function () {
-        return angular.toJson([scope.data, scope.row]) 
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
+      scope.$on('render',function(){
+        render_panel();
       });
-
+  
       // Re-render if the window is resized
       angular.element(window).bind('resize', function(){
-          render_panel(scope,elem,attrs);
+        render_panel();
       });
 
       // Function for rendering panel
-      function render_panel(scope,elem,attrs) {
+      function render_panel() {
         // Determine format
         var show = _.isUndefined(scope.panel.show) ? {
             bars: true, lines: false, points: false
@@ -142,7 +142,7 @@ angular.module('kibana.histogram', [])
                     
         // Populate element. Note that jvectormap appends, does not replace.
         scripts.wait(function(){
-        // Populate element
+          // Populate element
           $.plot(elem, scope.data, {
             legend: { 
               position: "nw", 

panels/map/module.js

@@ -53,6 +53,7 @@ angular.module('kibana.map', [])
       _.each(results.facets.map.terms, function(v) {
         $scope.data[v.term.toUpperCase()] = v.count;
       });
+      $scope.$emit('render')
     });
   }
 
@@ -70,20 +71,17 @@ angular.module('kibana.map', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // If the data or row state changes, re-render
-      scope.$watch(function () {
-        return angular.toJson([scope.data, scope.row]) 
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
+      // Receive render events
+      scope.$on('render',function(){
+        render_panel();
       });
 
       // Or if the window is resized
       angular.element(window).bind('resize', function(){
-          render_panel(scope,elem,attrs);
+        render_panel();
       });
 
-      function render_panel(scope,elem,attrs) {
+      function render_panel() {
         // Using LABjs, wait until all scripts are loaded before rendering panel
         var scripts = $LAB.script("panels/map/lib/jquery.jvectormap.min.js")
           .script("panels/map/lib/map."+scope.panel.map+".js")

panels/pie/module.js

@@ -92,6 +92,7 @@ angular.module('kibana.pie', [])
             slice.color = $scope.panel.query[k].color;
           $scope.data.push(slice)
         });
+        $scope.$emit('render');
       });
     // If we don't have an array, assume its a term facet.
     } else {
@@ -126,6 +127,7 @@ angular.module('kibana.pie', [])
           $scope.data.push(slice)
           k = k + 1;
         });
+        $scope.$emit('render');
       });
     }
   }
@@ -145,21 +147,18 @@ angular.module('kibana.pie', [])
     restrict: 'A',
     link: function(scope, elem, attrs) {
 
-      // Watch if data or row state changes
-      scope.$watch(function () {
-        return angular.toJson([scope.data, scope.row]) 
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
+      // Receive render events
+      scope.$on('render',function(){
+        render_panel();
       });
 
       // Or if the window is resized
       angular.element(window).bind('resize', function(){
-          render_panel(scope,elem,attrs);
+        render_panel();
       });
 
       // Function for rendering panel
-      function render_panel(scope,elem,attrs) {
+      function render_panel() {
 
         var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
                         .script("common/lib/panels/jquery.flot.pie.js")

panels/sort/module.js

@@ -22,7 +22,6 @@ angular.module('kibana.sort', [])
   }
 
   $scope.set_sort = function() {
-    console.log($scope)
     eventBus.broadcast($scope.$id,$scope.panel.group,"sort",$scope.panel.sort)
   }
 

panels/table/module.js

@@ -17,9 +17,6 @@ angular.module('kibana.table', [])
   $scope.init = function () {
 
     $scope.set_listeners($scope.panel.group)
-    $scope.$watch(function() {
-      return angular.toJson($scope.panel.sort)
-    }, function(){$scope.get_data()});
     // Now that we're all setup, request the time from our group
     eventBus.broadcast($scope.$id,$scope.panel.group,"get_time")
   }
@@ -34,6 +31,7 @@ angular.module('kibana.table', [])
     });
     eventBus.register($scope,'sort', function(event,sort){
       $scope.panel.sort = _.clone(sort);
+      $scope.get_data();
     });
     eventBus.register($scope,'selected_fields', function(event, fields) {
       $scope.panel.fields = _.clone(fields)
@@ -45,6 +43,7 @@ angular.module('kibana.table', [])
       $scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
     else
       $scope.panel.sort[0] = field;
+    $scope.get_data();
   }
 
   $scope.toggle_field = function(field) {
@@ -89,10 +88,6 @@ angular.module('kibana.table', [])
     });
   }
 
-  $scope.move_field = function(field,dir) {
-    console.log(field,dir)
-  }
-
   // Broadcast a list of all fields. Note that receivers of field array 
   // events should be able to receive from multiple sources, merge, dedupe 
   // and sort on the fly if needed.

panels/timepicker/module.js

@@ -102,11 +102,11 @@ angular.module('kibana.timepicker', [])
 
   $scope.refresh = function() {
     if ($scope.panel.refresh.enable) {
-      $scope.time_apply();
       timer.cancel($scope.refresh_timer)
-      $scope.refresh_timer = timer.register($timeout(
-        $scope.refresh,
-        $scope.panel.refresh.interval*1000
+      $scope.refresh_timer = timer.register($timeout(function() {
+        $scope.refresh();
+        $scope.time_apply();
+        },$scope.panel.refresh.interval*1000
       ));
     } else {
       timer.cancel($scope.refresh_timer)

partials/dashboard.html

@@ -1,12 +1,13 @@
 
 <div class="row-fluid container" style="margin-top:50px">
   <!-- Rows -->
-  <div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows">
+  <div class="row-fluid" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows">
     <div class="span12">
-      <div class="row-fluid" style="padding:0px;margin:0px;height:0px">
+      <div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
         <div class="span12" style="min-height:5px;vertical-align:bottom">
           <i class="pointer" ng-class="{'icon-minus': !row.collapse,'icon-plus': row.collapse}" ng-click="toggle_row(row)"></i>
-          <span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span>
+          <span ng-click="toggle_row(row)" class="pointer"><small>{{row.title}}</small></span> 
+          <i class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
         </div>
       </div>
       <div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">

partials/roweditor.html

@@ -0,0 +1,23 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>{{row.title}} <small>editor</small></h3>
+</div>
+<div class="modal-body">
+
+
+  <h4>General</h4>
+  <div class="row-fluid">
+    <div class="span4">
+      <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
+    </div>
+    <div class="span2">
+      <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">
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
+</div>