[Data table] Reactify & EUIficate the visualization #70801

sulemanof · 2020-07-06T13:44:06Z

Summary

Resolves #64444
Resolves #2516
Resolves #2128

This converts the Data table visualization into React + EUI DataGrid component.

By default a new version of visualization will be used. Discussed with @timroes .
To turn on the legacy one, include vis_type_table.legacyVisEnabled: true setting in kibana.yml.

Single table mode:

Split table mode (several grids displayed):

The split table mode could have performance issue while a lot of data grids render at once.
Despite this, the PR is good to go, since:

the feature is not widely used;
the legacy vis also has the inherent performance issue;

A separate issue is created to track and potentially solve the problem: #84509

Changes include:

either the legacy or the new visualization implementation is lazy loaded once depending on the feature flag legacyVisEnabled;
legacy functional tests were adapted to check the new grid implementation, few of them were saved to check the legacy data table in a separate thread (was discussed here)

Release notes:

Show toolbar option adds an ability to show/hide the visualization toolbar, where the only Export button currently live (the toolbar will be expanded in future releases).
By default, a new visualization will have the toolbar disabled. Saved objects will be migrated to have the toolbar enabled initially.
( feature commit, migration script commit )
Exported as CSV tables will preserve the sorting by column direction!
Customizing a column width option is in. The value is saved into the uiState - that means columns width will be saved even after page reload. While using Split table mode, columns width will be synchronized between tables.

Single table mode

Split table mode
Expand a cell to see a collapsed content - hover over the cell to see the expand button:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…table

…table # Conflicts: # src/plugins/vis_type_table/public/table_vis_type.ts

…table # Conflicts: # package.json

…table

# Conflicts: # src/plugins/vis_type_table/public/agg_table/_agg_table.scss # src/plugins/vis_type_table/public/agg_table/agg_table.js # src/plugins/vis_type_table/public/paginated_table/rows.js # src/plugins/vis_type_table/public/vis_controller.ts

…table

sulemanof · 2020-12-09T14:03:41Z

@flash1293
the toolbar thing fixed in 9048a45 by adding the minSizeForControls prop.

flash1293

This LGTM

The following things are not working perfectly, but I would be fine with merging:

Weird behavior on row split: Resizing columns is very slow and has the chart moving for multiple seconds. Table are not always sized the same (sometimes very narrow, sometimes taking 100% of the width)
Column width / sorting not tied to column, but to index, causing some inconsistencies (e.g. not possible to reset column width to auto)
Some small EUI data grid problems (typings not matching, sorting popovers not closing) (edited)
Density settings has been removed

We still should decide on the name of the "toolbar flag" it's just controlling the csv export button now, but I don't think an additional round of review will be necessary

…table

stratoula

Thanx @sulemanof I tested it and it works now 🎉
Datatable seems to work as expected, I don't like a lot how it behaves on split tables but it seems fine for now 🙂 ++ for adding some unit tests ❤️

sulemanof · 2020-12-14T07:47:37Z

@elasticmachine merge upstream

ppisljar

app services code LGTM

stratoula · 2020-12-15T07:07:17Z

@elasticmachine merge upstream

The comments has been already addressed and other member of the team has already approved it

sulemanof · 2020-12-15T09:29:45Z

@elasticmachine merge upstream

kibanamachine · 2020-12-15T11:43:01Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 26b9cae

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`visTypeTable`	44	83	+39

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`visTypeTable`	66.6KB	148.6KB	+82.0KB

Distributable file count

id	before	after	diff
`default`	47224	47994	+770
`oss`	27530	27540	+10

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`data`	1000.9KB	1001.0KB	+71.0B
`visTypeTable`	19.1KB	11.7KB	-7.4KB
total			-7.3KB

Unknown metric groups

async chunk count

id	before	after	diff
`visTypeTable`	2	5	+3

History

