Skip to content

Commit

Permalink
[Maps] add type icons to SingleFieldSelect component (#56313)
Browse files Browse the repository at this point in the history 
* [Maps] add type icons to SingleFieldSelect component

* clean up

* update jest snapshot
  • Loading branch information
@nreese
nreese authored Jan 29, 2020
1 parent 18ddf0b commit 2f9c41b
Show file tree
Hide file tree
Showing 7 changed files with 67 additions and 98 deletions.
74 changes: 27 additions & 47 deletions x-pack/legacy/plugins/maps/public/components/single_field_select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,50 @@ import _ from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';

import { EuiComboBox } from '@elastic/eui';
import { EuiComboBox, EuiHighlight } from '@elastic/eui';
import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public';

const sortByLabel = (a, b) => {
if (a.label < b.label) return -1;
if (a.label > b.label) return 1;
return 0;
};

// Creates grouped options by grouping fields by field type
export const getGroupedFieldOptions = (fields, filterField) => {
function fieldsToOptions(fields) {
if (!fields) {
return;
return [];
}

const fieldsByTypeMap = new Map();

fields.filter(filterField).forEach(field => {
const fieldLabel = 'label' in field ? field.label : field.name;
if (fieldsByTypeMap.has(field.type)) {
const fieldsList = fieldsByTypeMap.get(field.type);
fieldsList.push({ value: field.name, label: fieldLabel });
fieldsByTypeMap.set(field.type, fieldsList);
} else {
fieldsByTypeMap.set(field.type, [{ value: field.name, label: fieldLabel }]);
}
});

const groupedFieldOptions = [];
fieldsByTypeMap.forEach((fieldsList, fieldType) => {
const sortedOptions = fieldsList.sort(sortByLabel).map(({ value, label }) => {
return { value: value, label: label };
return fields
.map(field => {
return {
value: field,
label: 'label' in field ? field.label : field.name,
};
})
.sort((a, b) => {
return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
});
}

groupedFieldOptions.push({
label: fieldType,
options: sortedOptions,
});
});

groupedFieldOptions.sort(sortByLabel);

return groupedFieldOptions;
};
function renderOption(option, searchValue, contentClassName) {
return (
<span className={contentClassName}>
<FieldIcon type={option.value.type} size="m" useColor />
&nbsp;
<EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
</span>
);
}

export function SingleFieldSelect({ fields, filterField, onChange, value, placeholder, ...rest }) {
export function SingleFieldSelect({ fields, onChange, value, placeholder, ...rest }) {
const onSelection = selectedOptions => {
onChange(_.get(selectedOptions, '0.value'));
onChange(_.get(selectedOptions, '0.value.name'));
};

return (
<EuiComboBox
placeholder={placeholder}
singleSelection={true}
options={getGroupedFieldOptions(fields, filterField)}
options={fieldsToOptions(fields)}
selectedOptions={value ? [{ value: value, label: value }] : []}
onChange={onSelection}
isDisabled={!fields}
renderOption={renderOption}
{...rest}
/>
);
Expand All @@ -75,11 +62,4 @@ SingleFieldSelect.propTypes = {
fields: PropTypes.array,
onChange: PropTypes.func.isRequired,
value: PropTypes.string, // fieldName
filterField: PropTypes.func,
};

SingleFieldSelect.defaultProps = {
filterField: () => {
return true;
},
};
6 changes: 0 additions & 6 deletions ...ins/maps/public/connected_components/layer_panel/join_editor/resources/join_expression.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { getTermsFields } from '../../../../index_pattern_util';
import { indexPatternService } from '../../../../kibana_services';

import { npStart } from 'ui/new_platform';
import { isNestedField } from '../../../../../../../../../src/plugins/data/public';
const { IndexPatternSelect } = npStart.plugins.data.ui;

export class JoinExpression extends Component {
Expand Down Expand Up @@ -134,10 +133,6 @@ export class JoinExpression extends Component {
return null;
}

const filterStringOrNumberFields = field => {
return (field.type === 'string' && !isNestedField(field)) || field.type === 'number';
};

return (
<EuiFormRow
label={i18n.translate('xpack.maps.layerPanel.joinExpression.rightFieldLabel', {
Expand All @@ -151,7 +146,6 @@ export class JoinExpression extends Component {
placeholder={getSelectFieldPlaceholder()}
value={this.props.rightValue}
onChange={this.props.onRightFieldChange}
filterField={filterStringOrNumberFields}
fields={getTermsFields(this.props.rightFields)}
isClearable={false}
/>
Expand Down
13 changes: 13 additions & 0 deletions x-pack/legacy/plugins/maps/public/index_pattern_util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import { indexPatternService } from './kibana_services';
import { isNestedField } from '../../../../../src/plugins/data/public';
import { ES_GEO_FIELD_TYPE } from '../common/constants';

export async function getIndexPatternsFromIds(indexPatternIds = []) {
const promises = [];
Expand All @@ -29,6 +30,18 @@ export function getTermsFields(fields) {
});
}

export const AGGREGATABLE_GEO_FIELD_TYPES = [ES_GEO_FIELD_TYPE.GEO_POINT];

export function getAggregatableGeoFields(fields) {
return fields.filter(field => {
return (
field.aggregatable &&
!isNestedField(field) &&
AGGREGATABLE_GEO_FIELD_TYPES.includes(field.type)
);
});
}

// Returns filtered fields list containing only fields that exist in _source.
export function getSourceFields(fields) {
return fields.filter(field => {
Expand Down
19 changes: 7 additions & 12 deletions x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/create_source_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,14 @@ import { NoIndexPatternCallout } from '../../../components/no_index_pattern_call
import { i18n } from '@kbn/i18n';

import { EuiFormRow, EuiComboBox, EuiSpacer } from '@elastic/eui';
import { ES_GEO_FIELD_TYPE } from '../../../../common/constants';
import { isNestedField } from '../../../../../../../../src/plugins/data/public';
import {
AGGREGATABLE_GEO_FIELD_TYPES,
getAggregatableGeoFields,
} from '../../../index_pattern_util';

import { npStart } from 'ui/new_platform';
const { IndexPatternSelect } = npStart.plugins.data.ui;

function filterGeoField({ type }) {
return [ES_GEO_FIELD_TYPE.GEO_POINT].includes(type);
}

const requestTypeOptions = [
{
label: i18n.translate('xpack.maps.source.esGeoGrid.gridRectangleDropdownOption', {
Expand Down Expand Up @@ -116,9 +114,7 @@ export class CreateSourceEditor extends Component {
});

//make default selection
const geoFields = indexPattern.fields
.filter(field => !isNestedField(field))
.filter(filterGeoField);
const geoFields = getAggregatableGeoFields(indexPattern.fields);
if (geoFields[0]) {
this._onGeoFieldSelect(geoFields[0].name);
}
Expand Down Expand Up @@ -173,10 +169,9 @@ export class CreateSourceEditor extends Component {
})}
value={this.state.geoField}
onChange={this._onGeoFieldSelect}
filterField={filterGeoField}
fields={
this.state.indexPattern
? this.state.indexPattern.fields.filter(field => !isNestedField(field))
? getAggregatableGeoFields(this.state.indexPattern.fields)
: undefined
}
/>
Expand Down Expand Up @@ -223,7 +218,7 @@ export class CreateSourceEditor extends Component {
placeholder={i18n.translate('xpack.maps.source.esGeoGrid.indexPatternPlaceholder', {
defaultMessage: 'Select index pattern',
})}
fieldTypes={[ES_GEO_FIELD_TYPE.GEO_POINT]}
fieldTypes={AGGREGATABLE_GEO_FIELD_TYPES}
onNoIndexPatterns={this._onNoIndexPatterns}
/>
</EuiFormRow>
Expand Down
31 changes: 11 additions & 20 deletions x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/create_source_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,13 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

import { EuiFormRow, EuiCallOut } from '@elastic/eui';
import { ES_GEO_FIELD_TYPE } from '../../../../common/constants';
import { isNestedField } from '../../../../../../../../src/plugins/data/public';
import {
AGGREGATABLE_GEO_FIELD_TYPES,
getAggregatableGeoFields,
} from '../../../index_pattern_util';

import { npStart } from 'ui/new_platform';
const { IndexPatternSelect } = npStart.plugins.data.ui;
const GEO_FIELD_TYPES = [ES_GEO_FIELD_TYPE.GEO_POINT];

function filterGeoField({ type }) {
return GEO_FIELD_TYPES.includes(type);
}

export class CreateSourceEditor extends Component {
static propTypes = {
Expand Down Expand Up @@ -92,10 +89,7 @@ export class CreateSourceEditor extends Component {
return;
}

const geoFields = indexPattern.fields
.filter(field => !isNestedField(field))
.filter(filterGeoField);

const geoFields = getAggregatableGeoFields(indexPattern.fields);
this.setState({
isLoadingIndexPattern: false,
indexPattern: indexPattern,
Expand Down Expand Up @@ -136,6 +130,9 @@ export class CreateSourceEditor extends Component {
return null;
}

const fields = this.state.indexPattern
? getAggregatableGeoFields(this.state.indexPattern.fields)
: undefined;
return (
<Fragment>
<EuiFormRow
Expand All @@ -149,8 +146,7 @@ export class CreateSourceEditor extends Component {
})}
value={this.state.sourceGeoField}
onChange={this._onSourceGeoSelect}
filterField={filterGeoField}
fields={this.state.indexPattern ? this.state.indexPattern.fields : undefined}
fields={fields}
/>
</EuiFormRow>

Expand All @@ -165,12 +161,7 @@ export class CreateSourceEditor extends Component {
})}
value={this.state.destGeoField}
onChange={this._onDestGeoSelect}
filterField={filterGeoField}
fields={
this.state.indexPattern
? this.state.indexPattern.fields.filter(field => !isNestedField(field))
: undefined
}
fields={fields}
/>
</EuiFormRow>
</Fragment>
Expand All @@ -190,7 +181,7 @@ export class CreateSourceEditor extends Component {
placeholder={i18n.translate('xpack.maps.source.pewPew.indexPatternPlaceholder', {
defaultMessage: 'Select index pattern',
})}
fieldTypes={GEO_FIELD_TYPES}
fieldTypes={AGGREGATABLE_GEO_FIELD_TYPES}
/>
</EuiFormRow>
);
Expand Down
4 changes: 0 additions & 4 deletions ...ps/public/layers/sources/es_search_source/__snapshots__/update_source_editor.test.js.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions x-pack/legacy/plugins/maps/public/layers/sources/es_search_source/create_source_editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,13 @@ import { isNestedField } from '../../../../../../../../src/plugins/data/public';
import { npStart } from 'ui/new_platform';
const { IndexPatternSelect } = npStart.plugins.data.ui;

function filterGeoField(field) {
return [ES_GEO_FIELD_TYPE.GEO_POINT, ES_GEO_FIELD_TYPE.GEO_SHAPE].includes(field.type);
function getGeoFields(fields) {
return fields.filter(field => {
return (
!isNestedField(field) &&
[ES_GEO_FIELD_TYPE.GEO_POINT, ES_GEO_FIELD_TYPE.GEO_SHAPE].includes(field.type)
);
});
}
const RESET_INDEX_PATTERN_STATE = {
indexPattern: undefined,
Expand Down Expand Up @@ -125,9 +130,7 @@ export class CreateSourceEditor extends Component {
});

//make default selection
const geoFields = indexPattern.fields
.filter(field => !isNestedField(field))
.filter(filterGeoField);
const geoFields = getGeoFields(indexPattern.fields);
if (geoFields[0]) {
this.onGeoFieldSelect(geoFields[0].name);
}
Expand Down Expand Up @@ -180,11 +183,8 @@ export class CreateSourceEditor extends Component {
})}
value={this.state.geoField}
onChange={this.onGeoFieldSelect}
filterField={filterGeoField}
fields={
this.state.indexPattern
? this.state.indexPattern.fields.filter(field => !isNestedField(field))
: undefined
this.state.indexPattern ? getGeoFields(this.state.indexPattern.fields) : undefined
}
/>
</EuiFormRow>
Expand Down

0 comments on commit 2f9c41b

Please sign in to comment.