From bfce6e89731ada634198d4dec38f89f6a21439c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Loix?= Date: Fri, 3 Jul 2020 15:08:38 +0200 Subject: [PATCH] [7.x] [Composable template] Create / Edit wizard (#70220) (#70698) --- .../forms/form_wizard/form_wizard_context.tsx | 2 +- .../multi_content/multi_content_context.tsx | 7 +- .../forms/multi_content/use_multi_content.ts | 4 + src/plugins/es_ui_shared/public/index.ts | 7 +- .../forms/helpers/field_validators/is_json.ts | 9 +- .../home/index_templates_tab.helpers.ts | 54 ++-- .../home/index_templates_tab.test.ts | 30 +- .../template_create.test.tsx | 3 +- .../common/constants/index.ts | 1 - .../common/constants/index_templates.ts | 12 - .../plugins/index_management/common/index.ts | 2 +- .../index_management/common/lib/index.ts | 4 +- .../common/lib/template_serialization.ts | 5 +- .../common/types/templates.ts | 2 + .../component_templates.scss | 34 +++ .../component_templates.tsx | 169 +++++++++++ .../component_templates_list.tsx | 28 ++ .../component_templates_list_item.scss | 31 +++ .../component_templates_list_item.tsx | 103 +++++++ .../component_templates_selection.tsx | 64 +++++ .../component_templates_selector.scss | 36 +++ .../component_templates_selector.tsx | 263 ++++++++++++++++++ .../components/create_button_popover.tsx | 85 ++++++ .../components/filter_list_button.tsx | 91 ++++++ .../components/index.ts | 8 + .../component_template_selector/index.ts | 7 + .../component_templates_context.tsx | 2 + .../components/component_templates/index.ts | 2 + .../components/component_templates/lib/api.ts | 4 +- .../component_templates/lib/request.ts | 8 +- .../component_templates/shared_imports.ts | 1 + .../components/shared/components/index.ts | 2 + .../components/template_content_indicator.tsx | 0 .../components/wizard_steps/step_aliases.tsx | 4 +- .../wizard_steps/step_aliases_container.tsx | 2 +- .../components/wizard_steps/step_mappings.tsx | 6 +- .../wizard_steps/step_mappings_container.tsx | 4 +- .../components/wizard_steps/step_settings.tsx | 4 +- .../wizard_steps/step_settings_container.tsx | 4 +- .../application/components/shared/index.ts | 1 + .../components/template_form/steps/index.ts | 1 + .../template_form/steps/step_components.tsx | 112 ++++++++ .../steps/step_components_container.tsx | 25 ++ .../template_form/steps/step_logistics.tsx | 187 ++++++++++--- .../steps/step_logistics_container.tsx | 12 +- .../template_form/steps/step_review.tsx | 103 ++++++- .../template_form/template_form.tsx | 53 ++-- .../template_form/template_form_schemas.tsx | 47 ++++ .../home/template_list/components/index.ts | 1 - .../template_details/template_details.tsx | 4 +- .../template_table/template_table.tsx | 11 +- .../home/template_list/template_list.tsx | 7 +- .../template_table/template_table.tsx | 57 +++- .../template_create/template_create.tsx | 20 +- .../public/application/services/routing.ts | 12 +- .../index_management/public/shared_imports.ts | 6 +- .../server/client/elasticsearch.ts | 28 ++ .../server/routes/api/templates/lib.ts | 68 +++++ .../api/templates/register_create_route.ts | 29 +- .../api/templates/register_get_routes.ts | 64 +++-- .../api/templates/register_update_route.ts | 28 +- .../routes/api/templates/validate_schemas.ts | 3 + .../index_management/templates.helpers.js | 88 +++--- .../management/index_management/templates.js | 154 ++++++++-- x-pack/test_utils/router_helpers.tsx | 7 +- x-pack/test_utils/testbed/types.ts | 2 +- 66 files changed, 1901 insertions(+), 333 deletions(-) delete mode 100644 x-pack/plugins/index_management/common/constants/index_templates.ts create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts create mode 100644 x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts rename x-pack/plugins/index_management/public/application/{sections/home/template_list => components/shared}/components/template_content_indicator.tsx (100%) create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx create mode 100644 x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx create mode 100644 x-pack/plugins/index_management/server/routes/api/templates/lib.ts diff --git a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx index 5667220881df2..39b91a2e20b53 100644 --- a/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx +++ b/src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx @@ -23,7 +23,7 @@ import { WithMultiContent, useMultiContentContext, HookProps } from '../multi_co export interface Props { onSave: (data: T) => void | Promise; - children: JSX.Element | JSX.Element[]; + children: JSX.Element | Array; isEditing?: boolean; defaultActiveStep?: number; defaultValue?: HookProps['defaultValue']; diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx index 5fbe3d2bbbdd4..210b0cedccd06 100644 --- a/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx +++ b/src/plugins/es_ui_shared/public/forms/multi_content/multi_content_context.tsx @@ -54,7 +54,7 @@ export function useMultiContentContext(contentId: keyof T) { +export function useContent(contentId: K) { const { updateContentAt, saveSnapshotAndRemoveContent, getData } = useMultiContentContext(); const updateContent = useCallback( @@ -71,8 +71,11 @@ export function useContent(contentId: }; }, [contentId, saveSnapshotAndRemoveContent]); + const data = getData(); + const defaultValue = data[contentId]; + return { - defaultValue: getData()[contentId]!, + defaultValue, updateContent, getData, }; diff --git a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts index 0a2c7bb651959..adc68a39a4a5b 100644 --- a/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts +++ b/src/plugins/es_ui_shared/public/forms/multi_content/use_multi_content.ts @@ -150,6 +150,10 @@ export function useMultiContent({ * Validate the multi-content active content(s) in the DOM */ const validate = useCallback(async () => { + if (Object.keys(contents.current).length === 0) { + return Boolean(validation.isValid); + } + const updatedValidation = {} as { [key in keyof T]?: boolean | undefined }; for (const [id, _content] of Object.entries(contents.current)) { diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts index 28baa3d8372f0..67c1ee3c7d677 100644 --- a/src/plugins/es_ui_shared/public/index.ts +++ b/src/plugins/es_ui_shared/public/index.ts @@ -22,6 +22,7 @@ * In the future, each top level folder should be exported like that to avoid naming collision */ import * as Forms from './forms'; +import * as Monaco from './monaco'; export { JsonEditor, OnJsonEditorUpdateHandler } from './components/json_editor'; @@ -53,10 +54,6 @@ export { expandLiteralStrings, } from './console_lang'; -import * as Monaco from './monaco'; - -export { Monaco }; - export { AuthorizationContext, AuthorizationProvider, @@ -69,7 +66,7 @@ export { useAuthorizationContext, } from './authorization'; -export { Forms }; +export { Monaco, Forms }; /** dummy plugin, we just want esUiShared to have its own bundle */ export function plugin() { diff --git a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts index dc8321aa07004..019a0e8053d0d 100644 --- a/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts +++ b/src/plugins/es_ui_shared/static/forms/helpers/field_validators/is_json.ts @@ -21,12 +21,13 @@ import { ValidationFunc } from '../../hook_form_lib'; import { isJSON } from '../../../validators/string'; import { ERROR_CODE } from './types'; -export const isJsonField = (message: string) => ( - ...args: Parameters -): ReturnType> => { +export const isJsonField = ( + message: string, + { allowEmptyString = false }: { allowEmptyString?: boolean } = {} +) => (...args: Parameters): ReturnType> => { const [{ value }] = args; - if (typeof value !== 'string') { + if (typeof value !== 'string' || (allowEmptyString && value.trim() === '')) { return; } diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts index 98bd3077670a7..5eb4eaf6e2ca1 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts +++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.helpers.ts @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ReactWrapper } from 'enzyme'; import { act } from 'react-dom/test-utils'; import { @@ -13,44 +12,21 @@ import { TestBedConfig, findTestSubject, } from '../../../../../test_utils'; -// NOTE: We have to use the Home component instead of the TemplateList component because we depend -// upon react router to provide the name of the template to load in the detail panel. -import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths -import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths +import { TemplateList } from '../../../public/application/sections/home/template_list'; // eslint-disable-line @kbn/eslint/no-restricted-paths import { TemplateDeserialized } from '../../../common'; -import { WithAppDependencies, services, TestSubjects } from '../helpers'; +import { WithAppDependencies, TestSubjects } from '../helpers'; const testBedConfig: TestBedConfig = { - store: () => indexManagementStore(services as any), memoryRouter: { - initialEntries: [`/indices`], - componentRoutePath: `/:section(indices|templates)`, + initialEntries: [`/templates`], + componentRoutePath: `/templates/:templateName?`, }, doMountAsync: true, }; -const initTestBed = registerTestBed(WithAppDependencies(IndexManagementHome), testBedConfig); - -export interface IndexTemplatesTabTestBed extends TestBed { - findAction: (action: 'edit' | 'clone' | 'delete') => ReactWrapper; - actions: { - goToTemplatesList: () => void; - selectDetailsTab: (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => void; - clickReloadButton: () => void; - clickTemplateAction: ( - name: TemplateDeserialized['name'], - action: 'edit' | 'clone' | 'delete' - ) => void; - clickTemplateAt: (index: number) => void; - clickCloseDetailsButton: () => void; - clickActionMenu: (name: TemplateDeserialized['name']) => void; - toggleViewItem: (view: 'composable' | 'system') => void; - }; -} - -export const setup = async (): Promise => { - const testBed = await initTestBed(); +const initTestBed = registerTestBed(WithAppDependencies(TemplateList), testBedConfig); +const createActions = (testBed: TestBed) => { /** * Additional helpers */ @@ -64,11 +40,6 @@ export const setup = async (): Promise => { /** * User Actions */ - - const goToTemplatesList = () => { - testBed.find('templatesTab').simulate('click'); - }; - const selectDetailsTab = (tab: 'summary' | 'settings' | 'mappings' | 'aliases') => { const tabs = ['summary', 'settings', 'mappings', 'aliases']; @@ -136,10 +107,8 @@ export const setup = async (): Promise => { }; return { - ...testBed, findAction, actions: { - goToTemplatesList, selectDetailsTab, clickReloadButton, clickTemplateAction, @@ -150,3 +119,14 @@ export const setup = async (): Promise => { }, }; }; + +export const setup = async (): Promise => { + const testBed = await initTestBed(); + + return { + ...testBed, + ...createActions(testBed), + }; +}; + +export type IndexTemplatesTabTestBed = TestBed & ReturnType; diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts index 2ff3743cd866c..fb3e16e5345cb 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts +++ b/x-pack/plugins/index_management/__jest__/client_integration/home/index_templates_tab.test.ts @@ -30,28 +30,15 @@ describe('Index Templates tab', () => { server.restore(); }); - beforeEach(async () => { - httpRequestsMockHelpers.setLoadIndicesResponse([]); - - await act(async () => { - testBed = await setup(); - }); - }); - describe('when there are no index templates', () => { - beforeEach(async () => { - const { actions, component } = testBed; - + test('should display an empty prompt', async () => { httpRequestsMockHelpers.setLoadTemplatesResponse({ templates: [], legacyTemplates: [] }); await act(async () => { - actions.goToTemplatesList(); + testBed = await setup(); }); + const { exists, component } = testBed; component.update(); - }); - - test('should display an empty prompt', async () => { - const { exists } = testBed; expect(exists('sectionLoading')).toBe(false); expect(exists('emptyPrompt')).toBe(true); @@ -119,14 +106,12 @@ describe('Index Templates tab', () => { const legacyTemplates = [template4, template5, template6]; beforeEach(async () => { - const { actions, component } = testBed; - httpRequestsMockHelpers.setLoadTemplatesResponse({ templates, legacyTemplates }); await act(async () => { - actions.goToTemplatesList(); + testBed = await setup(); }); - component.update(); + testBed.component.update(); }); test('should list them in the table', async () => { @@ -151,6 +136,7 @@ describe('Index Templates tab', () => { composedOfString, priorityFormatted, 'M S A', // Mappings Settings Aliases badges + '', // Column of actions ]); }); @@ -192,8 +178,10 @@ describe('Index Templates tab', () => { ); }); - test('should have a button to create a new template', () => { + test('should have a button to create a template', () => { const { exists } = testBed; + // Both composable and legacy templates + expect(exists('createTemplateButton')).toBe(true); expect(exists('createLegacyTemplateButton')).toBe(true); }); diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx index 07a27e2414aed..69d7a13edfcfb 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx +++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx @@ -7,7 +7,6 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../common'; import { setupEnvironment, nextTick } from '../helpers'; import { @@ -369,7 +368,7 @@ describe.skip('', () => { aliases: ALIASES, }, _kbnMeta: { - isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT, + isLegacy: false, isManaged: false, }, }; diff --git a/x-pack/plugins/index_management/common/constants/index.ts b/x-pack/plugins/index_management/common/constants/index.ts index 526b9fede2a67..d1700f0e611c0 100644 --- a/x-pack/plugins/index_management/common/constants/index.ts +++ b/x-pack/plugins/index_management/common/constants/index.ts @@ -9,7 +9,6 @@ export { BASE_PATH } from './base_path'; export { API_BASE_PATH } from './api_base_path'; export { INVALID_INDEX_PATTERN_CHARS, INVALID_TEMPLATE_NAME_CHARS } from './invalid_characters'; export * from './index_statuses'; -export { CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from './index_templates'; export { UIM_APP_NAME, diff --git a/x-pack/plugins/index_management/common/constants/index_templates.ts b/x-pack/plugins/index_management/common/constants/index_templates.ts deleted file mode 100644 index 7696b3832c51e..0000000000000 --- a/x-pack/plugins/index_management/common/constants/index_templates.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* - * 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. - */ - -/** - * Up until the end of the 8.x release cycle we need to support both - * legacy and composable index template formats. This constant keeps track of whether - * we create legacy index template format by default in the UI. - */ -export const CREATE_LEGACY_TEMPLATE_BY_DEFAULT = true; diff --git a/x-pack/plugins/index_management/common/index.ts b/x-pack/plugins/index_management/common/index.ts index 4ad428744deab..119d4e0c54edd 100644 --- a/x-pack/plugins/index_management/common/index.ts +++ b/x-pack/plugins/index_management/common/index.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export { PLUGIN, API_BASE_PATH, CREATE_LEGACY_TEMPLATE_BY_DEFAULT, BASE_PATH } from './constants'; +export { PLUGIN, API_BASE_PATH, BASE_PATH } from './constants'; export { getTemplateParameter } from './lib'; diff --git a/x-pack/plugins/index_management/common/lib/index.ts b/x-pack/plugins/index_management/common/lib/index.ts index 4e76a40ced524..6b1005b4faa05 100644 --- a/x-pack/plugins/index_management/common/lib/index.ts +++ b/x-pack/plugins/index_management/common/lib/index.ts @@ -7,9 +7,11 @@ export { deserializeDataStream, deserializeDataStreamList } from './data_stream_serialization'; export { - deserializeLegacyTemplateList, + deserializeTemplate, deserializeTemplateList, deserializeLegacyTemplate, + deserializeLegacyTemplateList, + serializeTemplate, serializeLegacyTemplate, } from './template_serialization'; diff --git a/x-pack/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts index 249881f668d9f..608a8b8aca294 100644 --- a/x-pack/plugins/index_management/common/lib/template_serialization.ts +++ b/x-pack/plugins/index_management/common/lib/template_serialization.ts @@ -13,7 +13,7 @@ import { const hasEntries = (data: object = {}) => Object.entries(data).length > 0; export function serializeTemplate(templateDeserialized: TemplateDeserialized): TemplateSerialized { - const { version, priority, indexPatterns, template, composedOf } = templateDeserialized; + const { version, priority, indexPatterns, template, composedOf, _meta } = templateDeserialized; return { version, @@ -21,6 +21,7 @@ export function serializeTemplate(templateDeserialized: TemplateDeserialized): T template, index_patterns: indexPatterns, composed_of: composedOf, + _meta, }; } @@ -34,6 +35,7 @@ export function deserializeTemplate( index_patterns: indexPatterns, template = {}, priority, + _meta, composed_of: composedOf, } = templateEs; const { settings } = template; @@ -46,6 +48,7 @@ export function deserializeTemplate( template, ilmPolicy: settings?.index?.lifecycle, composedOf, + _meta, _kbnMeta: { isManaged: Boolean(managedTemplatePrefix && name.startsWith(managedTemplatePrefix)), }, diff --git a/x-pack/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts index 006a2d9dea8f2..14318b5fa2a8d 100644 --- a/x-pack/plugins/index_management/common/types/templates.ts +++ b/x-pack/plugins/index_management/common/types/templates.ts @@ -21,6 +21,7 @@ export interface TemplateSerialized { composed_of?: string[]; version?: number; priority?: number; + _meta?: { [key: string]: any }; } /** @@ -43,6 +44,7 @@ export interface TemplateDeserialized { ilmPolicy?: { name: string; }; + _meta?: { [key: string]: any }; _kbnMeta: { isManaged: boolean; isLegacy?: boolean; 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 new file mode 100644 index 0000000000000..51e8a829e81b1 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.scss @@ -0,0 +1,34 @@ + + +/** + * [1] Will center vertically the empty search result + */ + +$heightHeader: $euiSizeL * 2; + +.componentTemplates { + @include euiBottomShadowFlat; + height: 100%; + + &__header { + height: $heightHeader; + + .euiFormControlLayout { + max-width: initial; + } + } + + &__searchBox { + border-bottom: $euiBorderThin; + box-shadow: none; + max-width: initial; + } + + &__listWrapper { + height: calc(100% - #{$heightHeader}); + + &--is-empty { + display: flex; // [1] + } + } +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx new file mode 100644 index 0000000000000..64c7cd400ba0d --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates.tsx @@ -0,0 +1,169 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import classNames from 'classnames'; +import React, { useState, useMemo } from 'react'; +import { i18n } from '@kbn/i18n'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, EuiEmptyPrompt, EuiButton } from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { FilterListButton } from './components'; +import { ComponentTemplatesList } from './component_templates_list'; +import { Props as ComponentTemplatesListItemProps } from './component_templates_list_item'; + +import './component_templates.scss'; + +interface Props { + isLoading: boolean; + components: ComponentTemplateListItem[]; + listItemProps: Omit; +} + +interface Filters { + [key: string]: { name: string; checked: 'on' | 'off' }; +} + +function fuzzyMatch(searchValue: string, text: string) { + const pattern = `.*${searchValue.split('').join('.*')}.*`; + const regex = new RegExp(pattern); + return regex.test(text); +} + +const i18nTexts = { + filters: { + settings: i18n.translate( + 'xpack.idxMgmt.componentTemplatesSelector.filters.indexSettingsLabel', + { defaultMessage: 'Index settings' } + ), + mappings: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.mappingsLabel', { + defaultMessage: 'Mappings', + }), + aliases: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.filters.aliasesLabel', { + defaultMessage: 'Aliases', + }), + }, + searchBoxPlaceholder: i18n.translate( + 'xpack.idxMgmt.componentTemplatesSelector.searchBox.placeholder', + { + defaultMessage: 'Search components', + } + ), +}; + +const getInitialFilters = (): Filters => ({ + settings: { + name: i18nTexts.filters.settings, + checked: 'off', + }, + mappings: { + name: i18nTexts.filters.mappings, + checked: 'off', + }, + aliases: { + name: i18nTexts.filters.aliases, + checked: 'off', + }, +}); + +export const ComponentTemplates = ({ isLoading, components, listItemProps }: Props) => { + const [searchValue, setSearchValue] = useState(''); + + const [filters, setFilters] = useState(getInitialFilters); + + const filteredComponents = useMemo(() => { + if (isLoading) { + return []; + } + + return components.filter((component) => { + if (filters.settings.checked === 'on' && !component.hasSettings) { + return false; + } + if (filters.mappings.checked === 'on' && !component.hasMappings) { + return false; + } + if (filters.aliases.checked === 'on' && !component.hasAliases) { + return false; + } + + if (searchValue.trim() === '') { + return true; + } + + const match = fuzzyMatch(searchValue, component.name); + return match; + }); + }, [isLoading, components, searchValue, filters]); + + const isSearchResultEmpty = filteredComponents.length === 0 && components.length > 0; + + if (isLoading) { + return null; + } + + const clearSearch = () => { + setSearchValue(''); + setFilters(getInitialFilters()); + }; + + const renderEmptyResult = () => { + return ( + + + + } + actions={ + + + + } + /> + ); + }; + + return ( +
+
+ + + { + setSearchValue(e.target.value); + }} + aria-label={i18nTexts.searchBoxPlaceholder} + className="componentTemplates__searchBox" + /> + + + + + +
+
+ {isSearchResultEmpty ? ( + renderEmptyResult() + ) : ( + + )} +
+
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx new file mode 100644 index 0000000000000..0c64c38c8963f --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list.tsx @@ -0,0 +1,28 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { + ComponentTemplatesListItem, + Props as ComponentTemplatesListItemProps, +} from './component_templates_list_item'; + +interface Props { + components: ComponentTemplateListItem[]; + listItemProps: Omit; +} + +export const ComponentTemplatesList = ({ components, listItemProps }: Props) => { + return ( + <> + {components.map((component) => ( + + ))} + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss new file mode 100644 index 0000000000000..b454d8697c5fc --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.scss @@ -0,0 +1,31 @@ +.componentTemplatesListItem { + background-color: white; + padding: $euiSizeM; + border-bottom: $euiBorderThin; + position: relative; + height: $euiSizeL * 2; + + &--selected { + &::before { + content: ''; + background-color: rgba(255, 255, 255, 0.7); + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + } + } + + &__contentIndicator { + flex-direction: row; + } + + &__checkIcon { + position: absolute; + right: $euiSize; + top: $euiSize; + z-index: 2; + } +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx new file mode 100644 index 0000000000000..ad75c8dcbcc54 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx @@ -0,0 +1,103 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import classNames from 'classnames'; +import React from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiButtonIcon, + EuiLink, + EuiIcon, + EuiToolTip, +} from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { TemplateContentIndicator } from '../../shared'; + +import './component_templates_list_item.scss'; + +interface Action { + label: string; + icon: string; + handler: (component: ComponentTemplateListItem) => void; +} +export interface Props { + component: ComponentTemplateListItem; + isSelected?: boolean | ((component: ComponentTemplateListItem) => boolean); + onViewDetail: (component: ComponentTemplateListItem) => void; + actions?: Action[]; + dragHandleProps?: { [key: string]: any }; +} + +export const ComponentTemplatesListItem = ({ + component, + onViewDetail, + actions, + isSelected = false, + dragHandleProps, +}: Props) => { + const hasActions = actions && actions.length > 0; + const isSelectedValue = typeof isSelected === 'function' ? isSelected(component) : isSelected; + const isDraggable = Boolean(dragHandleProps); + + return ( +
+ + + + {isDraggable && ( + +
+ +
+ + )} + + {/* {component.name} */} + onViewDetail(component)}>{component.name} + + + + + + + + {/* Actions */} + {hasActions && !isSelectedValue && ( + + + {actions!.map((action, i) => ( + + + action.handler(component)} + data-test-subj="addPropertyButton" + aria-label={action.label} + /> + + + ))} + + + )} + + + {/* Check icon when selected */} + {isSelectedValue && ( + + )} +
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx new file mode 100644 index 0000000000000..0a305eec19180 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx @@ -0,0 +1,64 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { + ComponentTemplatesListItem, + Props as ComponentTemplatesListItemProps, +} from './component_templates_list_item'; + +interface DraggableLocation { + droppableId: string; + index: number; +} + +interface Props { + components: ComponentTemplateListItem[]; + onReorder: (components: ComponentTemplateListItem[]) => void; + listItemProps: Omit; +} + +export const ComponentTemplatesSelection = ({ components, onReorder, listItemProps }: Props) => { + const onDragEnd = ({ + source, + destination, + }: { + source?: DraggableLocation; + destination?: DraggableLocation; + }) => { + if (source && destination) { + const items = euiDragDropReorder(components, source.index, destination.index); + onReorder(items); + } + }; + + return ( + + + {components.map((component, idx) => ( + + {(provided) => ( + + )} + + ))} + + + ); +}; 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 new file mode 100644 index 0000000000000..6abbbe65790e7 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.scss @@ -0,0 +1,36 @@ +/* +[1] Height to align left and right column headers +*/ + +.componentTemplatesSelector { + height: 480px; + + &__selection { + @include euiBottomShadowFlat; + + padding: 0 $euiSize $euiSize; + color: $euiColorDarkShade; + + &--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; + + &__count { + font-weight: 600; + } + } + } +} 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 new file mode 100644 index 0000000000000..af48c3c79379a --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selector.tsx @@ -0,0 +1,263 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import classNames from 'classnames'; +import React, { useState, useEffect, useRef } from 'react'; +import { EuiFlexGroup, EuiFlexItem, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { SectionError, SectionLoading } from '../shared_imports'; +import { ComponentTemplateDetailsFlyout } from '../component_template_details'; +import { CreateButtonPopOver } from './components'; +import { ComponentTemplates } from './component_templates'; +import { ComponentTemplatesSelection } from './component_templates_selection'; +import { useApi } from '../component_templates_context'; + +import './component_templates_selector.scss'; + +interface Props { + onChange: (components: string[]) => void; + onComponentsLoaded: (components: ComponentTemplateListItem[]) => void; + defaultValue: string[]; + docUri: string; + emptyPrompt?: { + text?: string | JSX.Element; + showCreateButton?: boolean; + }; +} + +const i18nTexts = { + icons: { + view: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.viewItemIconLabel', { + defaultMessage: 'View', + }), + select: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.selectItemIconLabel', { + defaultMessage: 'Select', + }), + remove: i18n.translate('xpack.idxMgmt.componentTemplatesSelector.removeItemIconLabel', { + defaultMessage: 'Remove', + }), + }, +}; + +export const ComponentTemplatesSelector = ({ + onChange, + defaultValue, + onComponentsLoaded, + docUri, + emptyPrompt: { text, showCreateButton } = {}, +}: Props) => { + const { data: components, isLoading, error } = useApi().useLoadComponentTemplates(); + const [selectedComponent, setSelectedComponent] = useState(null); + const [componentsSelected, setComponentsSelected] = useState([]); + const isInitialized = useRef(false); + + const hasSelection = Object.keys(componentsSelected).length > 0; + const hasComponents = components && components.length > 0 ? true : false; + + useEffect(() => { + if (components) { + if ( + defaultValue.length > 0 && + componentsSelected.length === 0 && + isInitialized.current === false + ) { + // Once the components are loaded we check the ones selected + // from the defaultValue provided + const nextComponentsSelected = defaultValue + .map((name) => components.find((comp) => comp.name === name)) + .filter(Boolean) as ComponentTemplateListItem[]; + + setComponentsSelected(nextComponentsSelected); + onChange(nextComponentsSelected.map(({ name }) => name)); + isInitialized.current = true; + } else { + onChange(componentsSelected.map(({ name }) => name)); + } + } + }, [defaultValue, components, componentsSelected, onChange]); + + useEffect(() => { + if (!isLoading && !error) { + onComponentsLoaded(components ?? []); + } + }, [isLoading, error, components, onComponentsLoaded]); + + const onSelectionReorder = (reorderedComponents: ComponentTemplateListItem[]) => { + setComponentsSelected(reorderedComponents); + }; + + const renderLoading = () => ( + + + + ); + + const renderError = () => ( + + } + error={error!} + /> + ); + + const renderSelector = () => ( + + {/* Selection */} + + {hasSelection ? ( + <> +
+ + {componentsSelected.length} + + ), + }} + /> +
+
+ { + setSelectedComponent(component.name); + }, + actions: [ + { + label: i18nTexts.icons.remove, + icon: 'minusInCircle', + handler: (component: ComponentTemplateListItem) => { + setComponentsSelected((prev) => { + return prev.filter(({ name }) => component.name !== name); + }); + }, + }, + ], + }} + /> +
+ + ) : ( +
+ +
+ )} + + + {/* List of components */} + + { + setSelectedComponent(component.name); + }, + actions: [ + { + label: i18nTexts.icons.select, + icon: 'plusInCircle', + handler: (component: ComponentTemplateListItem) => { + setComponentsSelected((prev) => { + return [...prev, component]; + }); + }, + }, + ], + isSelected: (component: ComponentTemplateListItem) => { + return componentsSelected.find(({ name }) => component.name === name) !== undefined; + }, + }} + /> + + + ); + + const renderComponentDetails = () => { + if (!selectedComponent) { + return null; + } + + return ( + setSelectedComponent(null)} + componentTemplateName={selectedComponent} + /> + ); + }; + + if (isLoading) { + return renderLoading(); + } else if (error) { + return renderError(); + } else if (hasComponents) { + return ( + <> + {renderSelector()} + {renderComponentDetails()} + + ); + } + + // No components: render empty prompt + const emptyPromptBody = ( + +

