diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap index e80f3de86d401..a53f4d7f609cb 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/__tests__/__snapshots__/scripted_field_table.test.js.snap @@ -2,7 +2,9 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = `
-
+
- - Add scripted field - @@ -27,52 +24,33 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = ` "getScriptedFields": [Function], } } - model={ - Object { - "criteria": Object { - "page": Object { - "index": 0, - "size": 10, - }, - "sort": Object { - "direction": "asc", - "field": "name", - }, + items={ + Array [ + Object { + "lang": "painless", + "name": "ScriptedField", + "script": "x++", }, - "data": Object { - "records": Array [ - Object { - "lang": "painless", - "name": "ScriptedField", - "script": "x++", - }, - Object { - "lang": "painless", - "name": "JustATest", - "script": "z++", - }, - ], - "totalRecordCount": 2, + Object { + "lang": "painless", + "name": "JustATest", + "script": "z++", }, - } + ] } - onDataCriteriaChange={[Function]} />
`; exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
-
+
- - Add scripted field - @@ -84,65 +62,53 @@ exports[`ScriptedFieldsTable should filter based on the query bar 1`] = ` "getScriptedFields": [Function], } } - model={ - Object { - "criteria": Object { - "page": Object { - "index": 0, - "size": 10, - }, - "sort": Object { - "direction": "asc", - "field": "name", - }, - }, - "data": Object { - "records": Array [ - Object { - "lang": "painless", - "name": "JustATest", - "script": "z++", - }, - ], - "totalRecordCount": 1, + items={ + Array [ + Object { + "lang": "painless", + "name": "JustATest", + "script": "z++", }, - } + ] } - onDataCriteriaChange={[Function]} />
`; exports[`ScriptedFieldsTable should hide the table if there are no scripted fields 1`] = `
-
+
- - Add scripted field - + `; exports[`ScriptedFieldsTable should render normally 1`] = `
-
+
- - Add scripted field - @@ -154,52 +120,33 @@ exports[`ScriptedFieldsTable should render normally 1`] = ` "getScriptedFields": [Function], } } - model={ - Object { - "criteria": Object { - "page": Object { - "index": 0, - "size": 10, - }, - "sort": Object { - "direction": "asc", - "field": "name", - }, + items={ + Array [ + Object { + "lang": "painless", + "name": "ScriptedField", + "script": "x++", }, - "data": Object { - "records": Array [ - Object { - "lang": "painless", - "name": "ScriptedField", - "script": "x++", - }, - Object { - "lang": "painless", - "name": "JustATest", - "script": "z++", - }, - ], - "totalRecordCount": 2, + Object { + "lang": "painless", + "name": "JustATest", + "script": "z++", }, - } + ] } - onDataCriteriaChange={[Function]} />
`; exports[`ScriptedFieldsTable should show a delete modal 1`] = `
-
+
- - Add scripted field - @@ -211,36 +158,20 @@ exports[`ScriptedFieldsTable should show a delete modal 1`] = ` "getScriptedFields": [Function], } } - model={ - Object { - "criteria": Object { - "page": Object { - "index": 0, - "size": 10, - }, - "sort": Object { - "direction": "asc", - "field": "name", - }, + items={ + Array [ + Object { + "lang": "painless", + "name": "ScriptedField", + "script": "x++", }, - "data": Object { - "records": Array [ - Object { - "lang": "painless", - "name": "ScriptedField", - "script": "x++", - }, - Object { - "lang": "painless", - "name": "JustATest", - "script": "z++", - }, - ], - "totalRecordCount": 2, + Object { + "lang": "painless", + "name": "JustATest", + "script": "z++", }, - } + ] } - onDataCriteriaChange={[Function]} /> ({ - EuiButton: 'eui-button', - EuiTableOfRecords: 'eui-table-of-records', EuiTitle: 'eui-title', EuiText: 'eui-text', - EuiButton: 'eui-button', EuiHorizontalRule: 'eui-horizontal-rule', EuiSpacer: 'eui-spacer', EuiCallOut: 'eui-call-out', @@ -42,7 +39,7 @@ jest.mock('ui/documentation_links', () => ({ const helpers = { redirectToRoute: () => {}, - getRouteHref: () => {}, + getRouteHref: () => '#', }; const indexPattern = { diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap index 546262f62f45a..084b4521499b4 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/__snapshots__/header.test.js.snap @@ -1,21 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Header should render normally 1`] = ` -
- + -

- Scripted fields -

- - -

- You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields. -

- - -
+ +

+ Scripted fields +

+ + +

+ You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields. +

+ + + + + Add scripted field + + + `; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js index aa668eef621fa..15dcced2f1baa 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/__tests__/header.test.js @@ -6,7 +6,7 @@ import { Header } from '../header'; describe('Header', () => { it('should render normally', async () => { const component = shallow( -
+
); expect(component).toMatchSnapshot(); diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/header.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/header.js index 9227883a6a034..b7de4b0494519 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/header.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/header/header.js @@ -1,22 +1,39 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { - EuiTitle, + EuiButton, + EuiFlexGroup, + EuiFlexItem, EuiText, - EuiSpacer, + EuiTitle, } from '@elastic/eui'; -export const Header = () => ( -
- -

Scripted fields

- - -

- You can use scripted fields in visualizations and display them in your documents. - However, you cannot search scripted fields. -

- - -
+export const Header = ({ addScriptedFieldUrl }) => ( + + + +

Scripted fields

+ + +

+ You can use scripted fields in visualizations and display them in your documents. + However, you cannot search scripted fields. +

+ + + + + + Add scripted field + + + ); + +Header.propTypes = { + addScriptedFieldUrl: PropTypes.string.isRequired, +}; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/index.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/index.js new file mode 100644 index 0000000000000..1782035e68d5d --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/index.js @@ -0,0 +1,3 @@ +export { Table } from './table'; +export { Header } from './header'; +export { CallOuts } from './call_outs'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap index 1d1485a56f7e4..1092e0d756f1d 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap @@ -1,94 +1,77 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Table should render normally 1`] = ` - `; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/table.test.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/table.test.js index 02a2e26287868..49c4472278aa7 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/table.test.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/table.test.js @@ -13,32 +13,17 @@ const indexPattern = { } }; -const model = { - data: { - records: [{ id: 1, name: 'Elastic' }], - totalRecordCount: 1, - }, - criteria: { - page: { - index: 0, - size: 10, - }, - sort: { - field: 'name', - direction: 'asc' - }, - } -}; +const items = [{ id: 1, name: 'Elastic' }]; describe('Table', () => { it('should render normally', async () => { const component = shallow(
{}} deleteField={() => {}} - onDataCriteriaChange={() => {}} + onChange={() => {}} /> ); @@ -49,14 +34,14 @@ describe('Table', () => { const component = shallow(
{}} deleteField={() => {}} - onDataCriteriaChange={() => {}} + onChange={() => {}} /> ); - const formatTableCell = shallow(component.prop('config').columns[3].render('Elastic')); + const formatTableCell = shallow(component.prop('columns')[3].render('Elastic')); expect(formatTableCell).toMatchSnapshot(); }); @@ -66,15 +51,15 @@ describe('Table', () => { const component = shallow(
{}} - onDataCriteriaChange={() => {}} + onChange={() => {}} /> ); // Click the delete button - component.prop('config').columns[4].actions[0].onClick(); + component.prop('columns')[4].actions[0].onClick(); expect(editField).toBeCalled(); }); @@ -84,15 +69,15 @@ describe('Table', () => { const component = shallow(
{}} deleteField={deleteField} - onDataCriteriaChange={() => {}} + onChange={() => {}} /> ); // Click the delete button - component.prop('config').columns[4].actions[1].onClick(); + component.prop('columns')[4].actions[1].onClick(); expect(deleteField).toBeCalled(); }); diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js index d7d0585724cf4..8e4d39775edf0 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js @@ -2,31 +2,15 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { - EuiTableOfRecords + EuiInMemoryTable, } from '@elastic/eui'; export class Table extends PureComponent { static propTypes = { indexPattern: PropTypes.object.isRequired, - model: PropTypes.shape({ - data: PropTypes.shape({ - records: PropTypes.array.isRequired, - totalRecordCount: PropTypes.number.isRequired, - }).isRequired, - criteria: PropTypes.shape({ - page: PropTypes.shape({ - index: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - }).isRequired, - sort: PropTypes.shape({ - field: PropTypes.string.isRequired, - direction: PropTypes.string.isRequired, - }).isRequired, - }).isRequired, - }), + items: PropTypes.array.isRequired, editField: PropTypes.func.isRequired, deleteField: PropTypes.func.isRequired, - onDataCriteriaChange: PropTypes.func.isRequired, } renderFormatCell = (value) => { @@ -41,79 +25,71 @@ export class Table extends PureComponent { ); } - getTableConfig() { - const { editField, deleteField, onDataCriteriaChange } = this.props; + render() { + const { + items, + editField, + deleteField, + } = this.props; - return { - recordId: 'name', - columns: [ - { - field: 'displayName', - name: 'Name', - description: `Name of the field`, - dataType: 'string', - sortable: true, - }, - { - field: 'lang', - name: 'Lang', - description: `Language used for the field`, - dataType: 'string', - sortable: true, - render: value => { - return ( - - {value} - - ); - } - }, - { - field: 'script', - name: 'Script', - description: `Script for the field`, - dataType: 'string', - sortable: true, - }, - { - field: 'name', - name: 'Format', - description: `Format used for the field`, - render: this.renderFormatCell, - sortable: false, - }, - { - name: '', - actions: [ - { - name: 'Edit', - description: 'Edit this field', - icon: 'pencil', - onClick: editField, - }, - { - name: 'Delete', - description: 'Delete this field', - icon: 'trash', - color: 'danger', - onClick: deleteField, - }, - ] - } - ], - pagination: { - pageSizeOptions: [5, 10, 25, 50] - }, - selection: undefined, - onDataCriteriaChange, - }; - } + const columns = [{ + field: 'displayName', + name: 'Name', + description: `Name of the field`, + dataType: 'string', + sortable: true, + }, { + field: 'lang', + name: 'Lang', + description: `Language used for the field`, + dataType: 'string', + sortable: true, + render: value => { + return ( + + {value} + + ); + } + }, { + field: 'script', + name: 'Script', + description: `Script for the field`, + dataType: 'string', + sortable: true, + }, { + field: 'name', + name: 'Format', + description: `Format used for the field`, + render: this.renderFormatCell, + sortable: false, + }, { + name: '', + actions: [{ + name: 'Edit', + description: 'Edit this field', + icon: 'pencil', + onClick: editField, + }, { + name: 'Delete', + description: 'Delete this field', + icon: 'trash', + color: 'danger', + onClick: deleteField, + }], + }]; - render() { - const { model } = this.props; + const pagination = { + pageSizeOptions: [5, 10, 25, 50], + }; return ( - + ); } } diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/table.test.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/table.test.js deleted file mode 100644 index 69eaadae63432..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/table.test.js +++ /dev/null @@ -1,78 +0,0 @@ -import { - getTableOfRecordsState, -} from '../table'; - -jest.mock('@elastic/eui', () => ({ - Comparators: { - property: () => {}, - default: () => {}, - }, -})); - -const items = [ - { name: 'Kibana' }, - { name: 'Elasticsearch' }, - { name: 'Logstash' }, -]; - -describe('getTableOfRecordsState', () => { - it('should return a TableOfRecords model', () => { - const model = getTableOfRecordsState(items, { - page: { - index: 0, - size: 10, - }, - sort: { - field: 'name', - direction: 'asc', - }, - }); - - expect(model).toEqual({ - data: { - records: items, - totalRecordCount: items.length, - }, - criteria: { - page: { - index: 0, - size: 10 - }, - sort: { - field: 'name', - direction: 'asc' - }, - } - }); - }); - - it('should paginate', () => { - const model = getTableOfRecordsState(items, { - page: { - index: 1, - size: 1, - }, - sort: { - field: 'name', - direction: 'asc', - }, - }); - - expect(model).toEqual({ - data: { - records: [{ name: 'Elasticsearch' }], - totalRecordCount: items.length, - }, - criteria: { - page: { - index: 1, - size: 1 - }, - sort: { - field: 'name', - direction: 'asc' - }, - } - }); - }); -}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/index.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/index.js deleted file mode 100644 index 01643f0f57fd8..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './table'; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/table.js deleted file mode 100644 index 707187312103b..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/table.js +++ /dev/null @@ -1,61 +0,0 @@ -import { - Comparators -} from '@elastic/eui'; - -export const getPage = (data, pageIndex, pageSize, sort) => { - let list = data; - if (sort) { - list = data.sort(Comparators.property(sort.field, Comparators.default(sort.direction))); - } - if (!pageIndex && !pageSize) { - return { - index: 0, - size: list.length, - items: list, - totalRecordCount: list.length - }; - } - const from = pageIndex * pageSize; - const items = list.slice(from, Math.min(from + pageSize, list.length)); - return { - index: pageIndex, - size: pageSize, - items, - totalRecordCount: list.length - }; -}; - -export const getTableOfRecordsState = (items, criteria) => { - const page = getPage(items, criteria.page.index, criteria.page.size, criteria.sort); - - return { - data: { - records: page.items, - totalRecordCount: page.totalRecordCount, - }, - criteria: { - page: { - index: page.index, - size: page.size - }, - sort: criteria.sort, - } - }; -}; - -export const DEFAULT_TABLE_OF_RECORDS_STATE = { - data: { - records: [], - totalRecordCount: 0, - }, - criteria: { - page: { - index: 0, - size: 10, - }, - sort: { - field: 'name', - direction: 'asc', - } - } -}; diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js index 1104075f54c4c..d807828e66259 100644 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/scripted_fields_table.js @@ -4,18 +4,17 @@ import { getSupportedScriptingLanguages, getDeprecatedScriptingLanguages } from import { documentationLinks } from 'ui/documentation_links'; import { - EuiButton, EuiSpacer, EuiOverlayMask, EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON, } from '@elastic/eui'; -import { Table } from './components/table'; -import { Header } from './components/header'; -import { CallOuts } from './components/call_outs'; -import { getTableOfRecordsState, DEFAULT_TABLE_OF_RECORDS_STATE } from './lib'; - +import { + Table, + Header, + CallOuts, +} from './components'; export class ScriptedFieldsTable extends Component { static propTypes = { @@ -37,7 +36,6 @@ export class ScriptedFieldsTable extends Component { fieldToDelete: undefined, isDeleteConfirmationModalVisible: false, fields: [], - ...DEFAULT_TABLE_OF_RECORDS_STATE, }; } @@ -61,34 +59,31 @@ export class ScriptedFieldsTable extends Component { this.setState({ fields, deprecatedLangsInUse, - ...this.computeTableState(this.state.criteria, this.props, fields) }); } - onDataCriteriaChange = criteria => { - this.setState(this.computeTableState(criteria)); - } + getFilteredItems = () => { + const { fields } = this.state; + const { fieldFilter, scriptedFieldLanguageFilter } = this.props; - componentWillReceiveProps(nextProps) { - if (this.props.fieldFilter !== nextProps.fieldFilter) { - this.setState(this.computeTableState(this.state.criteria, nextProps)); - } - if (this.props.scriptedFieldLanguageFilter !== nextProps.scriptedFieldLanguageFilter) { - this.setState(this.computeTableState(this.state.criteria, nextProps)); - } - } + let languageFilteredFields = fields; - computeTableState(criteria, props = this.props, fields = this.state.fields) { - let items = fields; - if (props.fieldFilter) { - const fieldFilter = props.fieldFilter.toLowerCase(); - items = items.filter(field => field.name.toLowerCase().includes(fieldFilter)); + if (scriptedFieldLanguageFilter) { + languageFilteredFields = fields.filter( + field => field.lang === this.props.scriptedFieldLanguageFilter + ); } - if (props.scriptedFieldLanguageFilter) { - items = items.filter(field => field.lang === props.scriptedFieldLanguageFilter); + + let filteredFields = languageFilteredFields; + + if (fieldFilter) { + const normalizedFieldFilter = this.props.fieldFilter.toLowerCase(); + filteredFields = languageFilteredFields.filter( + field => field.name.toLowerCase().includes(normalizedFieldFilter) + ); } - return getTableOfRecordsState(items, criteria); + return filteredFields; } renderCallOuts() { @@ -147,44 +142,23 @@ export class ScriptedFieldsTable extends Component { indexPattern, } = this.props; - const { - data, - criteria: { - page, - sort, - }, - fields, - } = this.state; - - const model = { - data, - criteria: { - page, - sort, - }, - }; + const items = this.getFilteredItems(); return (
-
+
+ {this.renderCallOuts()} - - Add scripted field - + - { fields.length > 0 ? -
this.props.helpers.redirectToRoute(field, 'edit')} - deleteField={this.startDeleteField} - onDataCriteriaChange={this.onDataCriteriaChange} - /> - : null - } + +
this.props.helpers.redirectToRoute(field, 'edit')} + deleteField={this.startDeleteField} + /> + {this.renderDeleteConfirmationModal()} );