From 31381007bb09361832894171fa9bb9504cb58512 Mon Sep 17 00:00:00 2001 From: Chris Roberson Date: Fri, 2 Feb 2018 16:57:31 -0500 Subject: [PATCH 1/2] Index pattern creation wizard shell --- .../create_index_pattern_wizard.test.js.snap | 69 ++++ .../create_index_pattern_wizard.test.js | 98 +++++ .../render.test.js} | 22 +- .../angular_template.html | 5 + .../__snapshots__/empty_state.test.js.snap | 86 ++++ .../empty_state/__tests__/empty_state.test.js | 15 + .../components/empty_state/empty_state.js | 52 +++ .../components/empty_state/index.js | 1 + .../__snapshots__/header.test.js.snap | 99 +++++ .../header/__tests__/header.test.js | 27 ++ .../components/header/header.js | 42 ++ .../components/header/index.js | 1 + .../__snapshots__/loading_state.test.js.snap | 63 +++ .../__tests__/loading_state.test.js | 13 + .../components/loading_state/index.js | 1 + .../components/loading_state/loading_state.js | 37 ++ .../components/step_index_pattern/index.js | 37 +- .../step_time_field/__tests__/index.test.js | 30 -- .../components/step_time_field/index.js | 33 +- .../create_index_pattern_wizard.html | 144 ------- .../create_index_pattern_wizard.js | 389 +++++++----------- .../create_index_pattern_wizard.less | 4 - .../create_index_pattern_wizard/index.js | 37 +- .../create_index_pattern_wizard/render.js | 30 ++ .../send_create_index_pattern_request.js | 18 - .../step_time_field/step_time_field.html | 213 ---------- 26 files changed, 843 insertions(+), 723 deletions(-) create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js rename src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/{components/step_index_pattern/__tests__/index.test.js => __tests__/render.test.js} (58%) create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/angular_template.html create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/__snapshots__/empty_state.test.js.snap create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/empty_state.test.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/empty_state.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/index.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/header.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/index.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/__snapshots__/loading_state.test.js.snap create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/loading_state.test.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/index.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/loading_state.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/index.test.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less create mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/render.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/send_create_index_pattern_request.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap new file mode 100644 index 0000000000000..f9cd58bbb0588 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/__snapshots__/create_index_pattern_wizard.test.js.snap @@ -0,0 +1,69 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CreateIndexPatternWizard should render step 1 1`] = ` +
+
+ +
+`; + +exports[`CreateIndexPatternWizard should render step 2 1`] = ` +
+
+ +
+`; + +exports[`CreateIndexPatternWizard should render the empty state 1`] = ` +
+
+ + +
+`; + +exports[`CreateIndexPatternWizard should render the loading state 1`] = ` +
+
+ +
+`; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js new file mode 100644 index 0000000000000..4a463c7abbddf --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js @@ -0,0 +1,98 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { CreateIndexPatternWizard } from '../create_index_pattern_wizard'; + +jest.mock('../components/step_index_pattern', () => ({ StepIndexPattern: 'StepIndexPattern' })); +jest.mock('../components/step_time_field', () => ({ StepTimeField: 'StepTimeField' })); +jest.mock('../components/header', () => ({ Header: 'Header' })); +jest.mock('../components/loading_state', () => ({ LoadingState: 'LoadingState' })); +jest.mock('../components/empty_state', () => ({ EmptyState: 'EmptyState' })); +jest.mock('../lib/get_indices', () => ({ + getIndices: () => { + return [ + { name: 'kibana' }, + ]; + }, +})); + +const loadingDataDocUrl = ''; +const initialQuery = ''; +const services = { + es: {}, + indexPatterns: {}, + savedObjectsClient: {}, + config: {}, + kbnUrl: {}, + notify: {}, +}; + +describe('CreateIndexPatternWizard', () => { + it('should render step 1', async () => { + const component = shallow( + + ); + + // Allow the componentWillMount code to execute + // https://github.com/airbnb/enzyme/issues/450 + await component.update(); // Fire `componentWillMount()` + await component.update(); // Force update the component post async actions + + expect(component).toMatchSnapshot(); + }); + + it('should render step 2', async () => { + const component = shallow( + + ); + + // Allow the componentWillMount code to execute + // https://github.com/airbnb/enzyme/issues/450 + await component.update(); // Fire `componentWillMount()` + await component.update(); // Force update the component post async actions + + component.setState({ step: 2 }); + + expect(component).toMatchSnapshot(); + }); + + it('should render the loading state', async () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + it('should render the empty state', async () => { + const component = shallow( + + ); + + // Allow the componentWillMount code to execute + // https://github.com/airbnb/enzyme/issues/450 + await component.update(); // Fire `componentWillMount()` + await component.update(); // Force update the component post async actions + + // Remove all indices + component.setState({ allIndices: [] }); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js similarity index 58% rename from src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js rename to src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js index b78e8d725ef7c..4fa93d9034441 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/__tests__/index.test.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js @@ -3,9 +3,9 @@ const unmountComponentAtNode = jest.fn(); jest.doMock('react-dom', () => ({ render, unmountComponentAtNode })); -const { renderStepIndexPattern, destroyStepIndexPattern } = require('../index'); +const { renderCreateIndexPatternWizard, destroyCreateIndexPatternWizard } = require('../render'); -describe('StepIndexPatternRender', () => { +describe('CreateIndexPatternWizardRender', () => { beforeEach(() => { jest.spyOn(document, 'getElementById').mockImplementation(() => ({})); render.mockClear(); @@ -13,20 +13,24 @@ describe('StepIndexPatternRender', () => { }); it('should call render', () => { - renderStepIndexPattern( - [], + renderCreateIndexPatternWizard( '', - false, - {}, - {}, - () => {} + '', + { + es: {}, + indexPatterns: {}, + savedObjectsClient: {}, + config: {}, + kbnUrl: {}, + notify: {}, + } ); expect(render.mock.calls.length).toBe(1); }); it('should call unmountComponentAtNode', () => { - destroyStepIndexPattern(); + destroyCreateIndexPatternWizard(); expect(unmountComponentAtNode.mock.calls.length).toBe(1); }); }); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/angular_template.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/angular_template.html new file mode 100644 index 0000000000000..2eae681b6ae7d --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/angular_template.html @@ -0,0 +1,5 @@ + + +
+ + diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/__snapshots__/empty_state.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/__snapshots__/empty_state.test.js.snap new file mode 100644 index 0000000000000..e2e35c17454a3 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/__snapshots__/empty_state.test.js.snap @@ -0,0 +1,86 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EmptyState should render normally 1`] = ` + + + + + +

+ Couldn't find any Elasticsearch data +

+ + + + +

+ + You'll need to index some data into Elasticsearch before you can create an index pattern. + +   + + Learn how. + +

+ + + + + + Check for new data + + + + + + +`; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/empty_state.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/empty_state.test.js new file mode 100644 index 0000000000000..b0a8563dc3cc8 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/__tests__/empty_state.test.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { EmptyState } from '../empty_state'; +import { shallow } from 'enzyme'; + +describe('EmptyState', () => { + it('should render normally', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/empty_state.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/empty_state.js new file mode 100644 index 0000000000000..7c7facefc6de5 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/empty_state.js @@ -0,0 +1,52 @@ +import React from 'react'; + +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiText, + EuiTextColor, + EuiSpacer, + EuiLink, + EuiButton, +} from '@elastic/eui'; + +export const EmptyState = ({ + loadingDataDocUrl, +}) => ( + + + + + +

Couldn't find any Elasticsearch data

+ + + + +

+ + You'll need to index some data into Elasticsearch before you can create an index pattern. + +   + + Learn how. + +

+ + + + + + Check for new data + + + + + + +); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/index.js new file mode 100644 index 0000000000000..b84ee87d65da5 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/empty_state/index.js @@ -0,0 +1 @@ +export { EmptyState } from './empty_state'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap new file mode 100644 index 0000000000000..05f058875f8a4 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/__snapshots__/header.test.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Header should render normally 1`] = ` +
+ + +

+ Create index pattern +

+ + + + +

+ + Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations. + +

+ + + + + + + +
+`; + +exports[`Header should render without including system indices 1`] = ` +
+ + +

+ Create index pattern +

+ + + + +

+ + Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations. + +

+ + + + + + + +
+`; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js new file mode 100644 index 0000000000000..710ba3400aaec --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/__tests__/header.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Header } from '../header'; +import { shallow } from 'enzyme'; + +describe('Header', () => { + it('should render normally', () => { + const component = shallow( +
{}} + /> + ); + + expect(component).toMatchSnapshot(); + }); + + it('should render without including system indices', () => { + const component = shallow( +
{}} + /> + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/header.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/header.js new file mode 100644 index 0000000000000..38e9f6ceaae0d --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/header.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { + EuiSpacer, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiTextColor, + EuiSwitch, +} from '@elastic/eui'; + +export const Header = ({ + isIncludingSystemIndices, + onChangeIncludingSystemIndices, +}) => ( +
+ + +

Create index pattern

+ + + + +

+ + Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations. + +

+ + + + + + + +
+); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/index.js new file mode 100644 index 0000000000000..ddd9723152366 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/header/index.js @@ -0,0 +1 @@ +export { Header } from './header'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/__snapshots__/loading_state.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/__snapshots__/loading_state.test.js.snap new file mode 100644 index 0000000000000..a99f45d49ae9a --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/__snapshots__/loading_state.test.js.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LoadingState should render normally 1`] = ` + + + + + +

+ Checking for Elasticsearch data +

+ + + + +

+ + + Reticulating splines... + +

+ + + + +`; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/loading_state.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/loading_state.test.js new file mode 100644 index 0000000000000..0d1722c19099c --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/__tests__/loading_state.test.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { LoadingState } from '../loading_state'; +import { shallow } from 'enzyme'; + +describe('LoadingState', () => { + it('should render normally', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/index.js new file mode 100644 index 0000000000000..6a8fcf5121dd8 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/index.js @@ -0,0 +1 @@ +export { LoadingState } from './loading_state'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/loading_state.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/loading_state.js new file mode 100644 index 0000000000000..fd51507c7f56a --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/loading_state/loading_state.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiText, + EuiTitle, + EuiTextColor, + EuiSpacer, + EuiIcon, +} from '@elastic/eui'; + +export const LoadingState = ({ + +}) => ( + + + + + +

Checking for Elasticsearch data

+ + + + +

+ + + Reticulating splines... + +

+ + + + +); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/index.js index ff44e9c39c525..ba1c276015515 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/index.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_index_pattern/index.js @@ -1,36 +1 @@ -import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; -import { StepIndexPattern } from './step_index_pattern'; - -const INDEX_PATTERN_DOM_ELEMENT_ID = 'stepIndexPatternReact'; - -export function renderStepIndexPattern( - allIndices, - initialQuery, - isIncludingSystemIndices, - esService, - savedObjectsClient, - goToNextStep, -) { - const node = document.getElementById(INDEX_PATTERN_DOM_ELEMENT_ID); - if (!node) { - return; - } - - render( - , - node, - ); -} - -export function destroyStepIndexPattern() { - const node = document.getElementById(INDEX_PATTERN_DOM_ELEMENT_ID); - node && unmountComponentAtNode(node); -} +export { StepIndexPattern } from './step_index_pattern'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/index.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/index.test.js deleted file mode 100644 index 7775dc839a061..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/index.test.js +++ /dev/null @@ -1,30 +0,0 @@ -const render = jest.fn(); -const unmountComponentAtNode = jest.fn(); - -jest.doMock('react-dom', () => ({ render, unmountComponentAtNode })); - -const { renderStepTimeField, destroyStepTimeField } = require('../index'); - -describe('StepTimeFieldRender', () => { - beforeEach(() => { - jest.spyOn(document, 'getElementById').mockImplementation(() => ({})); - render.mockClear(); - unmountComponentAtNode.mockClear(); - }); - - it('should call render', () => { - renderStepTimeField( - '', - {}, - () => {}, - () => {}, - ); - - expect(render.mock.calls.length).toBe(1); - }); - - it('should call unmountComponentAtNode', () => { - destroyStepTimeField(); - expect(unmountComponentAtNode.mock.calls.length).toBe(1); - }); -}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/index.js index 1d4cca7a36b43..dfcffb0a5f929 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/index.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/index.js @@ -1,32 +1 @@ -import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; -import { StepTimeField } from './step_time_field'; - -const TIME_FIELD_DOM_ELEMENT_ID = 'stepTimeFieldReact'; - -export function renderStepTimeField( - indexPattern, - indexPatternsService, - goToPreviousStep, - createIndexPattern, -) { - const node = document.getElementById(TIME_FIELD_DOM_ELEMENT_ID); - if (!node) { - return; - } - - render( - , - node, - ); -} - -export function destroyStepTimeField() { - const node = document.getElementById(TIME_FIELD_DOM_ELEMENT_ID); - node && unmountComponentAtNode(node); -} +export { StepTimeField } from './step_time_field'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html deleted file mode 100644 index 8533106d98559..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html +++ /dev/null @@ -1,144 +0,0 @@ - - -
- -

- Create index pattern -

- -
- -
-
-
-

- Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations. -

-
-
- -
-
- -
-
-
- -
-
-
- -
- -
- -
-
-
- -
-

- Checking for Elasticsearch data -

-
-
-
- -
-
-

- Reticulating splines... -

-
-
-
- - -
-
-

- Couldn't find any Elasticsearch data -

-
-

- - You'll need to index some data into Elasticsearch before you can create an index pattern. - - - Learn how. - -

-
- -
-
-
-
-
- - -
- -
-
-
- - -
-
-
-
-
-
- - diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js index 6471730d78aa1..d2ce0a8e38e8f 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js @@ -1,257 +1,174 @@ -import _ from 'lodash'; -import { fatalError } from 'ui/notify'; -import { IndexPatternMissingIndices } from 'ui/errors'; -import 'ui/directives/validate_index_pattern'; -import 'ui/directives/auto_select_if_only_one'; -import 'ui/directives/documentation_href'; -import uiRoutes from 'ui/routes'; -import { uiModules } from 'ui/modules'; -import { SavedObjectsClientProvider } from 'ui/saved_objects'; -import template from './create_index_pattern_wizard.html'; -import { sendCreateIndexPatternRequest } from './send_create_index_pattern_request'; -import { renderStepIndexPattern, destroyStepIndexPattern } from './components/step_index_pattern'; -import { renderStepTimeField, destroyStepTimeField } from './components/step_time_field'; -import './create_index_pattern_wizard.less'; - -uiRoutes - .when('/management/kibana/index', { - template, - }); - -uiModules.get('apps/management') - .controller('managementIndicesCreate', function ( - $routeParams, - $scope, - $timeout, - config, - es, - indexPatterns, - kbnUrl, - Notifier, - Promise, - Private, - ) { - // This isn't ideal. We want to avoid searching for 20 indices - // then filtering out the majority of them because they are sysetm indices. - // We'd like to filter system indices out in the query - // so if we can accomplish that in the future, this logic can go away - const ESTIMATED_NUMBER_OF_SYSTEM_INDICES = 100; - const MAX_NUMBER_OF_MATCHING_INDICES = 20; - const MAX_SEARCH_SIZE = MAX_NUMBER_OF_MATCHING_INDICES + ESTIMATED_NUMBER_OF_SYSTEM_INDICES; - const notify = new Notifier(); - const savedObjectsClient = Private(SavedObjectsClientProvider); - - $scope.$on('$destroy', () => { - destroyStepIndexPattern(); - destroyStepTimeField(); +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +import { StepIndexPattern } from './components/step_index_pattern'; +import { StepTimeField } from './components/step_time_field'; +import { Header } from './components/header'; +import { LoadingState } from './components/loading_state'; +import { EmptyState } from './components/empty_state'; + +import { MAX_SEARCH_SIZE } from './constants'; +import { getIndices } from './lib/get_indices'; + +export class CreateIndexPatternWizard extends Component { + static propTypes = { + loadingDataDocUrl: PropTypes.string.isRequired, + initialQuery: PropTypes.string, + services: PropTypes.shape({ + es: PropTypes.object.isRequired, + indexPatterns: PropTypes.object.isRequired, + savedObjectsClient: PropTypes.object.isRequired, + config: PropTypes.object.isRequired, + kbnUrl: PropTypes.object.isRequired, + notify: PropTypes.object.isRequired, + }).isRequired, + } + + constructor(props) { + super(props); + this.state = { + step: 1, + indexPattern: '', + allIndices: [], + isInitiallyLoadingIndices: true, + isIncludingSystemIndices: false, + }; + } + + async componentWillMount() { + const { services } = this.props; + const allIndices = await getIndices(services.es, `*`, MAX_SEARCH_SIZE); + this.setState({ allIndices, isInitiallyLoadingIndices: false }); + } + + createIndexPattern = async (timeFieldName, indexPatternId) => { + const { services } = this.props; + const { indexPattern } = this.state; + + const emptyPattern = await services.indexPatterns.get(); + + Object.assign(emptyPattern, { + id: indexPatternId, + title: indexPattern, + timeFieldName, }); - // Configure the new index pattern we're going to create. - this.formValues = { - id: $routeParams.id ? decodeURIComponent($routeParams.id) : undefined, - name: '', - expandWildcard: false, - timeFieldOption: undefined, - }; + const createdId = await emptyPattern.create(); - // UI state. - this.timeFieldOptions = []; - this.wizardStep = 'indexPattern'; - this.isFetchingExistingIndices = true; - this.isFetchingMatchingIndices = false; - this.isFetchingTimeFieldOptions = false; - this.isCreatingIndexPattern = false; - this.doesIncludeSystemIndices = false; - let allIndices = []; - const matchingIndices = []; - const partialMatchingIndices = []; - this.allIndices = []; - this.matchingIndices = []; - this.partialMatchingIndices = []; - - function createReasonableWait() { - return new Promise(resolve => { - // Make every fetch take a set amount of time so the user gets some feedback that something - // is happening. - $timeout(() => { - resolve(); - }, 500); - }); + if (!services.config.get('defaultIndex')) { + services.config.set('defaultIndex', createdId); } - function getIndices(rawPattern, limit = MAX_SEARCH_SIZE) { - const pattern = rawPattern.trim(); - - // Searching for `*:` fails for CCS environments. The search request - // is worthless anyways as the we should only send a request - // for a specific query (where we do not append *) if there is at - // least a single character being searched for. - if (pattern === '*:') { - return []; - } - - const params = { - index: pattern, - ignore: [404], - body: { - size: 0, // no hits - aggs: { - indices: { - terms: { - field: '_index', - size: limit, - } - } - } - } - }; - - return es.search(params) - .then(response => { - if (!response || response.error || !response.aggregations) { - return []; - } - - return _.sortBy(response.aggregations.indices.buckets.map(bucket => { - return { - name: bucket.key - }; - }), 'name'); - }) - .catch(err => { - const type = _.get(err, 'body.error.caused_by.type'); - if (type === 'index_not_found_exception') { - // This happens in a CSS environment when the controlling node returns a 500 even though the data - // nodes returned a 404. Remove this when/if this is handled: https://github.com/elastic/elasticsearch/issues/27461 - return []; - } - throw err; - }); - } + services.indexPatterns.cache.clear(createdId); + services.kbnUrl.change(`/management/kibana/indices/${createdId}`); + } - const whiteListIndices = indices => { - if (!indices) { - return indices; - } + goToTimeFieldStep = (indexPattern) => { + this.setState({ step: 2, indexPattern }); + } - const acceptableIndices = this.doesIncludeSystemIndices - ? indices - // All system indices begin with a period. - : indices.filter(index => !index.name.startsWith('.')); + goToIndexPatternStep = () => { + this.setState({ step: 1 }); + } - return acceptableIndices.slice(0, MAX_NUMBER_OF_MATCHING_INDICES); - }; + onChangeIncludingSystemIndices = () => { + this.setState(state => ({ + isIncludingSystemIndices: !state.isIncludingSystemIndices, + })); + } - const updateWhiteListedIndices = () => { - this.allIndices = whiteListIndices(allIndices); - this.matchingIndices = whiteListIndices(matchingIndices); - this.partialMatchingIndices = whiteListIndices(partialMatchingIndices); - }; + renderHeader() { + const { isIncludingSystemIndices } = this.state; - this.onIncludeSystemIndicesChange = () => { - updateWhiteListedIndices(); - this.renderStepIndexPatternReact(); - }; + return ( +
+ ); + } - this.fetchExistingIndices = () => { - this.isFetchingExistingIndices = true; - const allExistingLocalIndicesPattern = '*'; - - Promise.all([ - getIndices(allExistingLocalIndicesPattern), - createReasonableWait() - ]) - .then(([allIndicesResponse]) => { - // Cache all indices. - allIndices = allIndicesResponse; - updateWhiteListedIndices(); - this.isFetchingExistingIndices = false; - if (allIndices.length) { - this.renderStepIndexPatternReact(); - } - }).catch(error => { - notify.error(error); - this.isFetchingExistingIndices = false; - }); - }; + renderInitialLoadingState() { + const { isInitiallyLoadingIndices } = this.state; + + if (!isInitiallyLoadingIndices) { + return null; + } - this.isSystemIndicesCheckBoxVisible = () => ( - this.wizardStep === 'indexPattern' + return ( + ); + } - this.goToIndexPatternStep = () => { - this.wizardStep = 'indexPattern'; - this.renderStepIndexPatternReact(); - }; + renderInitialEmptyState() { + const { allIndices, isInitiallyLoadingIndices } = this.state; + const { loadingDataDocUrl } = this.props; - this.renderStepIndexPatternReact = () => { - $scope.$$postDigest(() => renderStepIndexPattern( - allIndices, - this.formValues.name, - this.doesIncludeSystemIndices, - es, - savedObjectsClient, - query => { - destroyStepIndexPattern(); - this.formValues.name = query; - this.goToTimeFieldStep(); - $scope.$apply(); - } - )); - }; + if (allIndices.length > 0 || isInitiallyLoadingIndices) { + return null; + } - this.renderStepTimeFieldReact = () => { - $scope.$$postDigest(() => renderStepTimeField( - this.formValues.name, - indexPatterns, - () => { - destroyStepTimeField(); - this.goToIndexPatternStep(); - $scope.$apply(); - }, - this.createIndexPattern - )); - }; + return ( + + ); + } + + renderStepOne() { + const { + allIndices, + isInitiallyLoadingIndices, + isIncludingSystemIndices, + step, + indexPattern, + } = this.state; + + if (isInitiallyLoadingIndices || step !== 1) { + return null; + } - this.goToTimeFieldStep = () => { - this.wizardStep = 'timeField'; - this.renderStepTimeFieldReact(); - }; + const { services, initialQuery } = this.props; + + return ( + + ); + } + + renderStepTwo() { + const { step, indexPattern } = this.state; + const { services } = this.props; + + if (step !== 2) { + return null; + } - this.hasIndices = () => ( - this.allIndices.length + return ( + + ); + } + + render() { + return ( +
+ {this.renderHeader()} + {this.renderInitialLoadingState()} + {this.renderInitialEmptyState()} + {this.renderStepOne()} + {this.renderStepTwo()} +
); + } +} - this.createIndexPattern = (timeFieldName, id) => { - this.isCreatingIndexPattern = true; - - const { name } = this.formValues; - - sendCreateIndexPatternRequest(indexPatterns, { - id, - name, - timeFieldName: timeFieldName === '-1' ? null : timeFieldName, - }).then(createdId => { - if (!createdId) { - return; - } - - if (!config.get('defaultIndex')) { - config.set('defaultIndex', createdId); - } - - indexPatterns.cache.clear(createdId); - kbnUrl.change(`/management/kibana/indices/${createdId}`); - }).catch(err => { - if (err instanceof IndexPatternMissingIndices) { - return notify.error(`Couldn't locate any indices matching that pattern. Please add the index to Elasticsearch`); - } - - fatalError(err); - }).finally(() => { - this.isCreatingIndexPattern = false; - }); - }; - this.fetchExistingIndices(); - }); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less deleted file mode 100644 index ce9d492978734..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less +++ /dev/null @@ -1,4 +0,0 @@ -.createIndexPatternPrompt { - width: 100%; - max-width: 600px; -} diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js index e6b701ce12c25..662bc55b4b4fd 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js @@ -1 +1,36 @@ -import './create_index_pattern_wizard'; +import { SavedObjectsClientProvider } from 'ui/saved_objects'; +import uiRoutes from 'ui/routes'; +import angularTemplate from './angular_template.html'; +import 'ui/index_patterns'; +import { documentationLinks } from 'ui/documentation_links'; + +import { renderCreateIndexPatternWizard, destroyCreateIndexPatternWizard } from './render'; + +uiRoutes.when('/management/kibana/index', { + template: angularTemplate, + controller: function ($scope, $injector) { + // Wait for the directives to execute + $scope.$$postDigest(() => { + const Notifier = $injector.get('Notifier'); + const $routeParams = $injector.get('$routeParams'); + const services = { + config: $injector.get('config'), + es: $injector.get('es'), + indexPatterns: $injector.get('indexPatterns'), + savedObjectsClient: $injector.get('Private')(SavedObjectsClientProvider), + kbnUrl: $injector.get('kbnUrl'), + notify: new Notifier(), + }; + + const initialQuery = $routeParams.id ? decodeURIComponent($routeParams.id) : undefined; + + renderCreateIndexPatternWizard( + documentationLinks.indexPatterns.loadingData, + initialQuery, + services + ); + }); + + $scope.$on('$destroy', destroyCreateIndexPatternWizard); + } +}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/render.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/render.js new file mode 100644 index 0000000000000..048a7493a23ef --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/render.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { CreateIndexPatternWizard } from './create_index_pattern_wizard'; + +const CREATE_INDEX_PATTERN_DOM_ELEMENT_ID = 'createIndexPatternReact'; + +export function renderCreateIndexPatternWizard( + loadingDataDocUrl, + initialQuery, + services, +) { + const node = document.getElementById(CREATE_INDEX_PATTERN_DOM_ELEMENT_ID); + if (!node) { + return; + } + + render( + , + node, + ); +} + +export function destroyCreateIndexPatternWizard() { + const node = document.getElementById(CREATE_INDEX_PATTERN_DOM_ELEMENT_ID); + node && unmountComponentAtNode(node); +} diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/send_create_index_pattern_request.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/send_create_index_pattern_request.js deleted file mode 100644 index 7e62ba6a15251..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/send_create_index_pattern_request.js +++ /dev/null @@ -1,18 +0,0 @@ -export function sendCreateIndexPatternRequest(indexPatterns, { - id, - name, - timeFieldName, -}) { - // get an empty indexPattern to start - return indexPatterns.get() - .then(indexPattern => { - Object.assign(indexPattern, { - id, - title: name, - timeFieldName, - }); - - // fetch the fields - return indexPattern.create(); - }); -} diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html deleted file mode 100644 index 1cd852c7210a3..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html +++ /dev/null @@ -1,213 +0,0 @@ -
-

- Step 2 of 2: Configure settings -

- -
- -

- You've defined {{stepTimeField.indexPatternName}} as your index pattern. Now you can specify some settings before we create it. -

- -
- -
-
-
-
- -
- -
- - Refresh - - -
-
-
-
- -
- - - - - - - - - - - -

- The indices which match this index pattern don't contain any time fields. -

-
- -
- The Time Filter will use this field to filter your data by time. -
- -
- You can choose not to have a time field, but you will not be able to narrow down your data by a time range. -
-
- - - - -
-
-
- -
-
- -
-
- - Kibana will provide a unique identifier for each index pattern. - If you do not want to use this unique ID, enter a custom one. - -
-
- -
- - -
-
- -
-
- -
-
-
From c62c2f271707e7c5c630d388c0d7dd7407fab123 Mon Sep 17 00:00:00 2001 From: Chris Roberson Date: Mon, 5 Feb 2018 10:19:02 -0500 Subject: [PATCH 2/2] PR feedback --- .../__tests__/create_index_pattern_wizard.test.js | 1 - .../create_index_pattern_wizard/__tests__/render.test.js | 1 - .../__tests__/__snapshots__/step_time_field.test.js.snap | 8 ++++---- .../components/step_time_field/step_time_field.js | 4 ++-- .../create_index_pattern_wizard.js | 1 - .../sections/indices/create_index_pattern_wizard/index.js | 2 -- 6 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js index 4a463c7abbddf..d01f61f440edc 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/create_index_pattern_wizard.test.js @@ -24,7 +24,6 @@ const services = { savedObjectsClient: {}, config: {}, kbnUrl: {}, - notify: {}, }; describe('CreateIndexPatternWizard', () => { diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js index 4fa93d9034441..d8b6d2952aad3 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/__tests__/render.test.js @@ -22,7 +22,6 @@ describe('CreateIndexPatternWizardRender', () => { savedObjectsClient: {}, config: {}, kbnUrl: {}, - notify: {}, } ); diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/__snapshots__/step_time_field.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/__snapshots__/step_time_field.test.js.snap index ecb93351aa2ca..f0d5fb10cf972 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/__snapshots__/step_time_field.test.js.snap +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/__tests__/__snapshots__/step_time_field.test.js.snap @@ -18,15 +18,15 @@ exports[`StepTimeField should render a loading state when creating the index pat component="div" grow={false} > - - Creating index pattern... - + - + + Creating index pattern... + diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/step_time_field.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/step_time_field.js index 269b26daa494d..53154c85f25ac 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/step_time_field.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/components/step_time_field/step_time_field.js @@ -87,10 +87,10 @@ export class StepTimeField extends Component { - Creating index pattern... + - + Creating index pattern... diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js index d2ce0a8e38e8f..01315422a084c 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js @@ -20,7 +20,6 @@ export class CreateIndexPatternWizard extends Component { savedObjectsClient: PropTypes.object.isRequired, config: PropTypes.object.isRequired, kbnUrl: PropTypes.object.isRequired, - notify: PropTypes.object.isRequired, }).isRequired, } diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js index 662bc55b4b4fd..8fefb5ee50089 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js +++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/index.js @@ -11,7 +11,6 @@ uiRoutes.when('/management/kibana/index', { controller: function ($scope, $injector) { // Wait for the directives to execute $scope.$$postDigest(() => { - const Notifier = $injector.get('Notifier'); const $routeParams = $injector.get('$routeParams'); const services = { config: $injector.get('config'), @@ -19,7 +18,6 @@ uiRoutes.when('/management/kibana/index', { indexPatterns: $injector.get('indexPatterns'), savedObjectsClient: $injector.get('Private')(SavedObjectsClientProvider), kbnUrl: $injector.get('kbnUrl'), - notify: new Notifier(), }; const initialQuery = $routeParams.id ? decodeURIComponent($routeParams.id) : undefined;