Merge pull request #6630 from stormpython/selectable_list_directive

Selectable list directive

src/plugins/kibana/public/visualize/styles/main.less

@@ -13,6 +13,14 @@
       padding: 0;
       display: flex;
 
+      div.wizard-small {
+        flex: 2;
+      }
+
+      div.wizard-large {
+        flex: 3;
+      }
+
       .wizard-column {
         flex: 1;
         display: flex;
@@ -45,11 +53,6 @@
 
     .list-group {
       margin-bottom: 0;
-
-      .list-group-item {
-        border-radius: 0;
-        border: none;
-      }
     }
 
     .striped {

src/plugins/kibana/public/visualize/wizard/step_2.html

@@ -1,20 +1,15 @@
 <bread-crumbs></bread-crumbs>
 <div class="wizard">
-  <div class="wizard-column">
+  <div class="wizard-small wizard-column">
-    <h3>From a New Search</h3>
+    <h3>From a New Search, Select Index</h3>
-    <!-- Index patterns -->
+    <paginated-selectable-list
-    <div class="wizard-row">
+      per-page="20"
-      <div class="panel panel-default">
+      list="indexPattern.list"
-        <div class="panel-heading">Index Patterns</div>
+      user-make-url="makeUrl"
-      </div>
+      class="wizard-row">
-      <ul class="striped list-group">
+    </paginated-selectable-list>
-        <li class="list-group-item" ng-repeat="pattern in indexPattern.list | orderBy: 'toString()'">
-          <a class="index-link" kbn-href="{{ makeUrl(pattern) }}">{{pattern}}</a>
-        </li>
-      </ul>
-    </div>
   </div>
-  <div class="wizard-column">
+  <div class="wizard-large wizard-column">
     <h3>Or, From a Saved Search</h3>
     <!-- Saved searches -->
     <saved-object-finder

src/plugins/kibana/public/visualize/wizard/wizard.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import 'plugins/kibana/visualize/saved_visualizations/saved_visualizations';
 import 'ui/directives/saved_object_finder';
+import 'ui/directives/paginated_selectable_list';
 import 'plugins/kibana/discover/saved_searches/saved_searches';
 import routes from 'ui/routes';
 import RegistryVisTypesProvider from 'ui/registry/vis_types';

src/ui/public/directives/__tests__/paginated_selectable_list.js

@@ -0,0 +1,183 @@
+import angular from 'angular';
+import expect from 'expect.js';
+import ngMock from 'ng_mock';
+import _ from 'lodash';
+
+var objectList = [
+  { title: 'apple' },
+  { title: 'orange' },
+  { title: 'coconut' },
+  { title: 'banana' },
+  { title: 'grapes' }
+];
+
+var stringList = [
+  'apple',
+  'orange',
+  'coconut',
+  'banana',
+  'grapes'
+];
+
+var lists = [objectList, stringList, []];
+
+var $scope;
+var $element;
+var $isolatedScope;
+
+lists.forEach(function (list) {
+  var isArrayOfObjects = list.every((item) => {
+    return _.isPlainObject(item);
+  });
+
+  var init = function (arr, willFail) {
+    // Load the application
+    ngMock.module('kibana');
+
+    // Create the scope
+    ngMock.inject(function ($rootScope, $compile) {
+      $scope = $rootScope.$new();
+      $scope.perPage = 5;
+      $scope.list = list;
+      $scope.listProperty = isArrayOfObjects ? 'title' : undefined;
+      $scope.test = function (val) { return val; };
+
+      // Create the element
+      if (willFail) {
+        $element = angular.element('<paginated-selectable-list per-page="perPage" list="list"' +
+           'list-property="listProperty" user-make-url="test" user-on-select="test"></paginated-selectable-list>');
+      } else {
+        $element = angular.element('<paginated-selectable-list per-page="perPage" list="list"' +
+           'list-property="listProperty" user-make-url="test"></paginated-selectable-list>');
+      }
+
+      // And compile it
+      $compile($element)($scope);
+
+      // Fire a digest cycle
+      $element.scope().$digest();
+
+      // Grab the isolate scope so we can test it
+      $isolatedScope = $element.isolateScope();
+    });
+  };
+
+  describe('paginatedSelectableList', function () {
+    it('should throw an error when there is no makeUrl and onSelect attribute', ngMock.inject(function ($compile, $rootScope) {
+      function errorWrapper() {
+        $compile(angular.element('<paginated-selectable-list></paginated-selectable-list>'))($rootScope.new());
+      }
+      expect(errorWrapper).to.throwError();
+    }));
+
+    it('should throw an error with both makeUrl and onSelect attributes', function () {
+      function errorWrapper() {
+        init(list, true);
+      }
+      expect(errorWrapper).to.throwError();
+    });
+
+    describe('$scope.hits', function () {
+      beforeEach(function () {
+        init(list);
+      });
+
+      it('should initially sort an array of objects in ascending order', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
+
+        expect($isolatedScope.hits).to.be.an('array');
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect(hit).to.equal(sortedList[index]);
+          }
+        });
+      });
+    });
+
+    describe('$scope.sortHits', function () {
+      beforeEach(function () {
+        init(list);
+      });
+
+      it('should sort an array of objects in ascending order', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
+
+        $isolatedScope.isAscending = false;
+        $isolatedScope.sortHits(list);
+
+        expect($isolatedScope.isAscending).to.be(true);
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect(hit).to.equal(sortedList[index]);
+          }
+        });
+      });
+
+      it('should sort an array of objects in descending order', function () {
+        var property = $isolatedScope.listProperty;
+        var reversedList = property ? _.sortBy(list, property).reverse() : _.sortBy(list).reverse();
+
+        $isolatedScope.isAscending = true;
+        $isolatedScope.sortHits(list);
+
+        expect($isolatedScope.isAscending).to.be(false);
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect(hit[property]).to.equal(reversedList[index][property]);
+          } else {
+            expect(hit).to.equal(reversedList[index]);
+          }
+        });
+      });
+    });
+
+    describe('$scope.makeUrl', function () {
+      beforeEach(function () {
+        init(list);
+      });
+
+      it('should return the result of the function its passed', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect($isolatedScope.makeUrl(hit)[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect($isolatedScope.makeUrl(hit)).to.equal(sortedList[index]);
+          }
+        });
+      });
+    });
+
+    describe('$scope.onSelect', function () {
+      beforeEach(function () {
+        init(list);
+      });
+
+      it('should return the result of the function its passed', function () {
+        var property = $isolatedScope.listProperty;
+        var sortedList = property ? _.sortBy(list, property) : _.sortBy(list);
+
+        $isolatedScope.userOnSelect = function (val) { return val; };
+
+        $isolatedScope.hits.forEach(function (hit, index) {
+          if (property) {
+            expect($isolatedScope.onSelect(hit)[property]).to.equal(sortedList[index][property]);
+          } else {
+            expect($isolatedScope.onSelect(hit)).to.equal(sortedList[index]);
+          }
+        });
+      });
+    });
+  });
+});

