maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #6630 from stormpython/selectable_list_directive

Browse source 
Selectable list directive
This commit is contained in:
Rashid Khan 2016-03-24 16:41:30 -07:00
parent 914763874d 98003aec96
commit f7a50e030a
11 changed files with 351 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/plugins/kibana/public/visualize/styles/main.less
View file

@ -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 {

23
src/plugins/kibana/public/visualize/wizard/step_2.html
View file

@ -1,20 +1,15 @@
<bread-crumbs></bread-crumbs>
<div class="wizard">
<div class="wizard-column">
<h3>From a New Search</h3>
<!-- Index patterns -->
<div class="wizard-row">
<div class="panel panel-default">
<div class="panel-heading">Index Patterns</div>
</div>
<ul class="striped list-group">
<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 class="wizard-small wizard-column">
<h3>From a New Search, Select Index</h3>
<paginated-selectable-list
per-page="20"
list="indexPattern.list"
user-make-url="makeUrl"
class="wizard-row">
</paginated-selectable-list>
</div>
<div class="wizard-column">
<div class="wizard-large wizard-column">
<h3>Or, From a Saved Search</h3>
<!-- Saved searches -->
<saved-object-finder

1
src/plugins/kibana/public/visualize/wizard/wizard.js
View file

@ -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';

183
src/ui/public/directives/__tests__/paginated_selectable_list.js Normal file
View file

@ -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]);
}
});
});
});
});
});

2
src/ui/public/directives/paginate.js
View file

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

71
src/ui/public/directives/paginated_selectable_list.js Normal file
View file

@ -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;
}
}
};
});

43
src/ui/public/partials/paginated_selectable_list.html Normal file
View file

@ -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>

13
src/ui/public/partials/saved_object_finder.html
View file

@ -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 list-group-menu-item">
<li class="list-group-item" ng-click="finder.sortHits(finder.hits)">
<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>

56
src/ui/public/styles/base.less
View file

@ -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

1
src/ui/public/styles/dark-variables.less
View file

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

2
src/ui/public/styles/variables/for-theme.less
View file

@ -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 ====================================================================