From fad00d97e9ee26d5419141da69f07bbf9436fc6b Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Wed, 11 Mar 2020 17:47:06 +0100 Subject: [PATCH] [7.x] [ML] Transforms: Use EuiInMemoryTable instead of custom typed table. (#59782) (#59868) Before EuiInMemoryTable had TypeScript support we used our own typings and some state & CSS fixes. This is now all solved by the original EUI component. - Use EuiInMemoryTable instead of custom typed table. - Deletes some legacy leftover files. --- x-pack/index.js | 2 - x-pack/legacy/plugins/transform/index.ts | 12 -- .../plugins/transform/public/app/index.scss | 1 - .../transform_list.test.tsx.snap | 43 ++++--- .../components/transform_list/_index.scss | 1 - .../transform_list/_transform_table.scss | 48 -------- .../components/transform_list/columns.tsx | 28 ++--- .../transform_list/transform_list.tsx | 100 +++++++--------- .../transform_list/transform_table.tsx | 107 ------------------ .../transform/public/shared_imports.ts | 15 --- 10 files changed, 75 insertions(+), 282 deletions(-) delete mode 100644 x-pack/legacy/plugins/transform/index.ts delete mode 100644 x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_index.scss delete mode 100644 x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_transform_table.scss delete mode 100644 x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_table.tsx diff --git a/x-pack/index.js b/x-pack/index.js index 893802ea816213..c917befb4b3ddb 100644 --- a/x-pack/index.js +++ b/x-pack/index.js @@ -31,7 +31,6 @@ import { crossClusterReplication } from './legacy/plugins/cross_cluster_replicat import { upgradeAssistant } from './legacy/plugins/upgrade_assistant'; import { uptime } from './legacy/plugins/uptime'; import { encryptedSavedObjects } from './legacy/plugins/encrypted_saved_objects'; -import { transform } from './legacy/plugins/transform'; import { actions } from './legacy/plugins/actions'; import { alerting } from './legacy/plugins/alerting'; import { lens } from './legacy/plugins/lens'; @@ -61,7 +60,6 @@ module.exports = function(kibana) { infra(kibana), taskManager(kibana), rollup(kibana), - transform(kibana), siem(kibana), remoteClusters(kibana), crossClusterReplication(kibana), diff --git a/x-pack/legacy/plugins/transform/index.ts b/x-pack/legacy/plugins/transform/index.ts deleted file mode 100644 index a4b980c0bf8f3a..00000000000000 --- a/x-pack/legacy/plugins/transform/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -export function transform(kibana: any) { - return new kibana.Plugin({ - id: 'transform', - configPrefix: 'xpack.transform', - }); -} diff --git a/x-pack/plugins/transform/public/app/index.scss b/x-pack/plugins/transform/public/app/index.scss index 836929174875ec..beb5ee6be67e66 100644 --- a/x-pack/plugins/transform/public/app/index.scss +++ b/x-pack/plugins/transform/public/app/index.scss @@ -15,4 +15,3 @@ @import 'sections/create_transform/components/wizard/index'; @import 'sections/transform_management/components/create_transform_button/index'; @import 'sections/transform_management/components/stats_bar/index'; -@import 'sections/transform_management/components/transform_list/index'; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap index e7a5e027e6f8d6..e2de4c0ea1f6c0 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/__snapshots__/transform_list.test.tsx.snap @@ -1,28 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Transform: Transform List Minimal initialization 1`] = ` - - - - Create your first transform - , - ] - } - data-test-subj="transformNoTransformsFound" - title={ -

- No transforms found -

- } - /> - + + Create your first transform + , + ] + } + data-test-subj="transformNoTransformsFound" + title={ +

+ No transforms found +

+ } +/> `; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_index.scss b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_index.scss deleted file mode 100644 index acb4bd0cf43264..00000000000000 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'transform_table'; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_transform_table.scss b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_transform_table.scss deleted file mode 100644 index a9e2e4d790436d..00000000000000 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/_transform_table.scss +++ /dev/null @@ -1,48 +0,0 @@ -.transform__TransformTable { - // Using an override as a last resort because we cannot set custom classes on - // nested upstream components. The opening animation limits the height - // of the expanded row to 1000px which turned out to be not predictable. - // The animation could also result in flickering with expanded rows - // where the inner content would result in the DOM changing the height. - .euiTableRow-isExpandedRow .euiTableCellContent { - animation: none !important; - .euiTableCellContent__text { - width: 100%; - } - } - // Another override: Because an update to the table replaces the DOM, the same - // icon would still again fade in with an animation. If the table refreshes with - // e.g. 1s this would result in a blinking icon effect. - .euiIcon-isLoaded { - animation: none !important; - } -} -.transform__BulkActionItem { - display: block; - padding: $euiSizeS; - width: 100%; - text-align: left; -} - -.transform__BulkActionsBorder { - height: 20px; - border-right: $euiBorderThin; - width: 1px; - display: inline-block; - vertical-align: middle; - height: 35px; - margin: 0px 5px; - margin-top: -5px; -} - -.transform__ProgressBar { - margin-bottom: $euiSizeM; -} - -.transform__TaskStateBadge, .transform__TaskModeBadge { - max-width: 100px; -} - -.transform__TransformTable__messagesPaneTable .euiTableCellContent__text { - text-align: left; -} diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx index fb24ff2a12e022..159833354b5efb 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/columns.tsx @@ -9,6 +9,9 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiBadge, + EuiTableActionsColumnType, + EuiTableComputedColumnType, + EuiTableFieldDataColumnType, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, @@ -21,13 +24,6 @@ import { import { TransformId, TRANSFORM_STATE } from '../../../../../../common'; -import { - ActionsColumnType, - ComputedColumnType, - ExpanderColumnType, - FieldDataColumnType, -} from '../../../../../shared_imports'; - import { getTransformProgress, TransformListRow, @@ -89,15 +85,15 @@ export const getColumns = ( } const columns: [ - ExpanderColumnType, - FieldDataColumnType, - FieldDataColumnType, - FieldDataColumnType, - FieldDataColumnType, - ComputedColumnType, - ComputedColumnType, - ComputedColumnType, - ActionsColumnType + EuiTableComputedColumnType, + EuiTableFieldDataColumnType, + EuiTableFieldDataColumnType, + EuiTableFieldDataColumnType, + EuiTableFieldDataColumnType, + EuiTableComputedColumnType, + EuiTableComputedColumnType, + EuiTableComputedColumnType, + EuiTableActionsColumnType ] = [ { name: ( diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx index 9c2da53c36d6bf..3393aada8b69d8 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_list.tsx @@ -4,11 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Fragment, MouseEventHandler, FC, useContext, useState } from 'react'; +import React, { MouseEventHandler, FC, useContext, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { + Direction, EuiBadge, EuiButtonEmpty, EuiButtonIcon, @@ -16,15 +17,13 @@ import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, + EuiInMemoryTable, EuiPopover, EuiTitle, - Direction, } from '@elastic/eui'; import { TransformId, TRANSFORM_STATE } from '../../../../../../common'; -import { OnTableChangeArg, SortDirection, SORT_DIRECTION } from '../../../../../shared_imports'; - import { useRefreshTransformList, TransformListRow, @@ -43,7 +42,6 @@ import { StopAction } from './action_stop'; import { ItemIdToExpandedRowMap, Query, Clause } from './common'; import { getColumns } from './columns'; import { ExpandedRow } from './expanded_row'; -import { ProgressBar, transformTableFactory } from './transform_table'; function getItemIdToExpandedRowMap( itemIds: TransformId[], @@ -74,8 +72,6 @@ interface Props { transformsLoading: boolean; } -const TransformTable = transformTableFactory(); - export const TransformList: FC = ({ errorMessage, isInitialized, @@ -100,7 +96,7 @@ export const TransformList: FC = ({ const [pageSize, setPageSize] = useState(10); const [sortField, setSortField] = useState(TRANSFORM_LIST_COLUMN.ID); - const [sortDirection, setSortDirection] = useState(SORT_DIRECTION.ASC); + const [sortDirection, setSortDirection] = useState('asc'); const { capabilities } = useContext(AuthorizationContext); const disabled = @@ -186,52 +182,46 @@ export const TransformList: FC = ({ // Before the transforms have been loaded for the first time, display the loading indicator only. // Otherwise a user would see 'No transforms found' during the initial loading. if (!isInitialized) { - return ; + return null; } if (typeof errorMessage !== 'undefined') { return ( - - - - 
{JSON.stringify(errorMessage)}
- - + + 
{JSON.stringify(errorMessage)}
+ ); } if (transforms.length === 0) { return ( - - - - {i18n.translate('xpack.transform.list.emptyPromptTitle', { - defaultMessage: 'No transforms found', - })} - - } - actions={[ - - {i18n.translate('xpack.transform.list.emptyPromptButtonText', { - defaultMessage: 'Create your first transform', - })} - , - ]} - data-test-subj="transformNoTransformsFound" - /> - + + {i18n.translate('xpack.transform.list.emptyPromptTitle', { + defaultMessage: 'No transforms found', + })} + + } + actions={[ + + {i18n.translate('xpack.transform.list.emptyPromptButtonText', { + defaultMessage: 'Create your first transform', + })} + , + ]} + data-test-subj="transformNoTransformsFound" + /> ); } @@ -362,15 +352,15 @@ export const TransformList: FC = ({ const onTableChange = ({ page = { index: 0, size: 10 }, - sort = { field: TRANSFORM_LIST_COLUMN.ID, direction: SORT_DIRECTION.ASC }, - }: OnTableChangeArg) => { + sort = { field: TRANSFORM_LIST_COLUMN.ID as string, direction: 'asc' }, + }) => { const { index, size } = page; setPageIndex(index); setPageSize(size); const { field, direction } = sort; - setSortField(field); - setSortDirection(direction); + setSortField(field as string); + setSortDirection(direction as Direction); }; const selection = { @@ -379,8 +369,7 @@ export const TransformList: FC = ({ return (
- - = ({ items={filterActive ? filteredTransforms : transforms} itemId={TRANSFORM_LIST_COLUMN.ID} itemIdToExpandedRowMap={itemIdToExpandedRowMap} + loading={isLoading || transformsLoading} onTableChange={onTableChange} pagination={pagination} rowProps={item => ({ @@ -399,11 +389,9 @@ export const TransformList: FC = ({ selection={selection} sorting={sorting} search={search} - data-test-subj={ - isLoading || transformsLoading - ? 'transformListTable loading' - : 'transformListTable loaded' - } + data-test-subj={`transformListTable ${ + isLoading || transformsLoading ? 'loading' : 'loaded' + }`} />
); diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_table.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_table.tsx deleted file mode 100644 index 8c7920c124beff..00000000000000 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transform_table.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -// This component extends EuiInMemoryTable with some -// fixes and TS specs until the changes become available upstream. - -import React, { Fragment } from 'react'; - -import { EuiProgress } from '@elastic/eui'; - -import { mlInMemoryTableBasicFactory } from '../../../../../shared_imports'; - -// The built in loading progress bar of EuiInMemoryTable causes a full DOM replacement -// of the table and doesn't play well with auto-refreshing. That's why we're displaying -// our own progress bar on top of the table. `EuiProgress` after `isLoading` displays -// the loading indicator. The variation after `!isLoading` displays an empty progress -// bar fixed to 0%. Without it, the display would vertically jump when showing/hiding -// the progress bar. -export const ProgressBar = ({ isLoading = false }) => { - return ( - - {isLoading && } - {!isLoading && ( - - )} - - ); -}; - -// copied from EUI to be available to the extended getDerivedStateFromProps() -function findColumnByProp(columns: any, prop: any, value: any) { - for (let i = 0; i < columns.length; i++) { - const column = columns[i]; - if (column[prop] === value) { - return column; - } - } -} - -// copied from EUI to be available to the extended getDerivedStateFromProps() -const getInitialSorting = (columns: any, sorting: any) => { - if (!sorting || !sorting.sort) { - return { - sortName: undefined, - sortDirection: undefined, - }; - } - - const { field: sortable, direction: sortDirection } = sorting.sort; - - // sortable could be a column's `field` or its `name` - // for backwards compatibility `field` must be checked first - let sortColumn = findColumnByProp(columns, 'field', sortable); - if (sortColumn == null) { - sortColumn = findColumnByProp(columns, 'name', sortable); - } - - if (sortColumn == null) { - return { - sortName: undefined, - sortDirection: undefined, - }; - } - - const sortName = sortColumn.name; - - return { - sortName, - sortDirection, - }; -}; - -export function transformTableFactory() { - const MlInMemoryTableBasic = mlInMemoryTableBasicFactory(); - return class TransformTable extends MlInMemoryTableBasic { - static getDerivedStateFromProps(nextProps: any, prevState: any) { - const derivedState = { - ...prevState.prevProps, - pageIndex: nextProps.pagination.initialPageIndex, - pageSize: nextProps.pagination.initialPageSize, - }; - - if (nextProps.items !== prevState.prevProps.items) { - Object.assign(derivedState, { - prevProps: { - items: nextProps.items, - }, - }); - } - - const { sortName, sortDirection } = getInitialSorting(nextProps.columns, nextProps.sorting); - if ( - sortName !== prevState.prevProps.sortName || - sortDirection !== prevState.prevProps.sortDirection - ) { - Object.assign(derivedState, { - sortName, - sortDirection, - }); - } - return derivedState; - } - }; -} diff --git a/x-pack/plugins/transform/public/shared_imports.ts b/x-pack/plugins/transform/public/shared_imports.ts index 3582dd5d266e2f..4def1bc98ef8cf 100644 --- a/x-pack/plugins/transform/public/shared_imports.ts +++ b/x-pack/plugins/transform/public/shared_imports.ts @@ -24,21 +24,6 @@ export { DAY, } from '../../../../src/plugins/es_ui_shared/public/components/cron_editor'; -// Custom version of EuiInMemoryTable with TypeScript -// support and a fix for updating sorting props. -export { - ActionsColumnType, - ComputedColumnType, - ExpanderColumnType, - FieldDataColumnType, - ColumnType, - mlInMemoryTableBasicFactory, - OnTableChangeArg, - SortingPropType, - SortDirection, - SORT_DIRECTION, -} from '../../../legacy/plugins/ml/public/application/components/ml_in_memory_table'; - // Needs to be imported because we're reusing KqlFilterBar which depends on it. export { setDependencyCache } from '../../../legacy/plugins/ml/public/application/util/dependency_cache';