- {this.state.isFullScreenMode && (
+ {isFullScreenMode && (
@@ -103,4 +133,13 @@ export class DashboardViewport extends React.Component
);
}
+
+ public render() {
+ return (
+
+ {this.state.isEmptyState ? this.renderEmptyScreen() : null}
+ {this.renderContainerScreen()}
+
+ );
+ }
}
diff --git a/src/plugins/data/common/es_query/__fixtures__/index_pattern_response.ts b/src/plugins/data/common/es_query/__fixtures__/index_pattern_response.ts
new file mode 100644
index 0000000000000..1784a2650a95a
--- /dev/null
+++ b/src/plugins/data/common/es_query/__fixtures__/index_pattern_response.ts
@@ -0,0 +1,322 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export const indexPatternResponse = {
+ id: 'logstash-*',
+ title: 'logstash-*',
+ fields: [
+ {
+ name: 'bytes',
+ type: 'number',
+ esTypes: ['long'],
+ count: 10,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'ssl',
+ type: 'boolean',
+ esTypes: ['boolean'],
+ count: 20,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: '@timestamp',
+ type: 'date',
+ esTypes: ['date'],
+ count: 30,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'time',
+ type: 'date',
+ esTypes: ['date'],
+ count: 30,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: '@tags',
+ type: 'string',
+ esTypes: ['keyword'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'utc_time',
+ type: 'date',
+ esTypes: ['date'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'phpmemory',
+ type: 'number',
+ esTypes: ['integer'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'ip',
+ type: 'ip',
+ esTypes: ['ip'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'request_body',
+ type: 'attachment',
+ esTypes: ['attachment'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'point',
+ type: 'geo_point',
+ esTypes: ['geo_point'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'area',
+ type: 'geo_shape',
+ esTypes: ['geo_shape'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'hashed',
+ type: 'murmur3',
+ esTypes: ['murmur3'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: false,
+ readFromDocValues: false,
+ },
+ {
+ name: 'geo.coordinates',
+ type: 'geo_point',
+ esTypes: ['geo_point'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'extension',
+ type: 'string',
+ esTypes: ['keyword'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'machine.os',
+ type: 'string',
+ esTypes: ['text'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'machine.os.raw',
+ type: 'string',
+ esTypes: ['keyword'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ subType: { multi: { parent: 'machine.os' } },
+ },
+ {
+ name: 'geo.src',
+ type: 'string',
+ esTypes: ['keyword'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: '_id',
+ type: 'string',
+ esTypes: ['_id'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: '_type',
+ type: 'string',
+ esTypes: ['_type'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: '_source',
+ type: '_source',
+ esTypes: ['_source'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'non-filterable',
+ type: 'string',
+ esTypes: ['text'],
+ count: 0,
+ scripted: false,
+ searchable: false,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'non-sortable',
+ type: 'string',
+ esTypes: ['text'],
+ count: 0,
+ scripted: false,
+ searchable: false,
+ aggregatable: false,
+ readFromDocValues: false,
+ },
+ {
+ name: 'custom_user_field',
+ type: 'conflict',
+ esTypes: ['long', 'text'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: true,
+ },
+ {
+ name: 'script string',
+ type: 'string',
+ count: 0,
+ scripted: true,
+ script: "'i am a string'",
+ lang: 'expression',
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'script number',
+ type: 'number',
+ count: 0,
+ scripted: true,
+ script: '1234',
+ lang: 'expression',
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'script date',
+ type: 'date',
+ count: 0,
+ scripted: true,
+ script: '1234',
+ lang: 'painless',
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'script murmur3',
+ type: 'murmur3',
+ count: 0,
+ scripted: true,
+ script: '1234',
+ lang: 'expression',
+ searchable: true,
+ aggregatable: true,
+ readFromDocValues: false,
+ },
+ {
+ name: 'nestedField.child',
+ type: 'string',
+ esTypes: ['text'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: false,
+ readFromDocValues: false,
+ subType: { nested: { path: 'nestedField' } },
+ },
+ {
+ name: 'nestedField.nestedChild.doublyNestedChild',
+ type: 'string',
+ esTypes: ['text'],
+ count: 0,
+ scripted: false,
+ searchable: true,
+ aggregatable: false,
+ readFromDocValues: false,
+ subType: { nested: { path: 'nestedField.nestedChild' } },
+ },
+ ],
+};
diff --git a/src/plugins/data/common/es_query/es_query/from_filters.test.ts b/src/plugins/data/common/es_query/es_query/from_filters.test.ts
index 8c1d990c389b8..a93a91a42dbf3 100644
--- a/src/plugins/data/common/es_query/es_query/from_filters.test.ts
+++ b/src/plugins/data/common/es_query/es_query/from_filters.test.ts
@@ -144,5 +144,30 @@ describe('build query', () => {
expect(result.filter).toEqual(expectedESQueries);
});
+
+ test('should wrap filters targeting nested fields in a nested query', () => {
+ const filters = [
+ {
+ exists: { field: 'nestedField.child' },
+ meta: { type: 'exists', alias: '', disabled: false, negate: false },
+ },
+ ];
+
+ const expectedESQueries = [
+ {
+ nested: {
+ path: 'nestedField',
+ query: {
+ exists: {
+ field: 'nestedField.child',
+ },
+ },
+ },
+ },
+ ];
+
+ const result = buildQueryFromFilters(filters, indexPattern);
+ expect(result.filter).toEqual(expectedESQueries);
+ });
});
});
diff --git a/src/plugins/data/common/es_query/es_query/from_filters.ts b/src/plugins/data/common/es_query/es_query/from_filters.ts
index e33040485bf47..ed91d391fc1fd 100644
--- a/src/plugins/data/common/es_query/es_query/from_filters.ts
+++ b/src/plugins/data/common/es_query/es_query/from_filters.ts
@@ -21,6 +21,7 @@ import { migrateFilter } from './migrate_filter';
import { filterMatchesIndex } from './filter_matches_index';
import { Filter, cleanFilter, isFilterDisabled } from '../filters';
import { IIndexPattern } from '../../index_patterns';
+import { handleNestedFilter } from './handle_nested_filter';
/**
* Create a filter that can be reversed for filters with negate set
@@ -59,20 +60,22 @@ export const buildQueryFromFilters = (
) => {
filters = filters.filter(filter => filter && !isFilterDisabled(filter));
- return {
- must: [],
- filter: filters
- .filter(filterNegate(false))
+ const filtersToESQueries = (negate: boolean) => {
+ return filters
+ .filter(filterNegate(negate))
.filter(filter => !ignoreFilterIfFieldNotInIndex || filterMatchesIndex(filter, indexPattern))
+ .map(filter => {
+ return migrateFilter(filter, indexPattern);
+ })
+ .map(filter => handleNestedFilter(filter, indexPattern))
.map(translateToQuery)
- .map(cleanFilter)
- .map(filter => migrateFilter(filter, indexPattern)),
+ .map(cleanFilter);
+ };
+
+ return {
+ must: [],
+ filter: filtersToESQueries(false),
should: [],
- must_not: filters
- .filter(filterNegate(true))
- .filter(filter => !ignoreFilterIfFieldNotInIndex || filterMatchesIndex(filter, indexPattern))
- .map(translateToQuery)
- .map(cleanFilter)
- .map(filter => migrateFilter(filter, indexPattern)),
+ must_not: filtersToESQueries(true),
};
};
diff --git a/src/plugins/data/common/es_query/es_query/handle_nested_filter.test.ts b/src/plugins/data/common/es_query/es_query/handle_nested_filter.test.ts
new file mode 100644
index 0000000000000..594b2641c39be
--- /dev/null
+++ b/src/plugins/data/common/es_query/es_query/handle_nested_filter.test.ts
@@ -0,0 +1,91 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { handleNestedFilter } from './handle_nested_filter';
+import { fields } from '../../index_patterns/mocks';
+import { buildPhraseFilter, buildQueryFilter } from '../filters';
+import { IFieldType, IIndexPattern } from '../../index_patterns';
+
+describe('handleNestedFilter', function() {
+ const indexPattern: IIndexPattern = ({
+ id: 'logstash-*',
+ fields,
+ } as unknown) as IIndexPattern;
+
+ it("should return the filter's query wrapped in nested query if the target field is nested", () => {
+ const field = getField('nestedField.child');
+ const filter = buildPhraseFilter(field!, 'foo', indexPattern);
+ const result = handleNestedFilter(filter, indexPattern);
+ expect(result).toEqual({
+ meta: {
+ index: 'logstash-*',
+ },
+ nested: {
+ path: 'nestedField',
+ query: {
+ match_phrase: {
+ 'nestedField.child': 'foo',
+ },
+ },
+ },
+ });
+ });
+
+ it('should return filter untouched if it does not target a nested field', () => {
+ const field = getField('extension');
+ const filter = buildPhraseFilter(field!, 'jpg', indexPattern);
+ const result = handleNestedFilter(filter, indexPattern);
+ expect(result).toBe(filter);
+ });
+
+ it('should return filter untouched if it does not target a field from the given index pattern', () => {
+ const field = { ...getField('extension'), name: 'notarealfield' };
+ const filter = buildPhraseFilter(field as IFieldType, 'jpg', indexPattern);
+ const result = handleNestedFilter(filter, indexPattern);
+ expect(result).toBe(filter);
+ });
+
+ it('should return filter untouched if no index pattern is provided', () => {
+ const field = getField('extension');
+ const filter = buildPhraseFilter(field!, 'jpg', indexPattern);
+ const result = handleNestedFilter(filter);
+ expect(result).toBe(filter);
+ });
+
+ it('should return the filter untouched if a target field cannot be determined', () => {
+ // for example, we don't support query_string queries
+ const filter = buildQueryFilter(
+ {
+ query: {
+ query_string: {
+ query: 'response:200',
+ },
+ },
+ },
+ 'logstash-*',
+ 'foo'
+ );
+ const result = handleNestedFilter(filter);
+ expect(result).toBe(filter);
+ });
+
+ function getField(name: string) {
+ return indexPattern.fields.find(field => field.name === name);
+ }
+});
diff --git a/src/plugins/data/common/es_query/es_query/handle_nested_filter.ts b/src/plugins/data/common/es_query/es_query/handle_nested_filter.ts
new file mode 100644
index 0000000000000..27be7925fe00c
--- /dev/null
+++ b/src/plugins/data/common/es_query/es_query/handle_nested_filter.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getFilterField, cleanFilter, Filter } from '../filters';
+import { IIndexPattern } from '../../index_patterns';
+
+export const handleNestedFilter = (filter: Filter, indexPattern?: IIndexPattern) => {
+ if (!indexPattern) return filter;
+
+ const fieldName = getFilterField(filter);
+ if (!fieldName) {
+ return filter;
+ }
+
+ const field = indexPattern.fields.find(indexPatternField => indexPatternField.name === fieldName);
+ if (!field || !field.subType || !field.subType.nested || !field.subType.nested.path) {
+ return filter;
+ }
+
+ const query = cleanFilter(filter);
+
+ return {
+ meta: filter.meta,
+ nested: {
+ path: field.subType.nested.path,
+ query: query.query || query,
+ },
+ };
+};
diff --git a/src/plugins/data/common/es_query/es_query/migrate_filter.test.ts b/src/plugins/data/common/es_query/es_query/migrate_filter.test.ts
index e01240da87543..698d7bb48e685 100644
--- a/src/plugins/data/common/es_query/es_query/migrate_filter.test.ts
+++ b/src/plugins/data/common/es_query/es_query/migrate_filter.test.ts
@@ -23,26 +23,32 @@ import { PhraseFilter, MatchAllFilter } from '../filters';
describe('migrateFilter', function() {
const oldMatchPhraseFilter = ({
- match: {
- fieldFoo: {
- query: 'foobar',
- type: 'phrase',
+ query: {
+ match: {
+ fieldFoo: {
+ query: 'foobar',
+ type: 'phrase',
+ },
},
},
+ meta: {},
} as unknown) as DeprecatedMatchPhraseFilter;
const newMatchPhraseFilter = ({
- match_phrase: {
- fieldFoo: {
- query: 'foobar',
+ query: {
+ match_phrase: {
+ fieldFoo: {
+ query: 'foobar',
+ },
},
},
+ meta: {},
} as unknown) as PhraseFilter;
it('should migrate match filters of type phrase', function() {
const migratedFilter = migrateFilter(oldMatchPhraseFilter, undefined);
- expect(isEqual(migratedFilter, newMatchPhraseFilter)).toBe(true);
+ expect(migratedFilter).toEqual(newMatchPhraseFilter);
});
it('should not modify the original filter', function() {
diff --git a/src/plugins/data/common/es_query/es_query/migrate_filter.ts b/src/plugins/data/common/es_query/es_query/migrate_filter.ts
index fdc40768ebe41..22fbfe0e1ab08 100644
--- a/src/plugins/data/common/es_query/es_query/migrate_filter.ts
+++ b/src/plugins/data/common/es_query/es_query/migrate_filter.ts
@@ -22,31 +22,27 @@ import { getConvertedValueForField } from '../filters';
import { Filter } from '../filters';
import { IIndexPattern } from '../../index_patterns';
-/** @deprecated
- * see https://github.com/elastic/elasticsearch/pull/17508
- * */
export interface DeprecatedMatchPhraseFilter extends Filter {
- match: {
- [field: string]: {
- query: any;
- type: 'phrase';
+ query: {
+ match: {
+ [field: string]: {
+ query: any;
+ type: 'phrase';
+ };
};
};
}
-/** @deprecated
- * see https://github.com/elastic/elasticsearch/pull/17508
- * */
-function isMatchPhraseFilter(filter: any): filter is DeprecatedMatchPhraseFilter {
- const fieldName = filter.match && Object.keys(filter.match)[0];
+function isDeprecatedMatchPhraseFilter(filter: any): filter is DeprecatedMatchPhraseFilter {
+ const fieldName = filter.query && filter.query.match && Object.keys(filter.query.match)[0];
- return Boolean(fieldName && get(filter, ['match', fieldName, 'type']) === 'phrase');
+ return Boolean(fieldName && get(filter, ['query', 'match', fieldName, 'type']) === 'phrase');
}
export function migrateFilter(filter: Filter, indexPattern?: IIndexPattern) {
- if (isMatchPhraseFilter(filter)) {
- const fieldName = Object.keys(filter.match)[0];
- const params: Record = get(filter, ['match', fieldName]);
+ if (isDeprecatedMatchPhraseFilter(filter)) {
+ const fieldName = Object.keys(filter.query.match)[0];
+ const params: Record = get(filter, ['query', 'match', fieldName]);
if (indexPattern) {
const field = indexPattern.fields.find(f => f.name === fieldName);
@@ -55,8 +51,11 @@ export function migrateFilter(filter: Filter, indexPattern?: IIndexPattern) {
}
}
return {
- match_phrase: {
- [fieldName]: omit(params, 'type'),
+ ...filter,
+ query: {
+ match_phrase: {
+ [fieldName]: omit(params, 'type'),
+ },
},
};
}
diff --git a/src/plugins/data/common/es_query/filters/exists_filter.test.ts b/src/plugins/data/common/es_query/filters/exists_filter.test.ts
new file mode 100644
index 0000000000000..af52192dd85e4
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/exists_filter.test.ts
@@ -0,0 +1,37 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { buildExistsFilter, getExistsFilterField } from './exists_filter';
+import { IIndexPattern } from '../../index_patterns';
+import { fields } from '../../index_patterns/fields/fields.mocks.ts';
+
+describe('exists filter', function() {
+ const indexPattern: IIndexPattern = ({
+ fields,
+ } as unknown) as IIndexPattern;
+
+ describe('getExistsFilterField', function() {
+ it('should return the name of the field an exists query is targeting', () => {
+ const field = indexPattern.fields.find(patternField => patternField.name === 'extension');
+ const filter = buildExistsFilter(field!, indexPattern);
+ const result = getExistsFilterField(filter);
+ expect(result).toBe('extension');
+ });
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/exists_filter.ts b/src/plugins/data/common/es_query/filters/exists_filter.ts
index a20a4f0634766..035983dc446dc 100644
--- a/src/plugins/data/common/es_query/filters/exists_filter.ts
+++ b/src/plugins/data/common/es_query/filters/exists_filter.ts
@@ -33,6 +33,10 @@ export type ExistsFilter = Filter & {
export const isExistsFilter = (filter: any): filter is ExistsFilter => filter && filter.exists;
+export const getExistsFilterField = (filter: ExistsFilter) => {
+ return filter.exists && filter.exists.field;
+};
+
export const buildExistsFilter = (field: IFieldType, indexPattern: IIndexPattern) => {
return {
meta: {
diff --git a/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.test.ts b/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.test.ts
new file mode 100644
index 0000000000000..63c3a59044c1f
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.test.ts
@@ -0,0 +1,47 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getGeoBoundingBoxFilterField } from './geo_bounding_box_filter';
+
+describe('geo_bounding_box filter', function() {
+ describe('getGeoBoundingBoxFilterField', function() {
+ it('should return the name of the field a geo_bounding_box query is targeting', () => {
+ const filter = {
+ geo_bounding_box: {
+ geoPointField: {
+ bottom_right: { lat: 1, lon: 1 },
+ top_left: { lat: 1, lon: 1 },
+ },
+ ignore_unmapped: true,
+ },
+ meta: {
+ disabled: false,
+ negate: false,
+ alias: null,
+ params: {
+ bottom_right: { lat: 1, lon: 1 },
+ top_left: { lat: 1, lon: 1 },
+ },
+ },
+ };
+ const result = getGeoBoundingBoxFilterField(filter);
+ expect(result).toBe('geoPointField');
+ });
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.ts b/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.ts
index f4673af96b2cd..619903954ff55 100644
--- a/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.ts
+++ b/src/plugins/data/common/es_query/filters/geo_bounding_box_filter.ts
@@ -33,3 +33,10 @@ export type GeoBoundingBoxFilter = Filter & {
export const isGeoBoundingBoxFilter = (filter: any): filter is GeoBoundingBoxFilter =>
filter && filter.geo_bounding_box;
+
+export const getGeoBoundingBoxFilterField = (filter: GeoBoundingBoxFilter) => {
+ return (
+ filter.geo_bounding_box &&
+ Object.keys(filter.geo_bounding_box).find(key => key !== 'ignore_unmapped')
+ );
+};
diff --git a/src/plugins/data/common/es_query/filters/geo_polygon_filter.test.ts b/src/plugins/data/common/es_query/filters/geo_polygon_filter.test.ts
new file mode 100644
index 0000000000000..ba8e43b0cea85
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/geo_polygon_filter.test.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getGeoPolygonFilterField } from './geo_polygon_filter';
+
+describe('geo_polygon filter', function() {
+ describe('getGeoPolygonFilterField', function() {
+ it('should return the name of the field a geo_polygon query is targeting', () => {
+ const filter = {
+ geo_polygon: {
+ geoPointField: {
+ points: [{ lat: 1, lon: 1 }],
+ },
+ ignore_unmapped: true,
+ },
+ meta: {
+ disabled: false,
+ negate: false,
+ alias: null,
+ params: {
+ points: [{ lat: 1, lon: 1 }],
+ },
+ },
+ };
+ const result = getGeoPolygonFilterField(filter);
+ expect(result).toBe('geoPointField');
+ });
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/geo_polygon_filter.ts b/src/plugins/data/common/es_query/filters/geo_polygon_filter.ts
index 4cf82a92d2cef..03367feb83ee4 100644
--- a/src/plugins/data/common/es_query/filters/geo_polygon_filter.ts
+++ b/src/plugins/data/common/es_query/filters/geo_polygon_filter.ts
@@ -32,3 +32,9 @@ export type GeoPolygonFilter = Filter & {
export const isGeoPolygonFilter = (filter: any): filter is GeoPolygonFilter =>
filter && filter.geo_polygon;
+
+export const getGeoPolygonFilterField = (filter: GeoPolygonFilter) => {
+ return (
+ filter.geo_polygon && Object.keys(filter.geo_polygon).find(key => key !== 'ignore_unmapped')
+ );
+};
diff --git a/src/plugins/data/common/es_query/filters/get_filter_field.test.ts b/src/plugins/data/common/es_query/filters/get_filter_field.test.ts
new file mode 100644
index 0000000000000..2fc8ffef9713b
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/get_filter_field.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { buildPhraseFilter } from './phrase_filter';
+import { buildQueryFilter } from './query_string_filter';
+import { getFilterField } from './get_filter_field';
+import { IIndexPattern } from '../../index_patterns';
+import { fields } from '../../index_patterns/fields/fields.mocks.ts';
+
+describe('getFilterField', function() {
+ const indexPattern: IIndexPattern = ({
+ id: 'logstash-*',
+ fields,
+ } as unknown) as IIndexPattern;
+
+ it('should return the field name from known filter types that target a specific field', () => {
+ const field = indexPattern.fields.find(patternField => patternField.name === 'extension');
+ const filter = buildPhraseFilter(field!, 'jpg', indexPattern);
+ const result = getFilterField(filter);
+ expect(result).toBe('extension');
+ });
+
+ it('should return undefined for filters that do not target a specific field', () => {
+ const filter = buildQueryFilter(
+ {
+ query: {
+ query_string: {
+ query: 'response:200 and extension:jpg',
+ },
+ },
+ },
+ indexPattern.id!,
+ ''
+ );
+ const result = getFilterField(filter);
+ expect(result).toBe(undefined);
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/get_filter_field.ts b/src/plugins/data/common/es_query/filters/get_filter_field.ts
new file mode 100644
index 0000000000000..dfb575157d362
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/get_filter_field.ts
@@ -0,0 +1,53 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Filter } from './meta_filter';
+import { getExistsFilterField, isExistsFilter } from './exists_filter';
+import { getGeoBoundingBoxFilterField, isGeoBoundingBoxFilter } from './geo_bounding_box_filter';
+import { getGeoPolygonFilterField, isGeoPolygonFilter } from './geo_polygon_filter';
+import { getPhraseFilterField, isPhraseFilter } from './phrase_filter';
+import { getPhrasesFilterField, isPhrasesFilter } from './phrases_filter';
+import { getRangeFilterField, isRangeFilter } from './range_filter';
+import { getMissingFilterField, isMissingFilter } from './missing_filter';
+
+export const getFilterField = (filter: Filter) => {
+ if (isExistsFilter(filter)) {
+ return getExistsFilterField(filter);
+ }
+ if (isGeoBoundingBoxFilter(filter)) {
+ return getGeoBoundingBoxFilterField(filter);
+ }
+ if (isGeoPolygonFilter(filter)) {
+ return getGeoPolygonFilterField(filter);
+ }
+ if (isPhraseFilter(filter)) {
+ return getPhraseFilterField(filter);
+ }
+ if (isPhrasesFilter(filter)) {
+ return getPhrasesFilterField(filter);
+ }
+ if (isRangeFilter(filter)) {
+ return getRangeFilterField(filter);
+ }
+ if (isMissingFilter(filter)) {
+ return getMissingFilterField(filter);
+ }
+
+ return;
+};
diff --git a/src/plugins/data/common/es_query/filters/index.ts b/src/plugins/data/common/es_query/filters/index.ts
index 1bd534bf74ff7..403ff2b79b55f 100644
--- a/src/plugins/data/common/es_query/filters/index.ts
+++ b/src/plugins/data/common/es_query/filters/index.ts
@@ -22,6 +22,7 @@ import { Filter } from './meta_filter';
export * from './build_filters';
export * from './get_filter_params';
+export * from './get_filter_field';
export * from './custom_filter';
export * from './exists_filter';
diff --git a/src/plugins/data/common/es_query/filters/missing_filter.test.ts b/src/plugins/data/common/es_query/filters/missing_filter.test.ts
new file mode 100644
index 0000000000000..240d8fb26f3e0
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/missing_filter.test.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getMissingFilterField } from './missing_filter';
+
+describe('missing filter', function() {
+ describe('getMissingFilterField', function() {
+ it('should return the name of the field an missing query is targeting', () => {
+ const filter = {
+ missing: {
+ field: 'extension',
+ },
+ meta: {
+ disabled: false,
+ negate: false,
+ alias: null,
+ },
+ };
+ const result = getMissingFilterField(filter);
+ expect(result).toBe('extension');
+ });
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/missing_filter.ts b/src/plugins/data/common/es_query/filters/missing_filter.ts
index 5411187cbcfd7..c8e1194a8f3cc 100644
--- a/src/plugins/data/common/es_query/filters/missing_filter.ts
+++ b/src/plugins/data/common/es_query/filters/missing_filter.ts
@@ -27,3 +27,7 @@ export type MissingFilter = Filter & {
};
export const isMissingFilter = (filter: any): filter is MissingFilter => filter && filter.missing;
+
+export const getMissingFilterField = (filter: MissingFilter) => {
+ return filter.missing && filter.missing.field;
+};
diff --git a/src/plugins/data/common/es_query/filters/phrase_filter.test.ts b/src/plugins/data/common/es_query/filters/phrase_filter.test.ts
index 3c7d00a80fecf..9f90097e55475 100644
--- a/src/plugins/data/common/es_query/filters/phrase_filter.test.ts
+++ b/src/plugins/data/common/es_query/filters/phrase_filter.test.ts
@@ -17,8 +17,12 @@
* under the License.
*/
-import { buildInlineScriptForPhraseFilter, buildPhraseFilter } from './phrase_filter';
-import { getField } from '../../index_patterns/mocks';
+import {
+ buildInlineScriptForPhraseFilter,
+ buildPhraseFilter,
+ getPhraseFilterField,
+} from './phrase_filter';
+import { fields, getField } from '../../index_patterns/mocks';
import { IIndexPattern } from '../../index_patterns';
describe('Phrase filter builder', () => {
@@ -95,3 +99,16 @@ describe('buildInlineScriptForPhraseFilter', () => {
expect(buildInlineScriptForPhraseFilter(field)).toBe(expected);
});
});
+
+describe('getPhraseFilterField', function() {
+ const indexPattern: IIndexPattern = ({
+ fields,
+ } as unknown) as IIndexPattern;
+
+ it('should return the name of the field a phrase query is targeting', () => {
+ const field = indexPattern.fields.find(patternField => patternField.name === 'extension');
+ const filter = buildPhraseFilter(field!, 'jpg', indexPattern);
+ const result = getPhraseFilterField(filter);
+ expect(result).toBe('extension');
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/phrases_filter.test.ts b/src/plugins/data/common/es_query/filters/phrases_filter.test.ts
new file mode 100644
index 0000000000000..3a121eb9da034
--- /dev/null
+++ b/src/plugins/data/common/es_query/filters/phrases_filter.test.ts
@@ -0,0 +1,37 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { buildPhrasesFilter, getPhrasesFilterField } from './phrases_filter';
+import { IIndexPattern } from '../../index_patterns';
+import { fields } from '../../index_patterns/fields/fields.mocks.ts';
+
+describe('phrases filter', function() {
+ const indexPattern: IIndexPattern = ({
+ fields,
+ } as unknown) as IIndexPattern;
+
+ describe('getPhrasesFilterField', function() {
+ it('should return the name of the field a phrases query is targeting', () => {
+ const field = indexPattern.fields.find(patternField => patternField.name === 'extension');
+ const filter = buildPhrasesFilter(field!, ['jpg', 'png'], indexPattern);
+ const result = getPhrasesFilterField(filter);
+ expect(result).toBe('extension');
+ });
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/phrases_filter.ts b/src/plugins/data/common/es_query/filters/phrases_filter.ts
index f7164f0ad3c83..006e0623be913 100644
--- a/src/plugins/data/common/es_query/filters/phrases_filter.ts
+++ b/src/plugins/data/common/es_query/filters/phrases_filter.ts
@@ -32,7 +32,13 @@ export type PhrasesFilter = Filter & {
};
export const isPhrasesFilter = (filter: any): filter is PhrasesFilter =>
- filter && filter.meta.type === FILTERS.PHRASES;
+ filter?.meta?.type === FILTERS.PHRASES;
+
+export const getPhrasesFilterField = (filter: PhrasesFilter) => {
+ // Phrases is a newer filter type that has always been created via a constructor that ensures
+ // `meta.key` is set to the field name
+ return filter.meta.key;
+};
// Creates a filter where the given field matches one or more of the given values
// params should be an array of values
diff --git a/src/plugins/data/common/es_query/filters/query_string_filter.test.ts b/src/plugins/data/common/es_query/filters/query_string_filter.test.ts
index 4fcb15ccac44a..18285194c6054 100644
--- a/src/plugins/data/common/es_query/filters/query_string_filter.test.ts
+++ b/src/plugins/data/common/es_query/filters/query_string_filter.test.ts
@@ -19,7 +19,7 @@
import { buildQueryFilter } from './query_string_filter';
-describe('Phrase filter builder', () => {
+describe('Query string filter builder', () => {
it('should be a function', () => {
expect(typeof buildQueryFilter).toBe('function');
});
diff --git a/src/plugins/data/common/es_query/filters/range_filter.test.ts b/src/plugins/data/common/es_query/filters/range_filter.test.ts
index 56b63018b5153..45d59c97941b3 100644
--- a/src/plugins/data/common/es_query/filters/range_filter.test.ts
+++ b/src/plugins/data/common/es_query/filters/range_filter.test.ts
@@ -18,8 +18,8 @@
*/
import { each } from 'lodash';
-import { buildRangeFilter, RangeFilter } from './range_filter';
-import { getField } from '../../index_patterns/mocks';
+import { buildRangeFilter, getRangeFilterField, RangeFilter } from './range_filter';
+import { fields, getField } from '../../index_patterns/mocks';
import { IIndexPattern, IFieldType } from '../../index_patterns';
describe('Range filter builder', () => {
@@ -172,3 +172,16 @@ describe('Range filter builder', () => {
});
});
});
+
+describe('getRangeFilterField', function() {
+ const indexPattern: IIndexPattern = ({
+ fields,
+ } as unknown) as IIndexPattern;
+
+ test('should return the name of the field a range query is targeting', () => {
+ const field = indexPattern.fields.find(patternField => patternField.name === 'bytes');
+ const filter = buildRangeFilter(field!, {}, indexPattern);
+ const result = getRangeFilterField(filter);
+ expect(result).toBe('bytes');
+ });
+});
diff --git a/src/plugins/data/common/es_query/filters/range_filter.ts b/src/plugins/data/common/es_query/filters/range_filter.ts
index 3d819bd145fa6..b300539f4280a 100644
--- a/src/plugins/data/common/es_query/filters/range_filter.ts
+++ b/src/plugins/data/common/es_query/filters/range_filter.ts
@@ -88,6 +88,10 @@ export const isScriptedRangeFilter = (filter: any): filter is RangeFilter => {
return hasRangeKeys(params);
};
+export const getRangeFilterField = (filter: RangeFilter) => {
+ return filter.range && Object.keys(filter.range)[0];
+};
+
const formatValue = (field: IFieldType, params: any[]) =>
map(params, (val: any, key: string) => get(operators, key) + format(field, val)).join(' ');
diff --git a/src/plugins/data/kibana.json b/src/plugins/data/kibana.json
index bd2bc1bab2a1a..998eaa55858d2 100644
--- a/src/plugins/data/kibana.json
+++ b/src/plugins/data/kibana.json
@@ -2,5 +2,6 @@
"id": "data",
"version": "kibana",
"server": true,
- "ui": true
+ "ui": true,
+ "requiredPlugins": ["uiActions"]
}
diff --git a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts b/src/plugins/data/public/actions/apply_filter_action.ts
similarity index 84%
rename from src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts
rename to src/plugins/data/public/actions/apply_filter_action.ts
index c65ae3a0ec7b9..b006889637c50 100644
--- a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts
+++ b/src/plugins/data/public/actions/apply_filter_action.ts
@@ -18,22 +18,17 @@
*/
import { i18n } from '@kbn/i18n';
-import { CoreStart } from 'src/core/public';
-import { toMountPoint } from '../../../../../../plugins/kibana_react/public';
-import {
- IAction,
- createAction,
- IncompatibleActionError,
-} from '../../../../../../plugins/ui_actions/public';
+import { toMountPoint } from '../../../kibana_react/public';
+import { IAction, createAction, IncompatibleActionError } from '../../../ui_actions/public';
+import { getOverlays, getIndexPatterns } from '../services';
+import { applyFiltersPopover } from '../ui/apply_filters';
import {
esFilters,
FilterManager,
TimefilterContract,
- applyFiltersPopover,
changeTimeFilter,
extractTimeFilter,
- IndexPatternsStart,
-} from '../../../../../../plugins/data/public';
+} from '..';
export const GLOBAL_APPLY_FILTER_ACTION = 'GLOBAL_APPLY_FILTER_ACTION';
@@ -47,10 +42,8 @@ async function isCompatible(context: ActionContext) {
}
export function createFilterAction(
- overlays: CoreStart['overlays'],
filterManager: FilterManager,
- timeFilter: TimefilterContract,
- indexPatternsService: IndexPatternsStart
+ timeFilter: TimefilterContract
): IAction {
return createAction({
type: GLOBAL_APPLY_FILTER_ACTION,
@@ -75,12 +68,12 @@ export function createFilterAction(
if (selectedFilters.length > 1) {
const indexPatterns = await Promise.all(
filters.map(filter => {
- return indexPatternsService.indexPatterns.get(filter.meta.index!);
+ return getIndexPatterns().get(filter.meta.index!);
})
);
const filterSelectionPromise: Promise = new Promise(resolve => {
- const overlay = overlays.openModal(
+ const overlay = getOverlays().openModal(
toMountPoint(
applyFiltersPopover(
filters,
diff --git a/src/plugins/data/public/actions/index.ts b/src/plugins/data/public/actions/index.ts
new file mode 100644
index 0000000000000..5d469606944a1
--- /dev/null
+++ b/src/plugins/data/public/actions/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { GLOBAL_APPLY_FILTER_ACTION, createFilterAction } from './apply_filter_action';
diff --git a/src/plugins/data/public/autocomplete_provider/types.ts b/src/plugins/data/public/autocomplete_provider/types.ts
index 3d34b1bc4a2d2..389057f94144d 100644
--- a/src/plugins/data/public/autocomplete_provider/types.ts
+++ b/src/plugins/data/public/autocomplete_provider/types.ts
@@ -40,6 +40,7 @@ export type GetSuggestions = (args: {
query: string;
selectionStart: number;
selectionEnd: number;
+ signal?: AbortSignal;
}) => Promise;
/** @public **/
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index eca6258099141..e54278698a05a 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -18,14 +18,10 @@
*/
import { PluginInitializerContext } from '../../../core/public';
-import { DataPublicPlugin } from './plugin';
-
export function plugin(initializerContext: PluginInitializerContext) {
return new DataPublicPlugin(initializerContext);
}
-export { DataPublicPlugin as Plugin };
-
export * from '../common';
export * from './autocomplete_provider';
@@ -39,3 +35,7 @@ export * from './search';
export * from './query';
export * from './ui';
+
+// Export plugin after all other imports
+import { DataPublicPlugin } from './plugin';
+export { DataPublicPlugin as Plugin };
diff --git a/src/plugins/data/public/index_patterns/fields/field.ts b/src/plugins/data/public/index_patterns/fields/field.ts
index ae17188de8625..c8c8ac1ffd321 100644
--- a/src/plugins/data/public/index_patterns/fields/field.ts
+++ b/src/plugins/data/public/index_patterns/fields/field.ts
@@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
// @ts-ignore
import { ObjDefine } from './obj_define';
import { IndexPattern } from '../index_patterns';
-import { getNotifications, getFieldFormats } from '../services';
+import { getNotifications, getFieldFormats } from '../../services';
import {
IFieldType,
getKbnFieldType,
diff --git a/src/plugins/data/public/index_patterns/fields/field_list.ts b/src/plugins/data/public/index_patterns/fields/field_list.ts
index ff6706cec6c34..03214a8c96427 100644
--- a/src/plugins/data/public/index_patterns/fields/field_list.ts
+++ b/src/plugins/data/public/index_patterns/fields/field_list.ts
@@ -24,14 +24,14 @@ import { Field, FieldSpec } from './field';
type FieldMap = Map;
-export interface FieldListInterface extends Array {
+export interface IFieldList extends Array {
getByName(name: Field['name']): Field | undefined;
getByType(type: Field['type']): Field[];
add(field: FieldSpec): void;
remove(field: IFieldType): void;
}
-export class FieldList extends Array implements FieldListInterface {
+export class FieldList extends Array implements IFieldList {
private byName: FieldMap = new Map();
private groups: Map = new Map();
private indexPattern: IndexPattern;
diff --git a/src/plugins/data/public/index_patterns/index.ts b/src/plugins/data/public/index_patterns/index.ts
index e6978e6d3957d..6f4821c391721 100644
--- a/src/plugins/data/public/index_patterns/index.ts
+++ b/src/plugins/data/public/index_patterns/index.ts
@@ -42,7 +42,7 @@ export const indexPatterns = {
formatHitProvider,
};
-export { IndexPatternsService } from './index_patterns_service';
-export { Field, FieldList, FieldListInterface } from './fields';
-export { IndexPattern, IndexPatterns } from './index_patterns';
-export { IndexPatternsStart, IndexPatternsSetup } from './types';
+export { Field, FieldList, IFieldList } from './fields';
+
+// TODO: figure out how to replace IndexPatterns in get_inner_angular.
+export { IndexPattern, IndexPatterns, IndexPatternsContract } from './index_patterns';
diff --git a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.test.ts b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.test.ts
index a0a884454a3f0..f56f94fa8c260 100644
--- a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.test.ts
+++ b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.test.ts
@@ -26,7 +26,7 @@ import mockLogStashFields from '../../../../../fixtures/logstash_fields';
// @ts-ignore
import { stubbedSavedObjectIndexPattern } from '../../../../../fixtures/stubbed_saved_object_index_pattern';
import { Field } from '../fields';
-import { setNotifications, setFieldFormats } from '../services';
+import { setNotifications, setFieldFormats } from '../../services';
// Temporary disable eslint, will be removed after moving to new platform folder
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
diff --git a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts
index 2c93c0aa9dc62..19e465104cf4c 100644
--- a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts
+++ b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts
@@ -32,12 +32,12 @@ import { ES_FIELD_TYPES, KBN_FIELD_TYPES, IIndexPattern, IFieldType } from '../.
import { findByTitle, getRoutes } from '../utils';
import { indexPatterns } from '../';
-import { Field, FieldList, FieldListInterface } from '../fields';
+import { Field, FieldList, IFieldList } from '../fields';
import { createFieldsFetcher } from './_fields_fetcher';
import { formatHitProvider } from './format_hit';
import { flattenHitWrapper } from './flatten_hit';
import { IIndexPatternsApiClient } from './index_patterns_api_client';
-import { getNotifications, getFieldFormats } from '../services';
+import { getNotifications, getFieldFormats } from '../../services';
const MAX_ATTEMPTS_TO_RESOLVE_CONFLICTS = 3;
const type = 'index-pattern';
@@ -50,7 +50,7 @@ export class IndexPattern implements IIndexPattern {
public type?: string;
public fieldFormatMap: any;
public typeMeta: any;
- public fields: FieldListInterface;
+ public fields: IFieldList;
public timeFieldName: string | undefined;
public formatHit: any;
public formatField: any;
diff --git a/src/plugins/data/public/index_patterns/index_patterns/index_patterns.ts b/src/plugins/data/public/index_patterns/index_patterns/index_patterns.ts
index d6a8e7b20451d..da58881b5b96e 100644
--- a/src/plugins/data/public/index_patterns/index_patterns/index_patterns.ts
+++ b/src/plugins/data/public/index_patterns/index_patterns/index_patterns.ts
@@ -17,7 +17,6 @@
* under the License.
*/
-import { idx } from '@kbn/elastic-idx';
import {
SavedObjectsClientContract,
SimpleSavedObject,
@@ -64,7 +63,7 @@ export class IndexPatterns {
if (!this.savedObjectsCache) {
return [];
}
- return this.savedObjectsCache.map(obj => idx(obj, _ => _.id));
+ return this.savedObjectsCache.map(obj => obj?.id);
};
getTitles = async (refresh: boolean = false): Promise => {
@@ -74,7 +73,7 @@ export class IndexPatterns {
if (!this.savedObjectsCache) {
return [];
}
- return this.savedObjectsCache.map(obj => idx(obj, _ => _.attributes.title));
+ return this.savedObjectsCache.map(obj => obj?.attributes?.title);
};
getFields = async (fields: string[], refresh: boolean = false) => {
@@ -86,7 +85,7 @@ export class IndexPatterns {
}
return this.savedObjectsCache.map((obj: Record) => {
const result: Record = {};
- fields.forEach((f: string) => (result[f] = obj[f] || idx(obj, _ => _.attributes[f])));
+ fields.forEach((f: string) => (result[f] = obj[f] || obj?.attributes?.[f]));
return result;
});
};
@@ -146,3 +145,5 @@ export class IndexPatterns {
return indexPattern.init();
};
}
+
+export type IndexPatternsContract = PublicMethodsOf;
diff --git a/src/plugins/data/public/index_patterns/index_patterns_service.mock.ts b/src/plugins/data/public/index_patterns/index_patterns_service.mock.ts
deleted file mode 100644
index d38e9c76430eb..0000000000000
--- a/src/plugins/data/public/index_patterns/index_patterns_service.mock.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { IndexPatternsService } from './index_patterns_service';
-import { flattenHitWrapper } from './index_patterns';
-import { IndexPatternsSetup } from './types';
-
-type IndexPatternsServiceClientContract = PublicMethodsOf;
-
-const createSetupContractMock = () => {
- // Legacy mock - must be removed before migrating to new platform.
- // Included here because we only want to call `jest.mock` when somebody creates
- // the mock for this contract.
- jest.mock('ui/chrome');
-
- const setupContract: jest.Mocked = {
- FieldList: {} as any,
- flattenHitWrapper: jest.fn().mockImplementation(flattenHitWrapper),
- formatHitProvider: jest.fn(),
- indexPatterns: jest.fn() as any,
- IndexPatternSelect: jest.fn(),
- };
-
- return setupContract;
-};
-
-const createMock = () => {
- const mocked: jest.Mocked = {
- setup: jest.fn(),
- start: jest.fn(),
- stop: jest.fn(),
- };
-
- mocked.setup.mockReturnValue(createSetupContractMock());
- return mocked;
-};
-
-export const indexPatternsServiceMock = {
- create: createMock,
- createSetupContract: createSetupContractMock,
- createStartContract: createSetupContractMock,
-};
diff --git a/src/plugins/data/public/index_patterns/index_patterns_service.ts b/src/plugins/data/public/index_patterns/index_patterns_service.ts
deleted file mode 100644
index 43ba5082ec479..0000000000000
--- a/src/plugins/data/public/index_patterns/index_patterns_service.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
- IUiSettingsClient,
- SavedObjectsClientContract,
- HttpServiceBase,
- NotificationsStart,
-} from 'src/core/public';
-import { FieldFormatsStart } from '../field_formats_provider';
-import { setNotifications, setFieldFormats } from './services';
-import { IndexPatterns } from './index_patterns';
-
-export interface IndexPatternDependencies {
- uiSettings: IUiSettingsClient;
- savedObjectsClient: SavedObjectsClientContract;
- http: HttpServiceBase;
- notifications: NotificationsStart;
- fieldFormats: FieldFormatsStart;
-}
-
-/**
- * Index Patterns Service
- *
- * @internal
- */
-export class IndexPatternsService {
- private setupApi: any;
-
- public setup() {
- this.setupApi = {};
-
- return this.setupApi;
- }
-
- public start({
- uiSettings,
- savedObjectsClient,
- http,
- notifications,
- fieldFormats,
- }: IndexPatternDependencies) {
- setNotifications(notifications);
- setFieldFormats(fieldFormats);
-
- return {
- indexPatterns: new IndexPatterns(uiSettings, savedObjectsClient, http),
- };
- }
-
- public stop() {
- // nothing to do here yet
- }
-}
diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts
index 19c21ab9934ef..058e6c0e2f5c5 100644
--- a/src/plugins/data/public/mocks.ts
+++ b/src/plugins/data/public/mocks.ts
@@ -16,10 +16,15 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { FieldFormatRegisty, Plugin, FieldFormatsStart, FieldFormatsSetup } from '.';
+import {
+ FieldFormatRegisty,
+ Plugin,
+ FieldFormatsStart,
+ FieldFormatsSetup,
+ IndexPatternsContract,
+} from '.';
import { searchSetupMock } from './search/mocks';
import { queryServiceMock } from './query/mocks';
-import { indexPatternsServiceMock } from './index_patterns/index_patterns_service.mock';
export type Setup = jest.Mocked>;
export type Start = jest.Mocked>;
@@ -54,7 +59,6 @@ const createSetupContract = (): Setup => {
search: searchSetupMock,
fieldFormats: fieldFormatsMock as FieldFormatsSetup,
query: querySetupMock,
- indexPatterns: indexPatternsServiceMock.createSetupContract(),
};
return setupContract;
@@ -71,7 +75,7 @@ const createStartContract = (): Start => {
ui: {
IndexPatternSelect: jest.fn(),
},
- indexPatterns: indexPatternsServiceMock.createStartContract(),
+ indexPatterns: {} as IndexPatternsContract,
};
return startContract;
};
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index c018efcad74e6..2a37be7f3f46a 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -19,17 +19,24 @@
import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from 'src/core/public';
import { Storage } from '../../kibana_utils/public';
-import { DataPublicPluginSetup, DataPublicPluginStart } from './types';
+import {
+ DataPublicPluginSetup,
+ DataPublicPluginStart,
+ DataSetupDependencies,
+ DataStartDependencies,
+} from './types';
import { AutocompleteProviderRegister } from './autocomplete_provider';
import { getSuggestionsProvider } from './suggestions_provider';
import { SearchService } from './search/search_service';
import { FieldFormatsService } from './field_formats_provider';
import { QueryService } from './query';
import { createIndexPatternSelect } from './ui/index_pattern_select';
-import { IndexPatternsService } from './index_patterns';
+import { IndexPatterns } from './index_patterns';
+import { setNotifications, setFieldFormats, setOverlays, setIndexPatterns } from './services';
+import { createFilterAction, GLOBAL_APPLY_FILTER_ACTION } from './actions';
+import { APPLY_FILTER_TRIGGER } from '../../embeddable/public';
export class DataPublicPlugin implements Plugin {
- private readonly indexPatterns: IndexPatternsService = new IndexPatternsService();
private readonly autocomplete = new AutocompleteProviderRegister();
private readonly searchService: SearchService;
private readonly fieldFormatsService: FieldFormatsService;
@@ -41,23 +48,36 @@ export class DataPublicPlugin implements Plugin(
'Notifications'
@@ -28,3 +30,9 @@ export const [getNotifications, setNotifications] = createGetterSetter(
'FieldFormats'
);
+
+export const [getOverlays, setOverlays] = createGetterSetter('Overlays');
+
+export const [getIndexPatterns, setIndexPatterns] = createGetterSetter(
+ 'IndexPatterns'
+);
diff --git a/src/plugins/data/public/suggestions_provider/value_suggestions.ts b/src/plugins/data/public/suggestions_provider/value_suggestions.ts
index 282f4ee65dc96..68076cd43c336 100644
--- a/src/plugins/data/public/suggestions_provider/value_suggestions.ts
+++ b/src/plugins/data/public/suggestions_provider/value_suggestions.ts
@@ -28,23 +28,36 @@ export function getSuggestionsProvider(
http: HttpServiceBase
): IGetSuggestions {
const requestSuggestions = memoize(
- (index: string, field: IFieldType, query: string, boolFilter: any = []) => {
+ (
+ index: string,
+ field: IFieldType,
+ query: string,
+ boolFilter: any = [],
+ signal?: AbortSignal
+ ) => {
return http.fetch(`/api/kibana/suggestions/values/${index}`, {
method: 'POST',
body: JSON.stringify({ query, field: field.name, boolFilter }),
+ signal,
});
},
resolver
);
- return async (index: string, field: IFieldType, query: string, boolFilter?: any) => {
+ return async (
+ index: string,
+ field: IFieldType,
+ query: string,
+ boolFilter?: any,
+ signal?: AbortSignal
+ ) => {
const shouldSuggestValues = uiSettings.get('filterEditor:suggestValues');
if (field.type === 'boolean') {
return [true, false];
} else if (!shouldSuggestValues || !field.aggregatable || field.type !== 'string') {
return [];
}
- return await requestSuggestions(index, field, query, boolFilter);
+ return await requestSuggestions(index, field, query, boolFilter, signal);
};
}
diff --git a/src/plugins/data/public/types.ts b/src/plugins/data/public/types.ts
index 5e1d8797ebf08..202a509ee58c9 100644
--- a/src/plugins/data/public/types.ts
+++ b/src/plugins/data/public/types.ts
@@ -19,32 +19,40 @@
import { CoreStart } from 'src/core/public';
import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
+import { IUiActionsSetup, IUiActionsStart } from 'src/plugins/ui_actions/public';
import { AutocompletePublicPluginSetup, AutocompletePublicPluginStart } from '.';
import { FieldFormatsSetup, FieldFormatsStart } from './field_formats_provider';
import { ISearchSetup, ISearchStart } from './search';
import { IGetSuggestions } from './suggestions_provider/types';
import { QuerySetup, QueryStart } from './query';
import { IndexPatternSelectProps } from './ui/index_pattern_select';
-import { IndexPatternsStart, IndexPatternsSetup } from './index_patterns';
+import { IndexPatternsContract } from './index_patterns';
+
+export interface DataSetupDependencies {
+ uiActions: IUiActionsSetup;
+}
+
+export interface DataStartDependencies {
+ uiActions: IUiActionsStart;
+}
export interface DataPublicPluginSetup {
autocomplete: AutocompletePublicPluginSetup;
search: ISearchSetup;
fieldFormats: FieldFormatsSetup;
query: QuerySetup;
- indexPatterns?: IndexPatternsSetup;
}
export interface DataPublicPluginStart {
autocomplete: AutocompletePublicPluginStart;
getSuggestions: IGetSuggestions;
+ indexPatterns: IndexPatternsContract;
search: ISearchStart;
fieldFormats: FieldFormatsStart;
query: QueryStart;
ui: {
IndexPatternSelect: React.ComponentType;
};
- indexPatterns: IndexPatternsStart;
}
export * from './autocomplete_provider/types';
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
index 84538a62ca005..51204e2a61168 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-@import '@elastic/eui/src/components/form/mixins';
-
/**
* 1. Allow wrapping of long filter items
*/
diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
index 9a4bccc21db3e..8bfccd49bdff3 100644
--- a/src/plugins/data/public/ui/index.ts
+++ b/src/plugins/data/public/ui/index.ts
@@ -20,7 +20,6 @@
export { SuggestionsComponent } from './typeahead/suggestions_component';
export { IndexPatternSelect } from './index_pattern_select';
export { FilterBar } from './filter_bar';
-export { applyFiltersPopover } from './apply_filters';
export { QueryStringInput } from './query_string_input/query_string_input';
// temp export - will be removed as final components are migrated to NP
diff --git a/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap b/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap
index 58658b6c839a2..80a5ede567054 100644
--- a/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap
+++ b/src/plugins/data/public/ui/query_string_input/__snapshots__/query_string_input.test.tsx.snap
@@ -172,13 +172,7 @@ exports[`QueryStringInput Should disable autoFocus on EuiFieldText when disableA
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -305,14 +299,9 @@ exports[`QueryStringInput Should disable autoFocus on EuiFieldText when disableA
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
@@ -803,13 +792,7 @@ exports[`QueryStringInput Should disable autoFocus on EuiFieldText when disableA
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -936,14 +919,9 @@ exports[`QueryStringInput Should disable autoFocus on EuiFieldText when disableA
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
@@ -1422,13 +1400,7 @@ exports[`QueryStringInput Should pass the query language to the language switche
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -1555,14 +1527,9 @@ exports[`QueryStringInput Should pass the query language to the language switche
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
@@ -2050,13 +2017,7 @@ exports[`QueryStringInput Should pass the query language to the language switche
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -2183,14 +2144,9 @@ exports[`QueryStringInput Should pass the query language to the language switche
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
@@ -2669,13 +2625,7 @@ exports[`QueryStringInput Should render the given query 1`] = `
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -2802,14 +2752,9 @@ exports[`QueryStringInput Should render the given query 1`] = `
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
@@ -3297,13 +3242,7 @@ exports[`QueryStringInput Should render the given query 1`] = `
"register": [MockFunction],
},
"getSuggestions": [MockFunction],
- "indexPatterns": Object {
- "FieldList": Object {},
- "IndexPatternSelect": [MockFunction],
- "flattenHitWrapper": [MockFunction],
- "formatHitProvider": [MockFunction],
- "indexPatterns": [MockFunction],
- },
+ "indexPatterns": Object {},
"query": Object {
"filterManager": [MockFunction],
"savedQueries": [MockFunction],
@@ -3430,14 +3369,9 @@ exports[`QueryStringInput Should render the given query 1`] = `
},
"http": Object {
"addLoadingCount": [MockFunction],
- "anonymousPaths": AnonymousPaths {
- "basePath": BasePath {
- "basePath": "",
- "get": [Function],
- "prepend": [Function],
- "remove": [Function],
- },
- "paths": Set {},
+ "anonymousPaths": Object {
+ "isAnonymous": [MockFunction],
+ "register": [MockFunction],
},
"basePath": BasePath {
"basePath": "",
diff --git a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
index dcc07f4fd43c5..16b22a164f2f0 100644
--- a/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
+++ b/src/plugins/data/public/ui/query_string_input/query_string_input.tsx
@@ -106,6 +106,7 @@ export class QueryStringInputUI extends Component {
public inputRef: HTMLInputElement | null = null;
private persistedLog: PersistedLog | undefined;
+ private abortController: AbortController | undefined;
private services = this.props.kibana.services;
private componentIsUnmounting = false;
@@ -163,12 +164,22 @@ export class QueryStringInputUI extends Component {
return;
}
- const suggestions: AutocompleteSuggestion[] = await getAutocompleteSuggestions({
- query: queryString,
- selectionStart,
- selectionEnd,
- });
- return [...suggestions, ...recentSearchSuggestions];
+ try {
+ if (this.abortController) this.abortController.abort();
+ this.abortController = new AbortController();
+ const suggestions: AutocompleteSuggestion[] = await getAutocompleteSuggestions({
+ query: queryString,
+ selectionStart,
+ selectionEnd,
+ signal: this.abortController.signal,
+ });
+ return [...suggestions, ...recentSearchSuggestions];
+ } catch (e) {
+ // TODO: Waiting on https://github.com/elastic/kibana/issues/51406 for a properly typed error
+ // Ignore aborted requests
+ if (e.message === 'The user aborted a request.') return;
+ throw e;
+ }
};
private getRecentSearchSuggestions = (query: string) => {
diff --git a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
index d43d14945699e..928cb5a34d6de 100644
--- a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
+++ b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
.kbnSavedQueryManagement__popover {
max-width: $euiFormMaxWidth;
}
diff --git a/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.test.js b/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.test.js
index 88d2d873521cb..d9a284d34de6b 100644
--- a/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.test.js
+++ b/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.test.js
@@ -144,6 +144,13 @@ describe('index_patterns/field_capabilities/field_caps_response', () => {
expect(child).toHaveProperty('subType', { nested: { path: 'nested_object_parent' } });
});
+ it('returns nested sub-fields as non-aggregatable', () => {
+ const fields = readFieldCapsResponse(esResponse);
+ // Normally a keyword field would be aggregatable, but the fact that it is nested overrides that
+ const child = fields.find(f => f.name === 'nested_object_parent.child.keyword');
+ expect(child).toHaveProperty('aggregatable', false);
+ });
+
it('handles fields that are both nested and multi', () => {
const fields = readFieldCapsResponse(esResponse);
const child = fields.find(f => f.name === 'nested_object_parent.child.keyword');
diff --git a/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.ts b/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.ts
index 06eb30db0b24b..2215bd8a95a1d 100644
--- a/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.ts
+++ b/src/plugins/data/server/index_patterns/fetcher/lib/field_capabilities/field_caps_response.ts
@@ -182,6 +182,14 @@ export function readFieldCapsResponse(fieldCapsResponse: FieldCapsResponse): Fie
if (Object.keys(subType).length > 0) {
field.subType = subType;
+
+ // We don't support aggregating on nested fields, trying to do so in the UI will return
+ // blank results. For now we will stop showing nested fields as an option for aggregation.
+ // Once we add support for nested fields this condition should be removed and old index
+ // patterns should be migrated.
+ if (field.subType.nested) {
+ field.aggregatable = false;
+ }
}
}
});
diff --git a/src/plugins/embeddable/public/lib/containers/container.ts b/src/plugins/embeddable/public/lib/containers/container.ts
index bce16747ed48e..71e7cca3552bb 100644
--- a/src/plugins/embeddable/public/lib/containers/container.ts
+++ b/src/plugins/embeddable/public/lib/containers/container.ts
@@ -240,6 +240,7 @@ export abstract class Container<
...this.input.panels,
[panelState.explicitInput.id]: panelState,
},
+ isEmptyState: false,
} as Partial);
return await this.untilEmbeddableLoaded(panelState.explicitInput.id);
diff --git a/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts b/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
index 33cb146a056cb..0197582778940 100644
--- a/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
+++ b/src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts
@@ -28,7 +28,7 @@ export interface EmbeddableInput {
id: string;
lastReloadRequestTime?: number;
hidePanelTitles?: boolean;
-
+ isEmptyState?: boolean;
/**
* List of action IDs that this embeddable should not render.
*/
diff --git a/src/plugins/inspector/public/views/requests/_requests.scss b/src/plugins/inspector/public/views/requests/_requests.scss
index feaef21fc4810..273c9d0ccba2b 100644
--- a/src/plugins/inspector/public/views/requests/_requests.scss
+++ b/src/plugins/inspector/public/views/requests/_requests.scss
@@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/button/variables';
-
.insRequestDetailsStats__icon {
margin-right: $euiSizeS;
}
diff --git a/src/plugins/kibana_utils/README.md b/src/plugins/kibana_utils/README.md
index 61ceea2b18385..5501505dbb7e2 100644
--- a/src/plugins/kibana_utils/README.md
+++ b/src/plugins/kibana_utils/README.md
@@ -2,4 +2,4 @@
Utilities for building Kibana plugins.
-- [Store reactive serializable app state in state containers, `createStore`](./docs/store/README.md).
+- [State containers](./docs/state_containers/README.md).
diff --git a/src/legacy/core_plugins/console/public/quarantined/src/__tests__/utils.js b/src/plugins/kibana_utils/demos/demos.test.ts
similarity index 60%
rename from src/legacy/core_plugins/console/public/quarantined/src/__tests__/utils.js
rename to src/plugins/kibana_utils/demos/demos.test.ts
index fa88e42fa557f..4e792ceef117a 100644
--- a/src/legacy/core_plugins/console/public/quarantined/src/__tests__/utils.js
+++ b/src/plugins/kibana_utils/demos/demos.test.ts
@@ -17,20 +17,20 @@
* under the License.
*/
-import expect from '@kbn/expect';
+import { result as counterResult } from './state_containers/counter';
+import { result as todomvcResult } from './state_containers/todomvc';
-import utils from '../utils';
-
-describe('console utils', () => {
- describe('collapseLiteralStrings', () => {
- it('will collapse multiline strings', () => {
- const multiline = '{ "foo": """bar\nbaz""" }';
- expect(utils.collapseLiteralStrings(multiline)).to.be('{ "foo": "bar\\nbaz" }');
+describe('demos', () => {
+ describe('state containers', () => {
+ test('counter demo works', () => {
+ expect(counterResult).toBe(10);
});
- it('will collapse multiline strings with CRLF endings', () => {
- const multiline = '{ "foo": """bar\r\nbaz""" }';
- expect(utils.collapseLiteralStrings(multiline)).to.be('{ "foo": "bar\\r\\nbaz" }');
+ test('TodoMVC demo works', () => {
+ expect(todomvcResult).toEqual([
+ { id: 0, text: 'Learning state containers', completed: true },
+ { id: 1, text: 'Learning transitions...', completed: true },
+ ]);
});
});
});
diff --git a/src/plugins/kibana_utils/demos/state_containers/counter.ts b/src/plugins/kibana_utils/demos/state_containers/counter.ts
new file mode 100644
index 0000000000000..643763cc4cee9
--- /dev/null
+++ b/src/plugins/kibana_utils/demos/state_containers/counter.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createStateContainer } from '../../public/state_containers';
+
+const container = createStateContainer(0, {
+ increment: (cnt: number) => (by: number) => cnt + by,
+ double: (cnt: number) => () => cnt * 2,
+});
+
+container.transitions.increment(5);
+container.transitions.double();
+
+console.log(container.get()); // eslint-disable-line
+
+export const result = container.get();
diff --git a/src/plugins/kibana_utils/demos/state_containers/todomvc.ts b/src/plugins/kibana_utils/demos/state_containers/todomvc.ts
new file mode 100644
index 0000000000000..6d0c960e2a5b2
--- /dev/null
+++ b/src/plugins/kibana_utils/demos/state_containers/todomvc.ts
@@ -0,0 +1,69 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createStateContainer, PureTransition } from '../../public/state_containers';
+
+export interface TodoItem {
+ text: string;
+ completed: boolean;
+ id: number;
+}
+
+export type TodoState = TodoItem[];
+
+export const defaultState: TodoState = [
+ {
+ id: 0,
+ text: 'Learning state containers',
+ completed: false,
+ },
+];
+
+export interface TodoActions {
+ add: PureTransition;
+ edit: PureTransition;
+ delete: PureTransition;
+ complete: PureTransition;
+ completeAll: PureTransition;
+ clearCompleted: PureTransition;
+}
+
+export const pureTransitions: TodoActions = {
+ add: state => todo => [...state, todo],
+ edit: state => todo => state.map(item => (item.id === todo.id ? { ...item, ...todo } : item)),
+ delete: state => id => state.filter(item => item.id !== id),
+ complete: state => id =>
+ state.map(item => (item.id === id ? { ...item, completed: true } : item)),
+ completeAll: state => () => state.map(item => ({ ...item, completed: true })),
+ clearCompleted: state => () => state.filter(({ completed }) => !completed),
+};
+
+const container = createStateContainer(defaultState, pureTransitions);
+
+container.transitions.add({
+ id: 1,
+ text: 'Learning transitions...',
+ completed: false,
+});
+container.transitions.complete(0);
+container.transitions.complete(1);
+
+console.log(container.get()); // eslint-disable-line
+
+export const result = container.get();
diff --git a/src/plugins/kibana_utils/docs/state_containers/README.md b/src/plugins/kibana_utils/docs/state_containers/README.md
new file mode 100644
index 0000000000000..3b7a8b8bd4621
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/README.md
@@ -0,0 +1,50 @@
+# State containers
+
+State containers are Redux-store-like objects meant to help you manage state in
+your services or apps.
+
+- State containers are strongly typed, you will get TypeScript autocompletion suggestions from
+ your editor when accessing state, executing transitions and using React helpers.
+- State containers can be easily hooked up with your React components.
+- State containers can be used without React, too.
+- State containers provide you central place where to store state, instead of spreading
+ state around multiple RxJs observables, which you need to coordinate. With state
+ container you can always access the latest state snapshot synchronously.
+- Unlike Redux, state containers are less verbose, see example below.
+
+
+## Example
+
+```ts
+import { createStateContainer } from 'src/plugins/kibana_utils';
+
+const container = createStateContainer(0, {
+ increment: (cnt: number) => (by: number) => cnt + by,
+ double: (cnt: number) => () => cnt * 2,
+});
+
+container.transitions.increment(5);
+container.transitions.double();
+console.log(container.get()); // 10
+```
+
+
+## Demos
+
+See demos [here](../../demos/state_containers/).
+
+You can run them with
+
+```
+npx -q ts-node src/plugins/kibana_utils/demos/state_containers/counter.ts
+npx -q ts-node src/plugins/kibana_utils/demos/state_containers/todomvc.ts
+```
+
+
+## Reference
+
+- [Creating a state container](./creation.md).
+- [State transitions](./transitions.md).
+- [Using with React](./react.md).
+- [Using without React`](./no_react.md).
+- [Parallels with Redux](./redux.md).
diff --git a/src/plugins/kibana_utils/docs/store/creation.md b/src/plugins/kibana_utils/docs/state_containers/creation.md
similarity index 54%
rename from src/plugins/kibana_utils/docs/store/creation.md
rename to src/plugins/kibana_utils/docs/state_containers/creation.md
index b0184ad45eb84..66d28bbd8603f 100644
--- a/src/plugins/kibana_utils/docs/store/creation.md
+++ b/src/plugins/kibana_utils/docs/state_containers/creation.md
@@ -17,7 +17,7 @@ interface MyState {
}
```
-Create default state of your *store*.
+Create default state of your container.
```ts
const defaultState: MyState = {
@@ -27,17 +27,12 @@ const defaultState: MyState = {
};
```
-Create your state container, i.e *store*.
+Create your a state container.
```ts
-import { createStore } from 'kibana-utils';
+import { createStateContainer } from 'src/plugins/kibana_utils';
-const store = createStore(defaultState);
-console.log(store.get());
-```
+const container = createStateContainer(defaultState, {});
-> ##### N.B.
->
-> State must always be an object `{}`.
->
-> You cannot create a store out of an array, e.g ~~`createStore([])`~~.
+console.log(container.get());
+```
diff --git a/src/plugins/kibana_utils/docs/store/getters.md b/src/plugins/kibana_utils/docs/state_containers/no_react.md
similarity index 83%
rename from src/plugins/kibana_utils/docs/store/getters.md
rename to src/plugins/kibana_utils/docs/state_containers/no_react.md
index 508d0c6ebc18d..7a15483d83b44 100644
--- a/src/plugins/kibana_utils/docs/store/getters.md
+++ b/src/plugins/kibana_utils/docs/state_containers/no_react.md
@@ -1,4 +1,4 @@
-# Reading state
+# Consuming state in non-React setting
To read the current `state` of the store use `.get()` method.
diff --git a/src/plugins/kibana_utils/docs/state_containers/react.md b/src/plugins/kibana_utils/docs/state_containers/react.md
new file mode 100644
index 0000000000000..363fd9253d44f
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react.md
@@ -0,0 +1,41 @@
+# React
+
+`createStateContainerReactHelpers` factory allows you to easily use state containers with React.
+
+
+## Example
+
+
+```ts
+import { createStateContainer, createStateContainerReactHelpers } from 'src/plugins/kibana_utils';
+
+const container = createStateContainer({}, {});
+export const {
+ Provider,
+ Consumer,
+ context,
+ useContainer,
+ useState,
+ useTransitions,
+ useSelector,
+ connect,
+} = createStateContainerReactHelpers();
+```
+
+Wrap your app with ``.
+
+```tsx
+
+
+
+```
+
+
+## Reference
+
+- [`useContainer()`](./react/use_container.md)
+- [`useState()`](./react/use_state.md)
+- [`useSelector()`](./react/use_selector.md)
+- [`useTransitions()`](./react/use_transitions.md)
+- [`connect()()`](./react/connect.md)
+- [Context](./react/context.md)
diff --git a/src/plugins/kibana_utils/docs/state_containers/react/connect.md b/src/plugins/kibana_utils/docs/state_containers/react/connect.md
new file mode 100644
index 0000000000000..56b7e0fbc5673
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react/connect.md
@@ -0,0 +1,22 @@
+# `connect()()` higher order component
+
+Use `connect()()` higher-order-component to inject props from state into your component.
+
+```tsx
+interface Props {
+ name: string;
+ punctuation: '.' | ',' | '!',
+}
+const Demo: React.FC = ({ name, punctuation }) =>
+ Hello, {name}{punctuation}
;
+
+const store = createStateContainer({ userName: 'John' });
+const { Provider, connect } = createStateContainerReactHelpers(store);
+
+const mapStateToProps = ({ userName }) => ({ name: userName });
+const DemoConnected = connect(mapStateToProps)(Demo);
+
+
+
+
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/react/context.md b/src/plugins/kibana_utils/docs/state_containers/react/context.md
new file mode 100644
index 0000000000000..33f084fdfe9d7
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react/context.md
@@ -0,0 +1,24 @@
+# React context
+
+`createStateContainerReactHelpers` returns `` and `` components
+as well as `context` React context object.
+
+```ts
+export const {
+ Provider,
+ Consumer,
+ context,
+} = createStateContainerReactHelpers();
+```
+
+`` and `` are just regular React context components.
+
+```tsx
+
+
+
{container =>
+ {JSON.stringify(container.get())}
+ }
+
{store.get().isDarkMode ? '🌑' : '☀️'}
;
+};
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/react/use_selector.md b/src/plugins/kibana_utils/docs/state_containers/react/use_selector.md
new file mode 100644
index 0000000000000..2ecf772fba367
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react/use_selector.md
@@ -0,0 +1,20 @@
+# `useSelector()` hook
+
+With `useSelector` React hook you specify a selector function, which will pick specific
+data from the state. *Your component will update only when that specific part of the state changes.*
+
+```tsx
+const selector = state => state.isDarkMode;
+const Demo = () => {
+ const isDarkMode = useSelector(selector);
+ return {isDarkMode ? '🌑' : '☀️'}
;
+};
+```
+
+As an optional second argument for `useSelector` you can provide a `comparator` function, which
+compares currently selected value with the previous and your component will re-render only if
+`comparator` returns `true`. By default it uses [`fast-deep-equal`](https://github.com/epoberezkin/fast-deep-equal).
+
+```
+useSelector(selector, comparator?)
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/react/use_state.md b/src/plugins/kibana_utils/docs/state_containers/react/use_state.md
new file mode 100644
index 0000000000000..5db1d46897aad
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react/use_state.md
@@ -0,0 +1,11 @@
+# `useState()` hook
+
+- `useState` hook returns you directly the state of the container.
+- It also forces component to re-render every time state changes.
+
+```tsx
+const Demo = () => {
+ const { isDarkMode } = useState();
+ return {isDarkMode ? '🌑' : '☀️'}
;
+};
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/react/use_transitions.md b/src/plugins/kibana_utils/docs/state_containers/react/use_transitions.md
new file mode 100644
index 0000000000000..c6783bf0e0f0a
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/react/use_transitions.md
@@ -0,0 +1,17 @@
+# `useTransitions` hook
+
+Access [state transitions](../transitions.md) by `useTransitions` React hook.
+
+```tsx
+const Demo = () => {
+ const { isDarkMode } = useState();
+ const { setDarkMode } = useTransitions();
+ return (
+ <>
+ {isDarkMode ? '🌑' : '☀️'}
+
+
+
+ );
+};
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/redux.md b/src/plugins/kibana_utils/docs/state_containers/redux.md
new file mode 100644
index 0000000000000..1a60d841a8b75
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/redux.md
@@ -0,0 +1,40 @@
+# Redux
+
+State containers similar to Redux stores but without the boilerplate.
+
+State containers expose Redux-like API:
+
+```js
+container.getState()
+container.dispatch()
+container.replaceReducer()
+container.subscribe()
+container.addMiddleware()
+```
+
+State containers have a reducer and every time you execute a state transition it
+actually dispatches an "action". For example, this
+
+```js
+container.transitions.increment(25);
+```
+
+is equivalent to
+
+```js
+container.dispatch({
+ type: 'increment',
+ args: [25],
+});
+```
+
+Because all transitions happen through `.dispatch()` interface, you can add middleware—similar how you
+would do with Redux—to monitor or intercept transitions.
+
+For example, you can add `redux-logger` middleware to log in console all transitions happening with your store.
+
+```js
+import logger from 'redux-logger';
+
+container.addMiddleware(logger);
+```
diff --git a/src/plugins/kibana_utils/docs/state_containers/transitions.md b/src/plugins/kibana_utils/docs/state_containers/transitions.md
new file mode 100644
index 0000000000000..51d52cdf3daaf
--- /dev/null
+++ b/src/plugins/kibana_utils/docs/state_containers/transitions.md
@@ -0,0 +1,61 @@
+# State transitions
+
+*State transitions* describe possible state changes over time. Transitions are pure functions which
+receive `state` object and other—optional—arguments and must return a new `state` object back.
+
+```ts
+type Transition = (state: State) => (...args) => State;
+```
+
+Transitions must not mutate `state` object in-place, instead they must return a
+shallow copy of it, e.g. `{ ...state }`. Example:
+
+```ts
+const setUiMode: PureTransition = state => uiMode => ({ ...state, uiMode });
+```
+
+You provide transitions as a second argument when you create your state container.
+
+```ts
+import { createStateContainer } from 'src/plugins/kibana_utils';
+
+const container = createStateContainer(0, {
+ increment: (cnt: number) => (by: number) => cnt + by,
+ double: (cnt: number) => () => cnt * 2,
+});
+```
+
+Now you can execute the transitions by calling them with only optional parameters (`state` is
+provided to your transitions automatically).
+
+```ts
+container.transitions.increment(25);
+container.transitions.increment(5);
+container.state; // 30
+```
+
+Your transitions are bound to the container so you can treat each of them as a
+standalone function for export.
+
+```ts
+const defaultState = {
+ uiMode: 'light',
+};
+
+const container = createStateContainer(defaultState, {
+ setUiMode: state => uiMode => ({ ...state, uiMode }),
+ resetUiMode: state => () => ({ ...state, uiMode: defaultState.uiMode }),
+});
+
+export const {
+ setUiMode,
+ resetUiMode
+} = container.transitions;
+```
+
+You can add TypeScript annotations for your transitions as the second generic argument
+to `createStateContainer()` function.
+
+```ts
+const container = createStateContainer(defaultState, pureTransitions);
+```
diff --git a/src/plugins/kibana_utils/docs/store/README.md b/src/plugins/kibana_utils/docs/store/README.md
deleted file mode 100644
index e1cb098fe04ce..0000000000000
--- a/src/plugins/kibana_utils/docs/store/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# State containers
-
-- State containers for holding serializable state.
-- [Each plugin/app that needs runtime state will create a *store* using `store = createStore()`](./creation.md).
-- [*Store* can be updated using mutators `mutators = store.createMutators({ ... })`](./mutators.md).
-- [*Store* can be connected to React `{Provider, connect} = createContext(store)`](./react.md).
-- [In no-React setting *store* is consumed using `store.get()` and `store.state$`](./getters.md).
-- [Under-the-hood uses Redux `store.redux`](./redux.md) (but you should never need it explicitly).
-- [See idea doc with samples and rationale](https://docs.google.com/document/d/18eitHkcyKSsEHUfUIqFKChc8Pp62Z4gcRxdu903hbA0/edit#heading=h.iaxc9whxifl5).
diff --git a/src/plugins/kibana_utils/docs/store/mutators.md b/src/plugins/kibana_utils/docs/store/mutators.md
deleted file mode 100644
index 9db1b1bb60b3c..0000000000000
--- a/src/plugins/kibana_utils/docs/store/mutators.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# Mutators
-
-State *mutators* are pure functions which receive `state` object and other—optional—arguments
-and must return a new `state` object back.
-
-```ts
-type Mutator = (state: State) => (...args) => State;
-```
-
-Mutator must not mutate `state` object in-place, instead it should return a
-shallow copy of it, e.g. `{ ...state }`.
-
-```ts
-const setUiMode: Mutator = state => uiMode => ({ ...state, uiMode });
-```
-
-You create mutators using `.createMutator(...)` method.
-
-```ts
-const store = createStore({uiMode: 'light'});
-const mutators = store.createMutators({
- setUiMode: state => uiMode => ({ ...state, uiMode }),
-});
-```
-
-Now you can use your mutators by calling them with only optional parameters (`state` is
-provided to your mutator automatically).
-
-```ts
-mutators.setUiMode('dark');
-```
-
-Your mutators are bound to the `store` so you can treat each of them as a
-standalone function for export.
-
-```ts
-const { setUiMode, resetUiMode } = store.createMutators({
- setUiMode: state => uiMode => ({ ...state, uiMode }),
- resetUiMode: state => () => ({ ...state, uiMode: 'light' }),
-});
-
-export {
- setUiMode,
- resetUiMode,
-};
-```
-
-The mutators you create are also available on the `store` object.
-
-```ts
-const store = createStore({ cnt: 0 });
-store.createMutators({
- add: state => value => ({ ...state, cnt: state.cnt + value }),
-});
-
-store.mutators.add(5);
-store.get(); // { cnt: 5 }
-```
-
-You can add TypeScript annotations to your `.mutators` property of `store` object.
-
-```ts
-const store = createStore<{
- cnt: number;
-}, {
- add: (value: number) => void;
-}>({
- cnt: 0
-});
-```
diff --git a/src/plugins/kibana_utils/docs/store/react.md b/src/plugins/kibana_utils/docs/store/react.md
deleted file mode 100644
index 68a016ed6d3ca..0000000000000
--- a/src/plugins/kibana_utils/docs/store/react.md
+++ /dev/null
@@ -1,101 +0,0 @@
-# React
-
-`createContext` factory allows you to easily use state containers with React.
-
-```ts
-import { createStore, createContext } from 'kibana-utils';
-
-const store = createStore({});
-const {
- Provider,
- Consumer,
- connect,
- context,
- useStore,
- useState,
- useMutators,
- useSelector,
-} = createContext(store);
-```
-
-Wrap your app with ``.
-
-```tsx
-
-
-
-```
-
-Use `connect()()` higer-order-component to inject props from state into your component.
-
-```tsx
-interface Props {
- name: string;
- punctuation: '.' | ',' | '!',
-}
-const Demo: React.FC = ({ name, punctuation }) =>
- Hello, {name}{punctuation}
;
-
-const store = createStore({ userName: 'John' });
-const { Provider, connect } = createContext(store);
-
-const mapStateToProps = ({ userName }) => ({ name: userName });
-const DemoConnected = connect(mapStateToProps)(Demo);
-
-
-
-
-```
-
-`useStore` React hook will fetch the `store` object from the context.
-
-```tsx
-const Demo = () => {
- const store = useStore();
- return {store.get().isDarkMode ? '🌑' : '☀️'}
;
-};
-```
-
-If you want your component to always re-render when the state changes use `useState` React hook.
-
-```tsx
-const Demo = () => {
- const { isDarkMode } = useState();
- return {isDarkMode ? '🌑' : '☀️'}
;
-};
-```
-
-For `useSelector` React hook you specify a selector function, which will pick specific
-data from the state. *Your component will update only when that specific part of the state changes.*
-
-```tsx
-const selector = state => state.isDarkMode;
-const Demo = () => {
- const isDarkMode = useSelector(selector);
- return {isDarkMode ? '🌑' : '☀️'}
;
-};
-```
-
-As an optional second argument for `useSelector` you can provide a `comparator` function, which
-compares currently selected value with the previous and your component will re-render only if
-`comparator` returns `true`. By default, it simply uses tripple equals `===` comparison.
-
-```
-useSelector(selector, comparator?)
-```
-
-Access state mutators by `useMutators` React hook.
-
-```tsx
-const Demo = () => {
- const { isDarkMode } = useState();
- const { setDarkMode } = useMutators();
- return (
- <>
- {isDarkMode ? '🌑' : '☀️'}
-
-
-
- );
-};
-```
diff --git a/src/plugins/kibana_utils/docs/store/redux.md b/src/plugins/kibana_utils/docs/store/redux.md
deleted file mode 100644
index 23be76f35b36e..0000000000000
--- a/src/plugins/kibana_utils/docs/store/redux.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Redux
-
-Internally `createStore()` uses Redux to manage the state. When you call `store.get()`
-it is actually calling the Redux `.getState()` method. When you execute a mutation
-it is actually dispatching a Redux action.
-
-You can access Redux *store* using `.redux`.
-
-```ts
-store.redux;
-```
-
-But you should never need it, if you think you do, consult with Kibana App Architecture team.
-
-We use Redux internally for 3 main reasons:
-
-- We can reuse `react-redux` library to easily connect state containers to React.
-- We can reuse Redux devtools.
-- We can reuse battle-tested Redux library and action/reducer paradigm.
diff --git a/src/plugins/kibana_utils/public/index.test.ts b/src/plugins/kibana_utils/public/index.test.ts
index 0e2a4acf15f04..27c4d6c1c06e9 100644
--- a/src/plugins/kibana_utils/public/index.test.ts
+++ b/src/plugins/kibana_utils/public/index.test.ts
@@ -17,9 +17,9 @@
* under the License.
*/
-import { createStore, createContext } from '.';
+import { createStateContainer, createStateContainerReactHelpers } from '.';
test('exports store methods', () => {
- expect(typeof createStore).toBe('function');
- expect(typeof createContext).toBe('function');
+ expect(typeof createStateContainer).toBe('function');
+ expect(typeof createStateContainerReactHelpers).toBe('function');
});
diff --git a/src/plugins/kibana_utils/public/index.ts b/src/plugins/kibana_utils/public/index.ts
index 22ac720246d4b..3f5aeebac54d8 100644
--- a/src/plugins/kibana_utils/public/index.ts
+++ b/src/plugins/kibana_utils/public/index.ts
@@ -19,12 +19,13 @@
export * from './core';
export * from './errors';
-export * from './store';
-export * from './parse';
-export * from './resize_checker';
-export * from './render_complete';
-export * from './store';
export * from './errors';
export * from './field_mapping';
+export * from './parse';
+export * from './render_complete';
+export * from './resize_checker';
+export * from './state_containers';
export * from './storage';
export * from './storage/hashed_item_store';
+export * from './state_management/state_hash';
+export * from './state_management/url';
diff --git a/src/plugins/kibana_utils/public/state_containers/create_state_container.test.ts b/src/plugins/kibana_utils/public/state_containers/create_state_container.test.ts
new file mode 100644
index 0000000000000..9165181299a90
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_containers/create_state_container.test.ts
@@ -0,0 +1,303 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createStateContainer } from './create_state_container';
+
+const create = (state: S, transitions: T = {} as T) => {
+ const pureTransitions = {
+ set: () => (newState: S) => newState,
+ ...transitions,
+ };
+ const store = createStateContainer(state, pureTransitions);
+ return { store, mutators: store.transitions };
+};
+
+test('can create store', () => {
+ const { store } = create({});
+ expect(store).toMatchObject({
+ getState: expect.any(Function),
+ state$: expect.any(Object),
+ transitions: expect.any(Object),
+ dispatch: expect.any(Function),
+ subscribe: expect.any(Function),
+ replaceReducer: expect.any(Function),
+ addMiddleware: expect.any(Function),
+ });
+});
+
+test('can set default state', () => {
+ const defaultState = {
+ foo: 'bar',
+ };
+ const { store } = create(defaultState);
+ expect(store.get()).toEqual(defaultState);
+ expect(store.getState()).toEqual(defaultState);
+});
+
+test('can set state', () => {
+ const defaultState = {
+ foo: 'bar',
+ };
+ const newState = {
+ foo: 'baz',
+ };
+ const { store, mutators } = create(defaultState);
+
+ mutators.set(newState);
+
+ expect(store.get()).toEqual(newState);
+ expect(store.getState()).toEqual(newState);
+});
+
+test('does not shallow merge states', () => {
+ const defaultState = {
+ foo: 'bar',
+ };
+ const newState = {
+ foo2: 'baz',
+ };
+ const { store, mutators } = create(defaultState);
+
+ mutators.set(newState as any);
+
+ expect(store.get()).toEqual(newState);
+ expect(store.getState()).toEqual(newState);
+});
+
+test('can subscribe and unsubscribe to state changes', () => {
+ const { store, mutators } = create({});
+ const spy = jest.fn();
+ const subscription = store.state$.subscribe(spy);
+ mutators.set({ a: 1 });
+ mutators.set({ a: 2 });
+ subscription.unsubscribe();
+ mutators.set({ a: 3 });
+
+ expect(spy).toHaveBeenCalledTimes(2);
+ expect(spy.mock.calls[0][0]).toEqual({ a: 1 });
+ expect(spy.mock.calls[1][0]).toEqual({ a: 2 });
+});
+
+test('multiple subscribers can subscribe', () => {
+ const { store, mutators } = create({});
+ const spy1 = jest.fn();
+ const spy2 = jest.fn();
+ const subscription1 = store.state$.subscribe(spy1);
+ const subscription2 = store.state$.subscribe(spy2);
+ mutators.set({ a: 1 });
+ subscription1.unsubscribe();
+ mutators.set({ a: 2 });
+ subscription2.unsubscribe();
+ mutators.set({ a: 3 });
+
+ expect(spy1).toHaveBeenCalledTimes(1);
+ expect(spy2).toHaveBeenCalledTimes(2);
+ expect(spy1.mock.calls[0][0]).toEqual({ a: 1 });
+ expect(spy2.mock.calls[0][0]).toEqual({ a: 1 });
+ expect(spy2.mock.calls[1][0]).toEqual({ a: 2 });
+});
+
+test('creates impure mutators from pure mutators', () => {
+ const { mutators } = create(
+ {},
+ {
+ setFoo: () => (bar: any) => ({ foo: bar }),
+ }
+ );
+
+ expect(typeof mutators.setFoo).toBe('function');
+});
+
+test('mutators can update state', () => {
+ const { store, mutators } = create(
+ {
+ value: 0,
+ foo: 'bar',
+ },
+ {
+ add: (state: any) => (increment: any) => ({ ...state, value: state.value + increment }),
+ setFoo: (state: any) => (bar: any) => ({ ...state, foo: bar }),
+ }
+ );
+
+ expect(store.get()).toEqual({
+ value: 0,
+ foo: 'bar',
+ });
+
+ mutators.add(11);
+ mutators.setFoo('baz');
+
+ expect(store.get()).toEqual({
+ value: 11,
+ foo: 'baz',
+ });
+
+ mutators.add(-20);
+ mutators.setFoo('bazooka');
+
+ expect(store.get()).toEqual({
+ value: -9,
+ foo: 'bazooka',
+ });
+});
+
+test('mutators methods are not bound', () => {
+ const { store, mutators } = create(
+ { value: -3 },
+ {
+ add: (state: { value: number }) => (increment: number) => ({
+ ...state,
+ value: state.value + increment,
+ }),
+ }
+ );
+
+ expect(store.get()).toEqual({ value: -3 });
+ mutators.add(4);
+ expect(store.get()).toEqual({ value: 1 });
+});
+
+test('created mutators are saved in store object', () => {
+ const { store, mutators } = create(
+ { value: -3 },
+ {
+ add: (state: { value: number }) => (increment: number) => ({
+ ...state,
+ value: state.value + increment,
+ }),
+ }
+ );
+
+ expect(typeof store.transitions.add).toBe('function');
+ mutators.add(5);
+ expect(store.get()).toEqual({ value: 2 });
+});
+
+test('throws when state is modified inline - 1', () => {
+ const container = createStateContainer({ a: 'b' }, {});
+
+ let error: TypeError | null = null;
+ try {
+ (container.get().a as any) = 'c';
+ } catch (err) {
+ error = err;
+ }
+
+ expect(error).toBeInstanceOf(TypeError);
+});
+
+test('throws when state is modified inline - 2', () => {
+ const container = createStateContainer({ a: 'b' }, {});
+
+ let error: TypeError | null = null;
+ try {
+ (container.getState().a as any) = 'c';
+ } catch (err) {
+ error = err;
+ }
+
+ expect(error).toBeInstanceOf(TypeError);
+});
+
+test('throws when state is modified inline in subscription', done => {
+ const container = createStateContainer({ a: 'b' }, { set: () => (newState: any) => newState });
+
+ container.subscribe(value => {
+ let error: TypeError | null = null;
+ try {
+ (value.a as any) = 'd';
+ } catch (err) {
+ error = err;
+ }
+ expect(error).toBeInstanceOf(TypeError);
+ done();
+ });
+ container.transitions.set({ a: 'c' });
+});
+
+describe('selectors', () => {
+ test('can specify no selectors, or can skip them', () => {
+ createStateContainer({}, {});
+ createStateContainer({}, {}, {});
+ });
+
+ test('selector object is available on .selectors key', () => {
+ const container1 = createStateContainer({}, {}, {});
+ const container2 = createStateContainer({}, {}, { foo: () => () => 123 });
+ const container3 = createStateContainer({}, {}, { bar: () => () => 1, baz: () => () => 1 });
+
+ expect(Object.keys(container1.selectors).sort()).toEqual([]);
+ expect(Object.keys(container2.selectors).sort()).toEqual(['foo']);
+ expect(Object.keys(container3.selectors).sort()).toEqual(['bar', 'baz']);
+ });
+
+ test('selector without arguments returns correct state slice', () => {
+ const container = createStateContainer(
+ { name: 'Oleg' },
+ {
+ changeName: (state: { name: string }) => (name: string) => ({ ...state, name }),
+ },
+ { getName: (state: { name: string }) => () => state.name }
+ );
+
+ expect(container.selectors.getName()).toBe('Oleg');
+ container.transitions.changeName('Britney');
+ expect(container.selectors.getName()).toBe('Britney');
+ });
+
+ test('selector can accept an argument', () => {
+ const container = createStateContainer(
+ {
+ users: {
+ 1: {
+ name: 'Darth',
+ },
+ },
+ },
+ {},
+ {
+ getUser: (state: any) => (id: number) => state.users[id],
+ }
+ );
+
+ expect(container.selectors.getUser(1)).toEqual({ name: 'Darth' });
+ expect(container.selectors.getUser(2)).toBe(undefined);
+ });
+
+ test('selector can accept multiple arguments', () => {
+ const container = createStateContainer(
+ {
+ users: {
+ 5: {
+ name: 'Darth',
+ surname: 'Vader',
+ },
+ },
+ },
+ {},
+ {
+ getName: (state: any) => (id: number, which: 'name' | 'surname') => state.users[id][which],
+ }
+ );
+
+ expect(container.selectors.getName(5, 'name')).toEqual('Darth');
+ expect(container.selectors.getName(5, 'surname')).toEqual('Vader');
+ });
+});
diff --git a/src/plugins/kibana_utils/public/state_containers/create_state_container.ts b/src/plugins/kibana_utils/public/state_containers/create_state_container.ts
new file mode 100644
index 0000000000000..1ef4a1c012817
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_containers/create_state_container.ts
@@ -0,0 +1,89 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BehaviorSubject } from 'rxjs';
+import { skip } from 'rxjs/operators';
+import { RecursiveReadonly } from '@kbn/utility-types';
+import {
+ PureTransitionsToTransitions,
+ PureTransition,
+ ReduxLikeStateContainer,
+ PureSelectorsToSelectors,
+} from './types';
+
+const $$observable = (typeof Symbol === 'function' && (Symbol as any).observable) || '@@observable';
+
+const freeze: (value: T) => RecursiveReadonly =
+ process.env.NODE_ENV !== 'production'
+ ? (value: T): RecursiveReadonly => {
+ if (!value) return value as RecursiveReadonly;
+ if (value instanceof Array) return value as RecursiveReadonly;
+ if (typeof value === 'object') return Object.freeze({ ...value }) as RecursiveReadonly;
+ else return value as RecursiveReadonly;
+ }
+ : (value: T) => value as RecursiveReadonly;
+
+export const createStateContainer = <
+ State,
+ PureTransitions extends object,
+ PureSelectors extends object = {}
+>(
+ defaultState: State,
+ pureTransitions: PureTransitions,
+ pureSelectors: PureSelectors = {} as PureSelectors
+): ReduxLikeStateContainer => {
+ const data$ = new BehaviorSubject>(freeze(defaultState));
+ const state$ = data$.pipe(skip(1));
+ const get = () => data$.getValue();
+ const container: ReduxLikeStateContainer = {
+ get,
+ state$,
+ getState: () => data$.getValue(),
+ set: (state: State) => {
+ data$.next(freeze(state));
+ },
+ reducer: (state, action) => {
+ const pureTransition = (pureTransitions as Record>)[
+ action.type
+ ];
+ return pureTransition ? freeze(pureTransition(state)(...action.args)) : state;
+ },
+ replaceReducer: nextReducer => (container.reducer = nextReducer),
+ dispatch: action => data$.next(container.reducer(get(), action)),
+ transitions: Object.keys(pureTransitions).reduce>(
+ (acc, type) => ({ ...acc, [type]: (...args: any) => container.dispatch({ type, args }) }),
+ {} as PureTransitionsToTransitions
+ ),
+ selectors: Object.keys(pureSelectors).reduce>(
+ (acc, selector) => ({
+ ...acc,
+ [selector]: (...args: any) => (pureSelectors as any)[selector](get())(...args),
+ }),
+ {} as PureSelectorsToSelectors
+ ),
+ addMiddleware: middleware =>
+ (container.dispatch = middleware(container as any)(container.dispatch)),
+ subscribe: (listener: (state: RecursiveReadonly) => void) => {
+ const subscription = state$.subscribe(listener);
+ return () => subscription.unsubscribe();
+ },
+ [$$observable]: state$,
+ };
+ return container;
+};
diff --git a/src/plugins/kibana_utils/public/store/react.test.tsx b/src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.test.tsx
similarity index 65%
rename from src/plugins/kibana_utils/public/store/react.test.tsx
rename to src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.test.tsx
index e629e9d0e1257..8f5810f3e147d 100644
--- a/src/plugins/kibana_utils/public/store/react.test.tsx
+++ b/src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.test.tsx
@@ -20,8 +20,17 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { act, Simulate } from 'react-dom/test-utils';
-import { createStore } from './create_store';
-import { createContext } from './react';
+import { createStateContainer } from './create_state_container';
+import { createStateContainerReactHelpers } from './create_state_container_react_helpers';
+
+const create = (state: S, transitions: T = {} as T) => {
+ const pureTransitions = {
+ set: () => (newState: S) => newState,
+ ...transitions,
+ };
+ const store = createStateContainer(state, pureTransitions);
+ return { store, mutators: store.transitions };
+};
let container: HTMLDivElement | null;
@@ -36,27 +45,23 @@ afterEach(() => {
});
test('can create React context', () => {
- const store = createStore({ foo: 'bar' });
- const context = createContext(store);
+ const context = createStateContainerReactHelpers();
expect(context).toMatchObject({
- Provider: expect.any(Function),
- Consumer: expect.any(Function),
+ Provider: expect.any(Object),
+ Consumer: expect.any(Object),
connect: expect.any(Function),
- context: {
- Provider: expect.any(Object),
- Consumer: expect.any(Object),
- },
+ context: expect.any(Object),
});
});
test(' passes state to ', () => {
- const store = createStore({ hello: 'world' });
- const { Provider, Consumer } = createContext(store);
+ const { store } = create({ hello: 'world' });
+ const { Provider, Consumer } = createStateContainerReactHelpers();
ReactDOM.render(
-
- {({ hello }) => hello}
+
+ {(s: typeof store) => s.get().hello}
,
container
);
@@ -74,8 +79,8 @@ interface Props1 {
}
test(' passes state to connect()()', () => {
- const store = createStore({ hello: 'Bob' });
- const { Provider, connect } = createContext(store);
+ const { store } = create({ hello: 'Bob' });
+ const { Provider, connect } = createStateContainerReactHelpers();
const Demo: React.FC = ({ message, stop }) => (
<>
@@ -87,7 +92,7 @@ test(' passes state to connect()()', () => {
const DemoConnected = connect(mergeProps)(Demo);
ReactDOM.render(
-
+
,
container
@@ -97,13 +102,13 @@ test(' passes state to connect()()', () => {
});
test('context receives Redux store', () => {
- const store = createStore({ foo: 'bar' });
- const { Provider, context } = createContext(store);
+ const { store } = create({ foo: 'bar' });
+ const { Provider, context } = createStateContainerReactHelpers();
ReactDOM.render(
/* eslint-disable no-shadow */
-
- {({ store }) => store.getState().foo}
+
+ {store => store.get().foo}
,
/* eslint-enable no-shadow */
container
@@ -117,16 +122,16 @@ xtest('can use multiple stores in one React app', () => {});
describe('hooks', () => {
describe('useStore', () => {
test('can select store using useStore hook', () => {
- const store = createStore({ foo: 'bar' });
- const { Provider, useStore } = createContext(store);
+ const { store } = create({ foo: 'bar' });
+ const { Provider, useContainer } = createStateContainerReactHelpers();
const Demo: React.FC<{}> = () => {
// eslint-disable-next-line no-shadow
- const store = useStore();
+ const store = useContainer();
return <>{store.get().foo};
};
ReactDOM.render(
-
+
,
container
@@ -138,15 +143,15 @@ describe('hooks', () => {
describe('useState', () => {
test('can select state using useState hook', () => {
- const store = createStore({ foo: 'qux' });
- const { Provider, useState } = createContext(store);
+ const { store } = create({ foo: 'qux' });
+ const { Provider, useState } = createStateContainerReactHelpers();
const Demo: React.FC<{}> = () => {
const { foo } = useState();
return <>{foo};
};
ReactDOM.render(
-
+
,
container
@@ -156,18 +161,23 @@ describe('hooks', () => {
});
test('re-renders when state changes', () => {
- const store = createStore({ foo: 'bar' });
- const { setFoo } = store.createMutators({
- setFoo: state => foo => ({ ...state, foo }),
- });
- const { Provider, useState } = createContext(store);
+ const {
+ store,
+ mutators: { setFoo },
+ } = create(
+ { foo: 'bar' },
+ {
+ setFoo: (state: { foo: string }) => (foo: string) => ({ ...state, foo }),
+ }
+ );
+ const { Provider, useState } = createStateContainerReactHelpers();
const Demo: React.FC<{}> = () => {
const { foo } = useState();
return <>{foo};
};
ReactDOM.render(
-
+
,
container
@@ -181,26 +191,31 @@ describe('hooks', () => {
});
});
- describe('useMutations', () => {
- test('useMutations hook returns mutations that can update state', () => {
- const store = createStore<
+ describe('useTransitions', () => {
+ test('useTransitions hook returns mutations that can update state', () => {
+ const { store } = create<
{
cnt: number;
},
+ any
+ >(
{
- increment: (value: number) => void;
+ cnt: 0,
+ },
+ {
+ increment: (state: { cnt: number }) => (value: number) => ({
+ ...state,
+ cnt: state.cnt + value,
+ }),
}
- >({
- cnt: 0,
- });
- store.createMutators({
- increment: state => value => ({ ...state, cnt: state.cnt + value }),
- });
+ );
- const { Provider, useState, useMutators } = createContext(store);
+ const { Provider, useState, useTransitions } = createStateContainerReactHelpers<
+ typeof store
+ >();
const Demo: React.FC<{}> = () => {
const { cnt } = useState();
- const { increment } = useMutators();
+ const { increment } = useTransitions();
return (
<>
{cnt}
@@ -210,7 +225,7 @@ describe('hooks', () => {
};
ReactDOM.render(
-
+
,
container
@@ -230,7 +245,7 @@ describe('hooks', () => {
describe('useSelector', () => {
test('can select deeply nested value', () => {
- const store = createStore({
+ const { store } = create({
foo: {
bar: {
baz: 'qux',
@@ -238,14 +253,14 @@ describe('hooks', () => {
},
});
const selector = (state: { foo: { bar: { baz: string } } }) => state.foo.bar.baz;
- const { Provider, useSelector } = createContext(store);
+ const { Provider, useSelector } = createStateContainerReactHelpers();
const Demo: React.FC<{}> = () => {
const value = useSelector(selector);
return <>{value};
};
ReactDOM.render(
-
+
,
container
@@ -255,7 +270,7 @@ describe('hooks', () => {
});
test('re-renders when state changes', () => {
- const store = createStore({
+ const { store, mutators } = create({
foo: {
bar: {
baz: 'qux',
@@ -263,14 +278,14 @@ describe('hooks', () => {
},
});
const selector = (state: { foo: { bar: { baz: string } } }) => state.foo.bar.baz;
- const { Provider, useSelector } = createContext(store);
+ const { Provider, useSelector } = createStateContainerReactHelpers();
const Demo: React.FC<{}> = () => {
const value = useSelector(selector);
return <>{value};
};
ReactDOM.render(
-
+
,
container
@@ -278,7 +293,7 @@ describe('hooks', () => {
expect(container!.innerHTML).toBe('qux');
act(() => {
- store.set({
+ mutators.set({
foo: {
bar: {
baz: 'quux',
@@ -290,9 +305,9 @@ describe('hooks', () => {
});
test("re-renders only when selector's result changes", async () => {
- const store = createStore({ a: 'b', foo: 'bar' });
+ const { store, mutators } = create({ a: 'b', foo: 'bar' });
const selector = (state: { foo: string }) => state.foo;
- const { Provider, useSelector } = createContext(store);
+ const { Provider, useSelector } = createStateContainerReactHelpers();
let cnt = 0;
const Demo: React.FC<{}> = () => {
@@ -301,7 +316,7 @@ describe('hooks', () => {
return <>{value};
};
ReactDOM.render(
-
+
,
container
@@ -311,24 +326,24 @@ describe('hooks', () => {
expect(cnt).toBe(1);
act(() => {
- store.set({ a: 'c', foo: 'bar' });
+ mutators.set({ a: 'c', foo: 'bar' });
});
await new Promise(r => setTimeout(r, 1));
expect(cnt).toBe(1);
act(() => {
- store.set({ a: 'd', foo: 'bar 2' });
+ mutators.set({ a: 'd', foo: 'bar 2' });
});
await new Promise(r => setTimeout(r, 1));
expect(cnt).toBe(2);
});
- test('re-renders on same shape object', async () => {
- const store = createStore({ foo: { bar: 'baz' } });
+ test('does not re-render on same shape object', async () => {
+ const { store, mutators } = create({ foo: { bar: 'baz' } });
const selector = (state: { foo: any }) => state.foo;
- const { Provider, useSelector } = createContext(store);
+ const { Provider, useSelector } = createStateContainerReactHelpers();
let cnt = 0;
const Demo: React.FC<{}> = () => {
@@ -337,7 +352,7 @@ describe('hooks', () => {
return <>{JSON.stringify(value)};
};
ReactDOM.render(
-
+
,
container
@@ -347,7 +362,14 @@ describe('hooks', () => {
expect(cnt).toBe(1);
act(() => {
- store.set({ foo: { bar: 'baz' } });
+ mutators.set({ foo: { bar: 'baz' } });
+ });
+
+ await new Promise(r => setTimeout(r, 1));
+ expect(cnt).toBe(1);
+
+ act(() => {
+ mutators.set({ foo: { bar: 'qux' } });
});
await new Promise(r => setTimeout(r, 1));
@@ -355,10 +377,15 @@ describe('hooks', () => {
});
test('can set custom comparator function to prevent re-renders on deep equality', async () => {
- const store = createStore({ foo: { bar: 'baz' } });
+ const { store, mutators } = create(
+ { foo: { bar: 'baz' } },
+ {
+ set: () => (newState: { foo: { bar: string } }) => newState,
+ }
+ );
const selector = (state: { foo: any }) => state.foo;
const comparator = (prev: any, curr: any) => JSON.stringify(prev) === JSON.stringify(curr);
- const { Provider, useSelector } = createContext(store);
+ const { Provider, useSelector } = createStateContainerReactHelpers();
let cnt = 0;
const Demo: React.FC<{}> = () => {
@@ -367,7 +394,7 @@ describe('hooks', () => {
return <>{JSON.stringify(value)};
};
ReactDOM.render(
-
+
,
container
@@ -377,7 +404,7 @@ describe('hooks', () => {
expect(cnt).toBe(1);
act(() => {
- store.set({ foo: { bar: 'baz' } });
+ mutators.set({ foo: { bar: 'baz' } });
});
await new Promise(r => setTimeout(r, 1));
diff --git a/src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.ts b/src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.ts
new file mode 100644
index 0000000000000..e94165cc48376
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_containers/create_state_container_react_helpers.ts
@@ -0,0 +1,77 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import defaultComparator from 'fast-deep-equal';
+import { Comparator, Connect, StateContainer, UnboxState } from './types';
+
+const { useContext, useLayoutEffect, useRef, createElement: h } = React;
+
+export const createStateContainerReactHelpers = >() => {
+ const context = React.createContext(null as any);
+
+ const useContainer = (): Container => useContext(context);
+
+ const useState = (): UnboxState => {
+ const { state$, get } = useContainer();
+ const value = useObservable(state$, get());
+ return value;
+ };
+
+ const useTransitions = () => useContainer().transitions;
+
+ const useSelector = (
+ selector: (state: UnboxState) => Result,
+ comparator: Comparator = defaultComparator
+ ): Result => {
+ const { state$, get } = useContainer();
+ const lastValueRef = useRef(get());
+ const [value, setValue] = React.useState(() => {
+ const newValue = selector(get());
+ lastValueRef.current = newValue;
+ return newValue;
+ });
+ useLayoutEffect(() => {
+ const subscription = state$.subscribe((currentState: UnboxState) => {
+ const newValue = selector(currentState);
+ if (!comparator(lastValueRef.current, newValue)) {
+ lastValueRef.current = newValue;
+ setValue(newValue);
+ }
+ });
+ return () => subscription.unsubscribe();
+ }, [state$, comparator]);
+ return value;
+ };
+
+ const connect: Connect> = mapStateToProp => component => props =>
+ h(component, { ...useSelector(mapStateToProp), ...props } as any);
+
+ return {
+ Provider: context.Provider,
+ Consumer: context.Consumer,
+ context,
+ useContainer,
+ useState,
+ useTransitions,
+ useSelector,
+ connect,
+ };
+};
diff --git a/src/plugins/kibana_utils/public/state_containers/index.ts b/src/plugins/kibana_utils/public/state_containers/index.ts
new file mode 100644
index 0000000000000..43e204ecb79f7
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_containers/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './types';
+export * from './create_state_container';
+export * from './create_state_container_react_helpers';
diff --git a/src/plugins/kibana_utils/public/state_containers/types.ts b/src/plugins/kibana_utils/public/state_containers/types.ts
new file mode 100644
index 0000000000000..e0a1a18972635
--- /dev/null
+++ b/src/plugins/kibana_utils/public/state_containers/types.ts
@@ -0,0 +1,99 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Observable } from 'rxjs';
+import { Ensure, RecursiveReadonly } from '@kbn/utility-types';
+
+export interface TransitionDescription {
+ type: Type;
+ args: Args;
+}
+export type Transition = (...args: Args) => State;
+export type PureTransition = (
+ state: RecursiveReadonly
+) => Transition;
+export type EnsurePureTransition = Ensure>;
+export type PureTransitionToTransition> = ReturnType;
+export type PureTransitionsToTransitions = {
+ [K in keyof T]: PureTransitionToTransition>;
+};
+
+export interface BaseStateContainer {
+ get: () => RecursiveReadonly;
+ set: (state: State) => void;
+ state$: Observable>;
+}
+
+export interface StateContainer<
+ State,
+ PureTransitions extends object,
+ PureSelectors extends object = {}
+> extends BaseStateContainer {
+ transitions: Readonly>;
+ selectors: Readonly>;
+}
+
+export interface ReduxLikeStateContainer<
+ State,
+ PureTransitions extends object,
+ PureSelectors extends object = {}
+> extends StateContainer {
+ getState: () => RecursiveReadonly;
+ reducer: Reducer>;
+ replaceReducer: (nextReducer: Reducer>) => void;
+ dispatch: (action: TransitionDescription) => void;
+ addMiddleware: (middleware: Middleware>) => void;
+ subscribe: (listener: (state: RecursiveReadonly) => void) => () => void;
+}
+
+export type Dispatch = (action: T) => void;
+
+export type Middleware = (
+ store: Pick, 'getState' | 'dispatch'>
+) => (
+ next: (action: TransitionDescription) => TransitionDescription | any
+) => Dispatch;
+
+export type Reducer = (state: State, action: TransitionDescription) => State;
+
+export type UnboxState<
+ Container extends StateContainer
+> = Container extends StateContainer ? T : never;
+export type UnboxTransitions<
+ Container extends StateContainer
+> = Container extends StateContainer ? T : never;
+
+export type Selector = (...args: Args) => Result;
+export type PureSelector = (
+ state: State
+) => Selector;
+export type EnsurePureSelector = Ensure>;
+export type PureSelectorToSelector