From b50c90e7cd8cb3fa5ca14b06769859b623fc8c5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Wed, 19 Aug 2020 18:07:01 +0200 Subject: [PATCH] [7.x] [Index template] Add filters to simulate preview (#74497) (#75432) Co-authored-by: Elastic Machine Co-authored-by: Elastic Machine --- .../component_templates.scss | 1 + .../component_templates_selector.scss | 41 +++++------ .../component_templates_selector.tsx | 19 +++-- .../index_templates/shared_imports.ts | 13 ++++ .../simulate_template/index.ts | 2 +- .../simulate_template/simulate_template.tsx | 63 ++++++++++++++--- .../simulate_template_flyout.tsx | 70 ++++++++++++++++--- .../template_form/steps/step_components.tsx | 2 +- .../template_form/steps/step_review.tsx | 2 +- .../template_form/template_form.tsx | 14 +++- .../template_details/tabs/tab_preview.tsx | 2 +- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 13 files changed, 177 insertions(+), 54 deletions(-) create mode 100644 x-pack/plugins/index_management/public/application/components/index_templates/shared_imports.ts diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss index 026e63b2b4caab..8e196936e40732 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss @@ -8,6 +8,7 @@ $heightHeader: $euiSizeL * 2; .componentTemplates { border: $euiBorderThin; + border-radius: $euiBorderRadius; border-top: none; height: 100%; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss index 041fc1c8bf9a41..aeccc6a513fe29 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss @@ -7,30 +7,31 @@ &__selection { border: $euiBorderThin; + border-radius: $euiBorderRadius; - padding: 0 $euiSize $euiSize; - color: $euiColorDarkShade; + padding: 0 $euiSize $euiSize; + color: $euiColorDarkShade; - &--is-empty { - align-items: center; - justify-content: center; - } + &--is-empty { + align-items: center; + justify-content: center; + } - &__header { - background-color: $euiColorLightestShade; - border-bottom: $euiBorderThin; - color: $euiColorInk; - height: $euiSizeXXL; // [1] - line-height: $euiSizeXXL; // [1] - font-size: $euiSizeM; - margin-bottom: $euiSizeS; - margin-left: $euiSize * -1; - margin-right: $euiSize * -1; - padding-left: $euiSize; + &__header { + background-color: $euiColorLightestShade; + border-bottom: $euiBorderThin; + color: $euiColorInk; + height: $euiSizeXXL; // [1] + line-height: $euiSizeXXL; // [1] + font-size: $euiSizeM; + margin-bottom: $euiSizeS; + margin-left: $euiSize * -1; + margin-right: $euiSize * -1; + padding-left: $euiSize; - &__count { - font-weight: 600; - } + &__count { + font-weight: 600; + } } &__content { diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx index ccdfaad78fb6bc..ff871b8b792479 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx @@ -200,12 +200,19 @@ export const ComponentTemplatesSelector = ({ ) : ( -
- -
+ +

+ +
+ +

+ )} diff --git a/x-pack/plugins/index_management/public/application/components/index_templates/shared_imports.ts b/x-pack/plugins/index_management/public/application/components/index_templates/shared_imports.ts new file mode 100644 index 00000000000000..cc43b8b48b0c76 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/index_templates/shared_imports.ts @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +export { + useForm, + Form, + getUseField, + FormDataProvider, +} from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib'; + +export { CheckBoxField } from '../../../../../../../src/plugins/es_ui_shared/static/forms/components'; diff --git a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/index.ts b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/index.ts index fb10096ed81d40..de231baf11c502 100644 --- a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/index.ts +++ b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/index.ts @@ -10,4 +10,4 @@ export { Props as SimulateTemplateProps, } from './simulate_template_flyout'; -export { SimulateTemplate } from './simulate_template'; +export { SimulateTemplate, Filters as SimulateTemplateFilters } from './simulate_template'; diff --git a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template.tsx b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template.tsx index b362b37d54c49c..c2ba4eea56ad81 100644 --- a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template.tsx +++ b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template.tsx @@ -5,7 +5,8 @@ */ import React, { useState, useCallback, useEffect } from 'react'; import uuid from 'uuid'; -import { EuiCodeBlock } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiCodeBlock, EuiCallOut } from '@elastic/eui'; import { serializers } from '../../../../shared_imports'; import { TemplateDeserialized } from '../../../../../common'; @@ -14,12 +15,18 @@ import { simulateIndexTemplate } from '../../../services'; const { stripEmptyFields } = serializers; +export interface Filters { + mappings: boolean; + settings: boolean; + aliases: boolean; +} + interface Props { template: { [key: string]: any }; - minHeightCodeBlock?: string; + filters?: Filters; } -export const SimulateTemplate = React.memo(({ template, minHeightCodeBlock }: Props) => { +export const SimulateTemplate = React.memo(({ template, filters }: Props) => { const [templatePreview, setTemplatePreview] = useState('{}'); const updatePreview = useCallback(async () => { @@ -34,26 +41,60 @@ export const SimulateTemplate = React.memo(({ template, minHeightCodeBlock }: Pr indexTemplate.index_patterns = [uuid.v4()]; const { data, error } = await simulateIndexTemplate(indexTemplate); + let filteredTemplate = data; if (data) { // "Overlapping" info is only useful when simulating against an index // which we don't do here. delete data.overlapping; + + if (data.template && data.template.mappings === undefined) { + // Adding some extra logic to return an empty object for "mappings" as ES does not + // return one in that case (empty objects _are_ returned for "settings" and "aliases") + // Issue: https://github.com/elastic/elasticsearch/issues/60968 + data.template.mappings = {}; + } + + if (filters) { + filteredTemplate = Object.entries(filters).reduce( + (acc, [key, value]) => { + if (!value) { + delete acc[key]; + } + return acc; + }, + { ...data.template } as any + ); + } } - setTemplatePreview(JSON.stringify(data ?? error, null, 2)); - }, [template]); + setTemplatePreview(JSON.stringify(filteredTemplate ?? error, null, 2)); + }, [template, filters]); useEffect(() => { updatePreview(); }, [updatePreview]); - return templatePreview === '{}' ? null : ( - + const isEmpty = templatePreview === '{}'; + const hasFilters = Boolean(filters); + + if (isEmpty && hasFilters) { + return ( + + } + iconType="pin" + size="s" + /> + ); + } + + return isEmpty ? null : ( + {templatePreview} ); diff --git a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template_flyout.tsx b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template_flyout.tsx index 63bfe785460417..f818f49d8aa592 100644 --- a/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template_flyout.tsx +++ b/x-pack/plugins/index_management/public/application/components/index_templates/simulate_template/simulate_template_flyout.tsx @@ -5,6 +5,7 @@ */ import React, { useState, useCallback, useEffect, useRef } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { EuiFlyoutHeader, EuiTitle, @@ -19,11 +20,16 @@ import { EuiSpacer, } from '@elastic/eui'; -import { SimulateTemplate } from './simulate_template'; +import { useForm, Form, getUseField, CheckBoxField, FormDataProvider } from '../shared_imports'; +import { SimulateTemplate, Filters } from './simulate_template'; + +const CheckBox = getUseField({ component: CheckBoxField }); export interface Props { onClose(): void; getTemplate: () => { [key: string]: any }; + filters: Filters; + onFiltersChange: (filters: Filters) => void; } export const defaultFlyoutProps = { @@ -31,16 +37,39 @@ export const defaultFlyoutProps = { 'aria-labelledby': 'simulateTemplateFlyoutTitle', }; -export const SimulateTemplateFlyoutContent = ({ onClose, getTemplate }: Props) => { +const i18nTexts = { + filters: { + label: i18n.translate('xpack.idxMgmt.simulateTemplate.filters.label', { + defaultMessage: 'Include:', + }), + mappings: i18n.translate('xpack.idxMgmt.simulateTemplate.filters.mappings', { + defaultMessage: 'Mappings', + }), + indexSettings: i18n.translate('xpack.idxMgmt.simulateTemplate.filters.indexSettings', { + defaultMessage: 'Index settings', + }), + aliases: i18n.translate('xpack.idxMgmt.simulateTemplate.filters.aliases', { + defaultMessage: 'Aliases', + }), + }, +}; + +export const SimulateTemplateFlyoutContent = ({ + onClose, + getTemplate, + filters, + onFiltersChange, +}: Props) => { const isMounted = useRef(false); - const [heightCodeBlock, setHeightCodeBlock] = useState(0); const [template, setTemplate] = useState<{ [key: string]: any }>({}); + const { form } = useForm({ defaultValue: filters }); + const { subscribe } = form; useEffect(() => { - setHeightCodeBlock( - document.getElementsByClassName('euiFlyoutBody__overflow')[0].clientHeight - 96 - ); - }, []); + subscribe((formState) => { + onFiltersChange(formState.data.format()); + }); + }, [subscribe, onFiltersChange]); const updatePreview = useCallback(async () => { const indexTemplate = await getTemplate(); @@ -71,8 +100,8 @@ export const SimulateTemplateFlyoutContent = ({ onClose, getTemplate }: Props) =

@@ -80,7 +109,28 @@ export const SimulateTemplateFlyoutContent = ({ onClose, getTemplate }: Props) = - +
+ + {i18nTexts.filters.label} + + + + + + + + + + + + + + + {(formData) => { + return ; + }} + +
diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx index ae831f4acf7eef..a4f64f7881a284 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx @@ -34,7 +34,7 @@ const i18nTexts = { description: ( ), }; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx index 7a4b8fe657b629..a81a3a1a70bebe 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx @@ -67,7 +67,7 @@ const PreviewTab = ({ template }: { template: { [key: string]: any } }) => {

diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx index fb0ba0b68fa6cb..151b31b5272285 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx @@ -3,7 +3,7 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useCallback } from 'react'; +import React, { useState, useCallback, useRef } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiSpacer, EuiButton } from '@elastic/eui'; @@ -15,6 +15,7 @@ import { SimulateTemplateFlyoutContent, SimulateTemplateProps, simulateTemplateFlyoutProps, + SimulateTemplateFilters, } from '../index_templates'; import { StepLogisticsContainer, StepComponentContainer, StepReviewContainer } from './steps'; import { @@ -98,6 +99,11 @@ export const TemplateForm = ({ }: Props) => { const [wizardContent, setWizardContent] = useState | null>(null); const { addContent: addContentToGlobalFlyout, closeFlyout } = useGlobalFlyout(); + const simulateTemplateFilters = useRef({ + mappings: true, + settings: true, + aliases: true, + }); const indexTemplate = defaultValue ?? { name: '', @@ -234,6 +240,10 @@ export const TemplateForm = ({ return template; }, [buildTemplateObject, indexTemplate, wizardContent]); + const onSimulateTemplateFiltersChange = useCallback((filters: SimulateTemplateFilters) => { + simulateTemplateFilters.current = filters; + }, []); + const showPreviewFlyout = () => { addContentToGlobalFlyout({ id: 'simulateTemplate', @@ -241,6 +251,8 @@ export const TemplateForm = ({ props: { getTemplate: getSimulateTemplate, onClose: closeFlyout, + filters: simulateTemplateFilters.current, + onFiltersChange: onSimulateTemplateFiltersChange, }, flyoutProps: simulateTemplateFlyoutProps, }); diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_preview.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_preview.tsx index ec52bcbab3b0bc..49b78f3f56c253 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_preview.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_preview.tsx @@ -21,7 +21,7 @@ export const TabPreview = ({ templateDetails }: Props) => {

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index f6d6703e121024..c6376becb4a561 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7283,7 +7283,6 @@ "xpack.idxMgmt.componentTemplatesSelector.filters.mappingsLabel": "マッピング", "xpack.idxMgmt.componentTemplatesSelector.loadingComponentsDescription": "コンポーネントテンプレートを読み込んでいます...", "xpack.idxMgmt.componentTemplatesSelector.loadingComponentsErrorMessage": "コンポーネントの読み込みエラー", - "xpack.idxMgmt.componentTemplatesSelector.noComponentSelectedLabel": "コンポーネントテンプレートが選択されていません。", "xpack.idxMgmt.componentTemplatesSelector.removeItemIconLabel": "削除", "xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder": "コンポーネントテンプレートを検索", "xpack.idxMgmt.componentTemplatesSelector.searchResult.emptyPrompt.clearSearchButtonLabel": "検索のクリア", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index aaec6bf4fb306d..86e9303b3fab97 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7285,7 +7285,6 @@ "xpack.idxMgmt.componentTemplatesSelector.filters.mappingsLabel": "映射", "xpack.idxMgmt.componentTemplatesSelector.loadingComponentsDescription": "正在加载组件模板……", "xpack.idxMgmt.componentTemplatesSelector.loadingComponentsErrorMessage": "加载组件时出错", - "xpack.idxMgmt.componentTemplatesSelector.noComponentSelectedLabel": "未选择任何组件模板。", "xpack.idxMgmt.componentTemplatesSelector.removeItemIconLabel": "移除", "xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder": "搜索组件模板", "xpack.idxMgmt.componentTemplatesSelector.searchResult.emptyPrompt.clearSearchButtonLabel": "清除搜索",