src/ui/public/directives/paginate.js

@@ -194,5 +194,3 @@ uiModules.get('kibana')
     template: paginateControlsTemplate
   };
 });
-
-

src/ui/public/directives/paginated_selectable_list.js

@@ -0,0 +1,71 @@
+import _ from 'lodash';
+import uiModules from 'ui/modules';
+import paginatedSelectableListTemplate from 'ui/partials/paginated_selectable_list.html';
+
+const module = uiModules.get('kibana');
+
+function throwError(message) {
+  throw new Error(message);
+}
+
+module.directive('paginatedSelectableList', function (kbnUrl) {
+
+  return {
+    restrict: 'E',
+    scope: {
+      perPage: '=?',
+      list: '=',
+      listProperty: '=',
+      userMakeUrl: '=?',
+      userOnSelect: '=?'
+    },
+    template: paginatedSelectableListTemplate,
+    controller: function ($scope, $element, $filter) {
+      // Should specify either user-make-url or user-on-select
+      if (!$scope.userMakeUrl && !$scope.userOnSelect) {
+        throwError('paginatedSelectableList directive expects a makeUrl or onSelect function');
+      }
+
+      // Should specify either user-make-url or user-on-select, but not both.
+      if ($scope.userMakeUrl && $scope.userOnSelect) {
+        throwError('paginatedSelectableList directive expects a makeUrl or onSelect attribute but not both');
+      }
+
+      $scope.perPage = $scope.perPage || 10;
+      $scope.hits = $scope.list = _.sortBy($scope.list, accessor);
+      $scope.hitCount = $scope.hits.length;
+
+      /**
+       * Boolean that keeps track of whether hits are sorted ascending (true)
+       * or descending (false)
+       * * @type {Boolean}
+       */
+      $scope.isAscending = true;
+
+      /**
+       * Sorts saved object finder hits either ascending or descending
+       * @param  {Array} hits Array of saved finder object hits
+       * @return {Array} Array sorted either ascending or descending
+       */
+      $scope.sortHits = function (hits) {
+        const sortedList = _.sortBy(hits, accessor);
+
+        $scope.isAscending = !$scope.isAscending;
+        $scope.hits = $scope.isAscending ? sortedList : sortedList.reverse();
+      };
+
+      $scope.makeUrl = function (hit) {
+        return $scope.userMakeUrl(hit);
+      };
+
+      $scope.onSelect = function (hit, $event) {
+        return $scope.userOnSelect(hit, $event);
+      };
+
+      function accessor(val) {
+        const prop = $scope.listProperty;
+        return prop ? val[prop] : val;
+      }
+    }
+  };
+});

