From 63cb300e33b639d43380e7063505918e8d580191 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 23 Feb 2018 15:49:54 -0800 Subject: [PATCH 1/4] Convert EuiTableOfRecords to EuiBasicTable in scripted fields table. --- .../scripted_field_table.test.js.snap | 213 +++++++----------- .../__tests__/scripted_field_table.test.js | 4 +- .../__snapshots__/header.test.js.snap | 56 +++-- .../header/__tests__/header.test.js | 2 +- .../components/header/header.js | 47 ++-- .../scripted_fields_table/components/index.js | 3 + .../__snapshots__/table.test.js.snap | 155 ++++++------- .../components/table/__tests__/table.test.js | 64 +++--- .../components/table/table.js | 184 ++++++++------- .../lib/__tests__/get_items_on_page.test.js | 47 ++++ .../lib/__tests__/table.test.js | 78 ------- .../lib/get_items_on_page.js | 20 ++ .../scripted_fields_table/lib/index.js | 2 +- .../scripted_fields_table/lib/table.js | 61 ----- .../scripted_fields_table.js | 91 ++++---- 15 files changed, 480 insertions(+), 547 deletions(-) create mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/index.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/table.test.js create mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/table.js 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..b4c4015ef0c85 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,39 @@ 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", - }, + itemsOnPage={ + 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]} + onChange={[Function]} + pageIndex={0} + pageSize={10} + sortDirection="asc" + sortField="name" + totalItemCount={3} />
`; exports[`ScriptedFieldsTable should filter based on the query bar 1`] = `
-
+
- - Add scripted field - @@ -84,47 +68,34 @@ 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, + itemsOnPage={ + Array [ + Object { + "lang": "painless", + "name": "JustATest", + "script": "z++", }, - } + ] } - onDataCriteriaChange={[Function]} + onChange={[Function]} + pageIndex={0} + pageSize={10} + sortDirection="asc" + sortField="name" + totalItemCount={2} />
`; exports[`ScriptedFieldsTable should hide the table if there are no scripted fields 1`] = `
-
+
- - Add scripted field - @@ -133,16 +104,13 @@ exports[`ScriptedFieldsTable should hide the table if there are no scripted fiel exports[`ScriptedFieldsTable should render normally 1`] = `
-
+
- - Add scripted field - @@ -154,52 +122,39 @@ exports[`ScriptedFieldsTable should render normally 1`] = ` "getScriptedFields": [Function], } } - model={ - Object { - "criteria": Object { - "page": Object { - "index": 0, - "size": 10, - }, - "sort": Object { - "direction": "asc", - "field": "name", - }, + itemsOnPage={ + 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]} + onChange={[Function]} + pageIndex={0} + pageSize={10} + sortDirection="asc" + sortField="name" + totalItemCount={2} />
`; exports[`ScriptedFieldsTable should show a delete modal 1`] = `
-
+
- - Add scripted field - @@ -211,36 +166,26 @@ 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", - }, + itemsOnPage={ + 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]} + onChange={[Function]} + pageIndex={0} + pageSize={10} + sortDirection="asc" + sortField="name" + totalItemCount={2} /> ({ EuiButton: 'eui-button', - EuiTableOfRecords: 'eui-table-of-records', + EuiBasicTable: 'eui-basic-table', EuiTitle: 'eui-title', EuiText: 'eui-text', EuiButton: 'eui-button', @@ -42,7 +42,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..0cf95e6586489 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,91 +1,86 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Table should render normally 1`] = ` - { it('should render normally', async () => { const component = shallow( {}} deleteField={() => {}} - onDataCriteriaChange={() => {}} + onChange={() => {}} /> ); @@ -49,14 +44,19 @@ 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 +66,20 @@ 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 +89,20 @@ 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..9eff63dc2d115 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,33 +2,37 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { - EuiTableOfRecords + EuiBasicTable } 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, - }), + itemsOnPage: PropTypes.array.isRequired, + totalItemCount: PropTypes.number.isRequired, + pageIndex: PropTypes.number.isRequired, + pageSize: PropTypes.number.isRequired, + sortField: PropTypes.string.isRequired, + sortDirection: PropTypes.string.isRequired, editField: PropTypes.func.isRequired, deleteField: PropTypes.func.isRequired, - onDataCriteriaChange: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, } + onChange = ({ page = {}, sort = {} }) => { + const { + index: pageIndex, + size: pageSize, + } = page; + + const { + field: sortField, + direction: sortDirection, + } = sort; + + this.props.onChange(pageIndex, pageSize, sortField, sortDirection); + }; + renderFormatCell = (value) => { const { indexPattern } = this.props; @@ -41,79 +45,87 @@ export class Table extends PureComponent { ); } - getTableConfig() { - const { editField, deleteField, onDataCriteriaChange } = this.props; + render() { + const { + itemsOnPage, + totalItemCount, + pageIndex, + pageSize, + sortField, + sortDirection, + 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, + }], + }]; + + const pagination = { + pageIndex, + pageSize, + totalItemCount, + pageSizeOptions: [5, 10, 25, 50], }; - } - render() { - const { model } = this.props; + const sorting = { + sort: { + field: sortField, + direction: sortDirection, + }, + }; return ( - + ); } } diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js new file mode 100644 index 0000000000000..8654bb7742ca0 --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js @@ -0,0 +1,47 @@ +import { + getItemsOnPage, +} from '..'; + +const items = [ + { name: 'Kibana' }, + { name: 'Elasticsearch' }, + { name: 'Logstash' }, +]; + +describe('getItemsOnPage', () => { + describe('by default', () => { + it('returns the same items which were provided', () => { + const itemsOnPage = getItemsOnPage(items); + expect(itemsOnPage).toEqual(itemsOnPage); + }); + }); + + describe('with page arguments', () => { + it('returns the items defined by the page arguments', () => { + const pageIndex = 2; + const pageSize = 1; + const itemsOnPage = getItemsOnPage(items, pageIndex, pageSize); + expect(itemsOnPage).toEqual([ items[2] ]); + }); + }); + + describe('with sort arguments', () => { + it('returns the items defined by the sort arguments', () => { + const sortField = 'name'; + const sortDirection = 'desc'; + const itemsOnPage = getItemsOnPage(items, undefined, undefined, sortField, sortDirection); + expect(itemsOnPage).toEqual([ items[2], items[0], items[1] ]); + }); + }); + + describe('with page and sort arguments', () => { + it('returns the items defined by the page and sort arguments', () => { + const pageIndex = 0; + const pageSize = 2; + const sortField = 'name'; + const sortDirection = 'desc'; + const itemsOnPage = getItemsOnPage(items, pageIndex, pageSize, sortField, sortDirection); + expect(itemsOnPage).toEqual([ items[2], items[0] ]); + }); + }); +}); 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/get_items_on_page.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js new file mode 100644 index 0000000000000..f2ff5fa5c4f1b --- /dev/null +++ b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js @@ -0,0 +1,20 @@ +import { + Comparators +} from '@elastic/eui'; + +export const getItemsOnPage = (items, pageIndex, pageSize, sortField, sortDirection) => { + let itemsOnPage; + + if (sortField) { + itemsOnPage = items.slice(0).sort(Comparators.property(sortField, Comparators.default(sortDirection))); + } else { + itemsOnPage = items; + } + + if (!pageIndex && !pageSize) { + return itemsOnPage; + } + + const startIndex = pageIndex * pageSize; + return itemsOnPage.slice(startIndex, Math.min(startIndex + pageSize, itemsOnPage.length)); +}; 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 index 01643f0f57fd8..3a55ff3fed0a8 100644 --- 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 @@ -1 +1 @@ -export * from './table'; +export { getItemsOnPage } from './get_items_on_page'; 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..1914d713287c8 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,19 @@ 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'; +import { getItemsOnPage } from './lib'; export class ScriptedFieldsTable extends Component { static propTypes = { @@ -37,7 +38,10 @@ export class ScriptedFieldsTable extends Component { fieldToDelete: undefined, isDeleteConfirmationModalVisible: false, fields: [], - ...DEFAULT_TABLE_OF_RECORDS_STATE, + pageIndex: 0, + pageSize: 10, + sortField: 'name', + sortDirection: 'asc', }; } @@ -61,34 +65,34 @@ export class ScriptedFieldsTable extends Component { this.setState({ fields, deprecatedLangsInUse, - ...this.computeTableState(this.state.criteria, this.props, fields) }); } - onDataCriteriaChange = criteria => { - this.setState(this.computeTableState(criteria)); - } + onTableChange = ( + pageIndex = this.state.pageIndex, + pageSize = this.state.pageSize, + sortField = this.state.sortField, + sortDirection = this.state.sortDirection + ) => { + this.setState({ pageIndex, pageSize, sortField, sortDirection }); + }; - 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)); - } - } + getItemsOnPage = () => { + const { fields, pageIndex, pageSize, sortField, sortDirection } = this.state; + const { fieldFilter, scriptedFieldLanguageFilter } = this.props; - 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 (fieldFilter) { + const normalizedFieldFilter = this.props.fieldFilter.toLowerCase(); + items = items.filter(field => field.name.toLowerCase().includes(normalizedFieldFilter)); } - if (props.scriptedFieldLanguageFilter) { - items = items.filter(field => field.lang === props.scriptedFieldLanguageFilter); + + if (scriptedFieldLanguageFilter) { + items = items.filter(field => field.lang === this.props.scriptedFieldLanguageFilter); } - return getTableOfRecordsState(items, criteria); + return getItemsOnPage(items, pageIndex, pageSize, sortField, sortDirection); } renderCallOuts() { @@ -148,40 +152,35 @@ export class ScriptedFieldsTable extends Component { } = this.props; const { - data, - criteria: { - page, - sort, - }, fields, + pageIndex, + pageSize, + sortField, + sortDirection, } = this.state; - const model = { - data, - criteria: { - page, - sort, - }, - }; + const itemsOnPage = this.getItemsOnPage(); return (
-
+
+ {this.renderCallOuts()} - - Add scripted field - + + { fields.length > 0 ?
this.props.helpers.redirectToRoute(field, 'edit')} deleteField={this.startDeleteField} - onDataCriteriaChange={this.onDataCriteriaChange} + onChange={this.onTableChange} /> : null } From ba7a2799c63a7602c4b664ad501800877845f398 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 23 Feb 2018 16:02:31 -0800 Subject: [PATCH 2/4] Convert from EuiBasicTable to EuiInMemoryTable. --- .../scripted_field_table.test.js.snap | 32 ++----------- .../__tests__/scripted_field_table.test.js | 3 -- .../__snapshots__/table.test.js.snap | 16 +------ .../components/table/__tests__/table.test.js | 35 ++------------ .../components/table/table.js | 48 +++---------------- .../lib/__tests__/get_items_on_page.test.js | 47 ------------------ .../lib/get_items_on_page.js | 20 -------- .../scripted_fields_table/lib/index.js | 1 - .../scripted_fields_table.js | 47 ++++-------------- 9 files changed, 25 insertions(+), 224 deletions(-) delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js delete mode 100644 src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/index.js 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 b4c4015ef0c85..9e324c5eae311 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 @@ -24,7 +24,7 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = ` "getScriptedFields": [Function], } } - itemsOnPage={ + items={ Array [ Object { "lang": "painless", @@ -38,12 +38,6 @@ exports[`ScriptedFieldsTable should filter based on the lang filter 1`] = ` }, ] } - onChange={[Function]} - pageIndex={0} - pageSize={10} - sortDirection="asc" - sortField="name" - totalItemCount={3} /> `; @@ -68,7 +62,7 @@ exports[`ScriptedFieldsTable should filter based on the query bar 1`] = ` "getScriptedFields": [Function], } } - itemsOnPage={ + items={ Array [ Object { "lang": "painless", @@ -77,12 +71,6 @@ exports[`ScriptedFieldsTable should filter based on the query bar 1`] = ` }, ] } - onChange={[Function]} - pageIndex={0} - pageSize={10} - sortDirection="asc" - sortField="name" - totalItemCount={2} /> `; @@ -122,7 +110,7 @@ exports[`ScriptedFieldsTable should render normally 1`] = ` "getScriptedFields": [Function], } } - itemsOnPage={ + items={ Array [ Object { "lang": "painless", @@ -136,12 +124,6 @@ exports[`ScriptedFieldsTable should render normally 1`] = ` }, ] } - onChange={[Function]} - pageIndex={0} - pageSize={10} - sortDirection="asc" - sortField="name" - totalItemCount={2} /> `; @@ -166,7 +148,7 @@ exports[`ScriptedFieldsTable should show a delete modal 1`] = ` "getScriptedFields": [Function], } } - itemsOnPage={ + items={ Array [ Object { "lang": "painless", @@ -180,12 +162,6 @@ exports[`ScriptedFieldsTable should show a delete modal 1`] = ` }, ] } - onChange={[Function]} - pageIndex={0} - pageSize={10} - sortDirection="asc" - sortField="name" - totalItemCount={2} /> ({ - EuiButton: 'eui-button', - EuiBasicTable: 'eui-basic-table', EuiTitle: 'eui-title', EuiText: 'eui-text', - EuiButton: 'eui-button', EuiHorizontalRule: 'eui-horizontal-rule', EuiSpacer: 'eui-spacer', EuiCallOut: 'eui-call-out', 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 0cf95e6586489..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,7 +1,7 @@ // 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 03dd45bd560c5..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,24 +13,14 @@ const indexPattern = { } }; -const itemsOnPage = [{ id: 1, name: 'Elastic' }]; -const totalItemCount = 1; -const pageIndex = 0; -const pageSize = 10; -const sortField = 'name'; -const sortDirection = 'asc'; +const items = [{ id: 1, name: 'Elastic' }]; describe('Table', () => { it('should render normally', async () => { const component = shallow(
{}} deleteField={() => {}} onChange={() => {}} @@ -44,12 +34,7 @@ describe('Table', () => { const component = shallow(
{}} deleteField={() => {}} onChange={() => {}} @@ -66,12 +51,7 @@ describe('Table', () => { const component = shallow(
{}} onChange={() => {}} @@ -89,12 +69,7 @@ describe('Table', () => { const component = shallow(
{}} deleteField={deleteField} onChange={() => {}} 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 9eff63dc2d115..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,37 +2,17 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import { - EuiBasicTable + EuiInMemoryTable, } from '@elastic/eui'; export class Table extends PureComponent { static propTypes = { indexPattern: PropTypes.object.isRequired, - itemsOnPage: PropTypes.array.isRequired, - totalItemCount: PropTypes.number.isRequired, - pageIndex: PropTypes.number.isRequired, - pageSize: PropTypes.number.isRequired, - sortField: PropTypes.string.isRequired, - sortDirection: PropTypes.string.isRequired, + items: PropTypes.array.isRequired, editField: PropTypes.func.isRequired, deleteField: PropTypes.func.isRequired, - onChange: PropTypes.func.isRequired, } - onChange = ({ page = {}, sort = {} }) => { - const { - index: pageIndex, - size: pageSize, - } = page; - - const { - field: sortField, - direction: sortDirection, - } = sort; - - this.props.onChange(pageIndex, pageSize, sortField, sortDirection); - }; - renderFormatCell = (value) => { const { indexPattern } = this.props; @@ -47,12 +27,7 @@ export class Table extends PureComponent { render() { const { - itemsOnPage, - totalItemCount, - pageIndex, - pageSize, - sortField, - sortDirection, + items, editField, deleteField, } = this.props; @@ -105,26 +80,15 @@ export class Table extends PureComponent { }]; const pagination = { - pageIndex, - pageSize, - totalItemCount, pageSizeOptions: [5, 10, 25, 50], }; - const sorting = { - sort: { - field: sortField, - direction: sortDirection, - }, - }; - return ( - ); } diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js deleted file mode 100644 index 8654bb7742ca0..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/__tests__/get_items_on_page.test.js +++ /dev/null @@ -1,47 +0,0 @@ -import { - getItemsOnPage, -} from '..'; - -const items = [ - { name: 'Kibana' }, - { name: 'Elasticsearch' }, - { name: 'Logstash' }, -]; - -describe('getItemsOnPage', () => { - describe('by default', () => { - it('returns the same items which were provided', () => { - const itemsOnPage = getItemsOnPage(items); - expect(itemsOnPage).toEqual(itemsOnPage); - }); - }); - - describe('with page arguments', () => { - it('returns the items defined by the page arguments', () => { - const pageIndex = 2; - const pageSize = 1; - const itemsOnPage = getItemsOnPage(items, pageIndex, pageSize); - expect(itemsOnPage).toEqual([ items[2] ]); - }); - }); - - describe('with sort arguments', () => { - it('returns the items defined by the sort arguments', () => { - const sortField = 'name'; - const sortDirection = 'desc'; - const itemsOnPage = getItemsOnPage(items, undefined, undefined, sortField, sortDirection); - expect(itemsOnPage).toEqual([ items[2], items[0], items[1] ]); - }); - }); - - describe('with page and sort arguments', () => { - it('returns the items defined by the page and sort arguments', () => { - const pageIndex = 0; - const pageSize = 2; - const sortField = 'name'; - const sortDirection = 'desc'; - const itemsOnPage = getItemsOnPage(items, pageIndex, pageSize, sortField, sortDirection); - expect(itemsOnPage).toEqual([ items[2], items[0] ]); - }); - }); -}); diff --git a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js b/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js deleted file mode 100644 index f2ff5fa5c4f1b..0000000000000 --- a/src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/lib/get_items_on_page.js +++ /dev/null @@ -1,20 +0,0 @@ -import { - Comparators -} from '@elastic/eui'; - -export const getItemsOnPage = (items, pageIndex, pageSize, sortField, sortDirection) => { - let itemsOnPage; - - if (sortField) { - itemsOnPage = items.slice(0).sort(Comparators.property(sortField, Comparators.default(sortDirection))); - } else { - itemsOnPage = items; - } - - if (!pageIndex && !pageSize) { - return itemsOnPage; - } - - const startIndex = pageIndex * pageSize; - return itemsOnPage.slice(startIndex, Math.min(startIndex + pageSize, itemsOnPage.length)); -}; 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 3a55ff3fed0a8..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 { getItemsOnPage } from './get_items_on_page'; 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 1914d713287c8..5d42fcca5640f 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 @@ -16,8 +16,6 @@ import { CallOuts, } from './components'; -import { getItemsOnPage } from './lib'; - export class ScriptedFieldsTable extends Component { static propTypes = { indexPattern: PropTypes.object.isRequired, @@ -38,10 +36,6 @@ export class ScriptedFieldsTable extends Component { fieldToDelete: undefined, isDeleteConfirmationModalVisible: false, fields: [], - pageIndex: 0, - pageSize: 10, - sortField: 'name', - sortDirection: 'asc', }; } @@ -68,31 +62,20 @@ export class ScriptedFieldsTable extends Component { }); } - onTableChange = ( - pageIndex = this.state.pageIndex, - pageSize = this.state.pageSize, - sortField = this.state.sortField, - sortDirection = this.state.sortDirection - ) => { - this.setState({ pageIndex, pageSize, sortField, sortDirection }); - }; - - getItemsOnPage = () => { - const { fields, pageIndex, pageSize, sortField, sortDirection } = this.state; + getFilteredItems = () => { + const { fields } = this.state; const { fieldFilter, scriptedFieldLanguageFilter } = this.props; - let items = fields; - if (fieldFilter) { const normalizedFieldFilter = this.props.fieldFilter.toLowerCase(); - items = items.filter(field => field.name.toLowerCase().includes(normalizedFieldFilter)); + return fields.filter(field => field.name.toLowerCase().includes(normalizedFieldFilter)); } if (scriptedFieldLanguageFilter) { - items = items.filter(field => field.lang === this.props.scriptedFieldLanguageFilter); + return fields.filter(field => field.lang === this.props.scriptedFieldLanguageFilter); } - return getItemsOnPage(items, pageIndex, pageSize, sortField, sortDirection); + return fields; } renderCallOuts() { @@ -151,15 +134,7 @@ export class ScriptedFieldsTable extends Component { indexPattern, } = this.props; - const { - fields, - pageIndex, - pageSize, - sortField, - sortDirection, - } = this.state; - - const itemsOnPage = this.getItemsOnPage(); + const items = this.getFilteredItems(); return (
@@ -169,18 +144,12 @@ export class ScriptedFieldsTable extends Component { - { fields.length > 0 ? + { items.length > 0 ?
this.props.helpers.redirectToRoute(field, 'edit')} deleteField={this.startDeleteField} - onChange={this.onTableChange} /> : null } From 7c2b8620fd58b6d02cb6bdbc7aa5c1f19238c711 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 8 Mar 2018 19:35:10 -0800 Subject: [PATCH 3/4] Fix bug with filtering and show 'no items' message when the filter doens't match any scripted fields. --- .../scripted_fields_table.js | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) 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 5d42fcca5640f..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 @@ -66,16 +66,24 @@ export class ScriptedFieldsTable extends Component { const { fields } = this.state; const { fieldFilter, scriptedFieldLanguageFilter } = this.props; - if (fieldFilter) { - const normalizedFieldFilter = this.props.fieldFilter.toLowerCase(); - return fields.filter(field => field.name.toLowerCase().includes(normalizedFieldFilter)); - } + let languageFilteredFields = fields; if (scriptedFieldLanguageFilter) { - return fields.filter(field => field.lang === this.props.scriptedFieldLanguageFilter); + languageFilteredFields = fields.filter( + field => field.lang === this.props.scriptedFieldLanguageFilter + ); + } + + let filteredFields = languageFilteredFields; + + if (fieldFilter) { + const normalizedFieldFilter = this.props.fieldFilter.toLowerCase(); + filteredFields = languageFilteredFields.filter( + field => field.name.toLowerCase().includes(normalizedFieldFilter) + ); } - return fields; + return filteredFields; } renderCallOuts() { @@ -144,15 +152,13 @@ export class ScriptedFieldsTable extends Component { - { items.length > 0 ? -
this.props.helpers.redirectToRoute(field, 'edit')} - deleteField={this.startDeleteField} - /> - : null - } +
this.props.helpers.redirectToRoute(field, 'edit')} + deleteField={this.startDeleteField} + /> + {this.renderDeleteConfirmationModal()} ); From bc28cb3941777c5da38728903179b95970e00dfe Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 8 Mar 2018 20:26:21 -0800 Subject: [PATCH 4/4] Update snapshot. --- .../__snapshots__/scripted_field_table.test.js.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 9e324c5eae311..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 @@ -87,6 +87,16 @@ exports[`ScriptedFieldsTable should hide the table if there are no scripted fiel +
`;