Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove (most of) Angular dependecies from filter bar #35544

Merged
merged 19 commits into from
May 7, 2019
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/fixtures/mock_index_patterns.js
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
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
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
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

This file was deleted.

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