src/ui/public/partials/paginated_selectable_list.html

@@ -0,0 +1,43 @@
+<form role="form" class="form-inline">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="input-group form-group finder-form col-md-9">
+        <span class="input-group-addon">
+          <i class="fa fa-search"></i>
+        </span>
+        <input
+          input-focus
+          ng-model="query"
+          placeholder="Filter..."
+          class="form-control"
+          name="query"
+          type="text"
+          autocomplete="off" />
+      </div>
+      <div class="finder-hit-count col-md-3">
+        <span>{{ (hits | filter: query).length }} of {{ hitCount }}</span>
+      </div>
+    </div>
+  </div>
+</form>
+<paginate list="hits | filter: query" per-page="{{ perPage }}">
+  <ul class="li-striped list-group list-group-menu">
+    <li class="list-group-item" ng-click="sortHits(hits)">
+      <span class="paginate-heading">
+        Name
+        <i class="fa" ng-class="isAscending ? 'fa-caret-up' : 'fa-caret-down'"></i>
+      </span>
+    </li>
+    <li class="list-group-item list-group-menu-item" ng-repeat="hit in page">
+      <a ng-show="userMakeUrl" kbn-href="{{ makeUrl(hit) }}">
+        <span>{{ hit }}</span>
+      </a>
+      <div ng-show="userOnSelect" ng-click="onSelect(hit, $event)">
+        <span>{{ hit }}</span>
+      </div>
+    </li>
+    <li class="list-group-item list-group-no-results" ng-if="(hits | filter: query).length === 0">
+      <p>No matches found.</p>
+    </li>
+  </ul>
+</paginate>

src/ui/public/partials/saved_object_finder.html

@@ -8,7 +8,7 @@
         <input
           input-focus
           ng-model="filter"
-          ng-attr-placeholder="{{finder.properties.nouns}} Filter..."
+          ng-attr-placeholder="{{finder.properties.nouns | label }} Filter..."
           ng-keydown="finder.filterKeyDown($event)"
           class="form-control"
           name="filter"
@@ -19,25 +19,24 @@
         <span>{{finder.hitCount}} of {{finder.hitCount}}</span>
       </div>
       <div class="finder-manage-object col-md-2">
