Merge pull request #17 from spenceralger/discover_crud

Added kbnInfiniteScroll and kbnTruncated

src/kibana/apps/discover/field_chooser.html

@@ -4,12 +4,12 @@
       <i
         class="fa"
         ng-class="{
-          'fa-check-square': !field.hidden,
-          'fa-square-o': field.hidden
+          'fa-check-square': field.display,
+          'fa-square-o': !field.display
         }">
       </i>
       {{field.name}}
     </span>
   </li>
 </ul>
-<small class="pull-right"><a ng-click="refresh()">refresh field list</a></small>
+<small><a ng-click="refresh()">refresh field list</a></small>

src/kibana/apps/discover/index.html

@@ -5,13 +5,6 @@
       <input class="form-control" ng-model="index">
       <label class="control-label" for="size">Query</label>
       <input type="text" class="form-control" ng-model="query" placeholder="search">
-      <label class="control-label" for="size">Limit</label>
-      <select
-          class="form-control"
-          name="size"
-          ng-model="size"
-          ng-options="size.display for size in sizeOptions">
-          </select>
       <label class="control-label" for="sort">Sort</label>
       <select
           class="form-control"
@@ -24,16 +17,31 @@
       </button>
     </form>
   </nav>
-  <div class="row">
-    <div class="col-md-10">
-      <kbn-table rows="rows" columns="columns"></kbn-table>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="form-inline pull-right">
+          <label class="control-label" for="size">Display</label>
+          <select
+              class="form-control"
+              name="size"
+              ng-model="size"
+              ng-options="size.display for size in sizeOptions">
+              </select>
+        </div>
+      </div>
     </div>
-    <div class="col-md-2">
-      <disc-field-chooser
-        fields="fields"
-        toggle="toggleField"
-        refresh="refreshFieldList">
-        </disc-field-chooser>
+    <div class="row">
+      <div class="col-md-2">
+        <disc-field-chooser
+          fields="fields"
+          toggle="toggleField"
+          refresh="refreshFieldList">
+          </disc-field-chooser>
+      </div>
+      <div class="col-md-10">
+        <kbn-table rows="rows" columns="columns" ></kbn-table>
+      </div>
     </div>
   </div>
 </div>

src/kibana/apps/discover/index.js

@@ -8,15 +8,6 @@ define(function (require, module, exports) {
 
   var app = angular.module('app/discover');
 
-  var sizeOptions = [
-    { display: '30', val: 30 },
-    { display: '50', val: 50 },
-    { display: '80', val: 80 },
-    { display: '125', val: 125 },
-    { display: '250', val: 250 },
-    { display: '500', val: 500 }
-  ];
-
   var intervalOptions = [
     { display: '', val: null },
     { display: 'Hourly', val: 'hourly' },
@@ -40,15 +31,11 @@ define(function (require, module, exports) {
     // stores the fields we want to fetch
     $scope.columns = null;
 
-    // At what interval are your index patterns
+    // index pattern interval options
     $scope.intervalOptions = intervalOptions;
     $scope.interval = $scope.intervalOptions[0];
 
-    // options to control the size of the queries
-    $scope.sizeOptions = sizeOptions;
-    $scope.size = $scope.sizeOptions[0];
-
-    // the index that will be
+    // the index to use when they don't specify one
     config.$watch('discover.defaultIndex', function (val) {
       if (!val) return config.set('discover.defaultIndex', '_all');
       if (!$scope.index) {
@@ -58,25 +45,22 @@ define(function (require, module, exports) {
     });
 
     source
-      .size(30)
       .$scope($scope)
       .inherits(courier.rootSearchSource)
       .on('results', function (res) {
         if (!$scope.fields) getFields();
+
         $scope.rows = res.hits.hits;
       });
 
     $scope.fetch = function () {
       if (!$scope.fields) getFields();
       source
-        .size($scope.size.val)
+        .size(500)
         .query(!$scope.query ? null : {
           query_string: {
             query: $scope.query
           }
-        })
-        .source(!$scope.columns ? null : {
-          include: $scope.columns
         });
 
       if ($scope.sort) {
@@ -115,7 +99,7 @@ define(function (require, module, exports) {
 
       var currentState = _.transform($scope.fields || [], function (current, field) {
         current[field.name] = {
-          hidden: field.hidden
+          display: field.display
         };
       }, {});
 
@@ -133,10 +117,14 @@ define(function (require, module, exports) {
               field.name = name;
               _.defaults(field, currentState[name]);
 
-              if (!field.hidden) $scope.columns.push(name);
+              if (field.display) $scope.columns.push(name);
               $scope.fields.push(field);
             });
 
+          if (!$scope.columns.length) {
+            $scope.columns.push('_source');
+          }
+
           defer.resolve();
         }, defer.reject);
 
@@ -148,17 +136,16 @@ define(function (require, module, exports) {
     $scope.toggleField = function (name) {
       var field = _.find($scope.fields, { name: name });
 
-      // toggle the hidden property
-      field.hidden = !field.hidden;
+      // toggle the display property
+      field.display = !field.display;
 
-      // collect column names for non-hidden fields and sort
+      // collect column names for displayed fields and sort
       $scope.columns = _.transform($scope.fields, function (cols, field) {
-        if (!field.hidden) cols.push(field.name);
+        if (field.display) cols.push(field.name);
       }, []).sort();
 
-      // if we are just removing a field, no reason to refetch
-      if (!field.hidden) {
-        $scope.fetch();
+      if (!$scope.columns.length) {
+        $scope.columns.push('_source');
       }
     };
 

src/kibana/apps/examples/index.js

@@ -38,6 +38,7 @@ define(function (require) {
       restrict: 'E',
       template: 'My favorite number is {{favoriteNum}} <button ng-click="click()">New Favorite</button>',
       controller: function ($scope, config) {
+        // automatically write the value to elasticsearch when it is changed
         config.$bind($scope, 'favoriteNum', {
           default: 0
         });

src/kibana/directives/infinite_scroll.js

@@ -0,0 +1,47 @@
+define(function (require) {
+  var module = require('angular').module('kibana/directives');
+  var $ = require('jquery');
+
+  module.directive('kbnInfiniteScroll', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        more: '='
+      },
+      link: function ($scope, $element, attrs) {
+        var $window = $(window);
+        var checkTimer;
+
+        function onScroll() {
+          if (!$scope.more) return;
+
+          var winHeight = $window.height();
+          var windowBottom = winHeight + $window.scrollTop();
+          var elementBottom = $element.offset().top + $element.height();
+          var remaining = elementBottom - windowBottom;
+
+          if (remaining <= winHeight * 0.50) {
+            $scope[$scope.$$phase ? '$eval' : '$apply'](function () {
+              $scope.more();
+            });
+          }
+        }
+
+        function scheduleCheck() {
+          if (checkTimer) return;
+          checkTimer = setTimeout(function () {
+            checkTimer = null;
+            onScroll();
+          }, 50);
+        }
+
+        $window.on('scroll', scheduleCheck);
+        $scope.$on('$destroy', function () {
+          clearTimeout(checkTimer);
+          $window.off('scroll', scheduleCheck);
+        });
+        scheduleCheck();
+      }
+    };
+  });
+});