From bc319679518b0ba91a530e4fc5856e84ce1083c2 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 8 Jul 2019 14:23:33 +0300 Subject: [PATCH 01/45] Create default_editor_agg.tsx --- .../default/components/default_editor_agg.tsx | 221 ++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx new file mode 100644 index 0000000000000..ffb054556f1a6 --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -0,0 +1,221 @@ +/* + * 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 { EuiAccordion } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; + +import { AggType } from 'ui/agg_types'; +import { AggConfig, Vis, VisState, AggParams } from 'ui/vis'; +import { DefaultEditorAggParams } from './default_editor_agg_params'; +import { DefaultEditorAggAdd } from './default_editor_agg_add'; + +interface DefaultEditorAggProps { + agg: AggConfig; + aggIndex: number; + group: AggConfig[]; + groupName: string; + isDraggable: boolean; + isAggEnabled: boolean; + responseValueAggs: AggConfig[] | null; + schemas: any; + state: VisState; + stats: any; + vis: Vis; + addSchema: () => {}; + onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; + onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; + onAggErrorChanged: (agg: AggConfig, error?: string) => void; + onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; + onRemoveAgg: (agg: AggConfig) => void; + setTouched: (isTouched: boolean) => void; + setValidity: (isValid: boolean) => void; +} + +function DefaultEditorAgg({ + agg, + aggIndex, + group, + groupName, + isDraggable, + isAggEnabled, + responseValueAggs, + schemas, + state, + stats, + vis, + addSchema, + onAggParamsChange, + onAggTypeChange, + setTouched, + setValidity, + onAggErrorChanged, + onToggleEnableAgg, + onRemoveAgg, +}: DefaultEditorAggProps) { + function calcAggIsTooLow() { + if (!agg.schema.mustBeFirst) { + return false; + } + + const firstDifferentSchema = _.findIndex(group, (aggr: AggConfig) => { + return aggr.schema !== agg.schema; + }); + + if (firstDifferentSchema === -1) { + return false; + } + + return aggIndex > firstDifferentSchema; + } + const SchemaComponent = agg.schema.editorComponent; + const showAggAdd = aggIndex + 1 === stats.count; + + const canRemove = () => { + const metricCount = _.reduce( + group, + (count, aggregation) => { + return aggregation.schema.name === agg.schema.name ? ++count : count; + }, + 0 + ); + + // make sure the the number of these aggs is above the min + return metricCount > agg.schema.min; + }; + + const renderAggButtons = () => { + const actionIcons = []; + const isAggRemovable = canRemove(); + + if (isAggEnabled && isAggRemovable) { + actionIcons.push({ + id: 'disableAggregation', + color: 'text', + type: 'eye', + onClick: () => onToggleEnableAgg(agg, false), + ariaLabel: i18n.translate('common.ui.vis.editors.agg.disableAggButtonAriaLabel', { + defaultMessage: 'Disable aggregation', + }), + tooltip: i18n.translate('common.ui.vis.editors.agg.disableAggButtonTooltip', { + defaultMessage: 'Disable aggregation', + }), + dataTestSubj: 'disableAggregationBtn', + }); + } + if (!isAggEnabled) { + actionIcons.push({ + id: 'enableAggregation', + color: 'text', + type: 'eyeClosed', + onClick: () => onToggleEnableAgg(agg, true), + ariaLabel: i18n.translate('common.ui.vis.editors.agg.enableAggButtonAriaLabel', { + defaultMessage: 'Enable aggregation', + }), + tooltip: i18n.translate('common.ui.vis.editors.agg.enableAggButtonTooltip', { + defaultMessage: 'Enable aggregation', + }), + dataTestSubj: 'disableAggregationBtn', + }); + } + if (isDraggable) { + // directive draggable-handle + actionIcons.push({ + id: 'dragHandle', + color: 'text', + type: 'sortable', + onClick: () => 'onPriorityReorder(direction)', + ariaLabel: i18n.translate('common.ui.vis.editors.agg.modifyPriorityButtonAriaLabel', { + defaultMessage: + 'Use up and down key on this button to move this aggregation up and down in the priority order.', + }), + tooltip: i18n.translate('common.ui.vis.editors.agg.modifyPriorityButtonTooltip', { + defaultMessage: 'Modify priority by dragging', + }), + dataTestSubj: 'dragHandleBtn', + }); + } + if (isAggRemovable) { + actionIcons.push({ + id: 'removeDimension', + color: 'danger', + type: 'cross', + onClick: () => onRemoveAgg(agg), + ariaLabel: i18n.translate('common.ui.vis.editors.agg.removeDimensionButtonAriaLabel', { + defaultMessage: 'Remove dimension', + }), + tooltip: i18n.translate('common.ui.vis.editors.agg.removeDimensionButtonTooltip', { + defaultMessage: 'Remove dimension', + }), + dataTestSubj: 'removeDimensionBtn', + }); + } + return null; + }; + + return ( + + <> + {SchemaComponent && ( + + )} + + {showAggAdd && ( + + )} + + + ); +} + +export { DefaultEditorAgg }; From 9f4f5dfce529067f062b1941165b309fe30b6191 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 10 Jul 2019 09:59:32 +0300 Subject: [PATCH 02/45] Create default_editor_agg_group --- .../ui/public/vis/editors/default/agg.js | 250 ++++++++---------- .../public/vis/editors/default/agg_group.html | 2 +- .../public/vis/editors/default/agg_group.js | 144 ++++++---- .../vis/editors/default/agg_group_names.js | 4 +- .../default/components/default_editor_agg.tsx | 225 +++++++++------- .../components/default_editor_agg_add.tsx | 4 +- .../components/default_editor_agg_group.tsx | 157 +++++++++++ .../vis/editors/default/old_agg_group.js | 130 +++++++++ .../public/vis/editors/default/sidebar.html | 8 +- .../ui/public/vis/editors/default/sidebar.js | 49 ++-- 10 files changed, 663 insertions(+), 310 deletions(-) create mode 100644 src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx create mode 100644 src/legacy/ui/public/vis/editors/default/old_agg_group.js diff --git a/src/legacy/ui/public/vis/editors/default/agg.js b/src/legacy/ui/public/vis/editors/default/agg.js index 4734c84bcc51c..312439a52b023 100644 --- a/src/legacy/ui/public/vis/editors/default/agg.js +++ b/src/legacy/ui/public/vis/editors/default/agg.js @@ -17,148 +17,122 @@ * under the License. */ -import './agg_params'; -import './agg_add'; -import './controls/agg_controls'; -import { Direction } from './keyboard_move'; -import _ from 'lodash'; -import './fancy_forms'; +import 'ngreact'; +import { wrapInI18nContext } from 'ui/i18n'; import { uiModules } from '../../../modules'; -import aggTemplate from './agg.html'; -import { move } from '../../../utils/collection'; +import { DefaultEditorAgg } from './components/default_editor_agg'; uiModules .get('app/visualize') - .directive('visEditorAgg', () => { + .directive('visEditorAggReactWrapper', reactDirective => + reactDirective(wrapInI18nContext(DefaultEditorAgg), [ + ['agg', { watchDepth: 'reference' }], + ['group', { watchDepth: 'reference' }], + ['indexPattern', { watchDepth: 'reference' }], + ['responseValueAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects + ['schemas', { watchDepth: 'reference' }], + ['state', { watchDepth: 'reference' }], + ['stats', { watchDepth: 'reference' }], + ['vis', { watchDepth: 'reference' }], + ['addSchema', { watchDepth: 'reference' }], + ['onAggErrorChanged', { watchDepth: 'reference' }], + ['onAggTypeChange', { watchDepth: 'reference' }], + ['onAggParamsChange', { watchDepth: 'reference' }], + ['removeAgg', { watchDepth: 'reference' }], + ['onToggleEnableAgg', { watchDepth: 'reference' }], + ['setTouched', { watchDepth: 'reference' }], + ['setValidity', { watchDepth: 'reference' }], + 'aggIndex', + 'groupName', + 'formIsTouched', + 'isDraggable', + 'isValid' + ]) + ) + .directive('visEditorAgg', function (config) { return { - restrict: 'A', - template: aggTemplate, - require: ['^form', '^ngModel'], - link: function ($scope, $el, attrs, [kbnForm, ngModelCtrl]) { - $scope.editorOpen = !!$scope.agg.brandNew; - $scope.aggIsTooLow = false; - - $scope.$watch('editorOpen', function (open) { - // make sure that all of the form inputs are "touched" - // so that their errors propagate - if (!open) kbnForm.$setTouched(); - }); - - $scope.$watchMulti([ - '$index', - 'group.length' - ], function () { - $scope.aggIsTooLow = calcAggIsTooLow(); - }); - - /** - * Describe the aggregation, for display in the collapsed agg header - * @return {[type]} [description] - */ - $scope.describe = function () { - if (!$scope.agg.type || !$scope.agg.type.makeLabel) return ''; - const label = $scope.agg.type.makeLabel($scope.agg); - return label ? label : ''; - }; - - $scope.$on('drag-start', () => { - $scope.editorWasOpen = $scope.editorOpen; - $scope.editorOpen = false; - $scope.$emit('agg-drag-start', $scope.agg); - }); - - $scope.$on('drag-end', () => { - $scope.editorOpen = $scope.editorWasOpen; - $scope.$emit('agg-drag-end', $scope.agg); - }); - - /** - * Move aggregations down/up in the priority list by pressing arrow keys. - */ - $scope.onPriorityReorder = function (direction) { - const positionOffset = direction === Direction.down ? 1 : -1; - - const currentPosition = $scope.group.indexOf($scope.agg); - const newPosition = Math.max(0, Math.min(currentPosition + positionOffset, $scope.group.length - 1)); - move($scope.group, currentPosition, newPosition); - $scope.$emit('agg-reorder'); - }; - - $scope.remove = function (agg) { - const aggs = $scope.state.aggs; - const index = aggs.indexOf(agg); - - if (index === -1) { - return; - } - - aggs.splice(index, 1); - }; - - $scope.canRemove = function (aggregation) { - const metricCount = _.reduce($scope.group, function (count, agg) { - return (agg.schema.name === aggregation.schema.name) ? ++count : count; - }, 0); - - // make sure the the number of these aggs is above the min - return metricCount > aggregation.schema.min; - }; - - function calcAggIsTooLow() { - if (!$scope.agg.schema.mustBeFirst) { - return false; - } - - const firstDifferentSchema = _.findIndex($scope.group, function (agg) { - return agg.schema !== $scope.agg.schema; - }); - - if (firstDifferentSchema === -1) { - return false; - } - - return $scope.$index > firstDifferentSchema; - } - - // The model can become touched either onBlur event or when the form is submitted. - // We watch $touched to identify when the form is submitted. - $scope.$watch(() => { - return ngModelCtrl.$touched; - }, (value) => { - $scope.formIsTouched = value; - }, true); - - $scope.onAggTypeChange = (agg, value) => { - if (agg.type !== value) { - agg.type = value; - } - }; - - $scope.onAggParamsChange = (params, paramName, value) => { - if (params[paramName] !== value) { - params[paramName] = value; - } - }; - - $scope.setValidity = (isValid) => { - ngModelCtrl.$setValidity(`aggParams${$scope.agg.id}`, isValid); - }; - - $scope.setTouched = (isTouched) => { - if (isTouched) { - ngModelCtrl.$setTouched(); - } else { - ngModelCtrl.$setUntouched(); - } - }; - - $scope.onAggErrorChanged = (agg, error) => { - if (error) { - agg.error = error; - } else { - delete agg.error; - } - }; - } + restrict: 'E', + // We can't use scope binding here yet, since quiet a lot of child directives arbitrary access + // parent scope values right now. So we cannot easy change this, until we remove the whole directive. + scope: true, + require: '?^ngModel', + template: function ($el, attrs) { + return ``; + + return $el.html(); + }, + link: { + pre: function ($scope, $el, attr) { + // $scope.$bind('aggParam', attr.aggParam); + // $scope.$bind('editorComponent', attr.editorComponent); + }, + post: function ($scope, $el, attr, ngModelCtrl) { + // The model can become touched either onBlur event or when the form is submitted. + // We watch $touched to identify when the form is submitted. + $scope.$watch( + () => { + return ngModelCtrl.$touched; + }, + value => { + $scope.formIsTouched = value; + }, + true + ); + + $scope.onAggTypeChange = (agg, value) => { + if (agg.type !== value) { + agg.type = value; + } + }; + + $scope.onAggParamsChange = (params, paramName, value) => { + if (params[paramName] !== value) { + params[paramName] = value; + } + }; + + $scope.setValidity = isValid => { + ngModelCtrl.$setValidity(`aggParams${$scope.agg.id}`, isValid); + }; + + $scope.setTouched = isTouched => { + if (isTouched) { + ngModelCtrl.$setTouched(); + } else { + ngModelCtrl.$setUntouched(); + } + }; + + $scope.onAggErrorChanged = (agg, error) => { + if (error) { + agg.error = error; + } else { + delete agg.error; + } + }; + }, + }, }; }); diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.html b/src/legacy/ui/public/vis/editors/default/agg_group.html index b703d23b4f149..ab7c635f2a161 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.html +++ b/src/legacy/ui/public/vis/editors/default/agg_group.html @@ -7,7 +7,7 @@
-
+
diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 054f4e086b912..c8b0afcf30638 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -17,68 +17,100 @@ * under the License. */ -import _ from 'lodash'; -import './agg'; -import './agg_add'; - +import 'ngreact'; +import { wrapInI18nContext } from 'ui/i18n'; import { uiModules } from '../../../modules'; -import aggGroupTemplate from './agg_group.html'; -import { move } from '../../../utils/collection'; -import { aggGroupNameMaps } from './agg_group_names'; +import { DefaultEditorAggGroup } from './components/default_editor_agg_group'; import { AggConfig } from '../../agg_config'; -import '../../draggable/draggable_container'; -import '../../draggable/draggable_item'; -import '../../draggable/draggable_handle'; - uiModules .get('app/visualize') + .directive('visEditorAggGroupWrapper', reactDirective => + reactDirective(wrapInI18nContext(DefaultEditorAggGroup), [ + ['responseValueAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects + ['state', { watchDepth: 'reference' }], + ['vis', { watchDepth: 'reference' }], + ['addSchema', { watchDepth: 'reference' }], + ['removeAgg', { watchDepth: 'reference' }], + ['onToggleEnableAgg', { watchDepth: 'reference' }], + ['onAggErrorChanged', { watchDepth: 'reference' }], + ['onAggTypeChange', { watchDepth: 'reference' }], + ['onAggParamsChange', { watchDepth: 'reference' }], + ['setTouched', { watchDepth: 'reference' }], + ['setValidity', { watchDepth: 'reference' }], + 'groupName', + 'formIsTouched', + ]) + ) .directive('visEditorAggGroup', function () { - return { restrict: 'E', - template: aggGroupTemplate, + // We can't use scope binding here yet, since quiet a lot of child directives arbitrary access + // parent scope values right now. So we cannot easy change this, until we remove the whole directive. scope: true, - link: function ($scope, $el, attr) { + require: '?^ngModel', + template: function ($el, attrs) { + return ``; + }, + link: function ($scope, $el, attr, ngModelCtrl) { $scope.groupName = attr.groupName; - $scope.groupNameLabel = aggGroupNameMaps()[$scope.groupName]; - $scope.$bind('group', 'state.aggs.bySchemaGroup["' + $scope.groupName + '"]'); - $scope.$bind('schemas', 'vis.type.schemas["' + $scope.groupName + '"]'); + // The model can become touched either onBlur event or when the form is submitted. + // We watch $touched to identify when the form is submitted. + $scope.$watch( + () => { + return ngModelCtrl.$touched; + }, + value => { + $scope.formIsTouched = value; + }, + true + ); - $scope.$watchMulti([ - 'schemas', - '[]group' - ], function () { - const stats = $scope.stats = { - min: 0, - max: 0, - count: $scope.group ? $scope.group.length : 0 - }; + $scope.onAggTypeChange = (agg, value) => { + if (agg.type !== value) { + agg.type = value; + } + }; - if (!$scope.schemas) return; + $scope.onAggParamsChange = (params, paramName, value) => { + if (params[paramName] !== value) { + params[paramName] = value; + } + }; - $scope.schemas.forEach(function (schema) { - stats.min += schema.min; - stats.max += schema.max; - stats.deprecate = schema.deprecate; - }); - }); + $scope.setValidity = isValid => { + ngModelCtrl.$setValidity('aggGroup', isValid); + }; - function reorderFinished() { - //the aggs have been reordered in [group] and we need - //to apply that ordering to [vis.aggs] - const indexOffset = $scope.state.aggs.indexOf($scope.group[0]); - _.forEach($scope.group, (agg, index) => { - move($scope.state.aggs, agg, indexOffset + index); - }); - } + $scope.setTouched = isTouched => { + if (isTouched) { + ngModelCtrl.$setTouched(); + } else { + ngModelCtrl.$setUntouched(); + } + }; - $scope.$on('agg-reorder', reorderFinished); - $scope.$on('agg-drag-start', () => $scope.dragging = true); - $scope.$on('agg-drag-end', () => { - $scope.dragging = false; - reorderFinished(); - }); + $scope.onAggErrorChanged = (agg, error) => { + if (error) { + agg.error = error; + } else { + delete agg.error; + } + }; $scope.addSchema = function (schema) { const aggConfig = new AggConfig($scope.state.aggs, { @@ -89,7 +121,21 @@ uiModules $scope.state.aggs.push(aggConfig); }; - } - }; + $scope.removeAgg = function (agg) { + const aggs = $scope.state.aggs; + const index = aggs.indexOf(agg); + + if (index === -1) { + return; + } + + aggs.splice(index, 1); + }; + + $scope.onToggleEnableAgg = (agg, isEnable) => { + agg.enabled = isEnable; + }; + }, + }; }); diff --git a/src/legacy/ui/public/vis/editors/default/agg_group_names.js b/src/legacy/ui/public/vis/editors/default/agg_group_names.js index e67f0459ff764..c6546a0d5aca6 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group_names.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group_names.js @@ -20,6 +20,6 @@ import { i18n } from '@kbn/i18n'; export const aggGroupNameMaps = () => ({ - metrics: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { defaultMessage: 'metrics' }), - buckets: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { defaultMessage: 'buckets' }) + metrics: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { defaultMessage: 'Metrics' }), + buckets: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { defaultMessage: 'Buckets' }) }); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index ffb054556f1a6..185fcea1afa74 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -17,33 +17,42 @@ * under the License. */ -import React from 'react'; -import { EuiAccordion } from '@elastic/eui'; +import React, { useState } from 'react'; +import { findIndex, reduce } from 'lodash'; +import { + EuiAccordion, + EuiToolTip, + EuiButtonIcon, + EuiText, + EuiTextColor, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; import { AggType } from 'ui/agg_types'; import { AggConfig, Vis, VisState, AggParams } from 'ui/vis'; import { DefaultEditorAggParams } from './default_editor_agg_params'; -import { DefaultEditorAggAdd } from './default_editor_agg_add'; interface DefaultEditorAggProps { agg: AggConfig; aggIndex: number; - group: AggConfig[]; + aggIsTooLow: boolean; groupName: string; + formIsTouched: boolean; isDraggable: boolean; - isAggEnabled: boolean; + isRemovable: boolean; + isValid: boolean; responseValueAggs: AggConfig[] | null; - schemas: any; state: VisState; - stats: any; vis: Vis; - addSchema: () => {}; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; onAggErrorChanged: (agg: AggConfig, error?: string) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; - onRemoveAgg: (agg: AggConfig) => void; + removeAgg: (agg: AggConfig) => void; setTouched: (isTouched: boolean) => void; setValidity: (isValid: boolean) => void; } @@ -51,60 +60,33 @@ interface DefaultEditorAggProps { function DefaultEditorAgg({ agg, aggIndex, - group, + aggIsTooLow, groupName, + formIsTouched, isDraggable, - isAggEnabled, + isRemovable, + isValid, responseValueAggs, - schemas, state, - stats, vis, - addSchema, onAggParamsChange, onAggTypeChange, setTouched, setValidity, onAggErrorChanged, onToggleEnableAgg, - onRemoveAgg, + removeAgg, }: DefaultEditorAggProps) { - function calcAggIsTooLow() { - if (!agg.schema.mustBeFirst) { - return false; - } - - const firstDifferentSchema = _.findIndex(group, (aggr: AggConfig) => { - return aggr.schema !== agg.schema; - }); + const [isEditorOpen, setIsEditorOpen] = useState(agg.brandNew); + const showDescription = !isEditorOpen && isValid; + const showError = !isEditorOpen && !isValid; - if (firstDifferentSchema === -1) { - return false; - } - - return aggIndex > firstDifferentSchema; - } const SchemaComponent = agg.schema.editorComponent; - const showAggAdd = aggIndex + 1 === stats.count; - - const canRemove = () => { - const metricCount = _.reduce( - group, - (count, aggregation) => { - return aggregation.schema.name === agg.schema.name ? ++count : count; - }, - 0 - ); - - // make sure the the number of these aggs is above the min - return metricCount > agg.schema.min; - }; const renderAggButtons = () => { const actionIcons = []; - const isAggRemovable = canRemove(); - if (isAggEnabled && isAggRemovable) { + if (agg.enabled && isRemovable) { actionIcons.push({ id: 'disableAggregation', color: 'text', @@ -119,7 +101,7 @@ function DefaultEditorAgg({ dataTestSubj: 'disableAggregationBtn', }); } - if (!isAggEnabled) { + if (!agg.enabled) { actionIcons.push({ id: 'enableAggregation', color: 'text', @@ -151,12 +133,12 @@ function DefaultEditorAgg({ dataTestSubj: 'dragHandleBtn', }); } - if (isAggRemovable) { + if (isRemovable) { actionIcons.push({ id: 'removeDimension', color: 'danger', type: 'cross', - onClick: () => onRemoveAgg(agg), + onClick: () => removeAgg(agg), ariaLabel: i18n.translate('common.ui.vis.editors.agg.removeDimensionButtonAriaLabel', { defaultMessage: 'Remove dimension', }), @@ -166,55 +148,114 @@ function DefaultEditorAgg({ dataTestSubj: 'removeDimensionBtn', }); } - return null; + return ( +
+ {actionIcons.map(icon => ( + + + + ))} +
+ ); + }; + + /** + * Describe the aggregation, for display in the collapsed agg header + * @return {[type]} [description] + */ + const describe = () => { + if (!agg.type || !agg.type.makeLabel) { + return ''; + } + return agg.type.makeLabel(agg) || ''; }; + // $scope.$watch('editorOpen', function(open) { + // // make sure that all of the form inputs are "touched" + // // so that their errors propagate + // if (!open) kbnForm.$setTouched(); + // }); + + const buttonContent = ( +
+ + +

{agg.schema.title}

+ + + + {showDescription && ( + +

+ {describe()} +

+ + )} + + {showError && ( + +
+ +
+ + )} + + +
+ ); + return ( - - <> - {SchemaComponent && ( - - )} - - {showAggAdd && ( - + setIsEditorOpen(isOpen)} + > + <> + + {SchemaComponent && ( + + )} + - )} - - + + + ); } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx index e957a04728309..ff4f415192450 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx @@ -83,7 +83,7 @@ function DefaultEditorAggAdd({ return count >= schema.max; }; - return stats.max > stats.count ? ( + return ( - ) : null; + ); } export { DefaultEditorAggAdd }; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx new file mode 100644 index 0000000000000..ee5b3c4863bde --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -0,0 +1,157 @@ +/* + * 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 { findIndex, reduce } from 'lodash'; +import { EuiForm, EuiTitle } from '@elastic/eui'; + +import { AggType } from 'ui/agg_types'; +import { Vis, VisState, AggParams } from 'ui/vis'; +import { AggConfig } from '../../../agg_config'; +import { AggConfigs } from '../../../agg_configs'; +import { DefaultEditorAgg } from './default_editor_agg'; +import { DefaultEditorAggAdd } from './default_editor_agg_add'; + +import { aggGroupNameMaps } from '../agg_group_names'; +import { Schema } from '../schemas'; + +interface DefaultEditorAggGroupProps { + groupName: string; + formIsTouched: boolean; + responseValueAggs: AggConfig[] | null; + state: VisState; + vis: Vis; + addSchema: () => {}; + onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; + onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; + onAggErrorChanged: (agg: AggConfig, error?: string) => void; + onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; + removeAgg: (agg: AggConfig) => void; + setTouched: (isTouched: boolean) => void; + setValidity: (isValid: boolean) => void; +} + +function DefaultEditorAggGroup({ + groupName, + formIsTouched, + responseValueAggs, + state, + vis, + addSchema, + onAggParamsChange, + onAggTypeChange, + setTouched, + setValidity, + onAggErrorChanged, + onToggleEnableAgg, + removeAgg, +}: DefaultEditorAggGroupProps) { + const groupNameLabel = aggGroupNameMaps()[groupName]; + const group: AggConfigs = state.aggs.bySchemaGroup[groupName]; + const schemas = vis.type.schemas[groupName]; + const stats = { + min: 0, + max: 0, + count: group ? group.length : 0, + deprecate: false, + }; + + if (schemas) { + schemas.forEach((schema: Schema) => { + stats.min += schema.min; + stats.max += schema.max; + stats.deprecate = schema.deprecate; + }); + } + + const canRemove = (agg: AggConfig) => { + const metricCount = reduce( + group, + (count, aggregation: AggConfig) => { + return aggregation.schema.name === agg.schema.name ? ++count : count; + }, + 0 + ); + + // make sure the the number of these aggs is above the min + return metricCount > agg.schema.min; + }; + + const calcAggIsTooLow = (agg: AggConfig, aggIndex: number) => { + if (!agg.schema.mustBeFirst) { + return false; + } + + const firstDifferentSchema = findIndex(group, (aggr: AggConfig) => { + return aggr.schema !== agg.schema; + }); + + if (firstDifferentSchema === -1) { + return false; + } + + return aggIndex > firstDifferentSchema; + }; + + return ( + <> + + +

{groupNameLabel}

+ + {group && + group.map((agg: AggConfig, index: number) => ( + 1} + isRemovable={canRemove(agg)} + isValid={true} + data-test-subj={`aggregationEditor${agg.id}`} + responseValueAggs={responseValueAggs} + state={state} + vis={vis} + onAggParamsChange={onAggParamsChange} + onAggTypeChange={onAggTypeChange} + setTouched={setTouched} + setValidity={setValidity} + onAggErrorChanged={onAggErrorChanged} + onToggleEnableAgg={onToggleEnableAgg} + removeAgg={removeAgg} + /> + ))} + {stats.max > stats.count && ( + + )} + + + ); +} + +export { DefaultEditorAggGroup }; diff --git a/src/legacy/ui/public/vis/editors/default/old_agg_group.js b/src/legacy/ui/public/vis/editors/default/old_agg_group.js new file mode 100644 index 0000000000000..2ae0bfe55c732 --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/old_agg_group.js @@ -0,0 +1,130 @@ +/* + * 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 _ from 'lodash'; +import './agg'; +import './agg_add'; + +import { uiModules } from '../../../modules'; +import aggGroupTemplate from './agg_group.html'; +import { move } from '../../../utils/collection'; +import { aggGroupNameMaps } from './agg_group_names'; +import { AggConfig } from '../../agg_config'; +import { Direction } from './keyboard_move'; + +import '../../draggable/draggable_container'; +import '../../draggable/draggable_item'; +import '../../draggable/draggable_handle'; + +uiModules.get('app/visualize').directive('visEditorAggGroup', function () { + return { + restrict: 'E', + template: aggGroupTemplate, + scope: true, + link: function ($scope, $el, attr) { + $scope.groupName = attr.groupName; + $scope.groupNameLabel = aggGroupNameMaps()[$scope.groupName]; + $scope.$bind('group', 'state.aggs.bySchemaGroup["' + $scope.groupName + '"]'); + $scope.$bind('schemas', 'vis.type.schemas["' + $scope.groupName + '"]'); + + $scope.$watchMulti(['schemas', '[]group'], function () { + const stats = ($scope.stats = { + min: 0, + max: 0, + count: $scope.group ? $scope.group.length : 0, + }); + + if (!$scope.schemas) return; + + $scope.schemas.forEach(function (schema) { + stats.min += schema.min; + stats.max += schema.max; + stats.deprecate = schema.deprecate; + }); + }); + + function reorderFinished() { + //the aggs have been reordered in [group] and we need + //to apply that ordering to [vis.aggs] + const indexOffset = $scope.state.aggs.indexOf($scope.group[0]); + _.forEach($scope.group, (agg, index) => { + move($scope.state.aggs, agg, indexOffset + index); + }); + } + + $scope.$on('agg-reorder', reorderFinished); + $scope.$on('agg-drag-start', () => ($scope.dragging = true)); + $scope.$on('agg-drag-end', () => { + $scope.dragging = false; + reorderFinished(); + }); + + $scope.addSchema = function (schema) { + const aggConfig = new AggConfig($scope.state.aggs, { + schema, + id: AggConfig.nextId($scope.state.aggs), + }); + aggConfig.brandNew = true; + + $scope.state.aggs.push(aggConfig); + }; + + $scope.removeAgg = function (agg) { + const aggs = $scope.state.aggs; + const index = aggs.indexOf(agg); + + if (index === -1) { + return; + } + + aggs.splice(index, 1); + }; + + $scope.onToggleEnableAgg = (agg, isEnable) => { + agg.enabled = isEnable; + }; + + /** + * Move aggregations down/up in the priority list by pressing arrow keys. + */ + $scope.onPriorityReorder = function (direction) { + const positionOffset = direction === Direction.down ? 1 : -1; + + const currentPosition = $scope.group.indexOf($scope.agg); + const newPosition = Math.max( + 0, + Math.min(currentPosition + positionOffset, $scope.group.length - 1) + ); + move($scope.group, currentPosition, newPosition); + $scope.$emit('agg-reorder'); + }; + + $scope.$on('drag-start', () => { + $scope.editorWasOpen = $scope.editorOpen; + $scope.editorOpen = false; + $scope.$emit('agg-drag-start', $scope.agg); + }); + + $scope.$on('drag-end', () => { + $scope.editorOpen = $scope.editorWasOpen; + $scope.$emit('agg-drag-end', $scope.agg); + }); + }, + }; +}); diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html index 77a930c94a462..57f052ed52f3e 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.html +++ b/src/legacy/ui/public/vis/editors/default/sidebar.html @@ -151,10 +151,14 @@
- + + + - + + +
diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.js b/src/legacy/ui/public/vis/editors/default/sidebar.js index a335880bcf917..ac722bbc78538 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.js +++ b/src/legacy/ui/public/vis/editors/default/sidebar.js @@ -24,29 +24,30 @@ import 'ui/directives/css_truncate'; import { uiModules } from '../../../modules'; import sidebarTemplate from './sidebar.html'; -uiModules - .get('app/visualize') - .directive('visEditorSidebar', function () { - return { - restrict: 'E', - template: sidebarTemplate, - scope: true, - controllerAs: 'sidebar', - controller: function ($scope) { - $scope.$watch('vis.type', (visType) => { - if (visType) { - this.showData = visType.schemas.buckets || visType.schemas.metrics; - if (_.has(visType, 'editorConfig.optionTabs')) { - const activeTabs = visType.editorConfig.optionTabs.filter((tab) => { - return _.get(tab, 'active', false); - }); - if (activeTabs.length > 0) { - this.section = activeTabs[0].name; - } +uiModules.get('app/visualize').directive('visEditorSidebar', function () { + return { + restrict: 'E', + template: sidebarTemplate, + scope: true, + require: '?^ngModel', + controllerAs: 'sidebar', + controller: function ($scope) { + $scope.$watch('vis.type', visType => { + if (visType) { + this.showData = visType.schemas.buckets || visType.schemas.metrics; + if (_.has(visType, 'editorConfig.optionTabs')) { + const activeTabs = visType.editorConfig.optionTabs.filter(tab => { + return _.get(tab, 'active', false); + }); + if (activeTabs.length > 0) { + this.section = activeTabs[0].name; } - this.section = this.section || (this.showData ? 'data' : _.get(visType, 'editorConfig.optionTabs[0].name')); } - }); - } - }; - }); + this.section = + this.section || + (this.showData ? 'data' : _.get(visType, 'editorConfig.optionTabs[0].name')); + } + }); + }, + }; +}); From e9a2403ef9f84b54fc1ccce09abcfa78a014877e Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 10 Jul 2019 16:41:46 +0300 Subject: [PATCH 03/45] Apply drag and drop --- .../ui/public/vis/editors/default/agg.js | 138 ------------------ .../public/vis/editors/default/agg_group.js | 42 +----- .../default/components/default_editor_agg.tsx | 55 +++++-- .../components/default_editor_agg_group.tsx | 109 ++++++++------ .../vis/editors/default/old_agg_group.js | 130 ----------------- .../ui/public/vis/editors/default/sidebar.js | 48 ++++++ 6 files changed, 156 insertions(+), 366 deletions(-) delete mode 100644 src/legacy/ui/public/vis/editors/default/agg.js delete mode 100644 src/legacy/ui/public/vis/editors/default/old_agg_group.js diff --git a/src/legacy/ui/public/vis/editors/default/agg.js b/src/legacy/ui/public/vis/editors/default/agg.js deleted file mode 100644 index 312439a52b023..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/agg.js +++ /dev/null @@ -1,138 +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 'ngreact'; -import { wrapInI18nContext } from 'ui/i18n'; -import { uiModules } from '../../../modules'; -import { DefaultEditorAgg } from './components/default_editor_agg'; - -uiModules - .get('app/visualize') - .directive('visEditorAggReactWrapper', reactDirective => - reactDirective(wrapInI18nContext(DefaultEditorAgg), [ - ['agg', { watchDepth: 'reference' }], - ['group', { watchDepth: 'reference' }], - ['indexPattern', { watchDepth: 'reference' }], - ['responseValueAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects - ['schemas', { watchDepth: 'reference' }], - ['state', { watchDepth: 'reference' }], - ['stats', { watchDepth: 'reference' }], - ['vis', { watchDepth: 'reference' }], - ['addSchema', { watchDepth: 'reference' }], - ['onAggErrorChanged', { watchDepth: 'reference' }], - ['onAggTypeChange', { watchDepth: 'reference' }], - ['onAggParamsChange', { watchDepth: 'reference' }], - ['removeAgg', { watchDepth: 'reference' }], - ['onToggleEnableAgg', { watchDepth: 'reference' }], - ['setTouched', { watchDepth: 'reference' }], - ['setValidity', { watchDepth: 'reference' }], - 'aggIndex', - 'groupName', - 'formIsTouched', - 'isDraggable', - 'isValid' - ]) - ) - .directive('visEditorAgg', function (config) { - return { - restrict: 'E', - // We can't use scope binding here yet, since quiet a lot of child directives arbitrary access - // parent scope values right now. So we cannot easy change this, until we remove the whole directive. - scope: true, - require: '?^ngModel', - template: function ($el, attrs) { - return ``; - - return $el.html(); - }, - link: { - pre: function ($scope, $el, attr) { - // $scope.$bind('aggParam', attr.aggParam); - // $scope.$bind('editorComponent', attr.editorComponent); - }, - post: function ($scope, $el, attr, ngModelCtrl) { - // The model can become touched either onBlur event or when the form is submitted. - // We watch $touched to identify when the form is submitted. - $scope.$watch( - () => { - return ngModelCtrl.$touched; - }, - value => { - $scope.formIsTouched = value; - }, - true - ); - - $scope.onAggTypeChange = (agg, value) => { - if (agg.type !== value) { - agg.type = value; - } - }; - - $scope.onAggParamsChange = (params, paramName, value) => { - if (params[paramName] !== value) { - params[paramName] = value; - } - }; - - $scope.setValidity = isValid => { - ngModelCtrl.$setValidity(`aggParams${$scope.agg.id}`, isValid); - }; - - $scope.setTouched = isTouched => { - if (isTouched) { - ngModelCtrl.$setTouched(); - } else { - ngModelCtrl.$setUntouched(); - } - }; - - $scope.onAggErrorChanged = (agg, error) => { - if (error) { - agg.error = error; - } else { - delete agg.error; - } - }; - }, - }, - }; - }); diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index c8b0afcf30638..3c3ebe2f6fd26 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -21,7 +21,6 @@ import 'ngreact'; import { wrapInI18nContext } from 'ui/i18n'; import { uiModules } from '../../../modules'; import { DefaultEditorAggGroup } from './components/default_editor_agg_group'; -import { AggConfig } from '../../agg_config'; uiModules .get('app/visualize') @@ -32,6 +31,7 @@ uiModules ['vis', { watchDepth: 'reference' }], ['addSchema', { watchDepth: 'reference' }], ['removeAgg', { watchDepth: 'reference' }], + ['reorderAggs', { watchDepth: 'reference' }], ['onToggleEnableAgg', { watchDepth: 'reference' }], ['onAggErrorChanged', { watchDepth: 'reference' }], ['onAggTypeChange', { watchDepth: 'reference' }], @@ -49,7 +49,7 @@ uiModules // parent scope values right now. So we cannot easy change this, until we remove the whole directive. scope: true, require: '?^ngModel', - template: function ($el, attrs) { + template: function () { return ``; }, link: function ($scope, $el, attr, ngModelCtrl) { @@ -80,18 +81,6 @@ uiModules true ); - $scope.onAggTypeChange = (agg, value) => { - if (agg.type !== value) { - agg.type = value; - } - }; - - $scope.onAggParamsChange = (params, paramName, value) => { - if (params[paramName] !== value) { - params[paramName] = value; - } - }; - $scope.setValidity = isValid => { ngModelCtrl.$setValidity('aggGroup', isValid); }; @@ -111,31 +100,6 @@ uiModules delete agg.error; } }; - - $scope.addSchema = function (schema) { - const aggConfig = new AggConfig($scope.state.aggs, { - schema, - id: AggConfig.nextId($scope.state.aggs), - }); - aggConfig.brandNew = true; - - $scope.state.aggs.push(aggConfig); - }; - - $scope.removeAgg = function (agg) { - const aggs = $scope.state.aggs; - const index = aggs.indexOf(agg); - - if (index === -1) { - return; - } - - aggs.splice(index, 1); - }; - - $scope.onToggleEnableAgg = (agg, isEnable) => { - agg.enabled = isEnable; - }; }, }; }); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 185fcea1afa74..89cbbcf26b1bb 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { findIndex, reduce } from 'lodash'; import { EuiAccordion, @@ -28,6 +28,7 @@ import { EuiSpacer, EuiFlexGroup, EuiFlexItem, + EuiIconTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -40,6 +41,7 @@ interface DefaultEditorAggProps { agg: AggConfig; aggIndex: number; aggIsTooLow: boolean; + dragHandleProps: {} | null; groupName: string; formIsTouched: boolean; isDraggable: boolean; @@ -61,6 +63,8 @@ function DefaultEditorAgg({ agg, aggIndex, aggIsTooLow, + dragHandleProps, + dragging, groupName, formIsTouched, isDraggable, @@ -83,6 +87,12 @@ function DefaultEditorAgg({ const SchemaComponent = agg.schema.editorComponent; + useEffect(() => { + if (dragging) { + setIsEditorOpen(false); + } + }, [dragging]); + const renderAggButtons = () => { const actionIcons = []; @@ -120,9 +130,7 @@ function DefaultEditorAgg({ // directive draggable-handle actionIcons.push({ id: 'dragHandle', - color: 'text', - type: 'sortable', - onClick: () => 'onPriorityReorder(direction)', + type: 'grab', ariaLabel: i18n.translate('common.ui.vis.editors.agg.modifyPriorityButtonAriaLabel', { defaultMessage: 'Use up and down key on this button to move this aggregation up and down in the priority order.', @@ -150,17 +158,33 @@ function DefaultEditorAgg({ } return (
- {actionIcons.map(icon => ( - - - - ))} + {actionIcons.map(icon => { + if (icon.type === 'grab') { + return ( + + ); + } + + return ( + + + + ); + })}
); }; @@ -228,6 +252,7 @@ function DefaultEditorAgg({ data-test-subj="toggleEditor" extraAction={renderAggButtons()} onToggle={isOpen => setIsEditorOpen(isOpen)} + {...dragHandleProps} > <> diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index ee5b3c4863bde..2be09c48cf629 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -17,9 +17,9 @@ * under the License. */ -import React from 'react'; +import React, { useState } from 'react'; import { findIndex, reduce } from 'lodash'; -import { EuiForm, EuiTitle } from '@elastic/eui'; +import { EuiTitle, EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui'; import { AggType } from 'ui/agg_types'; import { Vis, VisState, AggParams } from 'ui/vis'; @@ -43,6 +43,7 @@ interface DefaultEditorAggGroupProps { onAggErrorChanged: (agg: AggConfig, error?: string) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; removeAgg: (agg: AggConfig) => void; + reorderAggs: (group: AggConfig[]) => void; setTouched: (isTouched: boolean) => void; setValidity: (isValid: boolean) => void; } @@ -61,9 +62,10 @@ function DefaultEditorAggGroup({ onAggErrorChanged, onToggleEnableAgg, removeAgg, + reorderAggs, }: DefaultEditorAggGroupProps) { const groupNameLabel = aggGroupNameMaps()[groupName]; - const group: AggConfigs = state.aggs.bySchemaGroup[groupName]; + const group: AggConfigs = state.aggs.bySchemaGroup[groupName] || []; const schemas = vis.type.schemas[groupName]; const stats = { min: 0, @@ -109,48 +111,67 @@ function DefaultEditorAggGroup({ return aggIndex > firstDifferentSchema; }; + const onDragEnd = ({ source, destination }: any) => { + if (source && destination) { + const orderedGroup = Array.from(group); + const [removed] = orderedGroup.splice(source.index, 1); + orderedGroup.splice(destination.index, 0, removed); + + reorderAggs(orderedGroup); + } + }; + return ( - <> - - -

{groupNameLabel}

- - {group && - group.map((agg: AggConfig, index: number) => ( - 1} - isRemovable={canRemove(agg)} - isValid={true} - data-test-subj={`aggregationEditor${agg.id}`} - responseValueAggs={responseValueAggs} - state={state} - vis={vis} - onAggParamsChange={onAggParamsChange} - onAggTypeChange={onAggTypeChange} - setTouched={setTouched} - setValidity={setValidity} - onAggErrorChanged={onAggErrorChanged} - onToggleEnableAgg={onToggleEnableAgg} - removeAgg={removeAgg} - /> - ))} - {stats.max > stats.count && ( - - )} - - + + +

{groupNameLabel}

+ + + {group.map((agg: AggConfig, index: number) => ( + + {provided => ( + 1} + isRemovable={canRemove(agg)} + isValid={true} + data-test-subj={`aggregationEditor${agg.id}`} + responseValueAggs={responseValueAggs} + state={state} + vis={vis} + onAggParamsChange={onAggParamsChange} + onAggTypeChange={onAggTypeChange} + setTouched={setTouched} + setValidity={setValidity} + onAggErrorChanged={onAggErrorChanged} + onToggleEnableAgg={onToggleEnableAgg} + removeAgg={removeAgg} + dragHandleProps={provided.dragHandleProps} + /> + )} + + ))} + + {stats.max > stats.count && ( + + )} + ); } diff --git a/src/legacy/ui/public/vis/editors/default/old_agg_group.js b/src/legacy/ui/public/vis/editors/default/old_agg_group.js deleted file mode 100644 index 2ae0bfe55c732..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/old_agg_group.js +++ /dev/null @@ -1,130 +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 _ from 'lodash'; -import './agg'; -import './agg_add'; - -import { uiModules } from '../../../modules'; -import aggGroupTemplate from './agg_group.html'; -import { move } from '../../../utils/collection'; -import { aggGroupNameMaps } from './agg_group_names'; -import { AggConfig } from '../../agg_config'; -import { Direction } from './keyboard_move'; - -import '../../draggable/draggable_container'; -import '../../draggable/draggable_item'; -import '../../draggable/draggable_handle'; - -uiModules.get('app/visualize').directive('visEditorAggGroup', function () { - return { - restrict: 'E', - template: aggGroupTemplate, - scope: true, - link: function ($scope, $el, attr) { - $scope.groupName = attr.groupName; - $scope.groupNameLabel = aggGroupNameMaps()[$scope.groupName]; - $scope.$bind('group', 'state.aggs.bySchemaGroup["' + $scope.groupName + '"]'); - $scope.$bind('schemas', 'vis.type.schemas["' + $scope.groupName + '"]'); - - $scope.$watchMulti(['schemas', '[]group'], function () { - const stats = ($scope.stats = { - min: 0, - max: 0, - count: $scope.group ? $scope.group.length : 0, - }); - - if (!$scope.schemas) return; - - $scope.schemas.forEach(function (schema) { - stats.min += schema.min; - stats.max += schema.max; - stats.deprecate = schema.deprecate; - }); - }); - - function reorderFinished() { - //the aggs have been reordered in [group] and we need - //to apply that ordering to [vis.aggs] - const indexOffset = $scope.state.aggs.indexOf($scope.group[0]); - _.forEach($scope.group, (agg, index) => { - move($scope.state.aggs, agg, indexOffset + index); - }); - } - - $scope.$on('agg-reorder', reorderFinished); - $scope.$on('agg-drag-start', () => ($scope.dragging = true)); - $scope.$on('agg-drag-end', () => { - $scope.dragging = false; - reorderFinished(); - }); - - $scope.addSchema = function (schema) { - const aggConfig = new AggConfig($scope.state.aggs, { - schema, - id: AggConfig.nextId($scope.state.aggs), - }); - aggConfig.brandNew = true; - - $scope.state.aggs.push(aggConfig); - }; - - $scope.removeAgg = function (agg) { - const aggs = $scope.state.aggs; - const index = aggs.indexOf(agg); - - if (index === -1) { - return; - } - - aggs.splice(index, 1); - }; - - $scope.onToggleEnableAgg = (agg, isEnable) => { - agg.enabled = isEnable; - }; - - /** - * Move aggregations down/up in the priority list by pressing arrow keys. - */ - $scope.onPriorityReorder = function (direction) { - const positionOffset = direction === Direction.down ? 1 : -1; - - const currentPosition = $scope.group.indexOf($scope.agg); - const newPosition = Math.max( - 0, - Math.min(currentPosition + positionOffset, $scope.group.length - 1) - ); - move($scope.group, currentPosition, newPosition); - $scope.$emit('agg-reorder'); - }; - - $scope.$on('drag-start', () => { - $scope.editorWasOpen = $scope.editorOpen; - $scope.editorOpen = false; - $scope.$emit('agg-drag-start', $scope.agg); - }); - - $scope.$on('drag-end', () => { - $scope.editorOpen = $scope.editorWasOpen; - $scope.$emit('agg-drag-end', $scope.agg); - }); - }, - }; -}); diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.js b/src/legacy/ui/public/vis/editors/default/sidebar.js index ac722bbc78538..30e42d1957698 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.js +++ b/src/legacy/ui/public/vis/editors/default/sidebar.js @@ -23,6 +23,8 @@ import './vis_options'; import 'ui/directives/css_truncate'; import { uiModules } from '../../../modules'; import sidebarTemplate from './sidebar.html'; +import { move } from '../../../utils/collection'; +import { AggConfig } from '../../agg_config'; uiModules.get('app/visualize').directive('visEditorSidebar', function () { return { @@ -48,6 +50,52 @@ uiModules.get('app/visualize').directive('visEditorSidebar', function () { (this.showData ? 'data' : _.get(visType, 'editorConfig.optionTabs[0].name')); } }); + + $scope.onAggTypeChange = (agg, value) => { + if (agg.type !== value) { + agg.type = value; + } + }; + + $scope.onAggParamsChange = (params, paramName, value) => { + if (params[paramName] !== value) { + params[paramName] = value; + } + }; + + $scope.addSchema = function (schema) { + const aggConfig = new AggConfig($scope.state.aggs, { + schema, + id: AggConfig.nextId($scope.state.aggs), + }); + aggConfig.brandNew = true; + + $scope.state.aggs.push(aggConfig); + }; + + $scope.removeAgg = function (agg) { + const aggs = $scope.state.aggs; + const index = aggs.indexOf(agg); + + if (index === -1) { + return; + } + + aggs.splice(index, 1); + }; + + $scope.onToggleEnableAgg = (agg, isEnable) => { + agg.enabled = isEnable; + }; + + $scope.reorderAggs = (group) => { + //the aggs have been reordered in [group] and we need + //to apply that ordering to [vis.aggs] + const indexOffset = $scope.state.aggs.indexOf(group[0]); + _.forEach(group, (agg, index) => { + move($scope.state.aggs, agg, indexOffset + index); + }); + }; }, }; }); From e6e6559f5e3986f37a905f754c01099d4e99a709 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 10 Jul 2019 18:59:42 +0300 Subject: [PATCH 04/45] Remove unused files --- .../vis/draggable/__tests__/draggable.js | 139 ----------------- .../vis/draggable/draggable_container.js | 133 ---------------- .../public/vis/draggable/draggable_handle.js | 33 ---- .../ui/public/vis/draggable/draggable_item.js | 49 ------ .../default/__tests__/keyboard_move.js | 63 -------- .../public/vis/editors/default/_sidebar.scss | 5 - .../ui/public/vis/editors/default/agg.html | 142 ------------------ .../ui/public/vis/editors/default/agg_add.js | 34 ----- .../public/vis/editors/default/agg_group.html | 25 --- .../public/vis/editors/default/agg_group.js | 1 + .../public/vis/editors/default/agg_params.js | 43 ------ .../default/components/default_editor_agg.tsx | 55 ++++--- .../components/default_editor_agg_group.tsx | 7 +- .../editors/default/controls/agg_controls.js | 31 ---- .../ui/public/vis/editors/default/default.js | 2 + .../vis/editors/default/keyboard_move.js | 75 --------- .../public/vis/editors/default/sidebar.html | 20 ++- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 19 files changed, 46 insertions(+), 813 deletions(-) delete mode 100644 src/legacy/ui/public/vis/draggable/__tests__/draggable.js delete mode 100644 src/legacy/ui/public/vis/draggable/draggable_container.js delete mode 100644 src/legacy/ui/public/vis/draggable/draggable_handle.js delete mode 100644 src/legacy/ui/public/vis/draggable/draggable_item.js delete mode 100644 src/legacy/ui/public/vis/editors/default/__tests__/keyboard_move.js delete mode 100644 src/legacy/ui/public/vis/editors/default/agg.html delete mode 100644 src/legacy/ui/public/vis/editors/default/agg_add.js delete mode 100644 src/legacy/ui/public/vis/editors/default/agg_group.html delete mode 100644 src/legacy/ui/public/vis/editors/default/agg_params.js delete mode 100644 src/legacy/ui/public/vis/editors/default/controls/agg_controls.js delete mode 100644 src/legacy/ui/public/vis/editors/default/keyboard_move.js diff --git a/src/legacy/ui/public/vis/draggable/__tests__/draggable.js b/src/legacy/ui/public/vis/draggable/__tests__/draggable.js deleted file mode 100644 index fc0601a9b67e9..0000000000000 --- a/src/legacy/ui/public/vis/draggable/__tests__/draggable.js +++ /dev/null @@ -1,139 +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 angular from 'angular'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; - -let init; -let $rootScope; -let $compile; - -describe(`draggable_* directives`, function () { - - beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject(function ($injector) { - $rootScope = $injector.get('$rootScope'); - $compile = $injector.get('$compile'); - init = function init(markup = '') { - const $parentScope = $rootScope.$new(); - $parentScope.items = [ - { name: 'item_1' }, - { name: 'item_2' }, - { name: 'item_3' } - ]; - - // create the markup - const $elem = angular.element(`
`); - $elem.html(markup); - - // compile the directive - $compile($elem)($parentScope); - $parentScope.$apply(); - - const $scope = $elem.scope(); - - return { $parentScope, $scope, $elem }; - }; - })); - - describe(`draggable_container directive`, function () { - it(`should expose the drake`, function () { - const { $scope } = init(); - expect($scope.drake).to.be.an(Object); - }); - - it(`should expose the controller`, function () { - const { $scope } = init(); - expect($scope.draggableContainerCtrl).to.be.an(Object); - }); - - it(`should pull item list from directive attribute`, function () { - const { $scope, $parentScope } = init(); - expect($scope.draggableContainerCtrl.getList()).to.eql($parentScope.items); - }); - - it(`should not be able to move extraneous DOM elements`, function () { - const bare = angular.element(`
`); - const { $scope } = init(); - expect($scope.drake.canMove(bare[0])).to.eql(false); - }); - - it(`should not be able to move non-[draggable-item] elements`, function () { - const bare = angular.element(`
`); - const { $scope, $elem } = init(); - $elem.append(bare); - expect($scope.drake.canMove(bare[0])).to.eql(false); - }); - - it(`shouldn't be able to move extraneous [draggable-item] elements`, function () { - const anotherParent = angular.element(`
`); - const item = angular.element(`
`); - const scope = $rootScope.$new(); - anotherParent.append(item); - $compile(anotherParent)(scope); - $compile(item)(scope); - scope.$apply(); - const { $scope } = init(); - expect($scope.drake.canMove(item[0])).to.eql(false); - }); - - it(`shouldn't be able to move [draggable-item] if it has a handle`, function () { - const { $scope, $elem } = init(` -
-
-
- `); - const item = $elem.find(`[draggable-item]`); - expect($scope.drake.canMove(item[0])).to.eql(false); - }); - - it(`should be able to move [draggable-item] by its handle`, function () { - const { $scope, $elem } = init(` -
-
-
- `); - const handle = $elem.find(`[draggable-handle]`); - expect($scope.drake.canMove(handle[0])).to.eql(true); - }); - }); - - describe(`draggable_item`, function () { - it(`should be required to be a child to [draggable-container]`, function () { - const item = angular.element(`
`); - const scope = $rootScope.$new(); - expect(() => { - $compile(item)(scope); - scope.$apply(); - }).to.throwException(/controller(.+)draggableContainer(.+)required/i); - }); - }); - - describe(`draggable_handle`, function () { - it('should be required to be a child to [draggable-item]', function () { - const handle = angular.element(`
`); - const scope = $rootScope.$new(); - expect(() => { - $compile(handle)(scope); - scope.$apply(); - }).to.throwException(/controller(.+)draggableItem(.+)required/i); - }); - }); -}); diff --git a/src/legacy/ui/public/vis/draggable/draggable_container.js b/src/legacy/ui/public/vis/draggable/draggable_container.js deleted file mode 100644 index d1e11fc9740b3..0000000000000 --- a/src/legacy/ui/public/vis/draggable/draggable_container.js +++ /dev/null @@ -1,133 +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 dragula from 'dragula'; -import 'dragula/dist/dragula.css'; -import { uiModules } from '../../modules'; -import { move } from '../../utils/collection'; - -uiModules - .get('kibana') - .directive('draggableContainer', function () { - - const $scopes = new WeakMap(); - - return { - restrict: 'A', - scope: true, - controllerAs: 'draggableContainerCtrl', - controller($scope, $attrs, $parse, $element) { - $scopes.set($element.get(0), $scope); - this.linkDraggableItem = (el, $scope) => { - $scopes.set(el, $scope); - }; - - this.getList = () => $parse($attrs.draggableContainer)($scope); - }, - link($scope, $el) { - const drake = dragula({ - containers: $el.toArray(), - moves(el, source, handle) { - const itemScope = $scopes.get(el); - if (!itemScope || !('draggableItemCtrl' in itemScope)) { - return; // only [draggable-item] is draggable - } - return itemScope.draggableItemCtrl.moves(handle); - } - }); - - const drakeEvents = [ - 'cancel', - 'cloned', - 'drag', - 'dragend', - 'drop', - 'out', - 'over', - 'remove', - 'shadow' - ]; - const prettifiedDrakeEvents = { - drag: 'start', - dragend: 'end' - }; - - drakeEvents.forEach(type => { - drake.on(type, (el, ...args) => forwardEvent(type, el, ...args)); - }); - drake.on('drag', markDragging(true)); - drake.on('dragend', markDragging(false)); - drake.on('drop', drop); - $scope.$on('$destroy', drake.destroy); - $scope.drake = drake; - - function markDragging(isDragging) { - return el => { - const scope = $scopes.get(el); - if (!scope) return; - scope.isDragging = isDragging; - scope.$apply(); - }; - } - - function forwardEvent(type, el, ...args) { - const name = `drag-${prettifiedDrakeEvents[type] || type}`; - const scope = $scopes.get(el); - if (!scope) return; - scope.$broadcast(name, el, ...args); - } - - function drop(el, target, source, sibling) { - const list = $scope.draggableContainerCtrl.getList(); - const itemScope = $scopes.get(el); - if (!itemScope) return; - const item = itemScope.draggableItemCtrl.getItem(); - const fromIndex = list.indexOf(item); - const siblingIndex = getItemIndexFromElement(list, sibling); - - const toIndex = getTargetIndex(list, fromIndex, siblingIndex); - move(list, item, toIndex); - } - - function getTargetIndex(list, fromIndex, siblingIndex) { - if (siblingIndex === -1) { - // means the item was dropped at the end of the list - return list.length - 1; - } else if (fromIndex < siblingIndex) { - // An item moving from a lower index to a higher index will offset the - // index of the earlier items by one. - return siblingIndex - 1; - } - return siblingIndex; - } - - function getItemIndexFromElement(list, element) { - if (!element) return -1; - - const scope = $scopes.get(element); - if (!scope) return; - const item = scope.draggableItemCtrl.getItem(); - const index = list.indexOf(item); - - return index; - } - } - }; - - }); diff --git a/src/legacy/ui/public/vis/draggable/draggable_handle.js b/src/legacy/ui/public/vis/draggable/draggable_handle.js deleted file mode 100644 index ce8815c2a749f..0000000000000 --- a/src/legacy/ui/public/vis/draggable/draggable_handle.js +++ /dev/null @@ -1,33 +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 { uiModules } from '../../modules'; - -uiModules - .get('kibana') - .directive('draggableHandle', function () { - return { - restrict: 'A', - require: '^draggableItem', - link($scope, $el, attr, ctrl) { - ctrl.registerHandle($el); - $el.addClass('gu-handle'); - } - }; - }); diff --git a/src/legacy/ui/public/vis/draggable/draggable_item.js b/src/legacy/ui/public/vis/draggable/draggable_item.js deleted file mode 100644 index 943438aa61b55..0000000000000 --- a/src/legacy/ui/public/vis/draggable/draggable_item.js +++ /dev/null @@ -1,49 +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 $ from 'jquery'; -import { uiModules } from '../../modules'; - -uiModules - .get('kibana') - .directive('draggableItem', function () { - return { - restrict: 'A', - require: '^draggableContainer', - scope: true, - controllerAs: 'draggableItemCtrl', - controller($scope, $attrs, $parse) { - const dragHandles = $(); - - this.getItem = () => $parse($attrs.draggableItem)($scope); - this.registerHandle = $el => { - dragHandles.push(...$el); - }; - this.moves = handle => { - const $handle = $(handle); - const $anywhereInParentChain = $handle.parents().addBack(); - const movable = dragHandles.is($anywhereInParentChain); - return movable; - }; - }, - link($scope, $el, attr, draggableController) { - draggableController.linkDraggableItem($el.get(0), $scope); - } - }; - }); diff --git a/src/legacy/ui/public/vis/editors/default/__tests__/keyboard_move.js b/src/legacy/ui/public/vis/editors/default/__tests__/keyboard_move.js deleted file mode 100644 index b24e2918ac07d..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/__tests__/keyboard_move.js +++ /dev/null @@ -1,63 +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 angular from 'angular'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import sinon from 'sinon'; -import { Direction } from '../keyboard_move'; -import { keyCodes } from '@elastic/eui'; - -describe('keyboardMove directive', () => { - - let $compile; - let $rootScope; - - function createTestButton(callback) { - const scope = $rootScope.$new(); - scope.callback = callback; - return $compile('')(scope); - } - - function createKeydownEvent(keyCode) { - const e = angular.element.Event('keydown'); // eslint-disable-line new-cap - e.which = keyCode; - return e; - } - - beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject((_$rootScope_, _$compile_) => { - $compile = _$compile_; - $rootScope = _$rootScope_; - })); - - it('should call the callback when pressing up', () => { - const spy = sinon.spy(); - const button = createTestButton(spy); - button.trigger(createKeydownEvent(keyCodes.UP)); - expect(spy.calledWith(Direction.up)).to.be(true); - }); - - it('should call the callback when pressing down', () => { - const spy = sinon.spy(); - const button = createTestButton(spy); - button.trigger(createKeydownEvent(keyCodes.DOWN)); - expect(spy.calledWith(Direction.down)).to.be(true); - }); -}); diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index db9c3337beed4..ed87597a3897f 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -170,11 +170,6 @@ @include euiTextTruncate; } -.visEditorSidebar__collapsibleTitleDescription--danger { - color: $euiColorDanger; - font-weight: $euiFontWeightBold; -} - // // FORMS diff --git a/src/legacy/ui/public/vis/editors/default/agg.html b/src/legacy/ui/public/vis/editors/default/agg.html deleted file mode 100644 index 85c446d2abe59..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/agg.html +++ /dev/null @@ -1,142 +0,0 @@ -
- -
- - - - - - - {{ describe() }} - - - - - - - -
- - - - - - - - - - - - -
- -
- - - - - - -
- - - diff --git a/src/legacy/ui/public/vis/editors/default/agg_add.js b/src/legacy/ui/public/vis/editors/default/agg_add.js deleted file mode 100644 index a60e9146b01a2..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/agg_add.js +++ /dev/null @@ -1,34 +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 { uiModules } from '../../../modules'; -import { DefaultEditorAggAdd } from './components/default_editor_agg_add'; -import { wrapInI18nContext } from 'ui/i18n'; - -uiModules - .get('kibana') - .directive('visEditorAggAdd', reactDirective => - reactDirective(wrapInI18nContext(DefaultEditorAggAdd), [ - ['group', { watchDepth: 'collection' }], - ['schemas', { watchDepth: 'collection' }], - ['stats', { watchDepth: 'reference' }], - 'groupName', - 'addSchema' - ]) - ); diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.html b/src/legacy/ui/public/vis/editors/default/agg_group.html deleted file mode 100644 index ab7c635f2a161..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/agg_group.html +++ /dev/null @@ -1,25 +0,0 @@ -
-
- {{ groupNameLabel }} -
- -
-
- - - - -
- - - -
-
- -
diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 3c3ebe2f6fd26..caf93643f4801 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -52,6 +52,7 @@ uiModules template: function () { return ` reactDirective(wrapInI18nContext(DefaultEditorAggParams), [ - ['agg', { watchDepth: 'reference' }], - ['aggParams', { watchDepth: 'collection' }], - ['indexPattern', { watchDepth: 'reference' }], - ['responseValueAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects - ['state', { watchDepth: 'reference' }], - ['onAggErrorChanged', { watchDepth: 'reference' }], - ['onAggTypeChange', { watchDepth: 'reference' }], - ['onAggParamsChange', { watchDepth: 'reference' }], - ['setTouched', { watchDepth: 'reference' }], - ['setValidity', { watchDepth: 'reference' }], - 'aggError', - 'aggIndex', - 'groupName', - 'aggIsTooLow', - 'formIsTouched' - ])); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 89cbbcf26b1bb..77486725561da 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -17,8 +17,7 @@ * under the License. */ -import React, { useState, useEffect } from 'react'; -import { findIndex, reduce } from 'lodash'; +import React, { useState } from 'react'; import { EuiAccordion, EuiToolTip, @@ -46,7 +45,6 @@ interface DefaultEditorAggProps { formIsTouched: boolean; isDraggable: boolean; isRemovable: boolean; - isValid: boolean; responseValueAggs: AggConfig[] | null; state: VisState; vis: Vis; @@ -64,12 +62,10 @@ function DefaultEditorAgg({ aggIndex, aggIsTooLow, dragHandleProps, - dragging, groupName, formIsTouched, isDraggable, isRemovable, - isValid, responseValueAggs, state, vis, @@ -82,17 +78,16 @@ function DefaultEditorAgg({ removeAgg, }: DefaultEditorAggProps) { const [isEditorOpen, setIsEditorOpen] = useState(agg.brandNew); - const showDescription = !isEditorOpen && isValid; - const showError = !isEditorOpen && !isValid; + const [validState, setValidState] = useState(true); + const showDescription = !isEditorOpen && validState; + const showError = !isEditorOpen && !validState; const SchemaComponent = agg.schema.editorComponent; - useEffect(() => { - if (dragging) { - setIsEditorOpen(false); - } - }, [dragging]); - + const onSetValidity = (isValid: boolean) => { + setValidity(isValid); + setValidState(isValid); + }; const renderAggButtons = () => { const actionIcons = []; @@ -127,14 +122,9 @@ function DefaultEditorAgg({ }); } if (isDraggable) { - // directive draggable-handle actionIcons.push({ id: 'dragHandle', type: 'grab', - ariaLabel: i18n.translate('common.ui.vis.editors.agg.modifyPriorityButtonAriaLabel', { - defaultMessage: - 'Use up and down key on this button to move this aggregation up and down in the priority order.', - }), tooltip: i18n.translate('common.ui.vis.editors.agg.modifyPriorityButtonTooltip', { defaultMessage: 'Modify priority by dragging', }), @@ -169,6 +159,7 @@ function DefaultEditorAgg({ ['aria-label']: icon.ariaLabel, ['data-test-subj']: icon.dataTestSubj, }} + position="bottom" /> ); } @@ -200,12 +191,6 @@ function DefaultEditorAgg({ return agg.type.makeLabel(agg) || ''; }; - // $scope.$watch('editorOpen', function(open) { - // // make sure that all of the form inputs are "touched" - // // so that their errors propagate - // if (!open) kbnForm.$setTouched(); - // }); - const buttonContent = (
@@ -223,7 +208,12 @@ function DefaultEditorAgg({ )} {showError && ( - +
); + const onToggle = (isOpen: boolean) => { + setIsEditorOpen(isOpen); + if (!isOpen) { + setTouched(true); + } + }; + return ( <> setIsEditorOpen(isOpen)} + onToggle={onToggle} {...dragHandleProps} > <> @@ -267,16 +264,16 @@ function DefaultEditorAgg({ agg={agg} aggIndex={aggIndex} aggIsTooLow={aggIsTooLow} - groupName={groupName} formIsTouched={formIsTouched} + groupName={groupName} indexPattern={vis.indexPattern} responseValueAggs={responseValueAggs} state={state} + onAggErrorChanged={onAggErrorChanged} onAggParamsChange={onAggParamsChange} onAggTypeChange={onAggTypeChange} setTouched={setTouched} - setValidity={setValidity} - onAggErrorChanged={onAggErrorChanged} + setValidity={onSetValidity} /> diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 2be09c48cf629..64d35d6c0508d 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useState } from 'react'; +import React from 'react'; import { findIndex, reduce } from 'lodash'; import { EuiTitle, EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui'; @@ -70,7 +70,7 @@ function DefaultEditorAggGroup({ const stats = { min: 0, max: 0, - count: group ? group.length : 0, + count: group.length, deprecate: false, }; @@ -126,7 +126,7 @@ function DefaultEditorAggGroup({

{groupNameLabel}

 - + {group.map((agg: AggConfig, index: number) => ( 1} isRemovable={canRemove(agg)} - isValid={true} data-test-subj={`aggregationEditor${agg.id}`} responseValueAggs={responseValueAggs} state={state} diff --git a/src/legacy/ui/public/vis/editors/default/controls/agg_controls.js b/src/legacy/ui/public/vis/editors/default/controls/agg_controls.js deleted file mode 100644 index 860c33bc99400..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/controls/agg_controls.js +++ /dev/null @@ -1,31 +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 { wrapInI18nContext } from 'ui/i18n'; -import { uiModules } from '../../../../modules'; -import { AggControlReactWrapper } from './agg_control_react_wrapper'; - -uiModules - .get('app/visualize') - .directive('visAggControlReactWrapper', reactDirective => reactDirective(wrapInI18nContext(AggControlReactWrapper), [ - ['aggParams', { watchDepth: 'collection' }], - ['editorStateParams', { watchDepth: 'collection' }], - ['component', { wrapApply: false }], - 'setValue' - ])); diff --git a/src/legacy/ui/public/vis/editors/default/default.js b/src/legacy/ui/public/vis/editors/default/default.js index a58263d3e5b62..50d3a82582288 100644 --- a/src/legacy/ui/public/vis/editors/default/default.js +++ b/src/legacy/ui/public/vis/editors/default/default.js @@ -17,6 +17,8 @@ * under the License. */ +import 'ui/angular-bootstrap'; +import './fancy_forms'; import './sidebar'; import { i18n } from '@kbn/i18n'; import './vis_options'; diff --git a/src/legacy/ui/public/vis/editors/default/keyboard_move.js b/src/legacy/ui/public/vis/editors/default/keyboard_move.js deleted file mode 100644 index 9f5b1eefa0ceb..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/keyboard_move.js +++ /dev/null @@ -1,75 +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. - */ - -/** - * The keyboardMove directive can be attached to elements, that can receive keydown events. - * It will call the passed callback function and pass the direction in which an - * arrow key was pressed to the callback (as the argument with the name `direction`). - * The passed value will be one of `Direction.up` or `Direction.down`, which can be - * imported to compare against those values. The directive will also make sure, that - * the pressed button will get the focus back (e.g. if it was lost due to a ng-repeat - * reordering). - * - * Usage example: - * - * - * - * import { Direction } from './keyboard_move'; - * function onMoved(dir) { - * if (dir === Direction.up) { - * // moved up - * } else if (dir === Direction.down) { - * // moved down - * } - * } - */ -import { uiModules } from '../../../modules'; -import { keyCodes } from '@elastic/eui'; - -export const Direction = { - up: 'up', - down: 'down' -}; - -const directionMapping = { - [keyCodes.UP]: Direction.up, - [keyCodes.DOWN]: Direction.down -}; - -uiModules.get('kibana') - .directive('keyboardMove', ($parse, $timeout) => ({ - restrict: 'A', - link(scope, el, attr) { - const callbackFn = $parse(attr.keyboardMove); - el.keydown((ev) => { - if (ev.which in directionMapping) { - ev.preventDefault(); - const direction = directionMapping[ev.which]; - scope.$apply(() => callbackFn(scope, { direction })); - // Keep focus on that element, even though it might be attached somewhere - // else in the DOM (e.g. because it has a new position in an ng-repeat). - $timeout(() => el.focus()); - } - }); - - scope.$on('$destroy', () => { - el.off('keydown'); - }); - } - })); diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html index 57f052ed52f3e..427f193f9d97e 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.html +++ b/src/legacy/ui/public/vis/editors/default/sidebar.html @@ -151,14 +151,22 @@
- - - + - - - +
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 7e2cb0fcfb64a..f390bb2ea5af9 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -607,7 +607,6 @@ "common.ui.vis.editors.aggGroups.metricsText": "メトリック", "common.ui.vis.editors.aggParams.errors.aggWrongRunOrderErrorMessage": "「{schema}」集約は他のバケットの前に実行する必要があります！", "common.ui.vis.editors.aggParams.errors.schemaIsDeprecatedErrorMessage": "「{schema}」は廃止されました。", - "common.ui.vis.editors.howToModifyScreenReaderPriorityDescription": "このボタンの上下の矢印キーで、集約の優先順位の上下を変更します。", "common.ui.vis.editors.resizeAriaLabels": "左右のキーでエディターのサイズを変更します", "common.ui.vis.editors.sidebar.applyChangesAriaLabel": "ビジュアライゼーションを変更と共に更新します", "common.ui.vis.editors.sidebar.applyChangesTooltip": "変更を適用", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index c25b2f8475f20..e91eb401ffd75 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -607,7 +607,6 @@ "common.ui.vis.editors.aggGroups.metricsText": "指标", "common.ui.vis.editors.aggParams.errors.aggWrongRunOrderErrorMessage": "“{schema}” 聚合必须在所有其他存储桶之前运行！", "common.ui.vis.editors.aggParams.errors.schemaIsDeprecatedErrorMessage": "‘’{schema}”已弃用。", - "common.ui.vis.editors.howToModifyScreenReaderPriorityDescription": "使用此按钮上的向上和向下键上移和下移此聚合的优先级顺序。", "common.ui.vis.editors.resizeAriaLabels": "按向左/向右键以调整编辑器的大小", "common.ui.vis.editors.sidebar.applyChangesAriaLabel": "使用您的更改更新可视化", "common.ui.vis.editors.sidebar.applyChangesTooltip": "应用更改", From d5cf2c9a893ffcac361c8c67d5ede9da9e6d599a Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 10 Jul 2019 19:00:09 +0300 Subject: [PATCH 05/45] Remove unused dragula dependency --- package.json | 1 - yarn.lock | 38 -------------------------------------- 2 files changed, 39 deletions(-) diff --git a/package.json b/package.json index a9f37faf2116e..c731278360a71 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,6 @@ "d3": "3.5.17", "d3-cloud": "1.2.5", "del": "^4.0.0", - "dragula": "3.7.2", "elasticsearch": "^16.2.0", "elasticsearch-browser": "^16.2.0", "encode-uri-query": "1.0.1", diff --git a/yarn.lock b/yarn.lock index a668d840e67fe..7e667920fe625 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6053,11 +6053,6 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha1-x57Zf380y48robyXkLzDZkdLS3k= -atoa@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/atoa/-/atoa-1.0.0.tgz#0cc0e91a480e738f923ebc103676471779b34a49" - integrity sha1-DMDpGkgOc4+SPrwQNnZHF3mzSkk= - atob-lite@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696" @@ -8862,14 +8857,6 @@ contour_plot@^0.0.1: resolved "https://registry.yarnpkg.com/contour_plot/-/contour_plot-0.0.1.tgz#475870f032b8e338412aa5fc507880f0bf495c77" integrity sha1-R1hw8DK44zhBKqX8UHiA8L9JXHc= -contra@1.9.4: - version "1.9.4" - resolved "https://registry.yarnpkg.com/contra/-/contra-1.9.4.tgz#f53bde42d7e5b5985cae4d99a8d610526de8f28d" - integrity sha1-9TveQtfltZhcrk2ZqNYQUm3o8o0= - dependencies: - atoa "1.0.0" - ticky "1.0.1" - convert-source-map@1.X, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0: version "1.5.1" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5" @@ -9235,13 +9222,6 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0: shebang-command "^1.2.0" which "^1.2.9" -crossvent@1.5.4: - version "1.5.4" - resolved "https://registry.yarnpkg.com/crossvent/-/crossvent-1.5.4.tgz#da2c4f8f40c94782517bf2beec1044148194ab92" - integrity sha1-2ixPj0DJR4JRe/K+7BBEFIGUq5I= - dependencies: - custom-event "1.0.0" - cryptiles@2.x.x: version "2.0.5" resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8" @@ -9488,11 +9468,6 @@ custom-event-polyfill@^0.3.0: resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-0.3.0.tgz#99807839be62edb446b645832e0d80ead6fa1888" integrity sha1-mYB4Ob5i7bRGtkWDLg2A6tb6GIg= -custom-event@1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.0.tgz#2e4628be19dc4b214b5c02630c5971e811618062" - integrity sha1-LkYovhncSyFLXAJjDFlx6BFhgGI= - custom-event@~1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425" @@ -10699,14 +10674,6 @@ dragselect@1.8.1: resolved "https://registry.yarnpkg.com/dragselect/-/dragselect-1.8.1.tgz#63f71a6f980f710c87e28b328e175b7afc9e162b" integrity sha512-4YbJCcS6zwK8vMX2GiIX3tUrXFSo9a6xmV2z66EIJ8nj+iMHP1o4j0PeFdf5zjfhqVZJi+6zuVKPZInnrTLMbw== -dragula@3.7.2: - version "3.7.2" - resolved "https://registry.yarnpkg.com/dragula/-/dragula-3.7.2.tgz#4a35c9d3981ffac1a949c29ca7285058e87393ce" - integrity sha1-SjXJ05gf+sGpScKcpyhQWOhzk84= - dependencies: - contra "1.9.4" - crossvent "1.5.4" - duplexer2@0.0.2, duplexer2@~0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db" @@ -26893,11 +26860,6 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371" integrity sha1-qGLgGOP7HqLsP85dVWBc9X8kc3E= -ticky@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/ticky/-/ticky-1.0.1.tgz#b7cfa71e768f1c9000c497b9151b30947c50e46d" - integrity sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0= - tildify@^1.0.0, tildify@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a" From 492a3398502ac259f5e3566f729f3ff1d8ccaa15 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 11 Jul 2019 17:12:01 +0300 Subject: [PATCH 06/45] Refactoring --- src/legacy/ui/public/vis/agg_configs.d.ts | 9 +- .../public/vis/editors/default/agg_group.js | 28 +-- .../default/components/default_editor_agg.tsx | 145 +++++++------- .../components/default_editor_agg_group.tsx | 188 ++++++++++-------- .../default_editor_agg_group_helper.tsx | 51 +++++ .../public/vis/editors/default/sidebar.html | 4 +- .../ui/public/vis/editors/default/sidebar.js | 8 + .../request_handlers/request_handlers.d.ts | 4 +- src/legacy/ui/public/vis/vis.d.ts | 3 +- .../loader/embedded_visualize_handler.test.ts | 4 +- 10 files changed, 254 insertions(+), 190 deletions(-) create mode 100644 src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx diff --git a/src/legacy/ui/public/vis/agg_configs.d.ts b/src/legacy/ui/public/vis/agg_configs.d.ts index c9557aef4da02..d6223712a7448 100644 --- a/src/legacy/ui/public/vis/agg_configs.d.ts +++ b/src/legacy/ui/public/vis/agg_configs.d.ts @@ -17,4 +17,11 @@ * under the License. */ -export type AggConfigs = any; +import { IndexedArray } from '../indexed_array'; +import { AggConfig } from './agg_config'; + +export interface AggConfigs extends IndexedArray { + bySchemaGroup: { + [key: string]: AggConfig[]; + }; +} diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index caf93643f4801..0a132cfd35b5d 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -30,12 +30,12 @@ uiModules ['state', { watchDepth: 'reference' }], ['vis', { watchDepth: 'reference' }], ['addSchema', { watchDepth: 'reference' }], - ['removeAgg', { watchDepth: 'reference' }], - ['reorderAggs', { watchDepth: 'reference' }], - ['onToggleEnableAgg', { watchDepth: 'reference' }], ['onAggErrorChanged', { watchDepth: 'reference' }], - ['onAggTypeChange', { watchDepth: 'reference' }], ['onAggParamsChange', { watchDepth: 'reference' }], + ['onAggTypeChange', { watchDepth: 'reference' }], + ['onToggleEnableAgg', { watchDepth: 'reference' }], + ['removeAgg', { watchDepth: 'reference' }], + ['reorderAggs', { watchDepth: 'reference' }], ['setTouched', { watchDepth: 'reference' }], ['setValidity', { watchDepth: 'reference' }], 'groupName', @@ -54,24 +54,24 @@ uiModules ng-if="setValidity" form-is-touched="formIsTouched" group-name="groupName" + response-value-aggs="responseValueAggs" state="state" vis="vis" add-schema="addSchema" - set-touched="setTouched" - set-validity="setValidity" - response-value-aggs="responseValueAggs" on-agg-error-changed="onAggErrorChanged" - on-agg-type-change="onAggTypeChange" on-agg-params-change="onAggParamsChange" - remove-agg="removeAgg" + on-agg-type-change="onAggTypeChange" on-toggle-enable-agg="onToggleEnableAgg" + remove-agg="removeAgg" reorder-aggs="reorderAggs" + set-validity="setValidity" + set-touched="setTouched" >`; }, link: function ($scope, $el, attr, ngModelCtrl) { $scope.groupName = attr.groupName; // The model can become touched either onBlur event or when the form is submitted. - // We watch $touched to identify when the form is submitted. + // We also watch $touched to identify when the form is submitted. $scope.$watch( () => { return ngModelCtrl.$touched; @@ -93,14 +93,6 @@ uiModules ngModelCtrl.$setUntouched(); } }; - - $scope.onAggErrorChanged = (agg, error) => { - if (error) { - agg.error = error; - } else { - delete agg.error; - } - }; }, }; }); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 77486725561da..393043472f91d 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -28,12 +28,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiIconTip, + Color, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { AggType } from 'ui/agg_types'; -import { AggConfig, Vis, VisState, AggParams } from 'ui/vis'; +import { AggConfig, VisState, AggParams } from '../../../'; import { DefaultEditorAggParams } from './default_editor_agg_params'; interface DefaultEditorAggProps { @@ -41,16 +42,15 @@ interface DefaultEditorAggProps { aggIndex: number; aggIsTooLow: boolean; dragHandleProps: {} | null; - groupName: string; formIsTouched: boolean; + groupName: string; isDraggable: boolean; isRemovable: boolean; responseValueAggs: AggConfig[] | null; state: VisState; - vis: Vis; + onAggErrorChanged: (agg: AggConfig, error?: string) => void; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; - onAggErrorChanged: (agg: AggConfig, error?: string) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; removeAgg: (agg: AggConfig) => void; setTouched: (isTouched: boolean) => void; @@ -62,20 +62,19 @@ function DefaultEditorAgg({ aggIndex, aggIsTooLow, dragHandleProps, - groupName, formIsTouched, + groupName, isDraggable, isRemovable, responseValueAggs, state, - vis, + onAggErrorChanged, onAggParamsChange, onAggTypeChange, - setTouched, - setValidity, - onAggErrorChanged, onToggleEnableAgg, removeAgg, + setTouched, + setValidity, }: DefaultEditorAggProps) { const [isEditorOpen, setIsEditorOpen] = useState(agg.brandNew); const [validState, setValidState] = useState(true); @@ -84,10 +83,26 @@ function DefaultEditorAgg({ const SchemaComponent = agg.schema.editorComponent; + // Returns a description of the aggregation, for display in the collapsed agg header + const getDescription = () => { + if (!agg.type || !agg.type.makeLabel) { + return ''; + } + return agg.type.makeLabel(agg) || ''; + }; + + const onToggle = (isOpen: boolean) => { + setIsEditorOpen(isOpen); + if (!isOpen) { + setTouched(true); + } + }; + const onSetValidity = (isValid: boolean) => { setValidity(isValid); setValidState(isValid); }; + const renderAggButtons = () => { const actionIcons = []; @@ -149,7 +164,7 @@ function DefaultEditorAgg({ return (
{actionIcons.map(icon => { - if (icon.type === 'grab') { + if (icon.id === 'dragHandle') { return ( { - if (!agg.type || !agg.type.makeLabel) { - return ''; - } - return agg.type.makeLabel(agg) || ''; - }; - const buttonContent = (
- -

{agg.schema.title}

- - + {agg.schema.title} {showDescription && (

- {describe()} + {getDescription()}

)} - {showError && ( ); - const onToggle = (isOpen: boolean) => { - setIsEditorOpen(isOpen); - if (!isOpen) { - setTouched(true); - } - }; - return ( - <> - - <> - - {SchemaComponent && ( - - )} - + <> + + {SchemaComponent && ( + - - - + )} + + + ); } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 64d35d6c0508d..27e7277fddb61 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -17,30 +17,36 @@ * under the License. */ -import React from 'react'; -import { findIndex, reduce } from 'lodash'; -import { EuiTitle, EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui'; +import React, { useEffect, useState } from 'react'; +import { + EuiTitle, + EuiDragDropContext, + EuiDroppable, + EuiDraggable, + EuiSpacer, + EuiPanel, +} from '@elastic/eui'; import { AggType } from 'ui/agg_types'; -import { Vis, VisState, AggParams } from 'ui/vis'; +import { Vis, VisState, AggParams } from '../../../'; import { AggConfig } from '../../../agg_config'; -import { AggConfigs } from '../../../agg_configs'; +// @ts-ignore +import { aggGroupNameMaps } from '../agg_group_names'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; - -import { aggGroupNameMaps } from '../agg_group_names'; +import { isAggRemovable, calcAggIsTooLow } from './default_editor_agg_group_helper'; import { Schema } from '../schemas'; interface DefaultEditorAggGroupProps { - groupName: string; formIsTouched: boolean; + groupName: string; responseValueAggs: AggConfig[] | null; state: VisState; vis: Vis; - addSchema: () => {}; + addSchema: (schems: Schema) => void; + onAggErrorChanged: (agg: AggConfig, error?: string) => void; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; - onAggErrorChanged: (agg: AggConfig, error?: string) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; removeAgg: (agg: AggConfig) => void; reorderAggs: (group: AggConfig[]) => void; @@ -49,23 +55,24 @@ interface DefaultEditorAggGroupProps { } function DefaultEditorAggGroup({ - groupName, formIsTouched, + groupName, responseValueAggs, state, vis, addSchema, + onAggErrorChanged, onAggParamsChange, onAggTypeChange, - setTouched, - setValidity, - onAggErrorChanged, onToggleEnableAgg, removeAgg, reorderAggs, + setTouched, + setValidity, }: DefaultEditorAggGroupProps) { const groupNameLabel = aggGroupNameMaps()[groupName]; - const group: AggConfigs = state.aggs.bySchemaGroup[groupName] || []; + const group: AggConfig[] = state.aggs.bySchemaGroup[groupName] || []; + const schemas = vis.type.schemas[groupName]; const stats = { min: 0, @@ -82,34 +89,32 @@ function DefaultEditorAggGroup({ }); } - const canRemove = (agg: AggConfig) => { - const metricCount = reduce( - group, - (count, aggregation: AggConfig) => { - return aggregation.schema.name === agg.schema.name ? ++count : count; - }, - 0 - ); - - // make sure the the number of these aggs is above the min - return metricCount > agg.schema.min; - }; + const [aggsState, setAggsState] = useState(() => + group.reduce((newState, item) => { + newState[item.id] = { touched: false, valid: true }; + return newState; + }, {}) + ); - const calcAggIsTooLow = (agg: AggConfig, aggIndex: number) => { - if (!agg.schema.mustBeFirst) { - return false; - } + useEffect(() => { + setAggsState( + group.reduce((newState, item) => { + newState[item.id] = aggsState[item.id] || { touched: false, valid: true }; + return newState; + }, {}) + ); + }, [group.length]); - const firstDifferentSchema = findIndex(group, (aggr: AggConfig) => { - return aggr.schema !== agg.schema; - }); + const isGroupValid = Object.entries(aggsState).every(([, item]) => item.valid); + const isAllAggsTouched = Object.entries(aggsState).every(([, item]) => item.touched); - if (firstDifferentSchema === -1) { - return false; - } + useEffect(() => { + setTouched(isAllAggsTouched); + }, [isAllAggsTouched]); - return aggIndex > firstDifferentSchema; - }; + useEffect(() => { + setValidity(isGroupValid); + }, [isGroupValid]); const onDragEnd = ({ source, destination }: any) => { if (source && destination) { @@ -121,55 +126,66 @@ function DefaultEditorAggGroup({ } }; + const setTouchedHandler = (aggId: number, touched: boolean) => { + setAggsState({ ...aggsState, [aggId]: { ...aggsState[aggId], touched } }); + }; + + const setValidityHandler = (aggId: number, valid: boolean) => { + setAggsState({ ...aggsState, [aggId]: { ...aggsState[aggId], valid } }); + }; + return ( - -

{groupNameLabel}

- - - {group.map((agg: AggConfig, index: number) => ( - - {provided => ( - 1} - isRemovable={canRemove(agg)} - data-test-subj={`aggregationEditor${agg.id}`} - responseValueAggs={responseValueAggs} - state={state} - vis={vis} - onAggParamsChange={onAggParamsChange} - onAggTypeChange={onAggTypeChange} - setTouched={setTouched} - setValidity={setValidity} - onAggErrorChanged={onAggErrorChanged} - onToggleEnableAgg={onToggleEnableAgg} - removeAgg={removeAgg} - dragHandleProps={provided.dragHandleProps} - /> - )} - - ))} - - {stats.max > stats.count && ( - - )} + + +

{groupNameLabel}

+ + + + <> + {group.map((agg: AggConfig, index: number) => ( + + {provided => ( + 1} + isRemovable={isAggRemovable(agg, group)} + data-test-subj={`aggregationEditor${agg.id}`} + responseValueAggs={responseValueAggs} + state={state} + onAggErrorChanged={onAggErrorChanged} + onAggParamsChange={onAggParamsChange} + onAggTypeChange={onAggTypeChange} + onToggleEnableAgg={onToggleEnableAgg} + removeAgg={removeAgg} + setTouched={isTouched => setTouchedHandler(agg.id, isTouched)} + setValidity={isValid => setValidityHandler(agg.id, isValid)} + /> + )} + + ))} + + + {stats.max > stats.count && ( + + )} + ); } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx new file mode 100644 index 0000000000000..2e2b0dcd0b217 --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx @@ -0,0 +1,51 @@ +/* + * 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 { findIndex, reduce } from 'lodash'; +import { AggConfig } from '../../../agg_config'; + +const isAggRemovable = (agg: AggConfig, group: AggConfig[]) => { + const metricCount = reduce( + group, + (count, aggregation: AggConfig) => { + return aggregation.schema.name === agg.schema.name ? ++count : count; + }, + 0 + ); + // make sure the the number of these aggs is above the min + return metricCount > agg.schema.min; +}; + +const calcAggIsTooLow = (agg: AggConfig, aggIndex: number, group: AggConfig[]) => { + if (!agg.schema.mustBeFirst) { + return false; + } + + const firstDifferentSchema = findIndex(group, (aggr: AggConfig) => { + return aggr.schema !== agg.schema; + }); + + if (firstDifferentSchema === -1) { + return false; + } + + return aggIndex > firstDifferentSchema; +}; + +export { isAggRemovable, calcAggIsTooLow }; diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html index 427f193f9d97e..11229eb643001 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.html +++ b/src/legacy/ui/public/vis/editors/default/sidebar.html @@ -153,16 +153,14 @@ - +
{ + if (error) { + agg.error = error; + } else { + delete agg.error; + } + }; }, }; }); diff --git a/src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts b/src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts index f2475065a869c..f6768007503c5 100644 --- a/src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts +++ b/src/legacy/ui/public/vis/request_handlers/request_handlers.d.ts @@ -24,12 +24,12 @@ import { SearchSource } from '../../courier'; import { QueryFilter } from '../../filter_manager/query_filter'; import { Adapters } from '../../inspector/types'; import { PersistedState } from '../../persisted_state'; -import { AggConfigs } from '../agg_configs'; +import { AggConfig } from '../agg_config'; import { Vis } from '../vis'; export interface RequestHandlerParams { searchSource: SearchSource; - aggs: AggConfigs; + aggs: AggConfig[]; timeRange?: TimeRange; query?: Query; filters?: Filter[]; diff --git a/src/legacy/ui/public/vis/vis.d.ts b/src/legacy/ui/public/vis/vis.d.ts index 9e6107ed7594f..22881a6fda18a 100644 --- a/src/legacy/ui/public/vis/vis.d.ts +++ b/src/legacy/ui/public/vis/vis.d.ts @@ -18,6 +18,7 @@ */ import { VisType } from './vis_types/vis_type'; +import { AggConfigs } from './agg_configs'; export interface Vis { type: VisType; @@ -39,5 +40,5 @@ export interface VisState { title: string; type: VisType; params: VisParams; - aggs: any[]; + aggs: AggConfigs; } diff --git a/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.test.ts b/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.test.ts index 5973ae60c14d0..05934c57126dc 100644 --- a/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.test.ts +++ b/src/legacy/ui/public/visualize/loader/embedded_visualize_handler.test.ts @@ -20,7 +20,7 @@ import { mockDataLoaderFetch, timefilter } from './embedded_visualize_handler.te // @ts-ignore import MockState from '../../../../../fixtures/mock_state'; -import { RequestHandlerParams, Vis } from '../../vis'; +import { RequestHandlerParams, Vis, AggConfig } from '../../vis'; import { VisResponseData } from './types'; import { Inspector } from '../../inspector'; @@ -49,7 +49,7 @@ describe('EmbeddedVisualizeHandler', () => { jest.clearAllMocks(); dataLoaderParams = { - aggs: [], + aggs: [] as AggConfig[], filters: undefined, forceFetch: false, inspectorAdapters: {}, From 81202511784303220cdeb754582413e910ac2039 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 12 Jul 2019 10:31:03 +0300 Subject: [PATCH 07/45] Remove old mocha tests --- .../vis/editors/default/__tests__/agg.js | 101 -------------- .../editors/default/__tests__/agg_params.js | 123 ------------------ .../default_editor_utils.test.tsx | 2 +- 3 files changed, 1 insertion(+), 225 deletions(-) delete mode 100644 src/legacy/ui/public/vis/editors/default/__tests__/agg.js delete mode 100644 src/legacy/ui/public/vis/editors/default/__tests__/agg_params.js rename src/legacy/ui/public/vis/editors/default/{__tests__ => }/default_editor_utils.test.tsx (98%) diff --git a/src/legacy/ui/public/vis/editors/default/__tests__/agg.js b/src/legacy/ui/public/vis/editors/default/__tests__/agg.js deleted file mode 100644 index 5ca17a7c9b96c..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/__tests__/agg.js +++ /dev/null @@ -1,101 +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 angular from 'angular'; -import _ from 'lodash'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import '../agg'; - - -describe('Vis-Editor-Agg plugin directive', function () { - const $parentScope = {}; - let $elem; - - function makeConfig(which) { - const schemaMap = { - radius: { - title: 'Dot Size', - min: 0, - max: 1 - }, - metric: { - title: 'Y-Axis', - min: 1, - max: Infinity - } - }; - const typeOptions = ['count', 'avg', 'sum', 'min', 'max', 'cardinality']; - which = which || 'metric'; - - const schema = schemaMap[which]; - - return { - min: schema.min, - max: schema.max, - name: which, - title: schema.title, - group: 'metrics', - aggFilter: typeOptions, - // AggParams object - params: [] - }; - } - - beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject(function ($rootScope, $compile) { - $parentScope.agg = { - id: 1, - params: {}, - schema: makeConfig() - }; - $parentScope.groupName = 'metrics'; - $parentScope.group = [{ - id: '1', - schema: makeConfig() - }, { - id: '2', - schema: makeConfig('radius') - }]; - - // share the scope - _.defaults($parentScope, $rootScope, Object.getPrototypeOf($rootScope)); - - // make the element - $elem = angular.element( - '
' - ); - - // compile the html - $compile($elem)($parentScope); - - // Digest everything - $elem.scope().$digest(); - })); - - it('should only add the close button if there is more than the minimum', function () { - expect($parentScope.canRemove($parentScope.agg)).to.be(false); - $parentScope.group.push({ - id: '3', - schema: makeConfig() - }); - expect($parentScope.canRemove($parentScope.agg)).to.be(true); - }); -}); diff --git a/src/legacy/ui/public/vis/editors/default/__tests__/agg_params.js b/src/legacy/ui/public/vis/editors/default/__tests__/agg_params.js deleted file mode 100644 index ba919aa85122d..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/__tests__/agg_params.js +++ /dev/null @@ -1,123 +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 angular from 'angular'; -import _ from 'lodash'; -import expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import '../agg_params'; -import { VisProvider } from '../../..'; -import { AggConfig } from '../../../agg_config'; -import { Schemas } from '../schemas'; -import FixturesStubbedLogstashIndexPatternProvider from 'fixtures/stubbed_logstash_index_pattern'; - - -describe.skip('Vis-Editor-Agg-Params plugin directive', function () { - let $parentScope = {}; - let Vis; - let vis; - let $elem; - let compile; - let rootScope; - - const aggFilter = [ - '!top_hits', '!percentiles', '!median', '!std_dev', - '!derivative', '!cumulative_sum', '!moving_avg', '!serial_diff' - ]; - - let indexPattern; - let orderAggSchema; - - beforeEach(ngMock.module('kibana')); - beforeEach(ngMock.inject(function (Private, $rootScope, $compile) { - rootScope = $rootScope; - compile = $compile; - - Vis = Private(VisProvider); - indexPattern = Private(FixturesStubbedLogstashIndexPatternProvider); - })); - - function init(config) { - $parentScope = {}; - _.defaults($parentScope, rootScope, Object.getPrototypeOf(rootScope)); - - orderAggSchema = (new Schemas([config])).all[0]; - $parentScope.groupName = 'metrics'; - - const state = { - schema: orderAggSchema, - type: 'count' - }; - - vis = new Vis(indexPattern, { - type: 'histogram', - aggs: [ - { - type: 'date_histogram', - schema: 'segment' - } - ] - }); - - $parentScope.agg = new AggConfig(vis.aggs, state); - $parentScope.vis = vis; - - // make the element - $elem = angular.element( - `` - ); - - // compile the html - compile($elem)($parentScope); - - // Digest everything - $elem.scope().$digest(); - } - - afterEach(function () { - $parentScope.$destroy(); - $parentScope = null; - }); - - it('should show custom label parameter', function () { - init ({ - group: 'none', - name: 'orderAgg', - title: 'Order Agg', - aggFilter: aggFilter - }); - - const customLabelElement = $elem.find('label:contains("Custom label")'); - expect(customLabelElement.length).to.be(1); - }); - - it('should hide custom label parameter', function () { - init ({ - group: 'none', - name: 'orderAgg', - title: 'Order Agg', - hideCustomLabel: true, - aggFilter: aggFilter - }); - - const customLabelElement = $elem.find('label:contains("Custom label")'); - expect(customLabelElement.length).to.be(0); - }); -}); diff --git a/src/legacy/ui/public/vis/editors/default/__tests__/default_editor_utils.test.tsx b/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx similarity index 98% rename from src/legacy/ui/public/vis/editors/default/__tests__/default_editor_utils.test.tsx rename to src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx index 423c66cfe7edb..64b31364dd27a 100644 --- a/src/legacy/ui/public/vis/editors/default/__tests__/default_editor_utils.test.tsx +++ b/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx @@ -17,7 +17,7 @@ * under the License. */ -import { groupAggregationsBy } from '../default_editor_utils'; +import { groupAggregationsBy } from './default_editor_utils'; const aggs = [ { From 7713f2daedc9bf4c8f053146c889cb83199f077a Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 12 Jul 2019 11:50:20 +0300 Subject: [PATCH 08/45] Add ts for state --- .../components/default_editor_agg_group.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 27e7277fddb61..0751b97954e6d 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -54,6 +54,15 @@ interface DefaultEditorAggGroupProps { setValidity: (isValid: boolean) => void; } +interface AggsItem { + touched: boolean; + valid: boolean; +} + +interface AggsState { + [aggId: number]: AggsItem; +} + function DefaultEditorAggGroup({ formIsTouched, groupName, @@ -89,11 +98,12 @@ function DefaultEditorAggGroup({ }); } - const [aggsState, setAggsState] = useState(() => - group.reduce((newState, item) => { - newState[item.id] = { touched: false, valid: true }; - return newState; - }, {}) + const [aggsState, setAggsState] = useState( + (): AggsState => + group.reduce((newState, item) => { + newState[item.id] = { touched: false, valid: true }; + return newState; + }, {}) ); useEffect(() => { From 17b3b5441b323c99d8b7c0081e61816c55213861 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 12 Jul 2019 15:05:52 +0300 Subject: [PATCH 09/45] Update functional tests --- .../default/components/default_editor_agg.tsx | 2 +- .../default/components/default_editor_agg_group.tsx | 1 - test/functional/page_objects/visualize_page.js | 13 +++++-------- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 393043472f91d..af11eafa0c449 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -238,7 +238,7 @@ function DefaultEditorAgg({ defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title }, })} - data-test-subj="toggleEditor" + data-test-subj="visEditorAggToggle" extraAction={renderAggButtons()} onToggle={onToggle} {...dragHandleProps} diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 0751b97954e6d..4c45746602152 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -170,7 +170,6 @@ function DefaultEditorAggGroup({ groupName={groupName} isDraggable={stats.count > 1} isRemovable={isAggRemovable(agg, group)} - data-test-subj={`aggregationEditor${agg.id}`} responseValueAggs={responseValueAggs} state={state} onAggErrorChanged={onAggErrorChanged} diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index c3a27d61c13df..88bdfde65c192 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -440,8 +440,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) { const comboBoxElement = await find.byCssSelector(` [group-name="${groupName}"] - vis-editor-agg-params:not(.ng-hide) - [data-test-subj="visAggEditorParams"] + [data-test-subj="visEditorAggToggle"] [aria-expanded="true"] ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="defaultEditorAggSelect"] `); @@ -469,7 +468,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli async toggleOpenEditor(index, toState = 'true') { // index, see selectYAxisAggregation - const toggle = await find.byCssSelector(`button[aria-controls="visAggEditorParams${index}"]`); + const toggle = await find.byCssSelector(`button[aria-controls="visEditorAggAccordion${index}"]`); const toggleOpen = await toggle.getAttribute('aria-expanded'); log.debug(`toggle ${index} expand = ${toggleOpen}`); if (toggleOpen !== toState) { @@ -487,12 +486,10 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli // select our agg const aggSelect = await find - .byCssSelector(`[data-test-subj="aggregationEditor${index}"] - vis-editor-agg-params:not(.ng-hide) [data-test-subj="defaultEditorAggSelect"]`); + .byCssSelector(`#visEditorAggAccordion${index} [data-test-subj="defaultEditorAggSelect"]`); await comboBox.setElement(aggSelect, agg); - const fieldSelect = await find.byCssSelector(`[data-test-subj="aggregationEditor${index}"] - vis-editor-agg-params:not(.ng-hide) [data-test-subj="visDefaultEditorField"]`); + const fieldSelect = await find.byCssSelector(`#visEditorAggAccordion${index} [data-test-subj="visDefaultEditorField"]`); // select our field await comboBox.setElement(fieldSelect, field); // enter custom label @@ -543,7 +540,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli log.debug(`selectField ${fieldValue}`); const selector = ` [group-name="${groupName}"] - vis-editor-agg-params:not(.ng-hide) + [data-test-subj="visEditorAggToggle"] [aria-expanded="true"] [data-test-subj="visAggEditorParams"] ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="visDefaultEditorField"] From 12b18821e3c26d29664c8c109dca5f999110e579 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 11:14:36 +0300 Subject: [PATCH 10/45] Update touched condition --- .../public/vis/editors/default/agg_group.js | 2 +- .../components/default_editor_agg_group.tsx | 26 ++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 0a132cfd35b5d..244cf145c6f3d 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -83,7 +83,7 @@ uiModules ); $scope.setValidity = isValid => { - ngModelCtrl.$setValidity('aggGroup', isValid); + ngModelCtrl.$setValidity(`aggGroup${$scope.groupName}`, isValid); }; $scope.setTouched = isTouched => { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 4c45746602152..146cc04a1777f 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -116,7 +116,9 @@ function DefaultEditorAggGroup({ }, [group.length]); const isGroupValid = Object.entries(aggsState).every(([, item]) => item.valid); - const isAllAggsTouched = Object.entries(aggsState).every(([, item]) => item.touched); + const isAllAggsTouched = Object.entries(aggsState).every(([, item]) => + item.valid ? false : item.touched + ); useEffect(() => { setTouched(isAllAggsTouched); @@ -137,11 +139,25 @@ function DefaultEditorAggGroup({ }; const setTouchedHandler = (aggId: number, touched: boolean) => { - setAggsState({ ...aggsState, [aggId]: { ...aggsState[aggId], touched } }); + const newState = Object.assign({}, aggsState); + if (newState[aggId]) { + newState[aggId].touched = touched; + } else { + newState[aggId] = { valid: true, touched }; + } + + setAggsState(newState); }; const setValidityHandler = (aggId: number, valid: boolean) => { - setAggsState({ ...aggsState, [aggId]: { ...aggsState[aggId], valid } }); + const newState = Object.assign({}, aggsState); + if (newState[aggId]) { + newState[aggId].valid = valid; + } else { + newState[aggId] = { touched: false, valid }; + } + + setAggsState(newState); }; return ( @@ -166,7 +182,9 @@ function DefaultEditorAggGroup({ aggIndex={index} aggIsTooLow={calcAggIsTooLow(agg, index, group)} dragHandleProps={provided.dragHandleProps} - formIsTouched={formIsTouched} + formIsTouched={ + formIsTouched || (aggsState[agg.id] && aggsState[agg.id].touched) + } groupName={groupName} isDraggable={stats.count > 1} isRemovable={isAggRemovable(agg, group)} From bc3ef56eceae23c9613e03ae3b54f8e009c89141 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 12:23:03 +0300 Subject: [PATCH 11/45] Update visualize_page.js --- test/functional/page_objects/visualize_page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index c752b30d7febe..86f3b9a4de0e6 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -440,7 +440,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) { const comboBoxElement = await find.byCssSelector(` [group-name="${groupName}"] - [data-test-subj="visEditorAggToggle"] [aria-expanded="true"] + [data-test-subj="visEditorAggToggle"].euiAccordion-isOpen ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="defaultEditorAggSelect"] `); @@ -540,7 +540,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli log.debug(`selectField ${fieldValue}`); const selector = ` [group-name="${groupName}"] - [data-test-subj="visEditorAggToggle"] [aria-expanded="true"] + [data-test-subj="visEditorAggToggle"].euiAccordion-isOpen [data-test-subj="visAggEditorParams"] ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="visDefaultEditorField"] From 08f8f22458369692de78c6e051a20dd0ba548ccc Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 13:35:46 +0300 Subject: [PATCH 12/45] Move touched logic to function --- .../components/default_editor_agg_group.tsx | 20 ++++++---------- .../default_editor_agg_group_helper.tsx | 23 +++++++++++++++++-- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 146cc04a1777f..78215df3fea71 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -34,7 +34,12 @@ import { AggConfig } from '../../../agg_config'; import { aggGroupNameMaps } from '../agg_group_names'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; -import { isAggRemovable, calcAggIsTooLow } from './default_editor_agg_group_helper'; +import { + AggsState, + isInvalidAggsTouched, + isAggRemovable, + calcAggIsTooLow, +} from './default_editor_agg_group_helper'; import { Schema } from '../schemas'; interface DefaultEditorAggGroupProps { @@ -54,15 +59,6 @@ interface DefaultEditorAggGroupProps { setValidity: (isValid: boolean) => void; } -interface AggsItem { - touched: boolean; - valid: boolean; -} - -interface AggsState { - [aggId: number]: AggsItem; -} - function DefaultEditorAggGroup({ formIsTouched, groupName, @@ -116,9 +112,7 @@ function DefaultEditorAggGroup({ }, [group.length]); const isGroupValid = Object.entries(aggsState).every(([, item]) => item.valid); - const isAllAggsTouched = Object.entries(aggsState).every(([, item]) => - item.valid ? false : item.touched - ); + const isAllAggsTouched = isInvalidAggsTouched(aggsState); useEffect(() => { setTouched(isAllAggsTouched); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx index 2e2b0dcd0b217..e32439077c322 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx @@ -17,9 +17,18 @@ * under the License. */ -import { findIndex, reduce } from 'lodash'; +import { findIndex, reduce, isEmpty } from 'lodash'; import { AggConfig } from '../../../agg_config'; +export interface AggsItem { + touched: boolean; + valid: boolean; +} + +export interface AggsState { + [aggId: number]: AggsItem; +} + const isAggRemovable = (agg: AggConfig, group: AggConfig[]) => { const metricCount = reduce( group, @@ -48,4 +57,14 @@ const calcAggIsTooLow = (agg: AggConfig, aggIndex: number, group: AggConfig[]) = return aggIndex > firstDifferentSchema; }; -export { isAggRemovable, calcAggIsTooLow }; +function isInvalidAggsTouched(aggsState: AggsState) { + const invalidAggs = Object.values(aggsState).filter(agg => !agg.valid); + + if (isEmpty(invalidAggs)) { + return false; + } + + return invalidAggs.every(agg => agg.touched); +} + +export { isAggRemovable, calcAggIsTooLow, isInvalidAggsTouched }; From 32b0d0561cb0b5b4b6de19ca561dc4328548dd11 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 16:37:33 +0300 Subject: [PATCH 13/45] Apply styles for accordion button content --- .../ui/public/vis/editors/default/_sidebar.scss | 3 +++ .../default/components/default_editor_agg.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index ed87597a3897f..2fa9708b58cfb 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -170,6 +170,9 @@ @include euiTextTruncate; } +.visEditorSidebar__collapsibleText { + @include euiTextTruncate; +} // // FORMS diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index af11eafa0c449..050da59f03ee6 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -198,13 +198,13 @@ function DefaultEditorAgg({ const buttonContent = (
- {agg.schema.title} - + + {agg.schema.title} + + {showDescription && ( - -

- {getDescription()} -

+ +

{getDescription()}

 )} {showError && ( From faa5c686aae28d3d6831010e69a6a3b1c030604f Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 16:46:20 +0300 Subject: [PATCH 14/45] Remove class --- .../vis/editors/default/components/default_editor_agg.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 050da59f03ee6..fa30c59a21de7 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -201,7 +201,7 @@ function DefaultEditorAgg({ {agg.schema.title} - + {showDescription && (

{getDescription()}

From ded8708a8c47feac309585852c05e106b0aed129 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 15 Jul 2019 18:33:02 +0300 Subject: [PATCH 15/45] Apply truncate for agg description --- .../public/vis/editors/default/_sidebar.scss | 13 +++-- .../default/components/default_editor_agg.tsx | 53 +++++++++---------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index 2fa9708b58cfb..b6c8306291f7c 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -170,10 +170,6 @@ @include euiTextTruncate; } -.visEditorSidebar__collapsibleText { - @include euiTextTruncate; -} - // // FORMS // @@ -223,3 +219,12 @@ margin-top: $euiSizeS; margin-bottom: $euiSizeS; } + +vis-editor-agg-group-wrapper .visEditorSidebar__section > .euiFlexGroup > .euiFlexItem:first-child { + overflow: hidden; + padding: 0 0 1px 2px; + + .euiAccordion__buttonContent { + overflow: hidden; + } +} diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index fa30c59a21de7..fd5abbd4da627 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -196,35 +196,30 @@ function DefaultEditorAgg({ }; const buttonContent = ( -
- - - {agg.schema.title} - - - {showDescription && ( - -

{getDescription()}

- - )} - {showError && ( - -
- -
- - )} - - -
+ + + {agg.schema.title} + + + {showDescription && ( + +

{getDescription()}

+ + )} + {showError && ( + +
+ +
+ + )} + + ); return ( From 54d79988d547467491c61c722e703c6d5da18638 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 14:33:55 +0300 Subject: [PATCH 16/45] Fix merge conflict --- .../public/vis/editors/default/agg_group.js | 8 ++-- .../default/components/default_editor_agg.tsx | 46 ++++++++++++++++--- .../components/default_editor_agg_group.tsx | 13 +++--- .../components/default_editor_agg_params.tsx | 2 +- .../components/default_editor_agg_select.tsx | 2 +- .../ui/public/vis/editors/default/sidebar.js | 8 ---- 6 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 244cf145c6f3d..3cedc89cef1f3 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -26,11 +26,10 @@ uiModules .get('app/visualize') .directive('visEditorAggGroupWrapper', reactDirective => reactDirective(wrapInI18nContext(DefaultEditorAggGroup), [ - ['responseValueAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects + ['metricAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects ['state', { watchDepth: 'reference' }], ['vis', { watchDepth: 'reference' }], ['addSchema', { watchDepth: 'reference' }], - ['onAggErrorChanged', { watchDepth: 'reference' }], ['onAggParamsChange', { watchDepth: 'reference' }], ['onAggTypeChange', { watchDepth: 'reference' }], ['onToggleEnableAgg', { watchDepth: 'reference' }], @@ -40,6 +39,7 @@ uiModules ['setValidity', { watchDepth: 'reference' }], 'groupName', 'formIsTouched', + 'lastParentPipelineAggTitle', ]) ) .directive('visEditorAggGroup', function () { @@ -54,11 +54,11 @@ uiModules ng-if="setValidity" form-is-touched="formIsTouched" group-name="groupName" - response-value-aggs="responseValueAggs" + last-parent-pipeline-agg-title="lastParentPipelineAggTitle" + metric-aggs="metricAggs" state="state" vis="vis" add-schema="addSchema" - on-agg-error-changed="onAggErrorChanged" on-agg-params-change="onAggParamsChange" on-agg-type-change="onAggTypeChange" on-toggle-enable-agg="onToggleEnableAgg" diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index fd5abbd4da627..0271d15909d0f 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { EuiAccordion, EuiToolTip, @@ -45,10 +45,11 @@ interface DefaultEditorAggProps { formIsTouched: boolean; groupName: string; isDraggable: boolean; + isLastBucket: boolean; isRemovable: boolean; - responseValueAggs: AggConfig[] | null; + metricAggs: AggConfig[]; + lastParentPipelineAggTitle: string; state: VisState; - onAggErrorChanged: (agg: AggConfig, error?: string) => void; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; @@ -65,10 +66,11 @@ function DefaultEditorAgg({ formIsTouched, groupName, isDraggable, + isLastBucket, isRemovable, - responseValueAggs, + metricAggs, + lastParentPipelineAggTitle, state, - onAggErrorChanged, onAggParamsChange, onAggTypeChange, onToggleEnableAgg, @@ -80,9 +82,38 @@ function DefaultEditorAgg({ const [validState, setValidState] = useState(true); const showDescription = !isEditorOpen && validState; const showError = !isEditorOpen && !validState; + let disabledParams; + let aggError; + const isLastBucketAgg = + groupName === 'buckets' && lastParentPipelineAggTitle && isLastBucket && agg.type; const SchemaComponent = agg.schema.editorComponent; + if (isLastBucketAgg) { + if (['date_histogram', 'histogram'].includes(agg.type.name)) { + disabledParams = ['min_doc_count']; + } else { + aggError = i18n.translate('common.ui.aggTypes.metrics.wrongLastBucketTypeErrorMessage', { + defaultMessage: + 'Last bucket aggregation must be "Date Histogram" or "Histogram" when using "{type}" metric aggregation.', + values: { type: lastParentPipelineAggTitle }, + description: 'Date Histogram and Histogram should not be translated', + }); + } + } + + useEffect(() => { + if (isLastBucketAgg && ['date_histogram', 'histogram'].includes(agg.type.name)) { + onAggParamsChange( + agg.params, + 'min_doc_count', + // "histogram" agg has an editor for "min_doc_count" param, which accepts boolean + // "date_histogram" agg doesn't have an editor for "min_doc_count" param, it should be set as a numeric value + agg.type.name === 'histogram' ? true : 0 + ); + } + }, [lastParentPipelineAggTitle, isLastBucket, agg.type]); + // Returns a description of the aggregation, for display in the collapsed agg header const getDescription = () => { if (!agg.type || !agg.type.makeLabel) { @@ -249,14 +280,15 @@ function DefaultEditorAgg({ )} void; - onAggErrorChanged: (agg: AggConfig, error?: string) => void; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; @@ -62,11 +62,11 @@ interface DefaultEditorAggGroupProps { function DefaultEditorAggGroup({ formIsTouched, groupName, - responseValueAggs, + lastParentPipelineAggTitle, + metricAggs, state, vis, addSchema, - onAggErrorChanged, onAggParamsChange, onAggTypeChange, onToggleEnableAgg, @@ -181,10 +181,11 @@ function DefaultEditorAggGroup({ } groupName={groupName} isDraggable={stats.count > 1} + isLastBucket={index === group.length - 1} isRemovable={isAggRemovable(agg, group)} - responseValueAggs={responseValueAggs} + lastParentPipelineAggTitle={lastParentPipelineAggTitle} + metricAggs={metricAggs} state={state} - onAggErrorChanged={onAggErrorChanged} onAggParamsChange={onAggParamsChange} onAggTypeChange={onAggTypeChange} onToggleEnableAgg={onToggleEnableAgg} diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx index 8e77c99e960b7..3b6b5aeb5c6c3 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx @@ -59,7 +59,7 @@ export interface SubAggParamsProp { } export interface DefaultEditorAggParamsProps extends SubAggParamsProp { agg: AggConfig; - aggError?: string | null; + aggError?: string; aggIndex?: number; aggIsTooLow?: boolean; className?: string; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx index 536bcdb7891ef..fe08de066efd7 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx @@ -28,7 +28,7 @@ import { documentationLinks } from '../../../../documentation_links/documentatio import { ComboBoxGroupedOption } from '../default_editor_utils'; interface DefaultEditorAggSelectProps { - aggError?: string | null; + aggError?: string; aggTypeOptions: AggType[]; id: string; indexPattern: IndexPattern; diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.js b/src/legacy/ui/public/vis/editors/default/sidebar.js index 9c0145ba17431..30e42d1957698 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.js +++ b/src/legacy/ui/public/vis/editors/default/sidebar.js @@ -96,14 +96,6 @@ uiModules.get('app/visualize').directive('visEditorSidebar', function () { move($scope.state.aggs, agg, indexOffset + index); }); }; - - $scope.onAggErrorChanged = (agg, error) => { - if (error) { - agg.error = error; - } else { - delete agg.error; - } - }; }, }; }); From 6e93f0ae5775469ab238b48bc20bc171a08cd282 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 14:59:59 +0300 Subject: [PATCH 17/45] Fix file path --- .../public/vis/editors/default/default_editor_utils.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx b/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx index a028ea9701e49..3c0a2873c7484 100644 --- a/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx +++ b/src/legacy/ui/public/vis/editors/default/default_editor_utils.test.tsx @@ -17,8 +17,8 @@ * under the License. */ -import { groupAggregationsBy } from '../default_editor_utils'; -import { AggGroupNames } from '../agg_groups'; +import { groupAggregationsBy } from './default_editor_utils'; +import { AggGroupNames } from './agg_groups'; const aggs = [ { From b48dca93e6562fcaa1be205682920896f12bde91 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 15:15:33 +0300 Subject: [PATCH 18/45] TS for aggGroupNameMaps --- src/legacy/ui/public/vis/editors/default/_sidebar.scss | 1 + src/legacy/ui/public/vis/editors/default/agg_group.js | 2 -- .../default/{agg_group_names.js => agg_group_names.ts} | 9 +++++++-- .../default/components/default_editor_agg_group.tsx | 4 ++-- 4 files changed, 10 insertions(+), 6 deletions(-) rename src/legacy/ui/public/vis/editors/default/{agg_group_names.js => agg_group_names.ts} (74%) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index b6c8306291f7c..43d68141e10de 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -220,6 +220,7 @@ margin-bottom: $euiSizeS; } +// to apply truncated string with ellipsis for agg description vis-editor-agg-group-wrapper .visEditorSidebar__section > .euiFlexGroup > .euiFlexItem:first-child { overflow: hidden; padding: 0 0 1px 2px; diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 3cedc89cef1f3..7d1916f944e69 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -45,8 +45,6 @@ uiModules .directive('visEditorAggGroup', function () { return { restrict: 'E', - // We can't use scope binding here yet, since quiet a lot of child directives arbitrary access - // parent scope values right now. So we cannot easy change this, until we remove the whole directive. scope: true, require: '?^ngModel', template: function () { diff --git a/src/legacy/ui/public/vis/editors/default/agg_group_names.js b/src/legacy/ui/public/vis/editors/default/agg_group_names.ts similarity index 74% rename from src/legacy/ui/public/vis/editors/default/agg_group_names.js rename to src/legacy/ui/public/vis/editors/default/agg_group_names.ts index c6546a0d5aca6..6572bfc6902c0 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group_names.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group_names.ts @@ -18,8 +18,13 @@ */ import { i18n } from '@kbn/i18n'; +import { AggGroupNames } from './agg_groups'; export const aggGroupNameMaps = () => ({ - metrics: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { defaultMessage: 'Metrics' }), - buckets: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { defaultMessage: 'Buckets' }) + [AggGroupNames.Metrics]: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { + defaultMessage: 'Metrics', + }), + [AggGroupNames.Buckets]: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { + defaultMessage: 'Buckets', + }), }); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 140b4e40a3e9a..eca77571b8e8e 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -30,8 +30,8 @@ import { import { AggType } from 'ui/agg_types'; import { Vis, VisState, AggParams } from '../../../'; import { AggConfig } from '../../../agg_config'; -// @ts-ignore import { aggGroupNameMaps } from '../agg_group_names'; +import { AggGroupNames } from '../agg_groups'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; import { @@ -44,7 +44,7 @@ import { Schema } from '../schemas'; interface DefaultEditorAggGroupProps { formIsTouched: boolean; - groupName: string; + groupName: AggGroupNames; lastParentPipelineAggTitle: string; metricAggs: AggConfig[]; state: VisState; From 8b63d6435b618c5f563814e0e2334b76aee1f1d3 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 15:23:36 +0300 Subject: [PATCH 19/45] Remove unused styles --- src/legacy/ui/public/vis/editors/default/_agg.scss | 7 ------- src/legacy/ui/public/vis/editors/default/_agg_select.scss | 4 ---- 2 files changed, 11 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_agg.scss b/src/legacy/ui/public/vis/editors/default/_agg.scss index e5bcc31c5b534..801999c35c00e 100644 --- a/src/legacy/ui/public/vis/editors/default/_agg.scss +++ b/src/legacy/ui/public/vis/editors/default/_agg.scss @@ -25,13 +25,6 @@ } } -/** - * 1. Hack to split child elements evenly. - */ -.visEditorAgg__formRow--split { - flex: 1 1 0 !important; /* 1 */ -} - .visEditorAgg__sliderValue { @include euiFontSize; align-self: center; diff --git a/src/legacy/ui/public/vis/editors/default/_agg_select.scss b/src/legacy/ui/public/vis/editors/default/_agg_select.scss index 0ecbccade6044..e7284d65df286 100644 --- a/src/legacy/ui/public/vis/editors/default/_agg_select.scss +++ b/src/legacy/ui/public/vis/editors/default/_agg_select.scss @@ -1,7 +1,3 @@ .visEditorAggSelect__helpLink { @include euiFontSizeXS; } - -.visEditorAggSelect__formRow { - margin-bottom: $euiSizeS; -} From 074b085629d4e908b88260f12b9f8aa3c09b805c Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 15:32:32 +0300 Subject: [PATCH 20/45] Separate common props --- .../default/components/default_editor_agg.tsx | 17 ++------- .../default_editor_agg_common_props.ts | 36 +++++++++++++++++++ .../components/default_editor_agg_group.tsx | 18 ++-------- 3 files changed, 42 insertions(+), 29 deletions(-) create mode 100644 src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 0271d15909d0f..dc77dd3bab896 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -33,29 +33,18 @@ import { import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { AggType } from 'ui/agg_types'; -import { AggConfig, VisState, AggParams } from '../../../'; +import { AggConfig } from '../../../'; import { DefaultEditorAggParams } from './default_editor_agg_params'; +import { DefaultEditorAggCommonProps } from './default_editor_agg_common_props'; -interface DefaultEditorAggProps { +interface DefaultEditorAggProps extends DefaultEditorAggCommonProps { agg: AggConfig; aggIndex: number; aggIsTooLow: boolean; dragHandleProps: {} | null; - formIsTouched: boolean; - groupName: string; isDraggable: boolean; isLastBucket: boolean; isRemovable: boolean; - metricAggs: AggConfig[]; - lastParentPipelineAggTitle: string; - state: VisState; - onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; - onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; - onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; - removeAgg: (agg: AggConfig) => void; - setTouched: (isTouched: boolean) => void; - setValidity: (isValid: boolean) => void; } function DefaultEditorAgg({ diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts new file mode 100644 index 0000000000000..d9a153b34182f --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts @@ -0,0 +1,36 @@ +/* + * 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 { AggType } from 'ui/agg_types'; +import { AggConfig, VisState, AggParams } from '../../../'; +import { AggGroupNames } from '../agg_groups'; + +export interface DefaultEditorAggCommonProps { + formIsTouched: boolean; + groupName: AggGroupNames; + lastParentPipelineAggTitle: string; + metricAggs: AggConfig[]; + state: VisState; + onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; + onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; + onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; + removeAgg: (agg: AggConfig) => void; + setTouched: (isTouched: boolean) => void; + setValidity: (isValid: boolean) => void; +} diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index eca77571b8e8e..c14390d0990b3 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -27,13 +27,12 @@ import { EuiPanel, } from '@elastic/eui'; -import { AggType } from 'ui/agg_types'; -import { Vis, VisState, AggParams } from '../../../'; +import { Vis } from '../../../'; import { AggConfig } from '../../../agg_config'; import { aggGroupNameMaps } from '../agg_group_names'; -import { AggGroupNames } from '../agg_groups'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; +import { DefaultEditorAggCommonProps } from './default_editor_agg_common_props'; import { AggsState, isInvalidAggsTouched, @@ -42,21 +41,10 @@ import { } from './default_editor_agg_group_helper'; import { Schema } from '../schemas'; -interface DefaultEditorAggGroupProps { - formIsTouched: boolean; - groupName: AggGroupNames; - lastParentPipelineAggTitle: string; - metricAggs: AggConfig[]; - state: VisState; +interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps { vis: Vis; addSchema: (schems: Schema) => void; - onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; - onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; - onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; - removeAgg: (agg: AggConfig) => void; reorderAggs: (group: AggConfig[]) => void; - setTouched: (isTouched: boolean) => void; - setValidity: (isValid: boolean) => void; } function DefaultEditorAggGroup({ From 03248d0208298302f0221bac8f63eaa156ae71d8 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 16:03:37 +0300 Subject: [PATCH 21/45] Replace useState to useReducer --- .../components/default_editor_agg_group.tsx | 47 ++++---------- .../default_editor_agg_group_helper.tsx | 10 +-- .../default_editor_agg_group_state.tsx | 62 +++++++++++++++++++ 3 files changed, 76 insertions(+), 43 deletions(-) create mode 100644 src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_state.tsx diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index c14390d0990b3..105db380a0c56 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useReducer } from 'react'; import { EuiTitle, EuiDragDropContext, @@ -34,11 +34,11 @@ import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; import { DefaultEditorAggCommonProps } from './default_editor_agg_common_props'; import { - AggsState, isInvalidAggsTouched, isAggRemovable, calcAggIsTooLow, } from './default_editor_agg_group_helper'; +import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './default_editor_agg_group_state'; import { Schema } from '../schemas'; interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps { @@ -82,22 +82,7 @@ function DefaultEditorAggGroup({ }); } - const [aggsState, setAggsState] = useState( - (): AggsState => - group.reduce((newState, item) => { - newState[item.id] = { touched: false, valid: true }; - return newState; - }, {}) - ); - - useEffect(() => { - setAggsState( - group.reduce((newState, item) => { - newState[item.id] = aggsState[item.id] || { touched: false, valid: true }; - return newState; - }, {}) - ); - }, [group.length]); + const [aggsState, setAggsState] = useReducer(aggGroupReducer, group, initAggsState); const isGroupValid = Object.entries(aggsState).every(([, item]) => item.valid); const isAllAggsTouched = isInvalidAggsTouched(aggsState); @@ -121,25 +106,19 @@ function DefaultEditorAggGroup({ }; const setTouchedHandler = (aggId: number, touched: boolean) => { - const newState = Object.assign({}, aggsState); - if (newState[aggId]) { - newState[aggId].touched = touched; - } else { - newState[aggId] = { valid: true, touched }; - } - - setAggsState(newState); + setAggsState({ + type: AGGS_ACTION_KEYS.TOUCHED, + payload: touched, + aggId, + }); }; const setValidityHandler = (aggId: number, valid: boolean) => { - const newState = Object.assign({}, aggsState); - if (newState[aggId]) { - newState[aggId].valid = valid; - } else { - newState[aggId] = { touched: false, valid }; - } - - setAggsState(newState); + setAggsState({ + type: AGGS_ACTION_KEYS.VALID, + payload: valid, + aggId, + }); }; return ( diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx index e32439077c322..f4f3964e4927f 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_helper.tsx @@ -19,15 +19,7 @@ import { findIndex, reduce, isEmpty } from 'lodash'; import { AggConfig } from '../../../agg_config'; - -export interface AggsItem { - touched: boolean; - valid: boolean; -} - -export interface AggsState { - [aggId: number]: AggsItem; -} +import { AggsState } from './default_editor_agg_group_state'; const isAggRemovable = (agg: AggConfig, group: AggConfig[]) => { const metricCount = reduce( diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_state.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_state.tsx new file mode 100644 index 0000000000000..cba7f09a2be0f --- /dev/null +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group_state.tsx @@ -0,0 +1,62 @@ +/* + * 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 '../../../agg_config'; + +export enum AGGS_ACTION_KEYS { + TOUCHED = 'aggsTouched', + VALID = 'aggsValid', +} + +interface AggsItem { + touched: boolean; + valid: boolean; +} + +export interface AggsState { + [aggId: number]: AggsItem; +} + +interface AggsAction { + type: AGGS_ACTION_KEYS; + payload: boolean; + aggId: number; + newState?: AggsState; +} + +function aggGroupReducer(state: AggsState, action: AggsAction): AggsState { + const aggState = state[action.aggId] || { touched: false, valid: true }; + switch (action.type) { + case AGGS_ACTION_KEYS.TOUCHED: + return { ...state, [action.aggId]: { ...aggState, touched: action.payload } }; + case AGGS_ACTION_KEYS.VALID: + return { ...state, [action.aggId]: { ...aggState, valid: action.payload } }; + default: + throw new Error(); + } +} + +function initAggsState(group: AggConfig[]): AggsState { + return group.reduce((state, agg) => { + state[agg.id] = { touched: false, valid: true }; + return state; + }, {}); +} + +export { aggGroupReducer, initAggsState }; From 6ba84c3bd177c6057225749610a040156a9cc350 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Tue, 16 Jul 2019 16:41:18 +0300 Subject: [PATCH 22/45] Update functional tests --- .../default/components/default_editor_agg.tsx | 2 +- test/functional/page_objects/visualize_page.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index dc77dd3bab896..4be417f154651 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -253,7 +253,7 @@ function DefaultEditorAgg({ defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title }, })} - data-test-subj="visEditorAggToggle" + data-test-subj={`visEditorAggAccordion${agg.id}`} extraAction={renderAggButtons()} onToggle={onToggle} {...dragHandleProps} diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index 27ce972b92082..ca99075a5bfc6 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -443,7 +443,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli async selectAggregation(myString, groupName = 'buckets', childAggregationType = null) { const comboBoxElement = await find.byCssSelector(` [group-name="${groupName}"] - [data-test-subj="visEditorAggToggle"].euiAccordion-isOpen + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="defaultEditorAggSelect"] `); @@ -543,7 +543,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli log.debug(`selectField ${fieldValue}`); const selector = ` [group-name="${groupName}"] - [data-test-subj="visEditorAggToggle"].euiAccordion-isOpen + [data-test-subj^="visEditorAggAccordion"].euiAccordion-isOpen [data-test-subj="visAggEditorParams"] ${childAggregationType ? '.visEditorAgg__subAgg' : ''} [data-test-subj="visDefaultEditorField"] @@ -583,26 +583,26 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli } async setSize(newValue, aggId) { - const dataTestSubj = aggId ? `aggregationEditor${aggId} sizeParamEditor` : 'sizeParamEditor'; + const dataTestSubj = aggId ? `visEditorAggAccordion${aggId} sizeParamEditor` : 'sizeParamEditor'; await testSubjects.setValue(dataTestSubj, String(newValue)); } async toggleDisabledAgg(agg) { - await testSubjects.click(`aggregationEditor${agg} disableAggregationBtn`); + await testSubjects.click(`visEditorAggAccordion${agg} disableAggregationBtn`); await PageObjects.header.waitUntilLoadingHasFinished(); } async toggleAggregationEditor(agg) { - await testSubjects.click(`aggregationEditor${agg} toggleEditor`); + await testSubjects.click(`visEditorAggAccordion${agg} toggleEditor`); await PageObjects.header.waitUntilLoadingHasFinished(); } async toggleOtherBucket(agg = 2) { - return await testSubjects.click(`aggregationEditor${agg} otherBucketSwitch`); + return await testSubjects.click(`visEditorAggAccordion${agg} otherBucketSwitch`); } async toggleMissingBucket(agg = 2) { - return await testSubjects.click(`aggregationEditor${agg} missingBucketSwitch`); + return await testSubjects.click(`visEditorAggAccordion${agg} missingBucketSwitch`); } async isApplyEnabled() { @@ -1256,7 +1256,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli } async removeDimension(agg) { - await testSubjects.click(`aggregationEditor${agg} removeDimensionBtn`); + await testSubjects.click(`visEditorAggAccordion${agg} removeDimensionBtn`); } } From 8917966fca115e0d5c03da9428109ddd5bda09fa Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 10:03:20 +0300 Subject: [PATCH 23/45] Fix touched state after applying changes --- .../components/default_editor_agg_group.tsx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 105db380a0c56..ad22cb8e38fdd 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -88,9 +88,25 @@ function DefaultEditorAggGroup({ const isAllAggsTouched = isInvalidAggsTouched(aggsState); useEffect(() => { + // when isAllAggsTouched is true, it means that all invalid aggs are touched and we will set ngModel's touched to true + // which indicates that Apply button can be changed to Error button (when all invalid ngModels are touched) setTouched(isAllAggsTouched); }, [isAllAggsTouched]); + useEffect(() => { + // when not all invalid aggs are touched and formIsTouched becomes true, it means that Apply button was clicked. + // and in such case we set touched state to true for all aggs + if (formIsTouched && !isAllAggsTouched) { + Object.keys(aggsState).map(([aggId]) => { + setAggsState({ + type: AGGS_ACTION_KEYS.TOUCHED, + payload: true, + aggId: Number(aggId), + }); + }); + } + }, [formIsTouched]); + useEffect(() => { setValidity(isGroupValid); }, [isGroupValid]); @@ -143,9 +159,7 @@ function DefaultEditorAggGroup({ aggIndex={index} aggIsTooLow={calcAggIsTooLow(agg, index, group)} dragHandleProps={provided.dragHandleProps} - formIsTouched={ - formIsTouched || (aggsState[agg.id] && aggsState[agg.id].touched) - } + formIsTouched={aggsState[agg.id] ? aggsState[agg.id].touched : false} groupName={groupName} isDraggable={stats.count > 1} isLastBucket={index === group.length - 1} From 025d2ec64a6192847695ef0d3129156cc25e4c63 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 10:22:11 +0300 Subject: [PATCH 24/45] Remove unused styles --- .../kibana/public/management/_hacks.scss | 15 ------------- .../vis/editors/default/_agg_select.scss | 3 --- .../ui/public/vis/editors/default/_index.scss | 1 - .../default/components/default_editor_agg.tsx | 1 - .../components/default_editor_agg_params.tsx | 1 - .../components/default_editor_agg_select.tsx | 21 ++++++++----------- 6 files changed, 9 insertions(+), 33 deletions(-) delete mode 100644 src/legacy/ui/public/vis/editors/default/_agg_select.scss diff --git a/src/legacy/core_plugins/kibana/public/management/_hacks.scss b/src/legacy/core_plugins/kibana/public/management/_hacks.scss index b2ffca9ef964a..59af9c9617a30 100644 --- a/src/legacy/core_plugins/kibana/public/management/_hacks.scss +++ b/src/legacy/core_plugins/kibana/public/management/_hacks.scss @@ -23,21 +23,6 @@ kbn-management-objects-view { .ace_editor { height: 300px; } } -// SASSTODO: These are some dragula settings. -.gu-handle { - cursor: move; - cursor: grab; - cursor: -moz-grab; - cursor: -webkit-grab; -} - -.gu-mirror, -.gu-mirror .gu-handle { - cursor: grabbing; - cursor: -moz-grabbing; - cursor: -webkit-grabbing; -} - // Hack because the management wrapper is flat HTML and needs a class .mgtPage__body { max-width: map-get($euiBreakpoints, 'xl'); diff --git a/src/legacy/ui/public/vis/editors/default/_agg_select.scss b/src/legacy/ui/public/vis/editors/default/_agg_select.scss deleted file mode 100644 index e7284d65df286..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/_agg_select.scss +++ /dev/null @@ -1,3 +0,0 @@ -.visEditorAggSelect__helpLink { - @include euiFontSizeXS; -} diff --git a/src/legacy/ui/public/vis/editors/default/_index.scss b/src/legacy/ui/public/vis/editors/default/_index.scss index 3f04e89846f47..4d578086e6113 100644 --- a/src/legacy/ui/public/vis/editors/default/_index.scss +++ b/src/legacy/ui/public/vis/editors/default/_index.scss @@ -10,4 +10,3 @@ $vis-editor-resizer-width: $euiSizeM; // Components @import './agg'; @import './agg_params'; -@import './agg_select'; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 4be417f154651..2a547f2312723 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -248,7 +248,6 @@ function DefaultEditorAgg({ initialIsOpen={isEditorOpen} buttonContent={buttonContent} className="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom" - paddingSize="s" aria-label={i18n.translate('common.ui.vis.editors.agg.toggleEditorButtonAriaLabel', { defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title }, diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx index 137fae68d5b6b..09c11b15f55e0 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx @@ -236,7 +236,6 @@ function DefaultEditorAggParams({ defaultMessage: 'Advanced', } )} - paddingSize="none" > {params.advanced.map((param: ParamInstance) => { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx index fe08de066efd7..a853f8fa15773 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_select.tsx @@ -19,7 +19,7 @@ import { get, has } from 'lodash'; import React, { useEffect } from 'react'; -import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionProps, EuiFormRow, EuiLink, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { AggType } from 'ui/agg_types'; @@ -72,17 +72,14 @@ function DefaultEditorAggSelect({ } const helpLink = value && aggHelpLink && ( - - + + + + ); From 7ab46ed8472adf431d4d3925f59cd797a3158cc6 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 13:42:27 +0300 Subject: [PATCH 25/45] Update functional tests --- test/functional/apps/visualize/_gauge_chart.js | 2 -- test/functional/apps/visualize/_metric_chart.js | 1 - test/functional/page_objects/visualize_page.js | 2 +- test/functional/services/inspector.js | 2 +- 4 files changed, 2 insertions(+), 5 deletions(-) diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.js index 07f7cfd3fe159..a908f3eccd8f1 100644 --- a/test/functional/apps/visualize/_gauge_chart.js +++ b/test/functional/apps/visualize/_gauge_chart.js @@ -55,7 +55,6 @@ export default function ({ getService, getPageObjects }) { }); it('should show Split Gauges', async function () { - await PageObjects.visualize.clickMetricEditor(); log.debug('Bucket = Split Group'); await PageObjects.visualize.clickBucket('Split group'); log.debug('Aggregation = Terms'); @@ -79,7 +78,6 @@ export default function ({ getService, getPageObjects }) { it('should show correct values for fields with fieldFormatters', async function () { const expectedTexts = [ '2,904', 'win 8: Count', '0B', 'win 8: Min bytes' ]; - await PageObjects.visualize.clickMetricEditor(); await PageObjects.visualize.selectAggregation('Terms'); await PageObjects.visualize.selectField('machine.os.raw'); await PageObjects.visualize.setSize('1'); diff --git a/test/functional/apps/visualize/_metric_chart.js b/test/functional/apps/visualize/_metric_chart.js index bb75ef6648d7f..237ee1ef50b1e 100644 --- a/test/functional/apps/visualize/_metric_chart.js +++ b/test/functional/apps/visualize/_metric_chart.js @@ -183,7 +183,6 @@ export default function ({ getService, getPageObjects }) { }); it('should allow filtering with buckets', async function () { - await PageObjects.visualize.clickMetricEditor(); log.debug('Bucket = Split Group'); await PageObjects.visualize.clickBucket('Split group'); log.debug('Aggregation = Terms'); diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index e281076c7f3ef..8b55676151487 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -407,7 +407,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli } async clickMetricEditor() { - await find.clickByCssSelector('button[data-test-subj="toggleEditor"]'); + await find.clickByCssSelector('[group-name="metrics"] .euiAccordion__button'); } async clickMetricByIndex(index) { diff --git a/test/functional/services/inspector.js b/test/functional/services/inspector.js index 393af9f7d5897..89cedba6c161b 100644 --- a/test/functional/services/inspector.js +++ b/test/functional/services/inspector.js @@ -85,7 +85,7 @@ export function InspectorProvider({ getService }) { // The buttons for setting table page size are in a popover element. This popover // element appears as if it's part of the inspectorPanel but it's really attached // to the body element by a portal. - const tableSizesPopover = await find.byCssSelector('.euiPanel'); + const tableSizesPopover = await find.byCssSelector('.euiPanel .euiContextMenuPanel'); await find.clickByButtonText(`${size} rows`, tableSizesPopover); } From 803983a979cca1c63f8e68fca51d4c73bf32be07 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 15:25:22 +0300 Subject: [PATCH 26/45] Update css selector --- test/functional/page_objects/visualize_page.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index 8b55676151487..e59791c44e485 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -600,7 +600,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli } async toggleAggregationEditor(agg) { - await testSubjects.click(`visEditorAggAccordion${agg} toggleEditor`); + await find.clickByCssSelector(`[data-test-subj="visEditorAggAccordion${agg}"] .euiAccordion__button`); await PageObjects.header.waitUntilLoadingHasFinished(); } From 432ffb7a7c525d7e00d521cb88123a4ad78278f4 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 15:56:47 +0300 Subject: [PATCH 27/45] Fix draggable item --- .../vis/editors/default/components/default_editor_agg.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 2a547f2312723..c8399fc9bd204 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -182,7 +182,7 @@ function DefaultEditorAgg({ }); } return ( -
+
{actionIcons.map(icon => { if (icon.id === 'dragHandle') { return ( @@ -216,7 +216,7 @@ function DefaultEditorAgg({ }; const buttonContent = ( - + {agg.schema.title} @@ -255,7 +255,6 @@ function DefaultEditorAgg({ data-test-subj={`visEditorAggAccordion${agg.id}`} extraAction={renderAggButtons()} onToggle={onToggle} - {...dragHandleProps} > <> From d39cbff00a1672236038b382824231d6395be5c9 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 17 Jul 2019 16:48:45 +0300 Subject: [PATCH 28/45] Move aggGroupNamesMap to agg_group.js --- .../vis/editors/default/agg_group_names.ts | 30 ------------------- .../public/vis/editors/default/agg_groups.ts | 11 +++++++ .../components/default_editor_agg_group.tsx | 4 +-- 3 files changed, 13 insertions(+), 32 deletions(-) delete mode 100644 src/legacy/ui/public/vis/editors/default/agg_group_names.ts diff --git a/src/legacy/ui/public/vis/editors/default/agg_group_names.ts b/src/legacy/ui/public/vis/editors/default/agg_group_names.ts deleted file mode 100644 index 6572bfc6902c0..0000000000000 --- a/src/legacy/ui/public/vis/editors/default/agg_group_names.ts +++ /dev/null @@ -1,30 +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 { i18n } from '@kbn/i18n'; -import { AggGroupNames } from './agg_groups'; - -export const aggGroupNameMaps = () => ({ - [AggGroupNames.Metrics]: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { - defaultMessage: 'Metrics', - }), - [AggGroupNames.Buckets]: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { - defaultMessage: 'Buckets', - }), -}); diff --git a/src/legacy/ui/public/vis/editors/default/agg_groups.ts b/src/legacy/ui/public/vis/editors/default/agg_groups.ts index 9bfa99f8d4c94..f55e6ecd79155 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_groups.ts +++ b/src/legacy/ui/public/vis/editors/default/agg_groups.ts @@ -17,7 +17,18 @@ * under the License. */ +import { i18n } from '@kbn/i18n'; + export enum AggGroupNames { Buckets = 'buckets', Metrics = 'metrics', } + +export const aggGroupNamesMap = () => ({ + [AggGroupNames.Metrics]: i18n.translate('common.ui.vis.editors.aggGroups.metricsText', { + defaultMessage: 'Metrics', + }), + [AggGroupNames.Buckets]: i18n.translate('common.ui.vis.editors.aggGroups.bucketsText', { + defaultMessage: 'Buckets', + }), +}); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index ad22cb8e38fdd..badff61ef442f 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -29,7 +29,7 @@ import { import { Vis } from '../../../'; import { AggConfig } from '../../../agg_config'; -import { aggGroupNameMaps } from '../agg_group_names'; +import { aggGroupNamesMap } from '../agg_groups'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; import { DefaultEditorAggCommonProps } from './default_editor_agg_common_props'; @@ -63,7 +63,7 @@ function DefaultEditorAggGroup({ setTouched, setValidity, }: DefaultEditorAggGroupProps) { - const groupNameLabel = aggGroupNameMaps()[groupName]; + const groupNameLabel = aggGroupNamesMap()[groupName]; const group: AggConfig[] = state.aggs.bySchemaGroup[groupName] || []; const schemas = vis.type.schemas[groupName]; From 29d037e46a7c2c246366f8aa057dc2f438f250ab Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 18 Jul 2019 16:31:21 +0300 Subject: [PATCH 29/45] Apply styles --- .../ui/public/vis/editors/default/_sidebar.scss | 11 ++++++----- .../editors/default/components/default_editor_agg.tsx | 6 ++---- src/legacy/ui/public/vis/editors/default/sidebar.html | 2 ++ 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index 43d68141e10de..d69617bf0b52c 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -221,11 +221,12 @@ } // to apply truncated string with ellipsis for agg description -vis-editor-agg-group-wrapper .visEditorSidebar__section > .euiFlexGroup > .euiFlexItem:first-child { - overflow: hidden; - padding: 0 0 1px 2px; - - .euiAccordion__buttonContent { +.visEditorSidebar__aggGroup .euiAccordion { + & > .euiFlexGroup > .euiFlexItem:first-child, .euiAccordion__buttonContent, .visEditorSidebar__accordionChild { overflow: hidden; } + + & > .euiFlexGroup > .euiFlexItem:first-child { + padding: 0 0 1px 2px; + } } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index c8399fc9bd204..3817419d1f8eb 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -216,10 +216,8 @@ function DefaultEditorAgg({ }; const buttonContent = ( - - - {agg.schema.title} - + + {agg.schema.title} {showDescription && ( diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html index 11229eb643001..650a599458d54 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.html +++ b/src/legacy/ui/public/vis/editors/default/sidebar.html @@ -152,6 +152,7 @@
Date: Thu, 18 Jul 2019 17:01:06 +0300 Subject: [PATCH 30/45] Update _sidebar.scss --- .../ui/public/vis/editors/default/_sidebar.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index d69617bf0b52c..d1057da2e14d2 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -220,13 +220,18 @@ margin-bottom: $euiSizeS; } -// to apply truncated string with ellipsis for agg description .visEditorSidebar__aggGroup .euiAccordion { - & > .euiFlexGroup > .euiFlexItem:first-child, .euiAccordion__buttonContent, .visEditorSidebar__accordionChild { + // to apply truncated string with ellipsis for agg description + & > .euiFlexGroup > .euiFlexItem:first-child, + .euiAccordion__buttonContent, + // prevent appearing scroll bar in .euiAccordion__childWrapper due to negative margin on some children's EuiFlexGroup + .euiForm > .euiFormRow:first-child, + [aria-controls="advancedAccordion"] { overflow: hidden; } - & > .euiFlexGroup > .euiFlexItem:first-child { + // prevent hiding a part of the border of accordion caret icon on focus + & > .euiFlexGroup > .euiFlexItem:first-child > button { padding: 0 0 1px 2px; } } From 6e30540821ef980fddbe1682c2376c76965662b4 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 18 Jul 2019 17:51:24 +0300 Subject: [PATCH 31/45] Fix code review comments --- .../default/components/default_editor_agg.tsx | 32 ++++++------------- .../default_editor_agg_common_props.ts | 2 +- .../components/default_editor_agg_group.tsx | 4 +-- .../functional/page_objects/visualize_page.js | 2 +- .../translations/translations/ja-JP.json | 3 -- .../translations/translations/zh-CN.json | 3 -- 6 files changed, 13 insertions(+), 33 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 3817419d1f8eb..9e767096b3c1a 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -73,8 +73,8 @@ function DefaultEditorAgg({ const showError = !isEditorOpen && !validState; let disabledParams; let aggError; - const isLastBucketAgg = - groupName === 'buckets' && lastParentPipelineAggTitle && isLastBucket && agg.type; + // When a Parent Pipeline agg is selected and this agg is the last bucket. + const isLastBucketAgg = isLastBucket && lastParentPipelineAggTitle && agg.type; const SchemaComponent = agg.schema.editorComponent; @@ -103,13 +103,8 @@ function DefaultEditorAgg({ } }, [lastParentPipelineAggTitle, isLastBucket, agg.type]); - // Returns a description of the aggregation, for display in the collapsed agg header - const getDescription = () => { - if (!agg.type || !agg.type.makeLabel) { - return ''; - } - return agg.type.makeLabel(agg) || ''; - }; + // A description of the aggregation, for displaying in the collapsed agg header + const aggDescription = agg.type && agg.type.makeLabel ? agg.type.makeLabel(agg) : ''; const onToggle = (isOpen: boolean) => { setIsEditorOpen(isOpen); @@ -132,13 +127,10 @@ function DefaultEditorAgg({ color: 'text', type: 'eye', onClick: () => onToggleEnableAgg(agg, false), - ariaLabel: i18n.translate('common.ui.vis.editors.agg.disableAggButtonAriaLabel', { - defaultMessage: 'Disable aggregation', - }), tooltip: i18n.translate('common.ui.vis.editors.agg.disableAggButtonTooltip', { defaultMessage: 'Disable aggregation', }), - dataTestSubj: 'disableAggregationBtn', + dataTestSubj: 'toggleDisableAggregationBtn', }); } if (!agg.enabled) { @@ -147,13 +139,10 @@ function DefaultEditorAgg({ color: 'text', type: 'eyeClosed', onClick: () => onToggleEnableAgg(agg, true), - ariaLabel: i18n.translate('common.ui.vis.editors.agg.enableAggButtonAriaLabel', { - defaultMessage: 'Enable aggregation', - }), tooltip: i18n.translate('common.ui.vis.editors.agg.enableAggButtonTooltip', { defaultMessage: 'Enable aggregation', }), - dataTestSubj: 'disableAggregationBtn', + dataTestSubj: 'toggleDisableAggregationBtn', }); } if (isDraggable) { @@ -172,9 +161,6 @@ function DefaultEditorAgg({ color: 'danger', type: 'cross', onClick: () => removeAgg(agg), - ariaLabel: i18n.translate('common.ui.vis.editors.agg.removeDimensionButtonAriaLabel', { - defaultMessage: 'Remove dimension', - }), tooltip: i18n.translate('common.ui.vis.editors.agg.removeDimensionButtonTooltip', { defaultMessage: 'Remove dimension', }), @@ -191,7 +177,7 @@ function DefaultEditorAgg({ type={icon.type} content={icon.tooltip} iconProps={{ - ['aria-label']: icon.ariaLabel, + ['aria-label']: icon.tooltip, ['data-test-subj']: icon.dataTestSubj, }} position="bottom" @@ -205,7 +191,7 @@ function DefaultEditorAgg({ iconType={icon.type} color={icon.color as Color} onClick={icon.onClick} - aria-label={icon.ariaLabel} + aria-label={icon.tooltip} data-test-subj={icon.dataTestSubj} /> @@ -221,7 +207,7 @@ function DefaultEditorAgg({ {showDescription && ( -

{getDescription()}

+

{aggDescription}

 )} {showError && ( diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts index d9a153b34182f..495caedd893c3 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts @@ -24,7 +24,7 @@ import { AggGroupNames } from '../agg_groups'; export interface DefaultEditorAggCommonProps { formIsTouched: boolean; groupName: AggGroupNames; - lastParentPipelineAggTitle: string; + lastParentPipelineAggTitle?: string; metricAggs: AggConfig[]; state: VisState; onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index badff61ef442f..dbc98d4a8bae2 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -29,7 +29,7 @@ import { import { Vis } from '../../../'; import { AggConfig } from '../../../agg_config'; -import { aggGroupNamesMap } from '../agg_groups'; +import { aggGroupNamesMap, AggGroupNames } from '../agg_groups'; import { DefaultEditorAgg } from './default_editor_agg'; import { DefaultEditorAggAdd } from './default_editor_agg_add'; import { DefaultEditorAggCommonProps } from './default_editor_agg_common_props'; @@ -162,7 +162,7 @@ function DefaultEditorAggGroup({ formIsTouched={aggsState[agg.id] ? aggsState[agg.id].touched : false} groupName={groupName} isDraggable={stats.count > 1} - isLastBucket={index === group.length - 1} + isLastBucket={groupName === AggGroupNames.Buckets && index === group.length - 1} isRemovable={isAggRemovable(agg, group)} lastParentPipelineAggTitle={lastParentPipelineAggTitle} metricAggs={metricAggs} diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index e59791c44e485..f9521ed3251bb 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -595,7 +595,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli } async toggleDisabledAgg(agg) { - await testSubjects.click(`visEditorAggAccordion${agg} disableAggregationBtn`); + await testSubjects.click(`visEditorAggAccordion${agg} toggleDisableAggregationBtn`); await PageObjects.header.waitUntilLoadingHasFinished(); } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index d8260b1b160cb..bae27caca8fde 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -593,12 +593,9 @@ "common.ui.vis.defaultEditor.aggSelect.subAggregationLabel": "サブ集約", "common.ui.vis.defaultFeedbackMessage": "フィードバックがありますか？{link} で問題を報告してください。", "common.ui.vis.editors.advancedToggle.advancedLinkLabel": "高度な設定", - "common.ui.vis.editors.agg.disableAggButtonAriaLabel": "集約を無効にする", "common.ui.vis.editors.agg.disableAggButtonTooltip": "集約を無効にする", - "common.ui.vis.editors.agg.enableAggButtonAriaLabel": "集約を有効にする", "common.ui.vis.editors.agg.enableAggButtonTooltip": "集約を有効にする", "common.ui.vis.editors.agg.modifyPriorityButtonTooltip": "ドラッグして優先順位を変更します", - "common.ui.vis.editors.agg.removeDimensionButtonAriaLabel": "ディメンションを削除", "common.ui.vis.editors.agg.removeDimensionButtonTooltip": "ディメンションを削除", "common.ui.vis.editors.agg.toggleEditorButtonAriaLabel": "{schema} エディターを切り替える", "common.ui.vis.editors.aggAdd.addGroupButtonLabel": "{groupNameLabel} を追加", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index c38d431fbc763..6c925747340ad 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -593,12 +593,9 @@ "common.ui.vis.defaultEditor.aggSelect.subAggregationLabel": "子聚合", "common.ui.vis.defaultFeedbackMessage": "想反馈？请在“{link}中创建问题。", "common.ui.vis.editors.advancedToggle.advancedLinkLabel": "高级", - "common.ui.vis.editors.agg.disableAggButtonAriaLabel": "禁用聚合", "common.ui.vis.editors.agg.disableAggButtonTooltip": "禁用聚合", - "common.ui.vis.editors.agg.enableAggButtonAriaLabel": "启用聚合", "common.ui.vis.editors.agg.enableAggButtonTooltip": "启用聚合", "common.ui.vis.editors.agg.modifyPriorityButtonTooltip": "通过拖动来修改优先级", - "common.ui.vis.editors.agg.removeDimensionButtonAriaLabel": "删除维度", "common.ui.vis.editors.agg.removeDimensionButtonTooltip": "删除维度", "common.ui.vis.editors.agg.toggleEditorButtonAriaLabel": "切换 {schema} 编辑器", "common.ui.vis.editors.aggAdd.addGroupButtonLabel": "添加{groupNameLabel}", From 932e24fefb8a80c47cb8ad47b8d3348640d5ae48 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 18 Jul 2019 18:18:33 +0300 Subject: [PATCH 32/45] Pass schemas prop --- .../public/vis/editors/default/agg_group.js | 5 +++-- .../components/default_editor_agg_group.tsx | 20 ++++++++----------- .../public/vis/editors/default/sidebar.html | 2 ++ 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index 7d1916f944e69..e9a2fcadb1361 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -27,8 +27,8 @@ uiModules .directive('visEditorAggGroupWrapper', reactDirective => reactDirective(wrapInI18nContext(DefaultEditorAggGroup), [ ['metricAggs', { watchDepth: 'reference' }], // we watch reference to identify each aggs change in useEffects + ['schemas', { watchDepth: 'collection' }], ['state', { watchDepth: 'reference' }], - ['vis', { watchDepth: 'reference' }], ['addSchema', { watchDepth: 'reference' }], ['onAggParamsChange', { watchDepth: 'reference' }], ['onAggTypeChange', { watchDepth: 'reference' }], @@ -55,7 +55,7 @@ uiModules last-parent-pipeline-agg-title="lastParentPipelineAggTitle" metric-aggs="metricAggs" state="state" - vis="vis" + schemas="schemas" add-schema="addSchema" on-agg-params-change="onAggParamsChange" on-agg-type-change="onAggTypeChange" @@ -68,6 +68,7 @@ uiModules }, link: function ($scope, $el, attr, ngModelCtrl) { $scope.groupName = attr.groupName; + $scope.$bind('schemas', attr.schemas); // The model can become touched either onBlur event or when the form is submitted. // We also watch $touched to identify when the form is submitted. $scope.$watch( diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index dbc98d4a8bae2..237afa8856caa 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -27,7 +27,6 @@ import { EuiPanel, } from '@elastic/eui'; -import { Vis } from '../../../'; import { AggConfig } from '../../../agg_config'; import { aggGroupNamesMap, AggGroupNames } from '../agg_groups'; import { DefaultEditorAgg } from './default_editor_agg'; @@ -42,7 +41,7 @@ import { aggGroupReducer, initAggsState, AGGS_ACTION_KEYS } from './default_edit import { Schema } from '../schemas'; interface DefaultEditorAggGroupProps extends DefaultEditorAggCommonProps { - vis: Vis; + schemas: Schema[]; addSchema: (schems: Schema) => void; reorderAggs: (group: AggConfig[]) => void; } @@ -53,7 +52,7 @@ function DefaultEditorAggGroup({ lastParentPipelineAggTitle, metricAggs, state, - vis, + schemas = [], addSchema, onAggParamsChange, onAggTypeChange, @@ -64,9 +63,8 @@ function DefaultEditorAggGroup({ setValidity, }: DefaultEditorAggGroupProps) { const groupNameLabel = aggGroupNamesMap()[groupName]; - const group: AggConfig[] = state.aggs.bySchemaGroup[groupName] || []; + const group: AggConfig[] = state.aggs.bySchemaGroup[groupName]; - const schemas = vis.type.schemas[groupName]; const stats = { min: 0, max: 0, @@ -74,13 +72,11 @@ function DefaultEditorAggGroup({ deprecate: false, }; - if (schemas) { - schemas.forEach((schema: Schema) => { - stats.min += schema.min; - stats.max += schema.max; - stats.deprecate = schema.deprecate; - }); - } + schemas.forEach((schema: Schema) => { + stats.min += schema.min; + stats.max += schema.max; + stats.deprecate = schema.deprecate; + }); const [aggsState, setAggsState] = useReducer(aggGroupReducer, group, initAggsState); diff --git a/src/legacy/ui/public/vis/editors/default/sidebar.html b/src/legacy/ui/public/vis/editors/default/sidebar.html index 650a599458d54..097b55562fa88 100644 --- a/src/legacy/ui/public/vis/editors/default/sidebar.html +++ b/src/legacy/ui/public/vis/editors/default/sidebar.html @@ -157,6 +157,7 @@ group-name="metrics" ng-model="_internalNgModelState" data-test-subj="metricsAggGroup" + schemas="vis.type.schemas.metrics" >
@@ -166,6 +167,7 @@ group-name="buckets" ng-model="_internalNgModelState" data-test-subj="bucketsAggGroup" + schemas="vis.type.schemas.buckets" >
From e070170ffff432aa7a93155e15027a2e3a466521 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 19 Jul 2019 09:31:43 +0300 Subject: [PATCH 33/45] Update default_editor_agg_group.tsx --- .../editors/default/components/default_editor_agg_group.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 237afa8856caa..9489e57e017b7 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -63,7 +63,8 @@ function DefaultEditorAggGroup({ setValidity, }: DefaultEditorAggGroupProps) { const groupNameLabel = aggGroupNamesMap()[groupName]; - const group: AggConfig[] = state.aggs.bySchemaGroup[groupName]; + // e.g. buckets can have no aggs + const group: AggConfig[] = state.aggs.bySchemaGroup[groupName] || []; const stats = { min: 0, From 1b57194ff1cf11ca504cadc7d1c99d9ac7df187c Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 19 Jul 2019 14:38:39 +0300 Subject: [PATCH 34/45] Prevent scroll bar and add space --- .../controls/components/input_list.tsx | 4 +- .../public/agg_types/controls/date_ranges.tsx | 186 +++++++++--------- .../ui/public/agg_types/controls/ranges.tsx | 137 ++++++------- .../agg_types/number_list/number_list.tsx | 4 +- .../public/vis/editors/default/_sidebar.scss | 3 +- 5 files changed, 171 insertions(+), 163 deletions(-) diff --git a/src/legacy/ui/public/agg_types/controls/components/input_list.tsx b/src/legacy/ui/public/agg_types/controls/components/input_list.tsx index fecb29256de23..218fe685e16b0 100644 --- a/src/legacy/ui/public/agg_types/controls/components/input_list.tsx +++ b/src/legacy/ui/public/agg_types/controls/components/input_list.tsx @@ -174,7 +174,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) { }, [list]); return ( - <> +
{models.map((item, index) => ( @@ -202,7 +202,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) { /> - +
); } diff --git a/src/legacy/ui/public/agg_types/controls/date_ranges.tsx b/src/legacy/ui/public/agg_types/controls/date_ranges.tsx index 2a985dce6f61c..41f47931bf6a8 100644 --- a/src/legacy/ui/public/agg_types/controls/date_ranges.tsx +++ b/src/legacy/ui/public/agg_types/controls/date_ranges.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { Fragment, useState, useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { htmlIdGenerator, EuiButtonIcon, @@ -30,6 +30,7 @@ import { EuiLink, EuiSpacer, EuiText, + EuiFormRow, } from '@elastic/eui'; import dateMath from '@elastic/datemath'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -110,96 +111,99 @@ function DateRangesParamEditor({ ); return ( - <> - - - - - - - - {ranges.map(({ from, to, id }) => { - const deleteBtnTitle = i18n.translate( - 'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel', - { - defaultMessage: 'Remove the range of {from} to {to}', - values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER }, - } - ); - const areBothEmpty = !from && !to; - - return ( - - - - onChangeRange(id, 'from', ev.target.value)} - /> - - - - - - onChangeRange(id, 'to', ev.target.value)} - /> - - - onRemoveRange(id)} - /> - - - - - ); - })} - - {hasInvalidRange && ( - - - - )} - - - - - - - - + + <> + + + + + + + + {ranges.map(({ from, to, id }) => { + const deleteBtnTitle = i18n.translate( + 'common.ui.aggTypes.dateRanges.removeRangeButtonAriaLabel', + { + defaultMessage: 'Remove the range of {from} to {to}', + values: { from: from || FROM_PLACEHOLDER, to: to || TO_PLACEHOLDER }, + } + ); + const areBothEmpty = !from && !to; + + return ( +
+ + + onChangeRange(id, 'from', ev.target.value)} + /> + + + + + + onChangeRange(id, 'to', ev.target.value)} + /> + + + onRemoveRange(id)} + /> + + + +
+ ); + })} + + {hasInvalidRange && ( + + + + )} + + + + + + + + + ); } diff --git a/src/legacy/ui/public/agg_types/controls/ranges.tsx b/src/legacy/ui/public/agg_types/controls/ranges.tsx index 91bc4eb50997e..050f4e65816b1 100644 --- a/src/legacy/ui/public/agg_types/controls/ranges.tsx +++ b/src/legacy/ui/public/agg_types/controls/ranges.tsx @@ -27,6 +27,7 @@ import { EuiIcon, EuiSpacer, EuiButtonEmpty, + EuiFormRow, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -88,75 +89,77 @@ function RangesParamEditor({ agg, value = [], setValue }: AggParamEditorProps - {ranges.map(({ from, to, id }) => { - const deleteBtnTitle = i18n.translate( - 'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel', - { - defaultMessage: 'Remove the range of {from} to {to}', - values: { - from: isEmpty(from) ? FROM_PLACEHOLDER : from, - to: isEmpty(to) ? TO_PLACEHOLDER : to, - }, - } - ); + + <> + {ranges.map(({ from, to, id }) => { + const deleteBtnTitle = i18n.translate( + 'common.ui.aggTypes.ranges.removeRangeButtonAriaLabel', + { + defaultMessage: 'Remove the range of {from} to {to}', + values: { + from: isEmpty(from) ? FROM_PLACEHOLDER : from, + to: isEmpty(to) ? TO_PLACEHOLDER : to, + }, + } + ); - return ( - - - - onChangeRange(id, 'from', ev.target.value)} - fullWidth={true} - compressed={true} - /> - - - - - - onChangeRange(id, 'to', ev.target.value)} - fullWidth={true} - compressed={true} - /> - - - onRemoveRange(id)} - /> - - - - - ); - })} + return ( + + + + onChangeRange(id, 'from', ev.target.value)} + fullWidth={true} + compressed={true} + /> + + + + + + onChangeRange(id, 'to', ev.target.value)} + fullWidth={true} + compressed={true} + /> + + + onRemoveRange(id)} + /> + + + + + ); + })} - - - - - - - + + + + + + + + ); } diff --git a/src/legacy/ui/public/agg_types/number_list/number_list.tsx b/src/legacy/ui/public/agg_types/number_list/number_list.tsx index 54040814028f7..934dd286d3080 100644 --- a/src/legacy/ui/public/agg_types/number_list/number_list.tsx +++ b/src/legacy/ui/public/agg_types/number_list/number_list.tsx @@ -133,7 +133,7 @@ function NumberList({ }; return ( - <> +
{models.map((model, arrayIndex) => ( - +
); } diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index d1057da2e14d2..bf8307c4f69a4 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -226,7 +226,8 @@ .euiAccordion__buttonContent, // prevent appearing scroll bar in .euiAccordion__childWrapper due to negative margin on some children's EuiFlexGroup .euiForm > .euiFormRow:first-child, - [aria-controls="advancedAccordion"] { + [aria-controls="advancedAccordion"], + .visEditorAgg__flexGroupWrapper { overflow: hidden; } From 84f520d9d6a276b35a0c46be95d06d702b0caed8 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 19 Jul 2019 14:39:03 +0300 Subject: [PATCH 35/45] Remove unused min from stats --- .../vis/editors/default/components/default_editor_agg_add.tsx | 1 - .../vis/editors/default/components/default_editor_agg_group.tsx | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx index c5630bb6adf52..c452406c40485 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx @@ -39,7 +39,6 @@ interface DefaultEditorAggAddProps { schemas: Schema[]; stats: { max: number; - min: number; count: number; deprecate: boolean; }; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 9489e57e017b7..5c494d434479b 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -67,14 +67,12 @@ function DefaultEditorAggGroup({ const group: AggConfig[] = state.aggs.bySchemaGroup[groupName] || []; const stats = { - min: 0, max: 0, count: group.length, deprecate: false, }; schemas.forEach((schema: Schema) => { - stats.min += schema.min; stats.max += schema.max; stats.deprecate = schema.deprecate; }); From a1f3a610d7b1b27a0acc13e120e67dfaadfc54b7 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 23 Jul 2019 11:50:34 +0300 Subject: [PATCH 36/45] Add OnAggParamsChange type --- .../components/default_editor_agg_common_props.ts | 10 ++++++++-- .../default/components/default_editor_agg_param.tsx | 4 ++-- .../default/components/default_editor_agg_params.tsx | 5 +++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts index 495caedd893c3..14ea0a8083e5e 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_common_props.ts @@ -18,16 +18,22 @@ */ import { AggType } from 'ui/agg_types'; -import { AggConfig, VisState, AggParams } from '../../../'; +import { AggConfig, VisState, AggParams, VisParams } from '../../../'; import { AggGroupNames } from '../agg_groups'; +export type OnAggParamsChange = ( + params: AggParams | VisParams, + paramName: string, + value: unknown +) => void; + export interface DefaultEditorAggCommonProps { formIsTouched: boolean; groupName: AggGroupNames; lastParentPipelineAggTitle?: string; metricAggs: AggConfig[]; state: VisState; - onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; + onAggParamsChange: OnAggParamsChange; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; onToggleEnableAgg: (agg: AggConfig, isEnable: boolean) => void; removeAgg: (agg: AggConfig) => void; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_param.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_param.tsx index e2f2e5b90acbb..0e7fdf2cc37c8 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_param.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_param.tsx @@ -19,12 +19,12 @@ import React, { useEffect } from 'react'; -import { AggParams } from '../agg_params'; import { AggParamEditorProps, AggParamCommonProps } from './default_editor_agg_param_props'; +import { OnAggParamsChange } from './default_editor_agg_common_props'; interface DefaultEditorAggParamProps extends AggParamCommonProps { paramEditor: React.ComponentType>; - onChange(aggParams: AggParams, paramName: string, value?: T): void; + onChange: OnAggParamsChange; } function DefaultEditorAggParam(props: DefaultEditorAggParamProps) { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx index 09c11b15f55e0..fad6352d43825 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx @@ -22,7 +22,7 @@ import { EuiForm, EuiAccordion, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { aggTypes, AggType, AggParam } from 'ui/agg_types'; -import { AggConfig, VisState, AggParams } from 'ui/vis'; +import { AggConfig, VisState } from 'ui/vis'; import { IndexPattern } from 'ui/index_patterns'; import { DefaultEditorAggSelect } from './default_editor_agg_select'; import { DefaultEditorAggParam } from './default_editor_agg_param'; @@ -47,6 +47,7 @@ import { FixedParam, TimeIntervalParam, EditorParamConfig } from '../../config/t // eslint-disable-next-line @kbn/eslint/no-restricted-paths import { useUnmount } from '../../../../../../../plugins/kibana_react/public/util/use_unmount'; import { AggGroupNames } from '../agg_groups'; +import { OnAggParamsChange } from './default_editor_agg_common_props'; const FIXED_VALUE_PROP = 'fixedValue'; const DEFAULT_PROP = 'default'; @@ -55,7 +56,7 @@ type EditorParamConfigType = EditorParamConfig & { }; export interface SubAggParamsProp { formIsTouched: boolean; - onAggParamsChange: (agg: AggParams, paramName: string, value: unknown) => void; + onAggParamsChange: OnAggParamsChange; onAggTypeChange: (agg: AggConfig, aggType: AggType) => void; } export interface DefaultEditorAggParamsProps extends SubAggParamsProp { From 3a522e53a21985b1738ee7f321e9a1243f5f6789 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 24 Jul 2019 12:36:00 +0300 Subject: [PATCH 37/45] Remove unnecessary styles --- .../controls/components/input_list.tsx | 4 ++-- .../public/agg_types/controls/date_ranges.tsx | 6 +++--- .../ui/public/agg_types/controls/ranges.tsx | 2 +- .../agg_types/number_list/number_list.tsx | 4 ++-- .../public/vis/editors/default/_sidebar.scss | 19 +++---------------- .../components/default_editor_agg_params.tsx | 9 ++++----- 6 files changed, 15 insertions(+), 29 deletions(-) diff --git a/src/legacy/ui/public/agg_types/controls/components/input_list.tsx b/src/legacy/ui/public/agg_types/controls/components/input_list.tsx index 218fe685e16b0..fecb29256de23 100644 --- a/src/legacy/ui/public/agg_types/controls/components/input_list.tsx +++ b/src/legacy/ui/public/agg_types/controls/components/input_list.tsx @@ -174,7 +174,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) { }, [list]); return ( -
+ <> {models.map((item, index) => ( @@ -202,7 +202,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) { /> -
+ ); } diff --git a/src/legacy/ui/public/agg_types/controls/date_ranges.tsx b/src/legacy/ui/public/agg_types/controls/date_ranges.tsx index 41f47931bf6a8..7190ae20c0b03 100644 --- a/src/legacy/ui/public/agg_types/controls/date_ranges.tsx +++ b/src/legacy/ui/public/agg_types/controls/date_ranges.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useState, useEffect } from 'react'; +import React, { Fragment, useState, useEffect } from 'react'; import { htmlIdGenerator, EuiButtonIcon, @@ -134,7 +134,7 @@ function DateRangesParamEditor({ const areBothEmpty = !from && !to; return ( -
+ -
+ ); })} diff --git a/src/legacy/ui/public/agg_types/controls/ranges.tsx b/src/legacy/ui/public/agg_types/controls/ranges.tsx index 050f4e65816b1..a528ba1fb5c2a 100644 --- a/src/legacy/ui/public/agg_types/controls/ranges.tsx +++ b/src/legacy/ui/public/agg_types/controls/ranges.tsx @@ -89,7 +89,7 @@ function RangesParamEditor({ agg, value = [], setValue }: AggParamEditorProps + <> {ranges.map(({ from, to, id }) => { const deleteBtnTitle = i18n.translate( diff --git a/src/legacy/ui/public/agg_types/number_list/number_list.tsx b/src/legacy/ui/public/agg_types/number_list/number_list.tsx index 934dd286d3080..54040814028f7 100644 --- a/src/legacy/ui/public/agg_types/number_list/number_list.tsx +++ b/src/legacy/ui/public/agg_types/number_list/number_list.tsx @@ -133,7 +133,7 @@ function NumberList({ }; return ( -
+ <> {models.map((model, arrayIndex) => ( -
+ ); } diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index bf8307c4f69a4..1b713917e4a9f 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -219,20 +219,7 @@ margin-top: $euiSizeS; margin-bottom: $euiSizeS; } - -.visEditorSidebar__aggGroup .euiAccordion { - // to apply truncated string with ellipsis for agg description - & > .euiFlexGroup > .euiFlexItem:first-child, - .euiAccordion__buttonContent, - // prevent appearing scroll bar in .euiAccordion__childWrapper due to negative margin on some children's EuiFlexGroup - .euiForm > .euiFormRow:first-child, - [aria-controls="advancedAccordion"], - .visEditorAgg__flexGroupWrapper { - overflow: hidden; - } - - // prevent hiding a part of the border of accordion caret icon on focus - & > .euiFlexGroup > .euiFlexItem:first-child > button { - padding: 0 0 1px 2px; - } +// prevent hiding a part of the border of accordion caret icon on focus +.visEditorSidebar__aggGroup .euiAccordion__button { + padding-left: 2px; } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx index fad6352d43825..ecd6c82f26d6b 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params.tsx @@ -18,7 +18,7 @@ */ import React, { useReducer, useEffect } from 'react'; -import { EuiForm, EuiAccordion, EuiSpacer } from '@elastic/eui'; +import { EuiForm, EuiAccordion, EuiSpacer, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { aggTypes, AggType, AggParam } from 'ui/agg_types'; @@ -228,7 +228,7 @@ function DefaultEditorAggParams({ })} {params.advanced.length ? ( - <> + - + {params.advanced.map((param: ParamInstance) => { const model = paramsState[param.aggParam.name] || { touched: false, @@ -247,8 +247,7 @@ function DefaultEditorAggParams({ return renderParam(param, model); })} - - + ) : null} ); From 0a52f9d398f41329d724dfe81d5b6067aed98212 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 24 Jul 2019 14:22:37 +0300 Subject: [PATCH 38/45] Update snapshot and change title size --- .../default_editor_agg_params.test.tsx.snap | 66 ++++++++++--------- .../components/default_editor_agg_group.tsx | 4 +- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/default_editor_agg_params.test.tsx.snap b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/default_editor_agg_params.test.tsx.snap index b4d796443b554..018fe0b7dbd3c 100644 --- a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/default_editor_agg_params.test.tsx.snap +++ b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/default_editor_agg_params.test.tsx.snap @@ -46,39 +46,43 @@ exports[`DefaultEditorAggParams component should init with the default set of pa } } /> - - - + + - - + /> + + `; diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 5c494d434479b..8ff06786ebc45 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -135,8 +135,8 @@ function DefaultEditorAggGroup({ return ( - -

{groupNameLabel}

+ +
{groupNameLabel}
 From 25d51189036d4e8fce97792489afa6830ec4c2fb Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Wed, 24 Jul 2019 17:27:56 +0300 Subject: [PATCH 39/45] Show error as an icon --- .../public/vis/editors/default/_sidebar.scss | 10 +++-- .../default/components/default_editor_agg.tsx | 39 ++++++++----------- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index 1b713917e4a9f..238359ec473c6 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -219,7 +219,11 @@ margin-top: $euiSizeS; margin-bottom: $euiSizeS; } -// prevent hiding a part of the border of accordion caret icon on focus -.visEditorSidebar__aggGroup .euiAccordion__button { - padding-left: 2px; + +.visEditorSidebar__aggGroupAccordionButtonContent { + font-size: $euiFontSizeS; + + span { + color: $euiColorDarkShade; + } } diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index 9e767096b3c1a..e913f72ce0f44 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -121,6 +121,18 @@ function DefaultEditorAgg({ const renderAggButtons = () => { const actionIcons = []; + if (showError) { + actionIcons.push({ + id: 'hasErrors', + color: 'danger', + type: 'alert', + tooltip: i18n.translate('common.ui.vis.editors.agg.errorsAriaLabel', { + defaultMessage: 'Aggregation has errors', + }), + dataTestSubj: 'hasErrorsAggregationIcon', + }); + } + if (agg.enabled && isRemovable) { actionIcons.push({ id: 'disableAggregation', @@ -202,28 +214,9 @@ function DefaultEditorAgg({ }; const buttonContent = ( - - {agg.schema.title} - - {showDescription && ( - -

{aggDescription}

- - )} - {showError && ( - -
- -
- - )} - - + <> + {agg.schema.title} {showDescription && {aggDescription}} + ); return ( @@ -231,6 +224,8 @@ function DefaultEditorAgg({ id={`visEditorAggAccordion${agg.id}`} initialIsOpen={isEditorOpen} buttonContent={buttonContent} + buttonClassName="eui-textTruncate" + buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate" className="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom" aria-label={i18n.translate('common.ui.vis.editors.agg.toggleEditorButtonAriaLabel', { defaultMessage: 'Toggle {schema} editor', From ed2426f04f07a4c09def407ece4ad8371a9e53e2 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 25 Jul 2019 10:35:43 +0300 Subject: [PATCH 40/45] Update background color --- src/legacy/ui/public/vis/editors/default/_sidebar.scss | 2 +- .../vis/editors/default/components/default_editor_agg.tsx | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index 238359ec473c6..4ad13f4417692 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -119,7 +119,7 @@ // Collapsible section .visEditorSidebar__collapsible { - background-color: transparentize($euiColorLightShade, .85); + background-color: lightOrDarkTheme($euiPageBackgroundColor, $euiColorLightestShade); } .visEditorSidebar__collapsible--margin { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx index e913f72ce0f44..7d6bc34ac06c9 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg.tsx @@ -22,16 +22,11 @@ import { EuiAccordion, EuiToolTip, EuiButtonIcon, - EuiText, - EuiTextColor, EuiSpacer, - EuiFlexGroup, - EuiFlexItem, EuiIconTip, Color, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; import { AggConfig } from '../../../'; import { DefaultEditorAggParams } from './default_editor_agg_params'; From 20ee812c8416250b77804b532d7702aee476790e Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Thu, 25 Jul 2019 16:25:28 +0300 Subject: [PATCH 41/45] Update title size --- .../vis/editors/default/components/default_editor_agg_group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 8ff06786ebc45..f65243ac311f7 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -135,7 +135,7 @@ function DefaultEditorAggGroup({ return ( - +
{groupNameLabel}
 From 187fa6466ce8fc90e4ddc1c2053789b8c7aeee6e Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 26 Jul 2019 16:26:03 +0300 Subject: [PATCH 42/45] Fix code review comments --- src/legacy/ui/public/vis/editors/default/agg_group.js | 3 +-- .../default/components/default_editor_agg_group.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/agg_group.js b/src/legacy/ui/public/vis/editors/default/agg_group.js index e9a2fcadb1361..e357da8156b9f 100644 --- a/src/legacy/ui/public/vis/editors/default/agg_group.js +++ b/src/legacy/ui/public/vis/editors/default/agg_group.js @@ -77,8 +77,7 @@ uiModules }, value => { $scope.formIsTouched = value; - }, - true + } ); $scope.setValidity = isValid => { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index f65243ac311f7..eaf3e268f381d 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -79,7 +79,7 @@ function DefaultEditorAggGroup({ const [aggsState, setAggsState] = useReducer(aggGroupReducer, group, initAggsState); - const isGroupValid = Object.entries(aggsState).every(([, item]) => item.valid); + const isGroupValid = Object.values(aggsState).every(item => item.valid); const isAllAggsTouched = isInvalidAggsTouched(aggsState); useEffect(() => { @@ -106,7 +106,13 @@ function DefaultEditorAggGroup({ setValidity(isGroupValid); }, [isGroupValid]); - const onDragEnd = ({ source, destination }: any) => { + const onDragEnd = ({ + source, + destination, + }: { + source: { index: number }; + destination: { index: number }; + }) => { if (source && destination) { const orderedGroup = Array.from(group); const [removed] = orderedGroup.splice(source.index, 1); From 56b631d05b095620315e36b08fd3eec442e15bae Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Fri, 26 Jul 2019 16:40:47 +0300 Subject: [PATCH 43/45] FIx TS --- .../components/default_editor_agg_group.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index eaf3e268f381d..29d2cf427df15 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -106,17 +106,15 @@ function DefaultEditorAggGroup({ setValidity(isGroupValid); }, [isGroupValid]); - const onDragEnd = ({ - source, - destination, - }: { - source: { index: number }; - destination: { index: number }; - }) => { - if (source && destination) { + interface DragDropProps { + result: { index: number }; + provided: { index: number }; + } + const onDragEnd = ({ result, provided }: DragDropProps) => { + if (result && provided) { const orderedGroup = Array.from(group); - const [removed] = orderedGroup.splice(source.index, 1); - orderedGroup.splice(destination.index, 0, removed); + const [removed] = orderedGroup.splice(result.index, 1); + orderedGroup.splice(provided.index, 0, removed); reorderAggs(orderedGroup); } @@ -139,6 +137,7 @@ function DefaultEditorAggGroup({ }; return ( + // @ts-ignore due to https://github.com/elastic/eui/issues/2172 From c228d8d811f4aa0af2b6e4ca158f8309f81106a5 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 29 Jul 2019 09:42:34 +0300 Subject: [PATCH 44/45] Update TS --- .../components/default_editor_agg_group.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 29d2cf427df15..3fe1bfe67148f 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -106,15 +106,15 @@ function DefaultEditorAggGroup({ setValidity(isGroupValid); }, [isGroupValid]); - interface DragDropProps { - result: { index: number }; - provided: { index: number }; + interface DragDropResultProps { + source: { index: number }; + destination?: { index: number } | null; } - const onDragEnd = ({ result, provided }: DragDropProps) => { - if (result && provided) { + const onDragEnd = ({ source, destination }: DragDropResultProps) => { + if (source && destination) { const orderedGroup = Array.from(group); - const [removed] = orderedGroup.splice(result.index, 1); - orderedGroup.splice(provided.index, 0, removed); + const [removed] = orderedGroup.splice(source.index, 1); + orderedGroup.splice(destination.index, 0, removed); reorderAggs(orderedGroup); } @@ -137,7 +137,6 @@ function DefaultEditorAggGroup({ }; return ( - // @ts-ignore due to https://github.com/elastic/eui/issues/2172 From 2346bc0dea0f008eac817324899a7d299a568b11 Mon Sep 17 00:00:00 2001 From: maryia-lapata Date: Mon, 29 Jul 2019 12:20:39 +0300 Subject: [PATCH 45/45] Remove Schema.deprecate since it's not used --- .../components/default_editor_agg_add.tsx | 28 ++++++++----------- .../components/default_editor_agg_group.tsx | 2 -- .../default_editor_agg_params_helper.test.ts | 6 ---- .../default_editor_agg_params_helper.ts | 10 ------- .../public/vis/editors/default/schemas.d.ts | 1 - .../ui/public/vis/editors/default/schemas.js | 1 - .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 8 files changed, 12 insertions(+), 38 deletions(-) diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx index c452406c40485..f07b363d355b2 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_add.tsx @@ -40,7 +40,6 @@ interface DefaultEditorAggAddProps { stats: { max: number; count: number; - deprecate: boolean; }; addSchema(schema: Schema): void; } @@ -91,14 +90,14 @@ function DefaultEditorAggAdd({ closePopover={() => setIsPopoverOpen(false)} > - {(groupName !== AggGroupNames.Buckets || (!stats.count && !stats.deprecate)) && ( + {(groupName !== AggGroupNames.Buckets || !stats.count) && ( )} - {groupName === AggGroupNames.Buckets && stats.count > 0 && !stats.deprecate && ( + {groupName === AggGroupNames.Buckets && stats.count > 0 && ( - !schema.deprecate && ( - onSelectSchema(schema)} - > - {schema.title} - - ) - )} + items={schemas.map(schema => ( + onSelectSchema(schema)} + > + {schema.title} + + ))} /> diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx index 3fe1bfe67148f..4a5f012f8783c 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_group.tsx @@ -69,12 +69,10 @@ function DefaultEditorAggGroup({ const stats = { max: 0, count: group.length, - deprecate: false, }; schemas.forEach((schema: Schema) => { stats.max += schema.max; - stats.deprecate = schema.deprecate; }); const [aggsState, setAggsState] = useReducer(aggGroupReducer, group, initAggsState); diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.test.ts b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.test.ts index 786ec688bd2bd..285a694f55b7c 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.test.ts +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.test.ts @@ -172,12 +172,6 @@ describe('DefaultEditorAggParams helpers', () => { expect(errors).toEqual(['"Split series" aggs must run before all other buckets!']); }); - - it('should push an error if a schema is deprecated', () => { - const errors = getError({ schema: { title: 'Split series', deprecate: true } }, false); - - expect(errors).toEqual(['"Split series" has been deprecated.']); - }); }); describe('getAggTypeOptions', () => { diff --git a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.ts b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.ts index 5c8acac4e56b3..1e09bdf694fa0 100644 --- a/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.ts +++ b/src/legacy/ui/public/vis/editors/default/components/default_editor_agg_params_helper.ts @@ -108,16 +108,6 @@ function getError(agg: AggConfig, aggIsTooLow: boolean) { }) ); } - if (agg.schema.deprecate) { - errors.push( - agg.schema.deprecateMessage - ? agg.schema.deprecateMessage - : i18n.translate('common.ui.vis.editors.aggParams.errors.schemaIsDeprecatedErrorMessage', { - defaultMessage: '"{schema}" has been deprecated.', - values: { schema: agg.schema.title }, - }) - ); - } return errors; } diff --git a/src/legacy/ui/public/vis/editors/default/schemas.d.ts b/src/legacy/ui/public/vis/editors/default/schemas.d.ts index ae4aae9fe1061..faf6120cfb893 100644 --- a/src/legacy/ui/public/vis/editors/default/schemas.d.ts +++ b/src/legacy/ui/public/vis/editors/default/schemas.d.ts @@ -22,7 +22,6 @@ import { AggGroupNames } from './agg_groups'; export interface Schema { aggFilter: string | string[]; - deprecate: boolean; editor: boolean | string; group: AggGroupNames; max: number; diff --git a/src/legacy/ui/public/vis/editors/default/schemas.js b/src/legacy/ui/public/vis/editors/default/schemas.js index 4c3da3bb336ca..313fdfd19a284 100644 --- a/src/legacy/ui/public/vis/editors/default/schemas.js +++ b/src/legacy/ui/public/vis/editors/default/schemas.js @@ -51,7 +51,6 @@ class Schemas { aggFilter: '*', editor: false, params: [], - deprecate: false }); // convert the params into a params registry diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 8de108443826d..459752668b884 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -580,7 +580,6 @@ "common.ui.vis.editors.aggGroups.bucketsText": "バケット", "common.ui.vis.editors.aggGroups.metricsText": "メトリック", "common.ui.vis.editors.aggParams.errors.aggWrongRunOrderErrorMessage": "「{schema}」集約は他のバケットの前に実行する必要があります！", - "common.ui.vis.editors.aggParams.errors.schemaIsDeprecatedErrorMessage": "「{schema}」は廃止されました。", "common.ui.vis.editors.resizeAriaLabels": "左右のキーでエディターのサイズを変更します", "common.ui.vis.editors.sidebar.applyChangesAriaLabel": "ビジュアライゼーションを変更と共に更新します", "common.ui.vis.editors.sidebar.applyChangesTooltip": "変更を適用", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3b6c1221ac341..86f107c1c8951 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -580,7 +580,6 @@ "common.ui.vis.editors.aggGroups.bucketsText": "存储桶", "common.ui.vis.editors.aggGroups.metricsText": "指标", "common.ui.vis.editors.aggParams.errors.aggWrongRunOrderErrorMessage": "“{schema}” 聚合必须在所有其他存储桶之前运行！", - "common.ui.vis.editors.aggParams.errors.schemaIsDeprecatedErrorMessage": "‘’{schema}”已弃用。", "common.ui.vis.editors.resizeAriaLabels": "按向左/向右键以调整编辑器的大小", "common.ui.vis.editors.sidebar.applyChangesAriaLabel": "使用您的更改更新可视化", "common.ui.vis.editors.sidebar.applyChangesTooltip": "应用更改",