Refactored panel communication to use an angular service, started work on panel editing interface

common/css/main.css

@@ -51,4 +51,11 @@
 
 .tiny {
   font-size: 50%;
-}
+}
+
+.remove:hover {
+  color: #A60000;
+  text-decoration: line-through;
+}
+
+.typeahead { z-index: 1051; }

dashboards.js

@@ -45,7 +45,7 @@ var dashboards =
           index   : "\"shakespeare\"",
           refresh : {
             enable  : true,
-            interval: 30,
+            interval: 3,
             min     : 10
           },
           timefield: '@timestamp',
@@ -70,7 +70,7 @@ var dashboards =
           index   : "\"shakespeare\"",
           refresh : {
             enable  : true,
-            interval: 30,
+            interval: 3,
             min     : 10
           },
           timefield: '@timestamp',
@@ -208,6 +208,7 @@ var dashboards =
         },
         {
           title   : "Newest Lines",
+          editable: true,
           type    : "table",
           span    : 6,
           query   : "*",
@@ -221,6 +222,7 @@ var dashboards =
         },
       ]
     },
+    
     {
       title:  "Monkey Monitoring",
       collapse: false,
@@ -260,5 +262,6 @@ var dashboards =
         },
       ]
     }
+    
   ]
 };

index.html

@@ -12,9 +12,9 @@
   <title>Kibana Dashboard</title>
 
   <link rel="stylesheet" href="common/css/normalize.min.css">
-  <link rel="stylesheet" href="common/css/main.css">
   <link rel="stylesheet" href="common/css/bootstrap.min.css">
   <link rel="stylesheet" href="common/css/bootstrap-responsive.min.css">
+  <link rel="stylesheet" href="common/css/main.css">
   <link rel="stylesheet" href="common/css/elasticjs.css">
   <link rel="stylesheet" href="common/css/timepicker.css">
 

js/app.js

@@ -4,9 +4,9 @@
 
 // Base modules
 var modules = [
+  'kibana.services',
   'kibana.controllers', 
   'kibana.filters', 
-  'kibana.services', 
   'kibana.directives', 
   'elasticjs.service',
   '$strap.directives',

js/controllers.js

@@ -3,7 +3,7 @@
 'use strict';
 
 angular.module('kibana.controllers', [])
-.controller('DashCtrl', function($scope, ejsResource) {
+.controller('DashCtrl', function($scope, $rootScope, ejsResource) {
 
   $scope.config = config;
   $scope.dashboards = dashboards
@@ -14,7 +14,7 @@ angular.module('kibana.controllers', [])
     $scope.$broadcast('toggle_row',row)
     row.collapse = row.collapse ? false : true;
   }
-  
+
 });
 
 

js/directives.js

@@ -12,13 +12,35 @@ angular.module('kibana.directives', [])
           return (attrs.panel && scope.index) ? true : false;
         }, function (ready) {
           if (ready) {
-            element.html($compile("<div "+attrs.panel+" params={{panel}} style='height:{{row.height}}'></div>")(scope))
+            element.html($compile("<div "+attrs.panel+" params={{panel}} "+
+              "style='height:{{row.height}}'></div>")(scope))
           }
         });
       }
     }
   }
 })
