From b81f9269e5a29db75e56aaafa01d02ed860003fe Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 17 Apr 2020 10:04:38 +0300 Subject: [PATCH] Index pattern management UI -> TypeScript and New Platform Ready (create_index_pattern_wizard) (#63111) * Migrated create_index_pattern_wizard and its tests to typescript * Fixed types * Fixed some comments * Fixed comments * Fixed types * Fixed types * Fixed snapshot * Removed indexPatternCreationType from state. * Fixed comments Co-authored-by: Elastic Machine --- .../create_index_pattern_wizard.test.js.snap | 205 ------------ .../create_index_pattern_wizard.test.tsx.snap | 312 ++++++++++++++++++ .../step_index_pattern/step_index_pattern.tsx | 2 +- ...s => create_index_pattern_wizard.test.tsx} | 129 +++----- ...ard.js => create_index_pattern_wizard.tsx} | 133 +++++--- .../create_index_pattern_wizard/index.js | 4 +- 6 files changed, 443 insertions(+), 342 deletions(-) delete mode 100644 src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.js.snap create mode 100644 src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap rename src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/{create_index_pattern_wizard.test.js => create_index_pattern_wizard.test.tsx} (55%) rename src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/{create_index_pattern_wizard.js => create_index_pattern_wizard.tsx} (63%) diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.js.snap deleted file mode 100644 index 59b275c7708a4..0000000000000 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.js.snap +++ /dev/null @@ -1,205 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CreateIndexPatternWizard defaults to the loading state 1`] = ` - -
-
- -
- - -`; - -exports[`CreateIndexPatternWizard renders index pattern step when there are indices 1`] = ` - -
-
- -
- - -`; - -exports[`CreateIndexPatternWizard renders the empty state when there are no indices 1`] = ` - -
-
- -
- - -`; - -exports[`CreateIndexPatternWizard renders time field step when step is set to 2 1`] = ` - -
-
- -
- - -`; - -exports[`CreateIndexPatternWizard renders when there are no indices but there are remote clusters 1`] = ` - -
-
- -
- - -`; - -exports[`CreateIndexPatternWizard shows system indices even if there are no other indices if the include system indices is toggled 1`] = ` - -
-
- -
- - -`; diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap new file mode 100644 index 0000000000000..09a06bd8827ce --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/__snapshots__/create_index_pattern_wizard.test.tsx.snap @@ -0,0 +1,312 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CreateIndexPatternWizard defaults to the loading state 1`] = ` + +
+
+ +
+ + +`; + +exports[`CreateIndexPatternWizard renders index pattern step when there are indices 1`] = ` + +
+
+ +
+ + +`; + +exports[`CreateIndexPatternWizard renders the empty state when there are no indices 1`] = ` + +
+
+ +
+ + +`; + +exports[`CreateIndexPatternWizard renders time field step when step is set to 2 1`] = ` + +
+
+ +
+ + +`; + +exports[`CreateIndexPatternWizard renders when there are no indices but there are remote clusters 1`] = ` + +
+
+ +
+ + +`; + +exports[`CreateIndexPatternWizard shows system indices even if there are no other indices if the include system indices is toggled 1`] = ` + +
+
+ +
+ + +`; diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx index 648bf7f8f9738..d8f677b7f6089 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.tsx @@ -48,7 +48,7 @@ interface StepIndexPatternProps { esService: DataPublicPluginStart['search']['__LEGACY']['esClient']; savedObjectsClient: SavedObjectsClient; indexPatternCreationType: IndexPatternCreationConfig; - goToNextStep: () => void; + goToNextStep: (query: string) => void; initialQuery?: string; uiSettings: IUiSettingsClient; } diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.tsx similarity index 55% rename from src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.js rename to src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.tsx index 941f87d4d9fd2..45af98661eda3 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.test.tsx @@ -21,17 +21,12 @@ import React from 'react'; import { shallow } from 'enzyme'; import { CreateIndexPatternWizard } from './create_index_pattern_wizard'; -const mockIndexPatternCreationType = { - getIndexPatternType: () => 'default', - getIndexPatternName: () => 'name', - getIsBeta: () => false, - checkIndicesForErrors: () => false, - getShowSystemIndices: () => false, - renderPrompt: () => {}, - getIndexPatternMappings: () => { - return {}; - }, -}; +import { coreMock } from '../../../../../../../../core/public/mocks'; +import { dataPluginMock } from '../../../../../../../../plugins/data/public/mocks'; +import { IndexPatternCreationConfig } from '../../../../../../../../plugins/index_pattern_management/public'; +import { IndexPattern } from '../../../../../../../../plugins/data/public'; +import { SavedObjectsClient } from '../../../../../../../../core/public'; + jest.mock('./components/step_index_pattern', () => ({ StepIndexPattern: 'StepIndexPattern' })); jest.mock('./components/step_time_field', () => ({ StepTimeField: 'StepTimeField' })); jest.mock('./components/header', () => ({ Header: 'Header' })); @@ -46,39 +41,36 @@ jest.mock('ui/chrome', () => ({ addBasePath: () => {}, })); -const loadingDataDocUrl = ''; +const { savedObjects, overlays, uiSettings } = coreMock.createStart(); +const { indexPatterns, search } = dataPluginMock.createStartContract(); +const mockIndexPatternCreationType = new IndexPatternCreationConfig({ + type: 'default', + name: 'name', +}); + const initialQuery = ''; const services = { - es: {}, - indexPatterns: {}, - savedObjectsClient: {}, - config: {}, - changeUrl: () => {}, - scopeApply: () => {}, - + es: search.__LEGACY.esClient, + indexPatterns, + savedObjectsClient: savedObjects.client as SavedObjectsClient, + uiSettings, + changeUrl: jest.fn(), + openConfirm: overlays.openConfirm, indexPatternCreationType: mockIndexPatternCreationType, }; describe('CreateIndexPatternWizard', () => { - it(`defaults to the loading state`, async () => { + test(`defaults to the loading state`, () => { const component = shallow( - + ); expect(component).toMatchSnapshot(); }); - it('renders the empty state when there are no indices', async () => { + test('renders the empty state when there are no indices', async () => { const component = shallow( - + ); component.setState({ @@ -91,13 +83,9 @@ describe('CreateIndexPatternWizard', () => { expect(component).toMatchSnapshot(); }); - it('renders when there are no indices but there are remote clusters', async () => { + test('renders when there are no indices but there are remote clusters', async () => { const component = shallow( - + ); component.setState({ @@ -110,13 +98,9 @@ describe('CreateIndexPatternWizard', () => { expect(component).toMatchSnapshot(); }); - it('shows system indices even if there are no other indices if the include system indices is toggled', async () => { + test('shows system indices even if there are no other indices if the include system indices is toggled', async () => { const component = shallow( - + ); component.setState({ @@ -129,13 +113,9 @@ describe('CreateIndexPatternWizard', () => { expect(component).toMatchSnapshot(); }); - it('renders index pattern step when there are indices', async () => { + test('renders index pattern step when there are indices', async () => { const component = shallow( - + ); component.setState({ @@ -147,13 +127,9 @@ describe('CreateIndexPatternWizard', () => { expect(component).toMatchSnapshot(); }); - it('renders time field step when step is set to 2', async () => { + test('renders time field step when step is set to 2', async () => { const component = shallow( - + ); component.setState({ @@ -166,37 +142,30 @@ describe('CreateIndexPatternWizard', () => { expect(component).toMatchSnapshot(); }); - it('invokes the provided services when creating an index pattern', async () => { - const get = jest.fn(); - const set = jest.fn(); + test('invokes the provided services when creating an index pattern', async () => { const create = jest.fn().mockImplementation(() => 'id'); const clear = jest.fn(); - const changeUrl = jest.fn(); - - const component = shallow( - ({ - create, - }), - clearCache: clear, - }, - changeUrl, - indexPatternCreationType: mockIndexPatternCreationType, - }} - /> + services.indexPatterns.clearCache = clear; + const indexPattern = ({ + id: '1', + title: 'my-fake-index-pattern', + timeFieldName: 'timestamp', + fields: [], + create, + } as unknown) as IndexPattern; + services.indexPatterns.make = async () => { + return indexPattern; + }; + + const component = shallow( + ); component.setState({ indexPattern: 'foo' }); - await component.instance().createIndexPattern(null, 'id'); - expect(get).toBeCalled(); + await component.instance().createIndexPattern(undefined, 'id'); + expect(services.uiSettings.get).toBeCalled(); expect(create).toBeCalled(); expect(clear).toBeCalledWith('id'); - expect(changeUrl).toBeCalledWith(`/management/kibana/index_patterns/id`); + expect(services.changeUrl).toBeCalledWith(`/management/kibana/index_patterns/id`); }); }); diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.tsx similarity index 63% rename from src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js rename to src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.tsx index 1a93188edd6cc..4166d48349d35 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.tsx @@ -17,11 +17,11 @@ * under the License. */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import React, { ReactElement, Component } from 'react'; -import { EuiGlobalToastList } from '@elastic/eui'; +import { EuiGlobalToastList, EuiGlobalToastListToast } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { StepIndexPattern } from './components/step_index_pattern'; import { StepTimeField } from './components/step_time_field'; @@ -31,41 +31,61 @@ import { EmptyState } from './components/empty_state'; import { MAX_SEARCH_SIZE } from './constants'; import { ensureMinimumTime, getIndices } from './lib'; -import { i18n } from '@kbn/i18n'; - -export class CreateIndexPatternWizard extends Component { - static propTypes = { - initialQuery: PropTypes.string, - services: PropTypes.shape({ - es: PropTypes.object.isRequired, - indexPatterns: PropTypes.object.isRequired, - savedObjectsClient: PropTypes.object.isRequired, - indexPatternCreationType: PropTypes.object.isRequired, - config: PropTypes.object.isRequired, - changeUrl: PropTypes.func.isRequired, - openConfirm: PropTypes.func.isRequired, - }).isRequired, +import { + SavedObjectsClient, + IUiSettingsClient, + OverlayStart, +} from '../../../../../../../../core/public'; +import { DataPublicPluginStart } from '../../../../../../../../plugins/data/public'; +import { IndexPatternCreationConfig } from '../../../../../../../../plugins/index_pattern_management/public'; +import { MatchedIndex } from './types'; + +interface CreateIndexPatternWizardProps { + initialQuery: string; + services: { + indexPatternCreationType: IndexPatternCreationConfig; + es: DataPublicPluginStart['search']['__LEGACY']['esClient']; + indexPatterns: DataPublicPluginStart['indexPatterns']; + savedObjectsClient: SavedObjectsClient; + uiSettings: IUiSettingsClient; + changeUrl: (url: string) => void; + openConfirm: OverlayStart['openConfirm']; }; +} - constructor(props) { - super(props); - this.indexPatternCreationType = this.props.services.indexPatternCreationType; - this.state = { - step: 1, - indexPattern: '', - allIndices: [], - remoteClustersExist: false, - isInitiallyLoadingIndices: true, - isIncludingSystemIndices: false, - toasts: [], - }; - } +interface CreateIndexPatternWizardState { + step: number; + indexPattern: string; + allIndices: MatchedIndex[]; + remoteClustersExist: boolean; + isInitiallyLoadingIndices: boolean; + isIncludingSystemIndices: boolean; + toasts: EuiGlobalToastListToast[]; +} + +export class CreateIndexPatternWizard extends Component< + CreateIndexPatternWizardProps, + CreateIndexPatternWizardState +> { + state = { + step: 1, + indexPattern: '', + allIndices: [], + remoteClustersExist: false, + isInitiallyLoadingIndices: true, + isIncludingSystemIndices: false, + toasts: [], + }; async UNSAFE_componentWillMount() { this.fetchData(); } - catchAndWarn = async (asyncFn, errorValue, errorMsg) => { + catchAndWarn = async ( + asyncFn: Promise, + errorValue: [] | string[], + errorMsg: ReactElement + ) => { try { return await asyncFn; } catch (errors) { @@ -109,22 +129,26 @@ export class CreateIndexPatternWizard extends Component { // query local and remote indices, updating state independently ensureMinimumTime( this.catchAndWarn( - getIndices(services.es, this.indexPatternCreationType, `*`, MAX_SEARCH_SIZE), + getIndices(services.es, services.indexPatternCreationType, `*`, MAX_SEARCH_SIZE), [], indicesFailMsg ) - ).then(allIndices => this.setState({ allIndices, isInitiallyLoadingIndices: false })); + ).then((allIndices: MatchedIndex[]) => + this.setState({ allIndices, isInitiallyLoadingIndices: false }) + ); this.catchAndWarn( // if we get an error from remote cluster query, supply fallback value that allows user entry. // ['a'] is fallback value - getIndices(services.es, this.indexPatternCreationType, `*:*`, 1), + getIndices(services.es, services.indexPatternCreationType, `*:*`, 1), ['a'], clustersFailMsg - ).then(remoteIndices => this.setState({ remoteClustersExist: !!remoteIndices.length })); + ).then((remoteIndices: string[] | MatchedIndex[]) => + this.setState({ remoteClustersExist: !!remoteIndices.length }) + ); }; - createIndexPattern = async (timeFieldName, indexPatternId) => { + createIndexPattern = async (timeFieldName: string | undefined, indexPatternId: string) => { const { services } = this.props; const { indexPattern } = this.state; @@ -134,13 +158,13 @@ export class CreateIndexPatternWizard extends Component { id: indexPatternId, title: indexPattern, timeFieldName, - ...this.indexPatternCreationType.getIndexPatternMappings(), + ...services.indexPatternCreationType.getIndexPatternMappings(), }); const createdId = await emptyPattern.create(); if (!createdId) { const confirmMessage = i18n.translate('kbn.management.indexPattern.titleExistsLabel', { - values: { title: this.title }, + values: { title: emptyPattern.title }, defaultMessage: "An index pattern with the title '{title}' already exists.", }); @@ -157,15 +181,15 @@ export class CreateIndexPatternWizard extends Component { } } - if (!services.config.get('defaultIndex')) { - await services.config.set('defaultIndex', createdId); + if (!services.uiSettings.get('defaultIndex')) { + await services.uiSettings.set('defaultIndex', createdId); } services.indexPatterns.clearCache(createdId); services.changeUrl(`/management/kibana/index_patterns/${createdId}`); }; - goToTimeFieldStep = indexPattern => { + goToTimeFieldStep = (indexPattern: string) => { this.setState({ step: 2, indexPattern }); }; @@ -174,22 +198,23 @@ export class CreateIndexPatternWizard extends Component { }; onChangeIncludingSystemIndices = () => { - this.setState(state => ({ - isIncludingSystemIndices: !state.isIncludingSystemIndices, + this.setState(prevState => ({ + isIncludingSystemIndices: !prevState.isIncludingSystemIndices, })); }; renderHeader() { const { isIncludingSystemIndices } = this.state; + const { services } = this.props; return (
); } @@ -208,7 +233,7 @@ export class CreateIndexPatternWizard extends Component { return ; } - const hasDataIndices = allIndices.some(({ name }) => !name.startsWith('.')); + const hasDataIndices = allIndices.some(({ name }: MatchedIndex) => !name.startsWith('.')); if (!hasDataIndices && !isIncludingSystemIndices && !remoteClustersExist) { return ; } @@ -222,7 +247,7 @@ export class CreateIndexPatternWizard extends Component { isIncludingSystemIndices={isIncludingSystemIndices} esService={services.es} savedObjectsClient={services.savedObjectsClient} - indexPatternCreationType={this.indexPatternCreationType} + indexPatternCreationType={services.indexPatternCreationType} goToNextStep={this.goToTimeFieldStep} uiSettings={services.uiSettings} /> @@ -237,7 +262,7 @@ export class CreateIndexPatternWizard extends Component { indexPatternsService={services.indexPatterns} goToPreviousStep={this.goToIndexPatternStep} createIndexPattern={this.createIndexPattern} - indexPatternCreationType={this.indexPatternCreationType} + indexPatternCreationType={services.indexPatternCreationType} /> ); } @@ -245,9 +270,9 @@ export class CreateIndexPatternWizard extends Component { return null; } - removeToast = removedToast => { + removeToast = (id: string) => { this.setState(prevState => ({ - toasts: prevState.toasts.filter(toast => toast.id !== removedToast.id), + toasts: prevState.toasts.filter(toast => toast.id !== id), })); }; @@ -263,7 +288,9 @@ export class CreateIndexPatternWizard extends Component { { + this.removeToast(id); + }} toastLifeTimeMs={6000} /> diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js index 47cb773258cb4..ed1fc026c560c 100644 --- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js +++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/index.js @@ -36,17 +36,15 @@ uiRoutes.when('/management/kibana/index_pattern', { $routeParams.type ); const services = { - config: npStart.core.uiSettings, + uiSettings: npStart.core.uiSettings, es: npStart.plugins.data.search.__LEGACY.esClient, indexPatterns: npStart.plugins.data.indexPatterns, - $http: npStart.core.http, savedObjectsClient: npStart.core.savedObjects.client, indexPatternCreationType, changeUrl: url => { $scope.$evalAsync(() => kbnUrl.changePath(url)); }, openConfirm: npStart.core.overlays.openConfirm, - uiSettings: npStart.core.uiSettings, }; const initialQuery = $routeParams.id ? decodeURIComponent($routeParams.id) : undefined;