-        <a class="small" ng-click="finder.manageObjects(finder.properties.name)">Manage {{finder.properties.nouns}}</a>
+        <a class="small" ng-click="finder.manageObjects(finder.properties.name)">
+          Manage {{finder.properties.nouns}}
+        </a>
       </div>
     </div>
   </div>
 </form>
 <paginate list="finder.hits" per-page="20">
   <ul class="li-striped list-group list-group-menu" ng-class="{'select-mode': finder.selector.enabled}">
-
+    <li class="list-group-item" ng-click="finder.sortHits(finder.hits)">
-    <li class="list-group-item list-group-menu-item">
       <span class="paginate-heading">
         Name
         <i
           class="fa"
-          ng-click="finder.sortHits(finder.hits)"
           ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'">
         </i>
       </span>
     </li>
-
     <li
       class="list-group-item list-group-menu-item"
       ng-class="{'active': finder.selector.index === $index && finder.selector.enabled}"
@@ -53,12 +52,10 @@
           <p ng-if="hit.description" ng-bind="hit.description"></p>
       </a>
     </li>
-
     <li
       class="list-group-item list-group-no-results"
       ng-if="finder.hits.length === 0">
       <p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
     </li>
-
   </ul>
 </paginate>

src/ui/public/styles/base.less

@@ -320,7 +320,8 @@ bread-crumbs {
 }
 
 //== SavedObjectFinder
-saved-object-finder {
+saved-object-finder,
+paginated-selectable-list {
   .row {
     background-color: @kibanaGray6;
     padding: 10px;
@@ -328,6 +329,27 @@ saved-object-finder {
     flex-direction: row;
   }
 
+  .finder-hit-count,
+  .finder-manage-object {
+    min-width: 80px;
+    padding: 5px;
+    text-align: center;
+  }
+
+  .finder-hit-count {
+    flex: 1;
+
+    span {
+      color: @kibanaGray3;
+    }
+  }
+
+  .finder-manage-object {
+    flex: 3;
+    text-align: left;
+    text-transform: capitalize;
+  }
+
   .form-group {
     margin-bottom: 0;
     float: left;
@@ -337,7 +359,6 @@ saved-object-finder {
       border: none;
       padding: 5px 0px;
       border-radius: @border-radius-base;
-      text-transform: capitalize;
     }
 
     span {
@@ -350,30 +371,6 @@ saved-object-finder {
         width: 15px;
       }
     }
-
-    .finder-hit-count, .finder-manage-object {
-      min-width: 80px;
-      padding: 5px;
-    }
-
-    .finder-hit-count {
-      flex: 1;
-      text-align: center;
-
-      span {
-        color: @kibanaGray3;
-      }
-    }
-
-    .finder-manage-object {
-      flex: 3;
-      text-align: left;
-      text-transform: capitalize;
-    }
-  }
-
-  .list-group-item-menu:hover {
-    background-color: transparent;
   }
 
   ul.li-striped {
@@ -413,6 +410,7 @@ saved-object-finder {
           margin-right: 10px;
         }
 
+        display: block;
         color: @saved-object-finder-link-color !important;
       }
 
@@ -464,6 +462,12 @@ saved-object-finder {
       }
     }
   }
+
+  paginate {
+    paginate-controls {
+      margin: 20px;
+    }
+  }
 }
 
 // when rendered within a config dropdown, don't use a bottom margin

src/ui/public/styles/dark-variables.less

@@ -156,4 +156,3 @@
 @sidebar-bg:                                  @btn-default-bg;
 @sidebar-hover-bg:                            darken(@btn-default-bg, 5%);
 @sidebar-hover-color:                         @text-color;
-

src/ui/public/styles/variables/for-theme.less

@@ -172,7 +172,7 @@
 @list-group-menu-item-color: @link-color;
 @list-group-menu-item-select-color: @link-color;
 @list-group-menu-item-active-bg: @well-bg;
-@list-group-menu-item-hover-bg: @well-bg;
+@list-group-menu-item-hover-bg: @kibanaGray5;
 
 
 // Hint Box ====================================================================