💔 Build #94364 failed d16b81a
💚 Build #94352 succeeded d9e7c96
💚 Build #93890 succeeded 6cd3d3d
💚 Build #93460 succeeded edd4809
💚 Build #93096 succeeded 9048a45

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* Use data grid for table vis * Create basic table template * Add table_vis_split component * Apply cell filtering * Add aria-label attributes * Use field formatters for values * Add no results component * Remove legacy dependencies * Add usePagination * Create usePagination util * Use percentage column and total row * Use csv export button * Update labels * Fix merge conflicts * Use split table * Fix functional tests * Fix dashboard tests * Update data table functional tests * Fix missed test * Introduce showToolbar option * Remove useless package * Fix merge conflicts * Return back kibanaUtils required bundle * Revert "Remove useless package" This reverts commit 144a7cd. * Use feature flag for legacy vis * Add footer row * Remove lock files * Revert "Remove lock files" This reverts commit 5c5acd7. * Minor fixes * Use common no result message * Fix broken tests * Use ui state sorting * Fix error * Fix merge conflicts * Add legacy functional tests * Pull pagination footer up to keep with table and fix column split growing continuously in dashboard * Comments fixes * Use cell actions for filtering * Fix translations * Fix comments * Reduce legacy tests amount * Update sorting * Update split column layout * Add telemetry for legacy vis * Apply latest changes for split table * Fix eslint errors * Use aria labels with values * Use aria label for export btn * Fix functional test * Update translations * Cleanup * Truncate cells content * Enhance types in table_vis_response_handler.ts * Persist columns width on change * Fix sorting history * Add a migration script for toolbar * Export sorted table * Use reportUiCounter instead of reportUiStats * Fix integration tests * Fix typos * Adjust FieldFormat type * Hide the density selector * Update docs * Fix pagination * Restrict hiding the toolbar * Fix column index on filter * Add closePopover action Co-authored-by: cchaos <caroline.horn@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # scripts/functional_tests.js Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

sulemanof added 27 commits July 1, 2020 11:29

Use data grid for table vis

ed29fb2

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

82712f0

…table

Create basic table template

9e17f4d

Add table_vis_split component

3a693ef

Apply cell filtering

34a1375

Add aria-label attributes

de6dd8f

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

3a6e113

…table # Conflicts: # src/plugins/vis_type_table/public/table_vis_type.ts

Use field formatters for values

d2e8436

Add no results component

66654f8

Remove legacy dependencies

743fded

Add usePagination

ca802cd

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

02013f1

…table # Conflicts: # package.json

Create usePagination util

af74780

Use percentage column and total row

f6cdb86

Use csv export button

c68b60e

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

dea9e48

…table

Update labels

d485086

Fix merge conflicts

409e34b

Use split table

14c27a4

Fix functional tests

5853a10

Fix dashboard tests

7a561da

Update data table functional tests

f8accdf

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

9902674

…table

Fix missed test

62ab3c4

Introduce showToolbar option

0a90deb

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

a057da9

…table

sulemanof added blocked WIP Work in progress Feature:Data Table Data table visualization feature labels Sep 22, 2020

This comment has been minimized.

Sign in to view

Restrict hiding the toolbar

9048a45

This comment has been minimized.

Sign in to view

flash1293 approved these changes Dec 9, 2020

View reviewed changes

This comment has been minimized.

Sign in to view

sulemanof added 2 commits December 10, 2020 15:31

Fix column index on filter

5285111

Merge remote-tracking branch 'upstream/master' into EUIfication/data_…

edd4809

…table

This comment has been minimized.

Sign in to view

stratoula approved these changes Dec 10, 2020

View reviewed changes

Merge branch 'master' into EUIfication/data_table

6cd3d3d

ppisljar approved these changes Dec 14, 2020

View reviewed changes

mattkime approved these changes Dec 14, 2020

View reviewed changes

Merge branch 'master' into EUIfication/data_table

d9e7c96

Add closePopover action

d16b81a

Merge branch 'master' into EUIfication/data_table

26b9cae

sulemanof merged commit 845f716 into elastic:master Dec 15, 2020

sulemanof mentioned this pull request Dec 15, 2020

[7.x] [Data table] Reactify & EUIficate the visualization (#70801) #85936

Merged

nickofthyme mentioned this pull request Jan 7, 2021

[Kibana] Embed Enhanced Table plugin #87455

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Data table] Reactify & EUIficate the visualization #70801

[Data table] Reactify & EUIficate the visualization #70801

sulemanof commented Jul 6, 2020 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

sulemanof commented Dec 9, 2020

This comment has been minimized.

flash1293 left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

stratoula left a comment •

edited

Loading

sulemanof commented Dec 14, 2020

ppisljar left a comment

stratoula commented Dec 15, 2020

sulemanof commented Dec 15, 2020

kibanamachine commented Dec 15, 2020

async chunk count

[Data table] Reactify & EUIficate the visualization #70801

[Data table] Reactify & EUIficate the visualization #70801

Conversation

sulemanof commented Jul 6, 2020 • edited Loading

Summary

Changes include:

Release notes:

Checklist

For maintainers

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

sulemanof commented Dec 9, 2020

This comment has been minimized.

flash1293 left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

stratoula left a comment • edited Loading

Choose a reason for hiding this comment

sulemanof commented Dec 14, 2020

ppisljar left a comment

Choose a reason for hiding this comment

stratoula commented Dec 15, 2020

sulemanof commented Dec 15, 2020

kibanamachine commented Dec 15, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

async chunk count

History

sulemanof commented Jul 6, 2020 •

edited

Loading

stratoula left a comment •

edited

Loading