+ {text ?? ( + + )} +
+ + + +

+ + ); + return ( + + + + } + body={emptyPromptBody} + actions={showCreateButton ? : undefined} + data-test-subj="emptyPrompt" + /> + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx new file mode 100644 index 0000000000000..941e8ec362de2 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/create_button_popover.tsx @@ -0,0 +1,85 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { useState } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; + +import { EuiPopover, EuiButton, EuiContextMenu } from '@elastic/eui'; + +interface Props { + anchorPosition?: 'upCenter' | 'downCenter'; +} + +export const CreateButtonPopOver = ({ anchorPosition = 'upCenter' }: Props) => { + const [isPopoverOpen, setIsPopOverOpen] = useState(false); + + return ( + setIsPopOverOpen((prev) => !prev)} + > + + + } + isOpen={isPopoverOpen} + closePopover={() => setIsPopOverOpen(false)} + panelPaddingSize="none" + withTitle + anchorPosition={anchorPosition} + repositionOnScroll + > + { + // console.log('Create component template...'); + }, + }, + { + name: i18n.translate( + 'xpack.idxMgmt.componentTemplatesFlyout.createComponentTemplateFromExistingButtonLabel', + { + defaultMessage: 'From existing index template', + } + ), + icon: 'symlink', + onClick: () => { + // console.log('Create component template from index template...'); + }, + }, + ], + }, + ]} + /> + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx new file mode 100644 index 0000000000000..7236a385a704e --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx @@ -0,0 +1,91 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { useState } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiFilterButton, EuiPopover, EuiFilterSelectItem } from '@elastic/eui'; + +interface Filter { + name: string; + checked: 'on' | 'off'; +} + +interface Props { + filters: Filters; + onChange(filters: Filters): void; +} + +export interface Filters { + [key: string]: Filter; +} + +export function FilterListButton({ onChange, filters }: Props) { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + + const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on'); + + const onButtonClick = () => { + setIsPopoverOpen(!isPopoverOpen); + }; + + const closePopover = () => { + setIsPopoverOpen(false); + }; + + const toggleFilter = (filter: string) => { + const previousValue = filters[filter].checked; + const nextValue = previousValue === 'on' ? 'off' : 'on'; + + onChange({ + ...filters, + [filter]: { + ...filters[filter], + checked: nextValue, + }, + }); + }; + + const button = ( + 0} + numActiveFilters={activeFilters.length} + data-test-subj="viewButton" + > + + + ); + + return ( + +
+ {Object.entries(filters).map(([filter, item], index) => ( + toggleFilter(filter)} + data-test-subj="filterItem" + > + {(item as Filter).name} + + ))} +
+ + ); +} diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts new file mode 100644 index 0000000000000..999b2e64cf133 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/components/index.ts @@ -0,0 +1,8 @@ +/* + * 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 * from './create_button_popover'; +export * from './filter_list_button'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts new file mode 100644 index 0000000000000..261a3d50d4626 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/index.ts @@ -0,0 +1,7 @@ +/* + * 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 { ComponentTemplatesSelector } from './component_templates_selector'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx index c78d24f126e29..bfea8d39e1203 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_templates_context.tsx @@ -61,3 +61,5 @@ export const useComponentTemplatesContext = () => { } return ctx; }; + +export const useApi = () => useComponentTemplatesContext().api; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts index 72e79a57ae413..52235502e33df 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/index.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/index.ts @@ -9,3 +9,5 @@ export { ComponentTemplatesProvider } from './component_templates_context'; export { ComponentTemplateList } from './component_template_list'; export { ComponentTemplateDetailsFlyout } from './component_template_details'; + +export * from './component_template_selector'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts index 4a8cf965adfb9..63fe127c6b2d7 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/api.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { ComponentTemplateListItem, ComponentTemplateDeserialized } from '../shared_imports'; +import { ComponentTemplateListItem, ComponentTemplateDeserialized, Error } from '../shared_imports'; import { UIM_COMPONENT_TEMPLATE_DELETE_MANY, UIM_COMPONENT_TEMPLATE_DELETE } from '../constants'; import { UseRequestHook, SendRequestHook } from './request'; @@ -15,7 +15,7 @@ export const getApi = ( trackMetric: (type: 'loaded' | 'click' | 'count', eventName: string) => void ) => { function useLoadComponentTemplates() { - return useRequest({ + return useRequest({ path: `${apiBasePath}/component_templates`, method: 'get', }); diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts index 97ffa4d875ecb..27ee2bb81caf1 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/lib/request.ts @@ -15,13 +15,15 @@ import { useRequest as _useRequest, } from '../shared_imports'; -export type UseRequestHook = (config: UseRequestConfig) => UseRequestResponse; +export type UseRequestHook = ( + config: UseRequestConfig +) => UseRequestResponse; export type SendRequestHook = (config: SendRequestConfig) => Promise; -export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => ( +export const getUseRequest = (httpClient: HttpSetup): UseRequestHook => ( config: UseRequestConfig ) => { - return _useRequest(httpClient, config); + return _useRequest(httpClient, config); }; export const getSendRequest = (httpClient: HttpSetup): SendRequestHook => ( diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts index 4e56f4a8c9818..bd19c2004894c 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/shared_imports.ts @@ -18,6 +18,7 @@ export { Error, useAuthorizationContext, NotAuthorizedSection, + Forms, } from '../../../../../../../src/plugins/es_ui_shared/public'; export { TabMappings, TabSettings, TabAliases } from '../shared'; diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts index b67a9c355e723..b0a76b828449c 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/index.ts +++ b/x-pack/plugins/index_management/public/application/components/shared/components/index.ts @@ -12,3 +12,5 @@ export { StepSettingsContainer, CommonWizardSteps, } from './wizard_steps'; + +export { TemplateContentIndicator } from './template_content_indicator'; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx similarity index 100% rename from x-pack/plugins/index_management/public/application/sections/home/template_list/components/template_content_indicator.tsx rename to x-pack/plugins/index_management/public/application/components/shared/components/template_content_indicator.tsx diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx index 0d28ec4b50c9a..d71d72d873c8e 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx @@ -23,13 +23,13 @@ import { Forms } from '../../../../../shared_imports'; import { useJsonStep } from './use_json_step'; interface Props { - defaultValue: { [key: string]: any }; + defaultValue?: { [key: string]: any }; onChange: (content: Forms.Content) => void; esDocsBase: string; } export const StepAliases: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, esDocsBase }) => { + ({ defaultValue = {}, onChange, esDocsBase }) => { const { jsonContent, setJsonContent, error } = useJsonStep({ defaultValue, onChange, diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx index a5953ea00a106..c8297e6f298b6 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases_container.tsx @@ -14,7 +14,7 @@ interface Props { } export const StepAliasesContainer: React.FunctionComponent = ({ esDocsBase }) => { - const { defaultValue, updateContent } = Forms.useContent('aliases'); + const { defaultValue, updateContent } = Forms.useContent('aliases'); return ( diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx index 2b9b689e17cb9..bbf7a04080a28 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings.tsx @@ -24,14 +24,14 @@ import { } from '../../../mappings_editor'; interface Props { - defaultValue: { [key: string]: any }; onChange: (content: Forms.Content) => void; - indexSettings?: IndexSettings; esDocsBase: string; + defaultValue?: { [key: string]: any }; + indexSettings?: IndexSettings; } export const StepMappings: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, indexSettings, esDocsBase }) => { + ({ defaultValue = {}, onChange, indexSettings, esDocsBase }) => { const [mappings, setMappings] = useState(defaultValue); const onMappingsEditorUpdate = useCallback( diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx index 34e05d88c651d..38c4a85bbe0ff 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_mappings_container.tsx @@ -14,7 +14,9 @@ interface Props { } export const StepMappingsContainer: React.FunctionComponent = ({ esDocsBase }) => { - const { defaultValue, updateContent, getData } = Forms.useContent('mappings'); + const { defaultValue, updateContent, getData } = Forms.useContent( + 'mappings' + ); return ( void; esDocsBase: string; + defaultValue?: { [key: string]: any }; } export const StepSettings: React.FunctionComponent = React.memo( - ({ defaultValue, onChange, esDocsBase }) => { + ({ defaultValue = {}, onChange, esDocsBase }) => { const { jsonContent, setJsonContent, error } = useJsonStep({ defaultValue, onChange, diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx index c540ddceb95c2..42be2c4b28c10 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings_container.tsx @@ -14,7 +14,9 @@ interface Props { } export const StepSettingsContainer = React.memo(({ esDocsBase }: Props) => { - const { defaultValue, updateContent } = Forms.useContent('settings'); + const { defaultValue, updateContent } = Forms.useContent( + 'settings' + ); return ( diff --git a/x-pack/plugins/index_management/public/application/components/shared/index.ts b/x-pack/plugins/index_management/public/application/components/shared/index.ts index 897e86c99eca0..9b0eeb7d18f6e 100644 --- a/x-pack/plugins/index_management/public/application/components/shared/index.ts +++ b/x-pack/plugins/index_management/public/application/components/shared/index.ts @@ -12,4 +12,5 @@ export { StepMappingsContainer, StepSettingsContainer, CommonWizardSteps, + TemplateContentIndicator, } from './components'; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts index b7e3e36e61814..d8baca2db78a0 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts @@ -5,4 +5,5 @@ */ export { StepLogisticsContainer } from './step_logistics_container'; +export { StepComponentContainer } from './step_components_container'; export { StepReviewContainer } from './step_review_container'; 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 new file mode 100644 index 0000000000000..01771f40f89ea --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components.tsx @@ -0,0 +1,112 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React, { useState, useCallback } from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { + EuiTitle, + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiButtonEmpty, +} from '@elastic/eui'; + +import { ComponentTemplateListItem } from '../../../../../common'; +import { Forms } from '../../../../shared_imports'; +import { ComponentTemplatesSelector } from '../../component_templates'; + +interface Props { + esDocsBase: string; + onChange: (content: Forms.Content) => void; + defaultValue?: string[]; +} + +const i18nTexts = { + description: ( + + ), +}; + +export const StepComponents = ({ defaultValue = [], onChange, esDocsBase }: Props) => { + const [state, setState] = useState<{ + isLoadingComponents: boolean; + components: ComponentTemplateListItem[]; + }>({ isLoadingComponents: true, components: [] }); + + const onComponentsLoaded = useCallback((components: ComponentTemplateListItem[]) => { + setState({ isLoadingComponents: false, components }); + }, []); + + const onComponentSelectionChange = useCallback( + (components: string[]) => { + onChange({ isValid: true, validate: async () => true, getData: () => components }); + }, + [onChange] + ); + + const showHeader = state.isLoadingComponents === true || state.components.length > 0; + const docUri = `${esDocsBase}/indices-component-template.html`; + + const renderHeader = () => { + if (!showHeader) { + return null; + } + + return ( + <> + + + +

+ +

+ + + + + +

{i18nTexts.description}

+ + + + + + + + + + + + + ); + }; + + return ( +
+ {renderHeader()} + + +
+ ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx new file mode 100644 index 0000000000000..b9b09bf0e3d9a --- /dev/null +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_components_container.tsx @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import React from 'react'; + +import { Forms } from '../../../../shared_imports'; +import { documentationService } from '../../../services/documentation'; +import { WizardContent } from '../template_form'; +import { StepComponents } from './step_components'; + +export const StepComponentContainer = () => { + const { defaultValue, updateContent } = Forms.useContent( + 'components' + ); + + return ( + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx index d011b4b06546a..44ec4db0873f3 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx @@ -8,7 +8,15 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from ' import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { useForm, Form, getUseField, getFormRow, Field, Forms } from '../../../../shared_imports'; +import { + useForm, + Form, + getUseField, + getFormRow, + Field, + Forms, + JsonEditorField, +} from '../../../../shared_imports'; import { documentationService } from '../../../services/documentation'; import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas'; @@ -47,6 +55,15 @@ const fieldsMeta = { }), testSubject: 'orderField', }, + priority: { + title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityTitle', { + defaultMessage: 'Merge priority', + }), + description: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.priorityDescription', { + defaultMessage: 'The merge priority when multiple templates match an index.', + }), + testSubject: 'priorityField', + }, version: { title: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.versionTitle', { defaultMessage: 'Version', @@ -62,20 +79,26 @@ interface Props { defaultValue: { [key: string]: any }; onChange: (content: Forms.Content) => void; isEditing?: boolean; + isLegacy?: boolean; } export const StepLogistics: React.FunctionComponent = React.memo( - ({ defaultValue, isEditing, onChange }) => { + ({ defaultValue, isEditing = false, onChange, isLegacy = false }) => { const { form } = useForm({ schema: schemas.logistics, defaultValue, options: { stripEmptyFields: false }, }); + /** + * When the consumer call validate() on this step, we submit the form so it enters the "isSubmitted" state + * and we can display the form errors on top of the forms if there are any. + */ + const validate = async () => { + return (await form.submit()).isValid; + }; + useEffect(() => { - const validate = async () => { - return (await form.submit()).isValid; - }; onChange({ isValid: form.isValid, validate, @@ -83,10 +106,22 @@ export const StepLogistics: React.FunctionComponent = React.memo( }); }, [form.isValid, onChange]); // eslint-disable-line react-hooks/exhaustive-deps - const { name, indexPatterns, order, version } = fieldsMeta; + useEffect(() => { + const subscription = form.subscribe(({ data, isValid }) => { + onChange({ + isValid, + validate, + getData: data.format, + }); + }); + return subscription.unsubscribe; + }, [onChange]); // eslint-disable-line react-hooks/exhaustive-deps + + const { name, indexPatterns, order, priority, version } = fieldsMeta; return ( -
+ <> + {/* Header */} @@ -114,46 +149,106 @@ export const StepLogistics: React.FunctionComponent = React.memo( + - {/* Name */} - - - - {/* Index patterns */} - - - - {/* Order */} - - - - {/* Version */} - - - - + +
+ {/* Name */} + + + + + {/* Index patterns */} + + + + + {/* Order */} + {isLegacy && ( + + + + )} + + {/* Priority */} + {isLegacy === false && ( + + + + )} + + {/* Version */} + + + + + {/* _meta */} + {isLegacy === false && ( + + + + } + > + + + )} +
+ ); } ); diff --git a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx index 867ecff799858..68a3419499088 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics_container.tsx @@ -10,13 +10,19 @@ import { WizardContent } from '../template_form'; import { StepLogistics } from './step_logistics'; interface Props { + isLegacy?: boolean; isEditing?: boolean; } -export const StepLogisticsContainer = ({ isEditing = false }: Props) => { - const { defaultValue, updateContent } = Forms.useContent('logistics'); +export const StepLogisticsContainer = ({ isEditing, isLegacy }: Props) => { + const { defaultValue, updateContent } = Forms.useContent('logistics'); return ( - + ); }; 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 ab49736d8c0bb..5d0eab93c4f02 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 @@ -22,10 +22,7 @@ import { import { FormattedMessage } from '@kbn/i18n/react'; import { serializers } from '../../../../shared_imports'; -import { - serializeLegacyTemplate, - serializeTemplate, -} from '../../../../../common/lib/template_serialization'; +import { serializeLegacyTemplate, serializeTemplate } from '../../../../../common/lib'; import { TemplateDeserialized, getTemplateParameter } from '../../../../../common'; import { doMappingsHaveType } from '../../mappings_editor/lib'; import { WizardSection } from '../template_form'; @@ -67,6 +64,9 @@ export const StepReview: React.FunctionComponent = React.memo( indexPatterns, version, order, + priority, + composedOf, + _meta, _kbnMeta: { isLegacy }, } = template!; @@ -97,6 +97,7 @@ export const StepReview: React.FunctionComponent = React.memo( + {/* Index patterns */} = React.memo( )} - - - - - {order ? order : } - + {/* Priority / Order */} + {isLegacy ? ( + <> + + + + + {order ? order : } + + + ) : ( + <> + + + + + {priority ? priority : } + + + )} + {/* Version */} = React.memo( {version ? version : } + + {/* components */} + {isLegacy !== true && ( + <> + + + + + {composedOf && composedOf.length > 0 ? ( + composedOf.length > 1 ? ( + +
    + {composedOf.map((component: string, i: number) => { + return ( +
  • + + {component} + +
    • + ); + })} +
+ + ) : ( + composedOf.toString() + ) + ) : ( + + )} + + + )} + {/* Index settings */} = React.memo( {getDescriptionText(serializedSettings)} + + {/* Mappings */} = React.memo( {getDescriptionText(serializedMappings)} + + {/* Aliases */} = React.memo( {getDescriptionText(serializedAliases)} + + {/* Metadata (optional) */} + {isLegacy !== true && _meta && ( + <> + + + + + {JSON.stringify(_meta, null, 2)} + + + )} @@ -183,7 +257,8 @@ export const StepReview: React.FunctionComponent = React.memo( const RequestTab = () => { const includeTypeName = doMappingsHaveType(template!.template.mappings); - const endpoint = `PUT _template/${name || ''}${ + const esApiEndpoint = isLegacy ? '_template' : '_index_template'; + const endpoint = `PUT ${esApiEndpoint}/${name || ''}${ includeTypeName ? '?include_type_name' : '' }`; const templateString = JSON.stringify(serializedTemplate, null, 2); 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 8a2c991aea8d0..269ad94251074 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 @@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiSpacer } from '@elastic/eui'; -import { TemplateDeserialized, CREATE_LEGACY_TEMPLATE_BY_DEFAULT } from '../../../../common'; +import { TemplateDeserialized } from '../../../../common'; import { serializers, Forms } from '../../../shared_imports'; import { SectionError } from '../section_error'; -import { StepLogisticsContainer, StepReviewContainer } from './steps'; +import { StepLogisticsContainer, StepComponentContainer, StepReviewContainer } from './steps'; import { CommonWizardSteps, StepSettingsContainer, @@ -28,12 +28,14 @@ interface Props { clearSaveError: () => void; isSaving: boolean; saveError: any; + isLegacy?: boolean; defaultValue?: TemplateDeserialized; isEditing?: boolean; } export interface WizardContent extends CommonWizardSteps { logistics: Omit; + components: TemplateDeserialized['composedOf']; } export type WizardSection = keyof WizardContent | 'review'; @@ -45,6 +47,12 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = { defaultMessage: 'Logistics', }), }, + components: { + id: 'components', + label: i18n.translate('xpack.idxMgmt.templateForm.steps.componentsStepName', { + defaultMessage: 'Components', + }), + }, settings: { id: 'settings', label: i18n.translate('xpack.idxMgmt.templateForm.steps.settingsStepName', { @@ -72,9 +80,18 @@ const wizardSections: { [id: string]: { id: WizardSection; label: string } } = { }; export const TemplateForm = ({ - defaultValue = { + defaultValue, + isEditing, + isSaving, + isLegacy = false, + saveError, + clearSaveError, + onSave, +}: Props) => { + const indexTemplate = defaultValue ?? { name: '', indexPatterns: [], + composedOf: [], template: { settings: {}, mappings: {}, @@ -82,26 +99,23 @@ export const TemplateForm = ({ }, _kbnMeta: { isManaged: false, - isLegacy: CREATE_LEGACY_TEMPLATE_BY_DEFAULT, + isLegacy, }, - }, - isEditing, - isSaving, - saveError, - clearSaveError, - onSave, -}: Props) => { + }; + const { template: { settings, mappings, aliases }, + composedOf, _kbnMeta, ...logistics - } = defaultValue; + } = indexTemplate; const wizardDefaultValue: WizardContent = { logistics, settings, mappings, aliases, + components: indexTemplate.composedOf, }; const i18nTexts = { @@ -139,6 +153,7 @@ export const TemplateForm = ({ ): TemplateDeserialized => ({ ...initialTemplate, ...wizardData.logistics, + composedOf: wizardData.components, template: { settings: wizardData.settings, mappings: wizardData.mappings, @@ -148,7 +163,7 @@ export const TemplateForm = ({ const onSaveTemplate = useCallback( async (wizardData: WizardContent) => { - const template = buildTemplateObject(defaultValue)(wizardData); + const template = buildTemplateObject(indexTemplate)(wizardData); // We need to strip empty string, otherwise if the "order" or "version" // are not set, they will be empty string and ES expect a number for those parameters. @@ -160,7 +175,7 @@ export const TemplateForm = ({ clearSaveError(); }, - [defaultValue, onSave, clearSaveError] + [indexTemplate, onSave, clearSaveError] ); return ( @@ -177,9 +192,15 @@ export const TemplateForm = ({ label={wizardSections.logistics.label} isRequired > - + + {indexTemplate._kbnMeta.isLegacy !== true && ( + + + + )} + @@ -193,7 +214,7 @@ export const TemplateForm = ({ - + ); diff --git a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx index 9ff73b71adf50..5af3b4dd00c4f 100644 --- a/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx +++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; +import { EuiCode } from '@elastic/eui'; import { FormSchema, @@ -28,6 +29,7 @@ const { startsWithField, indexPatternField, lowerCaseStringField, + isJsonField, } = fieldValidators; const { toInt } = fieldFormatters; const indexPatternInvalidCharacters = INVALID_INDEX_PATTERN_CHARS.join(' '); @@ -133,6 +135,13 @@ export const schemas: Record = { }), formatters: [toInt], }, + priority: { + type: FIELD_TYPES.NUMBER, + label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldPriorityLabel', { + defaultMessage: 'Priority (optional)', + }), + formatters: [toInt], + }, version: { type: FIELD_TYPES.NUMBER, label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.fieldVersionLabel', { @@ -140,5 +149,43 @@ export const schemas: Record = { }), formatters: [toInt], }, + _meta: { + label: i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorLabel', { + defaultMessage: '_meta field data (optional)', + }), + helpText: ( + {JSON.stringify({ arbitrary_data: 'anything_goes' })}, + }} + /> + ), + validations: [ + { + validator: isJsonField( + i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorJsonError', { + defaultMessage: 'The _meta field JSON is not valid.', + }), + { allowEmptyString: true } + ), + }, + ], + deserializer: (value: any) => { + if (value === '') { + return value; + } + return JSON.stringify(value, null, 2); + }, + serializer: (value: string) => { + try { + return JSON.parse(value); + } catch (error) { + // swallow error and return non-parsed value; + return value; + } + }, + }, }, }; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts index dcaba319bb21a..156d792c26f1d 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/components/index.ts @@ -5,4 +5,3 @@ */ export * from './filter_list_button'; -export * from './template_content_indicator'; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx index ab4ce6a61a9b6..f85b14ea0d2d5 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_details/template_details.tsx @@ -46,7 +46,7 @@ import { TabSummary } from '../../template_details/tabs'; interface Props { template: { name: string; isLegacy?: boolean }; onClose: () => void; - editTemplate: (name: string, isLegacy?: boolean) => void; + editTemplate: (name: string, isLegacy: boolean) => void; cloneTemplate: (name: string, isLegacy?: boolean) => void; reload: () => Promise; } @@ -290,7 +290,7 @@ export const LegacyTemplateDetails: React.FunctionComponent = ({ } ), icon: 'pencil', - onClick: () => editTemplate(templateName, isLegacy), + onClick: () => editTemplate(templateName, true), disabled: isManaged, }, { diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx index edce05018ce39..99915c2b70e2a 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/legacy_templates/template_table/template_table.tsx @@ -19,7 +19,7 @@ import { useServices } from '../../../../../app_context'; interface Props { templates: TemplateListItem[]; reload: () => Promise; - editTemplate: (name: string, isLegacy?: boolean) => void; + editTemplate: (name: string, isLegacy: boolean) => void; cloneTemplate: (name: string, isLegacy?: boolean) => void; history: ScopedHistory; } @@ -150,8 +150,8 @@ export const LegacyTemplateTable: React.FunctionComponent = ({ ), icon: 'pencil', type: 'icon', - onClick: ({ name, _kbnMeta: { isLegacy } }: TemplateListItem) => { - editTemplate(name, isLegacy); + onClick: ({ name }: TemplateListItem) => { + editTemplate(name, true); }, enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged, }, @@ -252,7 +252,10 @@ export const LegacyTemplateTable: React.FunctionComponent = ({ iconType="plusInCircle" data-test-subj="createLegacyTemplateButton" key="createTemplateButton" - {...reactRouterNavigate(history, '/create_template')} + {...reactRouterNavigate(history, { + pathname: '/create_template', + search: 'legacy=true', + })} > - + ) : null; diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx index 7c3f8c07a7e04..6a5328f76fb06 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx @@ -7,18 +7,27 @@ import React, { useState, Fragment } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiInMemoryTable, EuiBasicTableColumn } from '@elastic/eui'; +import { EuiInMemoryTable, EuiBasicTableColumn, EuiButton } from '@elastic/eui'; +import { ScopedHistory } from 'kibana/public'; + import { TemplateListItem } from '../../../../../../common'; import { TemplateDeleteModal } from '../../../../components'; -import { SendRequestResponse } from '../../../../../shared_imports'; -import { TemplateContentIndicator } from '../components'; +import { SendRequestResponse, reactRouterNavigate } from '../../../../../shared_imports'; +import { TemplateContentIndicator } from '../../../../components/shared'; interface Props { templates: TemplateListItem[]; reload: () => Promise; + editTemplate: (name: string) => void; + history: ScopedHistory; } -export const TemplateTable: React.FunctionComponent = ({ templates, reload }) => { +export const TemplateTable: React.FunctionComponent = ({ + templates, + reload, + history, + editTemplate, +}) => { const [templatesToDelete, setTemplatesToDelete] = useState< Array<{ name: string; isLegacy?: boolean }> >([]); @@ -80,13 +89,11 @@ export const TemplateTable: React.FunctionComponent = ({ templates, reloa sortable: true, }, { - field: 'hasMappings', name: i18n.translate('xpack.idxMgmt.templateList.table.overridesColumnTitle', { defaultMessage: 'Overrides', }), truncateText: true, - sortable: false, - render: (_, item) => ( + render: (item: TemplateListItem) => ( = ({ templates, reloa /> ), }, + { + name: i18n.translate('xpack.idxMgmt.templateList.table.actionColumnTitle', { + defaultMessage: 'Actions', + }), + actions: [ + { + name: i18n.translate('xpack.idxMgmt.templateList.table.actionEditText', { + defaultMessage: 'Edit', + }), + isPrimary: true, + description: i18n.translate('xpack.idxMgmt.templateList.table.actionEditDecription', { + defaultMessage: 'Edit this template', + }), + icon: 'pencil', + type: 'icon', + onClick: ({ name }: TemplateListItem) => { + editTemplate(name); + }, + enabled: ({ _kbnMeta: { isManaged } }: TemplateListItem) => !isManaged, + }, + ], + }, ]; const pagination = { @@ -112,6 +141,20 @@ export const TemplateTable: React.FunctionComponent = ({ templates, reloa box: { incremental: true, }, + toolsRight: [ + + + , + ], }; return ( diff --git a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx index f567b9835d53d..fb82f52968eb4 100644 --- a/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx +++ b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx @@ -7,6 +7,8 @@ import React, { useEffect, useState } from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiPageBody, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { useLocation } from 'react-router-dom'; +import { parse } from 'query-string'; import { TemplateForm } from '../../components'; import { breadcrumbService } from '../../services/breadcrumbs'; @@ -17,6 +19,8 @@ import { getTemplateDetailsLink } from '../../services/routing'; export const TemplateCreate: React.FunctionComponent = ({ history }) => { const [isSaving, setIsSaving] = useState(false); const [saveError, setSaveError] = useState(null); + const search = parse(useLocation().search.substring(1)); + const isLegacy = Boolean(search.legacy); const onSave = async (template: TemplateDeserialized) => { const { name } = template; @@ -49,10 +53,17 @@ export const TemplateCreate: React.FunctionComponent = ({ h

- + {isLegacy ? ( + + ) : ( + + )}

@@ -61,6 +72,7 @@ export const TemplateCreate: React.FunctionComponent = ({ h isSaving={isSaving} saveError={saveError} clearSaveError={clearSaveError} + isLegacy={isLegacy} /> diff --git a/x-pack/plugins/index_management/public/application/services/routing.ts b/x-pack/plugins/index_management/public/application/services/routing.ts index 2a895196189d0..8831fa2368f47 100644 --- a/x-pack/plugins/index_management/public/application/services/routing.ts +++ b/x-pack/plugins/index_management/public/application/services/routing.ts @@ -16,11 +16,19 @@ export const getTemplateDetailsLink = (name: string, isLegacy?: boolean, withHas }; export const getTemplateEditLink = (name: string, isLegacy?: boolean) => { - return encodeURI(`/edit_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`); + let url = `/edit_template/${encodePathForReactRouter(name)}`; + if (isLegacy) { + url = `${url}?legacy=true`; + } + return encodeURI(url); }; export const getTemplateCloneLink = (name: string, isLegacy?: boolean) => { - return encodeURI(`/clone_template/${encodePathForReactRouter(name)}?legacy=${isLegacy === true}`); + let url = `/clone_template/${encodePathForReactRouter(name)}`; + if (isLegacy) { + url = `${url}?legacy=true`; + } + return encodeURI(url); }; export const decodePathFromReactRouter = (pathname: string): string => { diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts index 69cd07ba6dba0..ad221ae73fecf 100644 --- a/x-pack/plugins/index_management/public/shared_imports.ts +++ b/x-pack/plugins/index_management/public/shared_imports.ts @@ -29,7 +29,11 @@ export { serializers, } from '../../../../src/plugins/es_ui_shared/static/forms/helpers'; -export { getFormRow, Field } from '../../../../src/plugins/es_ui_shared/static/forms/components'; +export { + getFormRow, + Field, + JsonEditorField, +} from '../../../../src/plugins/es_ui_shared/static/forms/components'; export { isJSON } from '../../../../src/plugins/es_ui_shared/static/validators/string'; diff --git a/x-pack/plugins/index_management/server/client/elasticsearch.ts b/x-pack/plugins/index_management/server/client/elasticsearch.ts index 6c0fbe3dd6a65..9f8bce241ae69 100644 --- a/x-pack/plugins/index_management/server/client/elasticsearch.ts +++ b/x-pack/plugins/index_management/server/client/elasticsearch.ts @@ -126,6 +126,20 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any) method: 'GET', }); + dataManagement.getComposableIndexTemplate = ca({ + urls: [ + { + fmt: '/_index_template/<%=name%>', + req: { + name: { + type: 'string', + }, + }, + }, + ], + method: 'GET', + }); + dataManagement.saveComposableIndexTemplate = ca({ urls: [ { @@ -154,4 +168,18 @@ export const elasticsearchJsPlugin = (Client: any, config: any, components: any) ], method: 'DELETE', }); + + dataManagement.existsTemplate = ca({ + urls: [ + { + fmt: '/_index_template/<%=name%>', + req: { + name: { + type: 'string', + }, + }, + }, + ], + method: 'HEAD', + }); }; diff --git a/x-pack/plugins/index_management/server/routes/api/templates/lib.ts b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts new file mode 100644 index 0000000000000..aae04269c5eb4 --- /dev/null +++ b/x-pack/plugins/index_management/server/routes/api/templates/lib.ts @@ -0,0 +1,68 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ +import { serializeTemplate, serializeLegacyTemplate } from '../../../../common/lib'; +import { TemplateDeserialized, LegacyTemplateSerialized } from '../../../../common'; +import { CallAsCurrentUser } from '../../../types'; + +export const doesTemplateExist = async ({ + name, + callAsCurrentUser, + isLegacy, +}: { + name: string; + callAsCurrentUser: CallAsCurrentUser; + isLegacy?: boolean; +}) => { + if (isLegacy) { + return await callAsCurrentUser('indices.existsTemplate', { name }); + } + return await callAsCurrentUser('dataManagement.existsTemplate', { name }); +}; + +export const saveTemplate = async ({ + template, + callAsCurrentUser, + isLegacy, + include_type_name, +}: { + template: TemplateDeserialized; + callAsCurrentUser: CallAsCurrentUser; + isLegacy?: boolean; + include_type_name?: string; +}) => { + const serializedTemplate = isLegacy + ? serializeLegacyTemplate(template) + : serializeTemplate(template); + + if (isLegacy) { + const { + order, + index_patterns, + version, + settings, + mappings, + aliases, + } = serializedTemplate as LegacyTemplateSerialized; + + return await callAsCurrentUser('indices.putTemplate', { + name: template.name, + order, + include_type_name, + body: { + index_patterns, + version, + settings, + mappings, + aliases, + }, + }); + } + + return await callAsCurrentUser('dataManagement.saveComposableIndexTemplate', { + name: template.name, + body: serializedTemplate, + }); +}; diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts index 89460ff89aacf..f9fcc9bf3a9c9 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts @@ -8,10 +8,10 @@ import { i18n } from '@kbn/i18n'; import { schema, TypeOf } from '@kbn/config-schema'; import { TemplateDeserialized } from '../../../../common'; -import { serializeLegacyTemplate } from '../../../../common/lib'; import { RouteDependencies } from '../../../types'; import { addBasePath } from '../index'; import { templateSchema } from './validate_schemas'; +import { saveTemplate, doesTemplateExist } from './lib'; const bodySchema = templateSchema; const querySchema = schema.object({ @@ -22,23 +22,18 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies) router.post( { path: addBasePath('/index_templates'), validate: { body: bodySchema, query: querySchema } }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const { include_type_name } = req.query as TypeOf; const template = req.body as TemplateDeserialized; const { _kbnMeta: { isLegacy }, } = template; - if (!isLegacy) { - return res.badRequest({ body: 'Only legacy index templates can be created.' }); - } - - const serializedTemplate = serializeLegacyTemplate(template); - const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate; - // Check that template with the same name doesn't already exist - const templateExists = await callAsCurrentUser('indices.existsTemplate', { + const templateExists = await doesTemplateExist({ name: template.name, + callAsCurrentUser, + isLegacy, }); if (templateExists) { @@ -56,17 +51,11 @@ export function registerCreateRoute({ router, license, lib }: RouteDependencies) try { // Otherwise create new index template - const response = await callAsCurrentUser('indices.putTemplate', { - name: template.name, - order, + const response = await saveTemplate({ + template, + callAsCurrentUser, + isLegacy, include_type_name, - body: { - index_patterns, - version, - settings, - mappings, - aliases, - }, }); return res.ok({ body: response }); diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts index af6c139bcd416..23c8635740c7e 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts @@ -6,9 +6,10 @@ import { schema, TypeOf } from '@kbn/config-schema'; import { + deserializeTemplate, + deserializeTemplateList, deserializeLegacyTemplate, deserializeLegacyTemplateList, - deserializeTemplateList, } from '../../../../common/lib'; import { getManagedTemplatePrefix } from '../../../lib/get_managed_templates'; import { RouteDependencies } from '../../../types'; @@ -18,22 +19,21 @@ export function registerGetAllRoute({ router, license }: RouteDependencies) { router.get( { path: addBasePath('/index_templates'), validate: false }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser); - const _legacyTemplates = await callAsCurrentUser('indices.getTemplate', { + const legacyTemplatesEs = await callAsCurrentUser('indices.getTemplate', { include_type_name: true, }); - const { index_templates: _templates } = await callAsCurrentUser('transport.request', { - path: '_index_template', - method: 'GET', - }); + const { index_templates: templatesEs } = await callAsCurrentUser( + 'dataManagement.getComposableIndexTemplates' + ); const legacyTemplates = deserializeLegacyTemplateList( - _legacyTemplates, + legacyTemplatesEs, managedTemplatePrefix ); - const templates = deserializeTemplateList(_templates, managedTemplatePrefix); + const templates = deserializeTemplateList(templatesEs, managedTemplatePrefix); const body = { templates, @@ -51,7 +51,7 @@ const paramsSchema = schema.object({ // Require the template format version (V1 or V2) to be provided as Query param const querySchema = schema.object({ - legacy: schema.maybe(schema.boolean()), + legacy: schema.maybe(schema.oneOf([schema.literal('true'), schema.literal('false')])), }); export function registerGetOneRoute({ router, license, lib }: RouteDependencies) { @@ -62,28 +62,40 @@ export function registerGetOneRoute({ router, license, lib }: RouteDependencies) }, license.guardApiRoute(async (ctx, req, res) => { const { name } = req.params as TypeOf; - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; - const { legacy } = req.query as TypeOf; - - if (!legacy) { - return res.badRequest({ body: 'Only index template version 1 can be fetched.' }); - } + const isLegacy = (req.query as TypeOf).legacy === 'true'; try { const managedTemplatePrefix = await getManagedTemplatePrefix(callAsCurrentUser); - const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', { - name, - include_type_name: true, - }); - if (indexTemplateByName[name]) { - return res.ok({ - body: deserializeLegacyTemplate( - { ...indexTemplateByName[name], name }, - managedTemplatePrefix - ), + if (isLegacy) { + const indexTemplateByName = await callAsCurrentUser('indices.getTemplate', { + name, + include_type_name: true, }); + + if (indexTemplateByName[name]) { + return res.ok({ + body: deserializeLegacyTemplate( + { ...indexTemplateByName[name], name }, + managedTemplatePrefix + ), + }); + } + } else { + const { + index_templates: indexTemplates, + } = await callAsCurrentUser('dataManagement.getComposableIndexTemplate', { name }); + + if (indexTemplates.length > 0) { + return res.ok({ + body: deserializeTemplate( + { ...indexTemplates[0].index_template, name }, + managedTemplatePrefix + ), + }); + } } return res.notFound(); diff --git a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts index 27cd03d80b84b..1458b8709fd27 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts @@ -6,10 +6,10 @@ import { schema, TypeOf } from '@kbn/config-schema'; import { TemplateDeserialized } from '../../../../common'; -import { serializeLegacyTemplate } from '../../../../common/lib'; import { RouteDependencies } from '../../../types'; import { addBasePath } from '../index'; import { templateSchema } from './validate_schemas'; +import { saveTemplate, doesTemplateExist } from './lib'; const bodySchema = templateSchema; const paramsSchema = schema.object({ @@ -26,7 +26,7 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies) validate: { body: bodySchema, params: paramsSchema, query: querySchema }, }, license.guardApiRoute(async (ctx, req, res) => { - const { callAsCurrentUser } = ctx.core.elasticsearch.legacy.client; + const { callAsCurrentUser } = ctx.dataManagement!.client; const { name } = req.params as typeof paramsSchema.type; const { include_type_name } = req.query as TypeOf; const template = req.body as TemplateDeserialized; @@ -34,16 +34,8 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies) _kbnMeta: { isLegacy }, } = template; - if (!isLegacy) { - return res.badRequest({ body: 'Only legacy index template can be edited.' }); - } - - const serializedTemplate = serializeLegacyTemplate(template); - - const { order, index_patterns, version, settings, mappings, aliases } = serializedTemplate; - // Verify the template exists (ES will throw 404 if not) - const doesExist = await callAsCurrentUser('indices.existsTemplate', { name }); + const doesExist = await doesTemplateExist({ name, callAsCurrentUser, isLegacy }); if (!doesExist) { return res.notFound(); @@ -51,17 +43,11 @@ export function registerUpdateRoute({ router, license, lib }: RouteDependencies) try { // Next, update index template - const response = await callAsCurrentUser('indices.putTemplate', { - name, - order, + const response = await saveTemplate({ + template, + callAsCurrentUser, + isLegacy, include_type_name, - body: { - index_patterns, - version, - settings, - mappings, - aliases, - }, }); return res.ok({ body: response }); diff --git a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts index 6ab28e9021123..f82ea8f3cf152 100644 --- a/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts +++ b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts @@ -11,6 +11,7 @@ export const templateSchema = schema.object({ indexPatterns: schema.arrayOf(schema.string()), version: schema.maybe(schema.number()), order: schema.maybe(schema.number()), + priority: schema.maybe(schema.number()), template: schema.maybe( schema.object({ settings: schema.maybe(schema.object({}, { unknowns: 'allow' })), @@ -18,6 +19,8 @@ export const templateSchema = schema.object({ mappings: schema.maybe(schema.object({}, { unknowns: 'allow' })), }) ), + composedOf: schema.maybe(schema.arrayOf(schema.string())), + _meta: schema.maybe(schema.object({}, { unknowns: 'allow' })), ilmPolicy: schema.maybe( schema.object({ name: schema.maybe(schema.string()), diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js index 292aabad85054..a563b956df344 100644 --- a/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js +++ b/x-pack/test/api_integration/apis/management/index_management/templates.helpers.js @@ -7,50 +7,63 @@ import { API_BASE_PATH, INDEX_PATTERNS } from './constants'; export const registerHelpers = ({ supertest }) => { + let templatesCreated = []; + const getAllTemplates = () => supertest.get(`${API_BASE_PATH}/index_templates`); - const getOneTemplate = (name, isLegacy = true) => + const getOneTemplate = (name, isLegacy = false) => supertest.get(`${API_BASE_PATH}/index_templates/${name}?legacy=${isLegacy}`); - const getTemplatePayload = (name, isLegacy = true) => ({ - name, - order: 1, - indexPatterns: INDEX_PATTERNS, - version: 1, - template: { - settings: { - number_of_shards: 1, - index: { - lifecycle: { - name: 'my_policy', + const getTemplatePayload = (name, indexPatterns = INDEX_PATTERNS, isLegacy = false) => { + const baseTemplate = { + name, + indexPatterns, + version: 1, + template: { + settings: { + number_of_shards: 1, + index: { + lifecycle: { + name: 'my_policy', + }, }, }, - }, - mappings: { - _source: { - enabled: false, - }, - properties: { - host_name: { - type: 'keyword', + mappings: { + _source: { + enabled: false, }, - created_at: { - type: 'date', - format: 'EEE MMM dd HH:mm:ss Z yyyy', + properties: { + host_name: { + type: 'keyword', + }, + created_at: { + type: 'date', + format: 'EEE MMM dd HH:mm:ss Z yyyy', + }, }, }, + aliases: { + alias1: {}, + }, }, - aliases: { - alias1: {}, + _kbnMeta: { + isLegacy, }, - }, - _kbnMeta: { - isLegacy, - }, - }); + }; + + if (isLegacy) { + baseTemplate.order = 1; + } else { + baseTemplate.priority = 1; + } - const createTemplate = (payload) => - supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(payload); + return baseTemplate; + }; + + const createTemplate = (template) => { + templatesCreated.push({ name: template.name, isLegacy: template._kbnMeta.isLegacy }); + return supertest.post(`${API_BASE_PATH}/index_templates`).set('kbn-xsrf', 'xxx').send(template); + }; const deleteTemplates = (templates) => supertest @@ -64,6 +77,16 @@ export const registerHelpers = ({ supertest }) => { .set('kbn-xsrf', 'xxx') .send(payload); + // Delete all templates created during tests + const cleanUpTemplates = async () => { + try { + await deleteTemplates(templatesCreated); + templatesCreated = []; + } catch (e) { + // Silently swallow errors + } + }; + return { getAllTemplates, getOneTemplate, @@ -71,5 +94,6 @@ export const registerHelpers = ({ supertest }) => { createTemplate, updateTemplate, deleteTemplates, + cleanUpTemplates, }; }; diff --git a/x-pack/test/api_integration/apis/management/index_management/templates.js b/x-pack/test/api_integration/apis/management/index_management/templates.js index fcee8ed6a183f..3a3d73ab68412 100644 --- a/x-pack/test/api_integration/apis/management/index_management/templates.js +++ b/x-pack/test/api_integration/apis/management/index_management/templates.js @@ -22,33 +22,78 @@ export default function ({ getService }) { getTemplatePayload, deleteTemplates, updateTemplate, + cleanUpTemplates, } = registerHelpers({ supertest }); describe('index templates', () => { - after(() => Promise.all([cleanUpEsResources()])); + after(() => Promise.all([cleanUpEsResources(), cleanUpTemplates()])); describe('get all', () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const indexTemplate = getTemplatePayload(templateName, [getRandomString()]); + const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true); beforeEach(async () => { - await createTemplate(payload).expect(200); + const res1 = await createTemplate(indexTemplate); + if (res1.status !== 200) { + throw new Error(res1.body.message); + } + + const res2 = await createTemplate(legacyTemplate); + if (res2.status !== 200) { + throw new Error(res2.body.message); + } }); - // TODO: When the "Create" API handler is added for V2 template, - // update this test to list composable templates. it('should list all the index templates with the expected parameters', async () => { const { body: allTemplates } = await getAllTemplates().expect(200); - // Composable index templates may have been created by other apps, e.g. Ingest Manager, - // so we don't make any assertion about these contents. - expect(allTemplates.templates).to.be.an('array'); - - // Legacy templates - const legacyTemplate = allTemplates.legacyTemplates.find( - (template) => template.name === payload.name + // Index templates (composable) + const indexTemplateFound = allTemplates.templates.find( + (template) => template.name === indexTemplate.name ); + + if (!indexTemplateFound) { + throw new Error( + `Index template "${indexTemplate.name}" not found in ${JSON.stringify( + allTemplates.templates, + null, + 2 + )}` + ); + } + const expectedKeys = [ + 'name', + 'indexPatterns', + 'hasSettings', + 'hasAliases', + 'hasMappings', + 'ilmPolicy', + 'priority', + 'composedOf', + 'version', + '_kbnMeta', + ].sort(); + + expect(Object.keys(indexTemplateFound).sort()).to.eql(expectedKeys); + + // Legacy index templates + const legacyTemplateFound = allTemplates.legacyTemplates.find( + (template) => template.name === legacyTemplate.name + ); + + if (!legacyTemplateFound) { + throw new Error( + `Legacy template "${legacyTemplate.name}" not found in ${JSON.stringify( + allTemplates.legacyTemplates, + null, + 2 + )}` + ); + } + + const expectedLegacyKeys = [ 'name', 'indexPatterns', 'hasSettings', @@ -60,20 +105,40 @@ export default function ({ getService }) { '_kbnMeta', ].sort(); - expect(Object.keys(legacyTemplate).sort()).to.eql(expectedKeys); + expect(Object.keys(legacyTemplateFound).sort()).to.eql(expectedLegacyKeys); }); }); describe('get one', () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); - beforeEach(async () => { - await createTemplate(payload).expect(200); - }); + it('should return an index template with the expected parameters', async () => { + const template = getTemplatePayload(templateName, [getRandomString()]); + await createTemplate(template).expect(200); - it('should return the index template with the expected parameters', async () => { const { body } = await getOneTemplate(templateName).expect(200); + const expectedKeys = [ + 'name', + 'indexPatterns', + 'template', + 'composedOf', + 'ilmPolicy', + 'priority', + 'version', + '_kbnMeta', + ].sort(); + const expectedTemplateKeys = ['aliases', 'mappings', 'settings'].sort(); + + expect(body.name).to.equal(templateName); + expect(Object.keys(body).sort()).to.eql(expectedKeys); + expect(Object.keys(body.template).sort()).to.eql(expectedTemplateKeys); + }); + + it('should return a legacy index template with the expected parameters', async () => { + const legacyTemplate = getTemplatePayload(templateName, [getRandomString()], true); + await createTemplate(legacyTemplate).expect(200); + + const { body } = await getOneTemplate(templateName, true).expect(200); const expectedKeys = [ 'name', 'indexPatterns', @@ -94,14 +159,21 @@ export default function ({ getService }) { describe('create', () => { it('should create an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()]); + + await createTemplate(payload).expect(200); + }); + + it('should create a legacy index template', async () => { + const templateName = `template-${getRandomString()}`; + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload).expect(200); }); it('should throw a 409 conflict when trying to create 2 templates with the same name', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload); @@ -110,7 +182,7 @@ export default function ({ getService }) { it('should validate the request payload', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); delete payload.indexPatterns; // index patterns are required @@ -124,13 +196,40 @@ export default function ({ getService }) { describe('update', () => { it('should update an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const indexTemplate = getTemplatePayload(templateName, [getRandomString()]); - await createTemplate(payload).expect(200); + await createTemplate(indexTemplate).expect(200); + + let catTemplateResponse = await catTemplate(templateName); + + const { name, version } = indexTemplate; + + expect( + catTemplateResponse.find(({ name: templateName }) => templateName === name).version + ).to.equal(version.toString()); + + // Update template with new version + const updatedVersion = 2; + await updateTemplate({ ...indexTemplate, version: updatedVersion }, templateName).expect( + 200 + ); + + catTemplateResponse = await catTemplate(templateName); + + expect( + catTemplateResponse.find(({ name: templateName }) => templateName === name).version + ).to.equal(updatedVersion.toString()); + }); + + it('should update a legacy index template', async () => { + const templateName = `template-${getRandomString()}`; + const legacyIndexTemplate = getTemplatePayload(templateName, [getRandomString()], true); + + await createTemplate(legacyIndexTemplate).expect(200); let catTemplateResponse = await catTemplate(templateName); - const { name, version } = payload; + const { name, version } = legacyIndexTemplate; expect( catTemplateResponse.find(({ name: templateName }) => templateName === name).version @@ -138,7 +237,10 @@ export default function ({ getService }) { // Update template with new version const updatedVersion = 2; - await updateTemplate({ ...payload, version: updatedVersion }, templateName).expect(200); + await updateTemplate( + { ...legacyIndexTemplate, version: updatedVersion }, + templateName + ).expect(200); catTemplateResponse = await catTemplate(templateName); @@ -151,7 +253,7 @@ export default function ({ getService }) { describe('delete', () => { it('should delete an index template', async () => { const templateName = `template-${getRandomString()}`; - const payload = getTemplatePayload(templateName); + const payload = getTemplatePayload(templateName, [getRandomString()], true); await createTemplate(payload).expect(200); diff --git a/x-pack/test_utils/router_helpers.tsx b/x-pack/test_utils/router_helpers.tsx index 76c1e2259545b..f2099e1eb7c91 100644 --- a/x-pack/test_utils/router_helpers.tsx +++ b/x-pack/test_utils/router_helpers.tsx @@ -16,9 +16,10 @@ export const WithMemoryRouter = (initialEntries: string[] = ['/'], initialIndex: ); -export const WithRoute = (componentRoutePath = '/', onRouter = (router: any) => {}) => ( - WrappedComponent: ComponentType -) => { +export const WithRoute = ( + componentRoutePath: string | string[] = '/', + onRouter = (router: any) => {} +) => (WrappedComponent: ComponentType) => { // Create a class component that will catch the router // and forward it to our "onRouter()" handler. const CatchRouter = withRouter( diff --git a/x-pack/test_utils/testbed/types.ts b/x-pack/test_utils/testbed/types.ts index 4975e073eea1f..e2b6693ce77aa 100644 --- a/x-pack/test_utils/testbed/types.ts +++ b/x-pack/test_utils/testbed/types.ts @@ -163,7 +163,7 @@ export interface MemoryRouterConfig { /** The React Router **initial index** setting ([see documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)) */ initialIndex?: number; /** The route **path** for the mounted component (defaults to `"/"`) */ - componentRoutePath?: string; + componentRoutePath?: string | string[]; /** A callBack that will be called with the React Router instance once mounted */ onRouter?: (router: any) => void; }