+.directive('arrayJoin', function() {
+  return {
+    restrict: 'A',
+    require: 'ngModel',
+    link: function(scope, element, attr, ngModel) {
+
+      function split_array(text) {
+        return (text || '').split(',');
+      }
+
+      function join_array(text) {
+        if(_.isArray(text))  
+          return (text || '').join(',');
+        else
+          return text
+      }
+      ngModel.$parsers.push(split_array);
+      ngModel.$formatters.push(join_array);
+    }
+  };
+})
 .directive('upload', function(){
   return {
     restrict: 'A',

js/services.js

@@ -2,4 +2,38 @@
 /*global angular:true */
 'use strict';
 
-angular.module('kibana.services', []);
+angular.module('kibana.services', [])
+.service('eventBus', function($rootScope) {
+
+  this.broadcast = function(from,to,type,data) {
+    if(_.isUndefined(data))
+      var data = from
+
+    $rootScope.$broadcast(type,{
+      from: from,
+      to: to,
+      data: data
+    });
+  }
+
+  // This sets up an $on listener that checks to see if the event (packet) is
+  // addressed to the scope in question and runs the registered function if it
+  // is.
+  this.register = function(scope,type,fn) {
+    scope.$on(type,function(event,packet){
+      var _id     = scope.$id;
+      var _to     = packet.to;
+      var _from   = packet.from;
+
+      if(!(_.isArray(_to)))
+        _to = [_to];
+      if(!(_.isArray(scope.panel.group)))
+        scope.panel.group = [scope.panel.group];
+      
+      if(_.intersection(_to,scope.panel.group).length > 0 || _.indexOf(_to,_id) > -1) {
+        fn(event,packet.data);
+      }
+    });
+  }
+
+});

panels/fields/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.fields', [])
-.controller('fields', function($scope, $rootScope) {
+.controller('fields', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -12,7 +12,7 @@ angular.module('kibana.fields', [])
 
   $scope.init = function() {
     $scope.fields = [];
-    $scope.$on($scope.panel.group+"-fields", function(event, fields) {
+    eventBus.register($scope,'fields', function(event, fields) {
       $scope.panel.sort = _.clone(fields.sort);
       $scope.fields     = _.union(fields.all,$scope.fields);
       $scope.active     = _.clone(fields.active);
@@ -28,7 +28,8 @@ angular.module('kibana.fields', [])
       $scope.active = _.without($scope.active,field)
     else
       $scope.active.push(field)
-    $rootScope.$broadcast($scope.panel.group+"-selected_fields",$scope.active)
+    
+    eventBus.broadcast($scope.$id,$scope.panel.group,"selected_fields",$scope.active)
   }
 
   $scope.is_active = function(field) {

panels/histogram/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.histogram', [])
-.controller('histogram', function($scope, $rootScope) {
+.controller('histogram', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -15,14 +15,13 @@ angular.module('kibana.histogram', [])
   _.defaults($scope.panel,_d)
 
   $scope.init = function() {
-    $scope.$on(_id+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-query", function(event, query) {
+    eventBus.register($scope,'time', function(event,time){set_time(time)});
+    eventBus.register($scope,'query', function(event, query) {
       $scope.panel.query[0].query = query;
       $scope.get_data();
     });
     // Now that we're all setup, request the time from our group
-    $rootScope.$broadcast($scope.panel.group+"-get_time",_id)
+    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
   $scope.get_data = function() {

panels/hits/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.hits', [])
-.controller('hits', function($scope, $rootScope, $location) {
+.controller('hits', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -12,15 +12,13 @@ angular.module('kibana.hits', [])
   _.defaults($scope.panel,_d)
 
   $scope.init = function () {
-    $scope.$on(_id+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-query", function(event, query) {
+    eventBus.register($scope,'time', function(event,time){set_time(time)});
+    eventBus.register($scope,'query', function(event, query) {
       $scope.panel.query = query;
       $scope.get_data();
     });
-
     // Now that we're all setup, request the time from our group
-    $rootScope.$broadcast($scope.panel.group+"-get_time",_id)
+    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
   $scope.get_data = function() {

panels/map/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.map', [])
-.controller('map', function($scope, $rootScope) {
+.controller('map', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -15,14 +15,13 @@ angular.module('kibana.map', [])
   _.defaults($scope.panel,_d)
 
   $scope.init = function() {
-    $scope.$on(_id+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-query", function(event, query) {
+    eventBus.register($scope,'time', function(event,time){set_time(time)});
+    eventBus.register($scope,'query', function(event, query) {
       $scope.panel.query = query;
       $scope.get_data();
     });
     // Now that we're all setup, request the time from our group
-    $rootScope.$broadcast($scope.panel.group+"-get_time",_id)
+    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
   $scope.get_data = function() {

panels/pie/module.js

@@ -2,7 +2,7 @@ labjs = labjs.script("common/lib/panels/jquery.flot.js")
   .script("common/lib/panels/jquery.flot.pie.js")
 
 angular.module('kibana.pie', [])
-.controller('pie', function($scope, $rootScope) {
+.controller('pie', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -20,16 +20,15 @@ angular.module('kibana.pie', [])
   _.defaults($scope.panel,_d)
 
   $scope.init = function() {
-    $scope.$on(_id+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
+    eventBus.register($scope,'time', function(event,time){set_time(time)});
     if(!(_.isArray($scope.panel.query))) {
-      $scope.$on($scope.panel.group+"-query", function(event, query) {
+      eventBus.register($scope,'query', function(event, query) {
         $scope.panel.query.query = query;
         $scope.get_data();
       });
     }
     // Now that we're all setup, request the time from our group
-    $rootScope.$broadcast($scope.panel.group+"-get_time",_id)
+    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
   }
 
   $scope.get_data = function() {

panels/sort/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.sort', [])
-.controller('sort', function($scope, $rootScope) {
+.controller('sort', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -15,19 +15,21 @@ angular.module('kibana.sort', [])
 
   $scope.init = function() {
     $scope.fields = [];
-    $scope.$on($scope.panel.group+"-fields", function(event, fields) {
+    eventBus.register($scope,'fields',function(event, fields) {
       $scope.panel.sort = _.clone(fields.sort);
       $scope.fields     = _.union(fields.all,$scope.fields);
     });
   }
 
   $scope.set_sort = function() {
-    $rootScope.$broadcast($scope.panel.group+"-sort",$scope.panel.sort)
+    console.log($scope)
+    eventBus.broadcast($scope.$id,$scope.panel.group,"sort",$scope.panel.sort)
   }
 
   $scope.toggle_sort = function() {
     $scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
-    $rootScope.$broadcast($scope.panel.group+"-sort",$scope.panel.sort)
+    $scope.set_sort();
   }
+
   $scope.init();
 })

panels/stringquery/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.stringquery', [])
-.controller('stringquery', function($scope, $rootScope) {
+.controller('stringquery', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -18,9 +18,7 @@ angular.module('kibana.stringquery', [])
 
   $scope.init = function() {
     $scope.send_query = function(query) {
-      _.each(_groups,function(group) {
-          $rootScope.$broadcast(group+"-query", query)
-      });
+      eventBus.broadcast($scope.$id,$scope.panel.group,'query',query)
     }    
   }
   $scope.init();

panels/table/editor.html

@@ -0,0 +1,30 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+  <h3>{{panel.title}}</h3>
+</div>
+<div class="modal-body">
+  <h4>Panel Settings</h4>
+  <form class="form-inline">
+    <label>Span</label> <input type="number" class="input-mini" ng-model="panel.span"><br>
+    <label class="checkbox"> Editable <input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable"></label>
+  </form>
+  <label>Group(s)</label><input array-join type="text" class="input-large" ng-model='panel.group'></input> <small>Comma seperated</small>
+  <div class="row-fluid">
+    
+    <div class="span4">
+      <form class="input-append">
+        <h4>Add field</h4>
+        <input bs-typeahead="all_fields" type="text" class="input-small" ng-model='newfield'>
+        <button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
+      </form>
+    </div>
+    <div class="span8">
+      <h4>Selected fields <small>Click to a field to remove it</small></h4>
+      <span ng-click="toggle_field(field)" ng-repeat="field in panel.fields" class="remove pointer">{{field}} </span>
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn" ng-click="dismiss()">Close</button>
+  <button class="btn btn-primary" ng-click="dismiss()">Save changes</button>
+</div>

panels/table/module.html

@@ -1,5 +1,5 @@
 <div ng-controller='table'>
-  <h4>{{panel.title}}</h4>
+  <h4>{{panel.title}}  <small class="pointer" bs-modal="'panels/table/editor.html'" ng-hide="!panel.editable"><i class="icon-edit"></i></small></h4>
   <div style="height:{{row.height}};overflow-y:auto;overflow-x:auto"> 
     <table class="table table-condensed table-striped" ng-style="panel.style">
       <thead>

panels/table/module.js

@@ -1,5 +1,5 @@
 angular.module('kibana.table', [])
-.controller('table', function($scope, $rootScope, $location) {
+.controller('table', function($scope, eventBus) {
 
   var _id = _.uniqueId();
 
@@ -15,25 +15,29 @@ angular.module('kibana.table', [])
   _.defaults($scope.panel,_d)
 
   $scope.init = function () {
-    $scope.$on(_id+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
-    $scope.$on($scope.panel.group+"-query", function(event, query) {
-      console.log($scope.panel)
+
+    $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")
+  }
+
+  $scope.set_listeners = function(group) {
+    eventBus.register($scope,'time',function(event,time) {
+      set_time(time)
+    });
+    eventBus.register($scope,'query',function(event,query) {
       $scope.panel.query = query;
       $scope.get_data();
     });
-    $scope.$on($scope.panel.group+"-sort", function(event,sort){
+    eventBus.register($scope,'sort', function(event,sort){
       $scope.panel.sort = _.clone(sort);
     });
-    $scope.$on($scope.panel.group+"-selected_fields", function(event, fields) {
+    eventBus.register($scope,'selected_fields', function(event, fields) {
       $scope.panel.fields = _.clone(fields)
     });
-
-    $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
-    $rootScope.$broadcast($scope.panel.group+"-get_time",_id)
   }
 
   $scope.set_sort = function(field) {
@@ -43,6 +47,14 @@ angular.module('kibana.table', [])
       $scope.panel.sort[0] = field;
   }
 
+  $scope.toggle_field = function(field) {
+    if (_.indexOf($scope.panel.fields,field) > -1) 
+      $scope.panel.fields = _.without($scope.panel.fields,field)
+    else
+      $scope.panel.fields.push(field)
+    broadcast_fields();
+  }
+
   $scope.get_data = function() {
     // Make sure we have everything for the request to complete
     if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
@@ -71,17 +83,9 @@ angular.module('kibana.table', [])
       $scope.panel.error =  false;
       $scope.hits = results.hits.total;
       $scope.data = results.hits.hits;
+      $scope.all_fields = get_all_fields(results);
 
-      // 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 (!(_.isUndefined($scope.panel.group)))
-        $rootScope.$broadcast(
-          $scope.panel.group+"-fields", {
-            all   : get_all_fields(results),
-            sort  : $scope.panel.sort,
-            active: $scope.panel.fields
-          });  
+      broadcast_fields();
     });
   }
 
@@ -89,6 +93,17 @@ angular.module('kibana.table', [])
     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.
+  function broadcast_fields() {
+    eventBus.broadcast($scope.$id,$scope.panel.group,"fields", {
+      all   : $scope.all_fields,
+      sort  : $scope.panel.sort,
+      active: $scope.panel.fields      
+    });
+  }
+
   function set_time(time) {
     $scope.panel.time = time;
     $scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index

panels/timepicker/module.js

@@ -24,7 +24,7 @@ a pattern
 
 */
 angular.module('kibana.timepicker', [])
-.controller('timepicker', function($scope, $rootScope, $timeout, $http) {
+.controller('timepicker', function($scope, eventBus, $timeout, $http) {
 
   var _id = _.uniqueId();
 
@@ -78,10 +78,8 @@ angular.module('kibana.timepicker', [])
     // In the case that a panel is not ready to receive a time event, it may
     // request one be sent by broadcasting a 'get_time' with its _id to its group
     // This panel can handle multiple groups
-    _.each(_groups,function(group){
-      $scope.$on(group+"-get_time", function(event,id) {
-        $rootScope.$broadcast(id+"-time", $scope.time)
-      });
+    eventBus.register($scope,"get_time", function(event,id) {
+      eventBus.broadcast($scope.$id,id,'time',$scope.time)
     });
 
     $scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
@@ -175,9 +173,7 @@ angular.module('kibana.timepicker', [])
     indices($scope.time.from,$scope.time.to).then(function (p) {
       $scope.time.index = p.join();
       // Broadcast time
-      _.each(_groups,function(group){
-        $rootScope.$broadcast(group+"-time", $scope.time)
-      });
+      eventBus.broadcast($scope.$id,$scope.panel.group,'time',$scope.time)
     });
 
     // Update panel's string representation of the time object