Skip to content

Commit

Permalink
[Maps] add drilldown support map embeddable (elastic#75598)
Browse files Browse the repository at this point in the history
* [Maps] add drilldown support

* filter actions view

* use i18n getter

* remove unused changed

* tslint fixes

* more tslint changes

* clean-up and API doc changes

* update snapshots

* do not show first drilldown in tooltip

* add light grey line to seperate feature property rows

* Improving tooltip row styles (#36)

* Improving tooltip actions row styles

* Removind unecessary comment

* update snapshot and add functional test

* switch UiActionsActionDefinition to Action and remove unneeded checks

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
  • Loading branch information
3 people authored Aug 28, 2020
1 parent 641a5ad commit 1e20cd4
Show file tree
Hide file tree
Showing 27 changed files with 608 additions and 119 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [ACTION\_GLOBAL\_APPLY\_FILTER](./kibana-plugin-plugins-data-public.action_global_apply_filter.md)

## ACTION\_GLOBAL\_APPLY\_FILTER variable

<b>Signature:</b>

```typescript
ACTION_GLOBAL_APPLY_FILTER = "ACTION_GLOBAL_APPLY_FILTER"
```
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@

| Variable | Description |
| --- | --- |
| [ACTION\_GLOBAL\_APPLY\_FILTER](./kibana-plugin-plugins-data-public.action_global_apply_filter.md) | |
| [AggGroupLabels](./kibana-plugin-plugins-data-public.agggrouplabels.md) | |
| [AggGroupNames](./kibana-plugin-plugins-data-public.agggroupnames.md) | |
| [baseFormattersPublic](./kibana-plugin-plugins-data-public.baseformatterspublic.md) | |
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/data/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -440,7 +440,7 @@ export {

export { isTimeRange, isQuery, isFilter, isFilters } from '../common';

export { ApplyGlobalFilterActionContext } from './actions';
export { ACTION_GLOBAL_APPLY_FILTER, ApplyGlobalFilterActionContext } from './actions';

export * from '../common/field_mapping';

Expand Down
5 changes: 5 additions & 0 deletions src/plugins/data/public/public.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,11 @@ import { UnregisterCallback } from 'history';
import { UnwrapPromiseOrReturn } from '@kbn/utility-types';
import { UserProvidedValues } from 'src/core/server/types';

// Warning: (ae-missing-release-tag) "ACTION_GLOBAL_APPLY_FILTER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const ACTION_GLOBAL_APPLY_FILTER = "ACTION_GLOBAL_APPLY_FILTER";

// Warning: (ae-forgotten-export) The symbol "AggConfigSerialized" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "AggConfigOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export type TooltipState = {
};

export type DrawState = {
actionId: string;
drawType: DRAW_TYPE;
filterLabel?: string; // point radius filter alias
geoFieldName?: string;
Expand Down

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

3 changes: 3 additions & 0 deletions x-pack/plugins/maps/public/components/_action_select.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.mapActionSelectIcon {
margin-right: $euiSizeS;
}
1 change: 1 addition & 0 deletions x-pack/plugins/maps/public/components/_index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import 'action_select';
@import 'metric_editors';
@import './geometry_filter';
@import 'tooltip_selector/tooltip_selector';
87 changes: 87 additions & 0 deletions x-pack/plugins/maps/public/components/action_select.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Component } from 'react';
import { EuiFormRow, EuiSuperSelect, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';

interface Props {
value?: string;
onChange: (value: string) => void;
getFilterActions?: () => Promise<Action[]>;
getActionContext?: () => ActionExecutionContext;
}

interface State {
actions: Action[];
}

export class ActionSelect extends Component<Props, State> {
private _isMounted = false;
state: State = {
actions: [],
};

componentDidMount() {
this._isMounted = true;
this._loadActions();
}

componentWillUnmount() {
this._isMounted = false;
}

async _loadActions() {
if (!this.props.getFilterActions || !this.props.getActionContext) {
return;
}
const actions = await this.props.getFilterActions();
if (this._isMounted) {
this.setState({ actions });
}
}

render() {
if (this.state.actions.length === 0 || !this.props.getActionContext) {
return null;
}

if (this.state.actions.length === 1 && this.props.value === this.state.actions[0].id) {
return null;
}

const actionContext = this.props.getActionContext();
const options = this.state.actions.map((action) => {
const iconType = action.getIconType(actionContext);
return {
value: action.id,
inputDisplay: (
<div>
{iconType ? <EuiIcon className="mapActionSelectIcon" type={iconType} /> : null}
{action.getDisplayName(actionContext)}
</div>
),
};
});

return (
<EuiFormRow
label={i18n.translate('xpack.maps.actionSelect.label', {
defaultMessage: 'Action',
})}
display="rowCompressed"
>
<EuiSuperSelect
compressed
options={options}
valueOfSelected={this.props.value ? this.props.value : ''}
onChange={this.props.onChange}
/>
</EuiFormRow>
);
}
}
23 changes: 22 additions & 1 deletion x-pack/plugins/maps/public/components/distance_filter_form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,40 @@ import {
EuiTextAlign,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
import { MultiIndexGeoFieldSelect } from './multi_index_geo_field_select';
import { GeoFieldWithIndex } from './geo_field_with_index';
import { ActionSelect } from './action_select';
import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';

interface Props {
className?: string;
buttonLabel: string;
geoFields: GeoFieldWithIndex[];
getFilterActions?: () => Promise<Action[]>;
getActionContext?: () => ActionExecutionContext;
onSubmit: ({
actionId,
filterLabel,
indexPatternId,
geoFieldName,
}: {
actionId: string;
filterLabel: string;
indexPatternId: string;
geoFieldName: string;
}) => void;
}

interface State {
actionId: string;
selectedField: GeoFieldWithIndex | undefined;
filterLabel: string;
}

export class DistanceFilterForm extends Component<Props, State> {
state = {
state: State = {
actionId: ACTION_GLOBAL_APPLY_FILTER,
selectedField: this.props.geoFields.length ? this.props.geoFields[0] : undefined,
filterLabel: '',
};
Expand All @@ -53,11 +62,16 @@ export class DistanceFilterForm extends Component<Props, State> {
});
};

_onActionIdChange = (value: string) => {
this.setState({ actionId: value });
};

_onSubmit = () => {
if (!this.state.selectedField) {
return;
}
this.props.onSubmit({
actionId: this.state.actionId,
filterLabel: this.state.filterLabel,
indexPatternId: this.state.selectedField.indexPatternId,
geoFieldName: this.state.selectedField.geoFieldName,
Expand Down Expand Up @@ -86,6 +100,13 @@ export class DistanceFilterForm extends Component<Props, State> {
onChange={this._onGeoFieldChange}
/>

<ActionSelect
getFilterActions={this.props.getFilterActions}
getActionContext={this.props.getActionContext}
value={this.state.actionId}
onChange={this._onActionIdChange}
/>

<EuiSpacer size="m" />

<EuiTextAlign textAlign="right">
Expand Down
17 changes: 17 additions & 0 deletions x-pack/plugins/maps/public/components/geometry_filter_form.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,15 @@ import { i18n } from '@kbn/i18n';
import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants';
import { getEsSpatialRelationLabel } from '../../common/i18n_getters';
import { MultiIndexGeoFieldSelect } from './multi_index_geo_field_select';
import { ActionSelect } from './action_select';
import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';

export class GeometryFilterForm extends Component {
static propTypes = {
buttonLabel: PropTypes.string.isRequired,
geoFields: PropTypes.array.isRequired,
getFilterActions: PropTypes.func,
getActionContext: PropTypes.func,
intitialGeometryLabel: PropTypes.string.isRequired,
onSubmit: PropTypes.func.isRequired,
isFilterGeometryClosed: PropTypes.bool,
Expand All @@ -36,6 +40,7 @@ export class GeometryFilterForm extends Component {
};

state = {
actionId: ACTION_GLOBAL_APPLY_FILTER,
selectedField: this.props.geoFields.length ? this.props.geoFields[0] : undefined,
geometryLabel: this.props.intitialGeometryLabel,
relation: ES_SPATIAL_RELATIONS.INTERSECTS,
Expand All @@ -57,8 +62,13 @@ export class GeometryFilterForm extends Component {
});
};

_onActionIdChange = (value) => {
this.setState({ actionId: value });
};

_onSubmit = () => {
this.props.onSubmit({
actionId: this.state.actionId,
geometryLabel: this.state.geometryLabel,
indexPatternId: this.state.selectedField.indexPatternId,
geoFieldName: this.state.selectedField.geoFieldName,
Expand Down Expand Up @@ -134,6 +144,13 @@ export class GeometryFilterForm extends Component {

{this._renderRelationInput()}

<ActionSelect
getFilterActions={this.props.getFilterActions}
getActionContext={this.props.getActionContext}
value={this.state.actionId}
onChange={this._onActionIdChange}
/>

<EuiSpacer size="m" />

{error}
Expand Down
Loading

0 comments on commit 1e20cd4

Please sign in to comment.