github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Adds more filter actions, makes disabled filters all stripey. Closes #324 Closes #1582

Browse source
This commit is contained in:
Rashid Khan 2014-10-14 16:18:31 -07:00
parent fa98708847
commit 76c32f10fb
6 changed files with 105 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/kibana/components/filter_bar/filter_bar.html
View file

@ -9,7 +9,32 @@
<a class="filter-remove" ng-click="removeFilter(filter)">remove</a>
</div>
</div>
<div class="filter-remove-all" ng-click="removeFilters()">
<div class="filter-description"><a ng-click="removeAll()">remove all</a></div>
<div class="filter-link">
<div class="filter-description small">
<a ng-click="showFilterActions = !showFilterActions">
Actions
<i class="fa"
ng-class="{'fa-caret-down': showFilterActions, 'fa-caret-right': !showFilterActions}"></i>
</a>
</div>
</div>
</div>
<div class="bar bar-condensed" ng-show="filters.length && showFilterActions">
<div class="filter-actions-all">
<div class="filter-link">
<div class="filter-description"><strong>All filters:</strong></div>
</div>
<div class="filter-link">
<div class="filter-description"><a ng-click="toggleAll(false)">Enable</a></div>
</div>
<div class="filter-link">
<div class="filter-description"><a ng-click="toggleAll(true)">Disable</a></div>
</div>
<div class="filter-link">
<div class="filter-description"><a ng-click="toggleAll()">Toggle</a></div>
</div>
<div class="filter-link">
<div class="filter-description"><a ng-click="removeAll()">Remove</a></div>
</div>
</div>
</div>

10
src/kibana/components/filter_bar/filter_bar.js
View file

@ -4,10 +4,11 @@ define(function (require) {
var module = require('modules').get('kibana');
var template = require('text!components/filter_bar/filter_bar.html');
var mapFilter = require('./lib/mapFilter');
var toggleFilter = require('./lib/toggleFilter');
var removeFilter = require('./lib/removeFilter');
var removeAll = require('./lib/removeAll');
var mapFilter = require('components/filter_bar/lib/mapFilter');
var toggleFilter = require('components/filter_bar/lib/toggleFilter');
var toggleAll = require('components/filter_bar/lib/toggleAll');
var removeFilter = require('components/filter_bar/lib/removeFilter');
var removeAll = require('components/filter_bar/lib/removeAll');
module.directive('filterBar', function (courier) {
return {
@ -33,6 +34,7 @@ define(function (require) {
$scope.toggleFilter = toggleFilter($scope);
$scope.removeFilter = removeFilter($scope);
$scope.removeAll = removeAll($scope);
$scope.toggleAll = toggleAll($scope);
}
};
});

19
src/kibana/components/filter_bar/filter_bar.less
View file

@ -7,7 +7,13 @@ filter-bar .bar {
background: @gray-lighter;
border-bottom: 1px solid #ccc;
.filter-remove-all {
&-condensed {
padding: 2px 6px 0px 6px !important;
font-size: 0.9em;
background: darken(@gray-lighter, 5%);
}
.filter-link {
position: relative;
display: inline-block;
border: 4px solid transparent;
@ -34,11 +40,7 @@ filter-bar .bar {
max-width: 100%;
// Replace padding with border so absolute controls position correctly
border-color: transparent;
border-style: solid;
border-width: 4px;
border-left-width: 8px;
border-right-width: 8px;
padding: 4px 8px;
border-radius: 12px;
@ -49,12 +51,14 @@ filter-bar .bar {
> .filter-description {
opacity: 0.15;
background: transparent;
overflow: hidden;
}
}
> .filter-actions {
position: absolute;
padding: 4px 8px;
top: 0;
left: 0;
width: 100%;
@ -78,7 +82,8 @@ filter-bar .bar {
}
&.disabled {
opacity: 0.7;
opacity: 0.8;
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.3) 10px, rgba(255,255,255,.3) 20px);
}
&.disabled:hover {

21
src/kibana/components/filter_bar/lib/toggleAll.js Normal file
View file

@ -0,0 +1,21 @@
define(function (require) {
var _ = require('lodash');
return function ($scope) {
var remapFilters = require('components/filter_bar/lib/remapFilters');
var toggleFilter = require('components/filter_bar/lib/toggleFilter')($scope);
/**
* Disables all filters
* @params {boolean} force disable/enable all filters
* @returns {void}
*/
return function (force) {
$scope.filters.forEach(function (filter) {
toggleFilter(filter, force);
});
$scope.state.filters = _.map($scope.filters, remapFilters);
};
};
});

5
src/kibana/components/filter_bar/lib/toggleFilter.js
View file

@ -5,11 +5,12 @@ define(function (require) {
/**
* Toggles the filter between enabled/disabled.
* @param {object} filter The filter to toggle
& @param {boolean} force disabled true/false
* @returns {void}
*/
return function (filter) {
return function (filter, force) {
// Toggle the disabled flag
var disabled = !filter.disabled;
var disabled = _.isUndefined(force) ? !filter.disabled : force;
filter.disabled = disabled;
filter.filter.disabled = disabled;

37
test/unit/specs/directives/filter_bar.js
View file

@ -5,6 +5,8 @@ define(function (require) {
var $ = require('jquery');
var toggleFilter = require('components/filter_bar/lib/toggleFilter');
var toggleAll = require('components/filter_bar/lib/toggleAll');
var mapFilter = require('components/filter_bar/lib/mapFilter');
var removeFilter = require('components/filter_bar/lib/removeFilter');
var removeAll = require('components/filter_bar/lib/removeAll');
@ -27,7 +29,7 @@ define(function (require) {
{ query: { match: { '@tags': { query: 'test' } } } },
{ query: { match: { '@tags': { query: 'bar' } } } },
{ exists: { field: '@timestamp' } },
{ missing: { field: 'host' } },
{ missing: { field: 'host' }, disabled: true },
]
};
done();
@ -111,7 +113,40 @@ define(function (require) {
});
});
describe('toggleAll', function () {
var fn;
beforeEach(function () {
// This would normally be done by the directive
$rootScope.filters = _($rootScope.state.filters)
.filter(function (filter) {
return filter;
})
.flatten(true)
.map(mapFilter)
.value();
fn = toggleAll($rootScope);
});
it('should toggle all the filters', function () {
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(1);
fn();
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(3);
});
it('should disable all the filters', function () {
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(1);
fn(true);
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(4);
});
it('should enable all the filters', function () {
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(1);
fn(false);
expect(_.filter($rootScope.state.filters, 'disabled')).to.have.length(0);
});
});
});
});