From d7be854275ef1ee1337ac1ea73f7de85fb0d9c1f Mon Sep 17 00:00:00 2001 From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Date: Tue, 30 Apr 2019 13:21:30 +0300 Subject: [PATCH] [Vis: Default editor] EUIficate other bucket control (#34945) (#35781) * EUIficate other_bucket control * Filter invalid string params * Fix functional tests * Fix browser tests --- .../migrate_include_exclude_format.d.ts | 22 ++++++ .../ui/public/agg_types/buckets/terms.js | 38 +++++++--- .../agg_types/controls/missing_bucket.tsx | 46 ++++++++++++ .../agg_types/controls/other_bucket.html | 74 ------------------- .../agg_types/controls/other_bucket.tsx | 42 +++++++++++ .../ui/public/agg_types/controls/switch.tsx | 56 ++++++++++++++ test/functional/apps/visualize/_inspector.js | 2 +- test/functional/apps/visualize/_pie_chart.js | 8 +- .../functional/page_objects/visualize_page.js | 8 +- 9 files changed, 201 insertions(+), 95 deletions(-) create mode 100644 src/legacy/ui/public/agg_types/buckets/migrate_include_exclude_format.d.ts create mode 100644 src/legacy/ui/public/agg_types/controls/missing_bucket.tsx delete mode 100644 src/legacy/ui/public/agg_types/controls/other_bucket.html create mode 100644 src/legacy/ui/public/agg_types/controls/other_bucket.tsx create mode 100644 src/legacy/ui/public/agg_types/controls/switch.tsx diff --git a/src/legacy/ui/public/agg_types/buckets/migrate_include_exclude_format.d.ts b/src/legacy/ui/public/agg_types/buckets/migrate_include_exclude_format.d.ts new file mode 100644 index 0000000000000..88a3ef2eef84b --- /dev/null +++ b/src/legacy/ui/public/agg_types/buckets/migrate_include_exclude_format.d.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. + */ + +import { AggConfig } from 'ui/vis/agg_config'; + +export function isStringType(type: AggConfig): boolean; diff --git a/src/legacy/ui/public/agg_types/buckets/terms.js b/src/legacy/ui/public/agg_types/buckets/terms.js index 6d68f8d66e566..f9019d1a52293 100644 --- a/src/legacy/ui/public/agg_types/buckets/terms.js +++ b/src/legacy/ui/public/agg_types/buckets/terms.js @@ -25,11 +25,12 @@ import { Schemas } from '../../vis/editors/default/schemas'; import { createFilterTerms } from './create_filter/terms'; import orderAggTemplate from '../controls/order_agg.html'; import orderAndSizeTemplate from '../controls/order_and_size.html'; -import otherBucketTemplate from '../controls/other_bucket.html'; import { i18n } from '@kbn/i18n'; import { getRequestInspectorStats, getResponseInspectorStats } from '../../courier/utils/courier_inspector_utils'; import { buildOtherBucketAgg, mergeOtherBucketAggResponse, updateMissingBucket } from './_terms_other_bucket_helper'; +import { MissingBucketParamEditor } from '../controls/missing_bucket'; +import { OtherBucketParamEditor } from '../controls/other_bucket'; import { isStringType, migrateIncludeExcludeFormat } from './migrate_include_exclude_format'; const aggFilter = [ @@ -266,27 +267,40 @@ export const termsBucketAgg = new BucketAggType({ { name: 'otherBucket', default: false, - editor: otherBucketTemplate, - write: _.noop - }, { + editorComponent: OtherBucketParamEditor, + write: _.noop, + }, + { name: 'otherBucketLabel', + type: 'string', default: i18n.translate('common.ui.aggTypes.buckets.terms.otherBucketLabel', { defaultMessage: 'Other', }), - write: _.noop - }, { + displayName: i18n.translate('common.ui.aggTypes.otherBucket.labelForOtherBucketLabel', { + defaultMessage: 'Label for other bucket', + }), + shouldShow: agg => agg.params.otherBucket, + write: _.noop, + }, + { name: 'missingBucket', default: false, - write: _.noop - }, { + editorComponent: MissingBucketParamEditor, + write: _.noop, + }, + { name: 'missingBucketLabel', default: i18n.translate('common.ui.aggTypes.buckets.terms.missingBucketLabel', { defaultMessage: 'Missing', - description: `Default label used inside of charts for documents missing a specific field. - Can be seen when creating a chart with a terms aggregation and select the "Show missing values" - checkbox.` + description: `Default label used in charts when documents are missing a field. + Visible when you create a chart with a terms aggregation and enable "Show missing values"`, + }), + type: 'string', + displayName: i18n.translate('common.ui.aggTypes.otherBucket.labelForMissingValuesLabel', { + defaultMessage: 'Label for missing values', }), - write: _.noop + shouldShow: agg => agg.params.missingBucket, + write: _.noop, }, { name: 'exclude', diff --git a/src/legacy/ui/public/agg_types/controls/missing_bucket.tsx b/src/legacy/ui/public/agg_types/controls/missing_bucket.tsx new file mode 100644 index 0000000000000..88a27105d2d4e --- /dev/null +++ b/src/legacy/ui/public/agg_types/controls/missing_bucket.tsx @@ -0,0 +1,46 @@ +/* + * 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 React from 'react'; +import { i18n } from '@kbn/i18n'; +import { AggParamEditorProps } from 'ui/vis/editors/default'; +import { SwitchParamEditor } from './switch'; +import { isStringType } from '../buckets/migrate_include_exclude_format'; + +function MissingBucketParamEditor(props: AggParamEditorProps) { + return ( + + ); +} + +export { MissingBucketParamEditor }; diff --git a/src/legacy/ui/public/agg_types/controls/other_bucket.html b/src/legacy/ui/public/agg_types/controls/other_bucket.html deleted file mode 100644 index 75cbd4be03eb8..0000000000000 --- a/src/legacy/ui/public/agg_types/controls/other_bucket.html +++ /dev/null @@ -1,74 +0,0 @@ -
-
-
- -
-
-
-
- -
- -
-
-
-
-
- -
-
-
-
- -
- -
-
-
-
diff --git a/src/legacy/ui/public/agg_types/controls/other_bucket.tsx b/src/legacy/ui/public/agg_types/controls/other_bucket.tsx new file mode 100644 index 0000000000000..31b0f03211d6b --- /dev/null +++ b/src/legacy/ui/public/agg_types/controls/other_bucket.tsx @@ -0,0 +1,42 @@ +/* + * 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 React from 'react'; +import { i18n } from '@kbn/i18n'; +import { AggParamEditorProps } from 'ui/vis/editors/default'; +import { SwitchParamEditor } from './switch'; + +function OtherBucketParamEditor(props: AggParamEditorProps) { + return ( + + ); +} + +export { OtherBucketParamEditor }; diff --git a/src/legacy/ui/public/agg_types/controls/switch.tsx b/src/legacy/ui/public/agg_types/controls/switch.tsx new file mode 100644 index 0000000000000..2ec5c2ff064fb --- /dev/null +++ b/src/legacy/ui/public/agg_types/controls/switch.tsx @@ -0,0 +1,56 @@ +/* + * 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 React from 'react'; + +import { EuiSwitch, EuiToolTip, EuiSpacer } from '@elastic/eui'; +import { AggParamEditorProps } from 'ui/vis/editors/default'; + +interface SwitchParamEditorProps extends AggParamEditorProps { + dataTestSubj?: string; + displayLabel?: string; + displayToolTip?: string; + disabled?: boolean; +} + +function SwitchParamEditor({ + value, + setValue, + dataTestSubj, + displayToolTip, + displayLabel, + disabled, +}: SwitchParamEditorProps) { + return ( +
+ + setValue(ev.target.checked)} + /> + + +
+ ); +} + +export { SwitchParamEditor }; diff --git a/test/functional/apps/visualize/_inspector.js b/test/functional/apps/visualize/_inspector.js index 8e7220a6f5a7a..2793bb640e11d 100644 --- a/test/functional/apps/visualize/_inspector.js +++ b/test/functional/apps/visualize/_inspector.js @@ -58,7 +58,7 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.selectAggregation('Terms'); await PageObjects.visualize.selectField('machine.os.raw'); await PageObjects.visualize.setSize(2); - await PageObjects.visualize.toggleOtherBucket(); + await PageObjects.visualize.toggleOtherBucket(3); await PageObjects.visualize.clickGo(); }); diff --git a/test/functional/apps/visualize/_pie_chart.js b/test/functional/apps/visualize/_pie_chart.js index 583f8328a29ec..12131b34ee376 100644 --- a/test/functional/apps/visualize/_pie_chart.js +++ b/test/functional/apps/visualize/_pie_chart.js @@ -92,8 +92,8 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.selectAggregation('Terms'); log.debug('Click field machine.os.raw'); await PageObjects.visualize.selectField('machine.os.raw'); - await PageObjects.visualize.toggleOtherBucket(); - await PageObjects.visualize.toggleMissingBucket(); + await PageObjects.visualize.toggleOtherBucket(2); + await PageObjects.visualize.toggleMissingBucket(2); log.debug('clickGo'); await PageObjects.visualize.clickGo(); await pieChart.expectPieChartLabels(expectedTableData); @@ -131,8 +131,8 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.selectAggregation('Terms'); log.debug('Click field geo.src'); await PageObjects.visualize.selectField('geo.src'); - await PageObjects.visualize.toggleOtherBucket(); - await PageObjects.visualize.toggleMissingBucket(); + await PageObjects.visualize.toggleOtherBucket(3); + await PageObjects.visualize.toggleMissingBucket(3); log.debug('clickGo'); await PageObjects.visualize.clickGo(); await pieChart.expectPieChartLabels(expectedTableData); diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index ba2e75990da69..53f88877969ae 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -615,12 +615,12 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli await PageObjects.header.waitUntilLoadingHasFinished(); } - async toggleOtherBucket() { - return await find.clickByCssSelector('vis-editor-agg-params:not(.ng-hide) input[name="showOther"]'); + async toggleOtherBucket(agg = 2) { + return await testSubjects.click(`aggregationEditor${agg} otherBucketSwitch`); } - async toggleMissingBucket() { - return await find.clickByCssSelector('vis-editor-agg-params:not(.ng-hide) input[name="showMissing"]'); + async toggleMissingBucket(agg = 2) { + return await testSubjects.click(`aggregationEditor${agg} missingBucketSwitch`); } async isApplyEnabled() {