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

81962c83 · Rashid Khan · 0703dd87 · 81962c83 · 81962c83 · 81962c83
Commit 81962c83 authored Feb 12, 2013 by Rashid Khan
13 changed files
--- a/common/css/main.css
+++ b/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 {
+.panel i.editlink:hover {
-  display: block;
+  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;
 }

--- a/index.html
+++ b/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>

--- a/js/controllers.js
+++ b/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')
+      });
+    }
+  }
 });

--- a/js/directives.js
+++ b/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">'+
+      var template = '<i class="icon-edit pointer editlink" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false"></i>'+
-        '<i class="icon-edit"></i></span><h4>{{panel.title}}</h4>';
+                    '<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',

--- a/js/services.js
+++ b/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);
      }
    });

--- a/panels/histogram/module.js
+++ b/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
+    // Now that we're all setup, request the time from our group if we don't 
-    eventBus.broadcast($scope.$id,$scope.panel.group,'get_time')
+    // 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 () {
+      scope.$on('render',function(){
-        return angular.toJson([scope.data, scope.row]) 
+        render_panel();
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
      });
      // 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", 

--- a/panels/map/module.js
+++ b/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
+      // Receive render events
-      scope.$watch(function () {
+      scope.$on('render',function(){
-        return angular.toJson([scope.data, scope.row]) 
+        render_panel();
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
      });
      // 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")

--- a/panels/pie/module.js
+++ b/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
+      // Receive render events
-      scope.$watch(function () {
+      scope.$on('render',function(){
-        return angular.toJson([scope.data, scope.row]) 
+        render_panel();
-      }, function() {
-        if(!(_.isUndefined(scope.data)))
-          render_panel(scope,elem,attrs);
      });
      // 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")

--- a/panels/sort/module.js
+++ b/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)
  }

--- a/panels/table/module.js
+++ b/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.

--- a/panels/timepicker/module.js
+++ b/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_timer = timer.register($timeout(function() {
-        $scope.refresh,
+        $scope.refresh();
-        $scope.panel.refresh.interval*1000
+        $scope.time_apply();
+        },$scope.panel.refresh.interval*1000
      ));
    } else {
      timer.cancel($scope.refresh_timer)

--- a/partials/dashboard.html
+++ b/partials/dashboard.html
 <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">

--- a/partials/roweditor.html
+++ b/partials/roweditor.html
+<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>
\ No newline at end of file