Skip to content

Commit

Permalink
Remove (most of) Angular dependecies from filter bar (#35544) (#36159)
Browse files Browse the repository at this point in the history 
* Cleaned up usage of angular dependencies from apply filters \ filter bar

* Cleaned up usage of angular dependencies from  exact time filter

* Removed unused Private from EventsProvider

* Deleted unused push_filter

* Changed push filters not to be a provider

* Renamed mapper functions
  • Loading branch information
Liza Katz authored May 7, 2019
1 parent f8cfc9e commit 650c7d6
Show file tree
Hide file tree
Showing 38 changed files with 397 additions and 769 deletions.
4 changes: 2 additions & 2 deletions src/fixtures/mock_index_patterns.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
import sinon from 'sinon';
import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern';

export default function (Private, Promise) {
export default function (Private) {
const indexPatterns = Private(FixturesStubbedLogstashIndexPatternProvider);
const getIndexPatternStub = sinon.stub()
.returns(Promise.resolve(indexPatterns));
.resolves(indexPatterns);

return {
get: getIndexPatternStub,
Expand Down
11 changes: 5 additions & 6 deletions src/legacy/ui/public/apply_filters/directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,16 @@ import 'ngreact';
import { uiModules } from '../modules';
import template from './directive.html';
import { ApplyFiltersPopover } from './apply_filters_popover';
import { FilterBarLibMapAndFlattenFiltersProvider } from '../filter_bar/lib/map_and_flatten_filters';
import { mapAndFlattenFilters } from '../filter_bar/lib/map_and_flatten_filters';
import { wrapInI18nContext } from 'ui/i18n';

const app = uiModules.get('app/kibana', ['react']);

app.directive('applyFiltersPopoverComponent', (reactDirective) => {
return reactDirective(ApplyFiltersPopover);
return reactDirective(wrapInI18nContext(ApplyFiltersPopover));
});

app.directive('applyFiltersPopover', (reactDirective, Private) => {
const mapAndFlattenFilters = Private(FilterBarLibMapAndFlattenFiltersProvider);

app.directive('applyFiltersPopover', (indexPatterns) => {
return {
template,
restrict: 'E',
Expand All @@ -47,7 +46,7 @@ app.directive('applyFiltersPopover', (reactDirective, Private) => {
// popover, because it has to reset its state whenever the new filters change. Setting a `key`
// property on the component accomplishes this due to how React handles the `key` property.
$scope.$watch('filters', filters => {
mapAndFlattenFilters(filters).then(mappedFilters => {
mapAndFlattenFilters(indexPatterns, filters).then(mappedFilters => {
$scope.state = {
filters: mappedFilters,
key: Date.now(),
Expand Down
2 changes: 1 addition & 1 deletion src/legacy/ui/public/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { createLegacyClass } from './utils/legacy_class';

const location = 'EventEmitter';

export function EventsProvider(Private, Promise) {
export function EventsProvider(Promise) {
createLegacyClass(Events).inherits(SimpleEmitter);
function Events() {
Events.Super.call(this);
Expand Down
64 changes: 30 additions & 34 deletions src/legacy/ui/public/filter_bar/__tests__/_add_filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ import MockState from 'fixtures/mock_state';
import { FilterBarQueryFilterProvider } from '../query_filter';

describe('add filters', function () {
require('test_utils/no_digest_promises').activateForSuite();

let filters;
let queryFilter;
let $rootScope;
Expand Down Expand Up @@ -73,44 +75,33 @@ describe('add filters', function () {
});

describe('adding filters', function () {
it('should add filters to appState', function () {
$rootScope.$digest();

queryFilter.addFilters(filters);
$rootScope.$digest();

it('should add filters to appState', async function () {
await queryFilter.addFilters(filters);
expect(appState.filters.length).to.be(3);
expect(globalState.filters.length).to.be(0);
});

it('should add filters to globalState', function () {
$rootScope.$digest();

queryFilter.addFilters(filters, true);
$rootScope.$digest();
it('should add filters to globalState', async function () {
await queryFilter.addFilters(filters, true);

expect(appState.filters.length).to.be(0);
expect(globalState.filters.length).to.be(3);
});

it('should accept a single filter', function () {
$rootScope.$digest();

queryFilter.addFilters(filters[0]);
$rootScope.$digest();
it('should accept a single filter', async function () {
await queryFilter.addFilters(filters[0]);

expect(appState.filters.length).to.be(1);
expect(globalState.filters.length).to.be(0);
});

it('should allow overwriting a positive filter by a negated one', () => {
$rootScope.$digest();
it('should allow overwriting a positive filter by a negated one', async function () {

// Add negate: false version of the filter
const filter = _.cloneDeep(filters[0]);
filter.meta.negate = false;

queryFilter.addFilters(filter);
await queryFilter.addFilters(filter);
$rootScope.$digest();
expect(appState.filters.length).to.be(1);
expect(appState.filters[0]).to.eql(filter);
Expand All @@ -119,22 +110,21 @@ describe('add filters', function () {
const negatedFilter = _.cloneDeep(filters[0]);
negatedFilter.meta.negate = true;

queryFilter.addFilters(negatedFilter);
await queryFilter.addFilters(negatedFilter);
$rootScope.$digest();
// The negated filter should overwrite the positive one
expect(appState.filters.length).to.be(1);
expect(appState.filters[0]).to.eql(negatedFilter);
});

it('should allow overwriting a negated filter by a positive one', () => {
$rootScope.$digest();

it('should allow overwriting a negated filter by a positive one', async function () {
// Add negate: true version of the same filter
const negatedFilter = _.cloneDeep(filters[0]);
negatedFilter.meta.negate = true;

queryFilter.addFilters(negatedFilter);
await queryFilter.addFilters(negatedFilter);
$rootScope.$digest();

// The negated filter should overwrite the positive one
expect(appState.filters.length).to.be(1);
expect(appState.filters[0]).to.eql(negatedFilter);
Expand All @@ -143,63 +133,69 @@ describe('add filters', function () {
const filter = _.cloneDeep(filters[0]);
filter.meta.negate = false;

queryFilter.addFilters(filter);
await queryFilter.addFilters(filter);
$rootScope.$digest();
expect(appState.filters.length).to.be(1);
expect(appState.filters[0]).to.eql(filter);
});

it('should fire the update and fetch events', function () {
it('should fire the update and fetch events', async function () {
const emitSpy = sinon.spy(queryFilter, 'emit');

const awaitFetch = new Promise(resolve => {
queryFilter.on('fetch', () => {
resolve();
});
});

// set up the watchers, add new filters, and crank the digest loop
$rootScope.$digest();
queryFilter.addFilters(filters);
await queryFilter.addFilters(filters);
$rootScope.$digest();

// updates should trigger state saves
expect(appState.save.callCount).to.be(1);
expect(globalState.save.callCount).to.be(1);

// this time, events should be emitted
await awaitFetch;
expect(emitSpy.callCount).to.be(2);
expect(emitSpy.firstCall.args[0]).to.be('update');
expect(emitSpy.secondCall.args[0]).to.be('fetch');

});
});

describe('filter reconciliation', function () {
it('should de-dupe appState filters being added', function () {
it('should de-dupe appState filters being added', async function () {
const newFilter = _.cloneDeep(filters[1]);
appState.filters = filters;
$rootScope.$digest();
expect(appState.filters.length).to.be(3);

queryFilter.addFilters(newFilter);
await queryFilter.addFilters(newFilter);
$rootScope.$digest();
expect(appState.filters.length).to.be(3);
});

it('should de-dupe globalState filters being added', function () {
it('should de-dupe globalState filters being added', async function () {
const newFilter = _.cloneDeep(filters[1]);
globalState.filters = filters;
$rootScope.$digest();
expect(globalState.filters.length).to.be(3);

queryFilter.addFilters(newFilter, true);
await queryFilter.addFilters(newFilter, true);
$rootScope.$digest();
expect(globalState.filters.length).to.be(3);
});

it('should mutate global filters on appState filter changes', function () {
it('should mutate global filters on appState filter changes', async function () {
const idx = 1;
globalState.filters = filters;
$rootScope.$digest();

const appFilter = _.cloneDeep(filters[idx]);
appFilter.meta.negate = true;
queryFilter.addFilters(appFilter);
await queryFilter.addFilters(appFilter);
$rootScope.$digest();

const res = queryFilter.getFilters();
Expand Down
87 changes: 0 additions & 87 deletions src/legacy/ui/public/filter_bar/__tests__/push_filter.js
View file

This file was deleted.

22 changes: 8 additions & 14 deletions src/legacy/ui/public/filter_bar/lib/__tests__/extract_time_filter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,48 +19,42 @@

import expect from '@kbn/expect';
import ngMock from 'ng_mock';
import { FilterBarLibExtractTimeFilterProvider } from '../extract_time_filter';
import { extractTimeFilter } from '../extract_time_filter';
import IndexPatternMock from 'fixtures/mock_index_patterns';

describe('Filter Bar Directive', function () {
describe('extractTimeFilter()', function () {
let extractTimeFilter;
let $rootScope;
let mockIndexPatterns;

beforeEach(ngMock.module(
'kibana',
'kibana/courier',
function ($provide) {
$provide.service('indexPatterns', require('fixtures/mock_index_patterns'));
}
'kibana/courier'
));

beforeEach(ngMock.inject(function (Private, _$rootScope_) {
extractTimeFilter = Private(FilterBarLibExtractTimeFilterProvider);
$rootScope = _$rootScope_;
beforeEach(ngMock.inject(function (Private) {
mockIndexPatterns = Private(IndexPatternMock);
}));

it('should return the matching filter for the default time field', function (done) {
const filters = [
{ meta: { index: 'logstash-*' }, query: { match: { _type: { query: 'apache', type: 'phrase' } } } },
{ meta: { index: 'logstash-*' }, range: { 'time': { gt: 1388559600000, lt: 1388646000000 } } }
];
extractTimeFilter(filters).then(function (filter) {
extractTimeFilter(mockIndexPatterns, filters).then(function (filter) {
expect(filter).to.eql(filters[1]);
done();
});
$rootScope.$apply();
});

it('should not return the non-matching filter for the default time field', function (done) {
const filters = [
{ meta: { index: 'logstash-*' }, query: { match: { _type: { query: 'apache', type: 'phrase' } } } },
{ meta: { index: 'logstash-*' }, range: { '@timestamp': { gt: 1388559600000, lt: 1388646000000 } } }
];
extractTimeFilter(filters).then(function (filter) {
extractTimeFilter(mockIndexPatterns, filters).then(function (filter) {
expect(filter).to.be(undefined);
done();
});
$rootScope.$apply();
});

});
Expand Down
Loading

0 comments on commit 650c7d6

Please sign in to comment.