Skip to content

[7.x] [RAC] [TGrid] Migrate the TGrid's rendering to EuiDataGrid (#106199)#106348

Merged
kibanamachine merged 1 commit intoelastic:7.xfrom
kibanamachine:backport/7.x/pr-106199
Jul 21, 2021
Merged

[7.x] [RAC] [TGrid] Migrate the TGrid's rendering to EuiDataGrid (#106199)#106348
kibanamachine merged 1 commit intoelastic:7.xfrom
kibanamachine:backport/7.x/pr-106199

Conversation

@kibanamachine
Copy link
Copy Markdown
Contributor

Backports the following commits to 7.x:

…#106199)

## [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid`

This PR migrates TGrid's rendering to use `EuiDataGrid`, per the screenshots below:

![o11y_alerts](https://user-images.githubusercontent.com/4459398/126413504-e825a5a2-1cb5-475e-b514-01fb819793e1.png)

![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126413546-28df8f28-fa81-4b97-91c6-667589ea683c.png)

Related RAC Issue: elastic/security-team#1299

### Prerequisites to deleting legacy code (reducing bundle sizes)

To reduce the size of the `timelines` and `security_solution` plugins, legacy TGrid code and the dependency on `react-beautiful-dnd` will be removed in a follow-up PR.

- Related issue: elastic#105941

The legacy code and dependencies will be deleted when the following tasks are completed (in follow-up PRs):

- Sorting: Map `redux` sort state to `EuiDataGrid`'s `sorting` prop
- Actions: Migrate draggable hover actions to `EuiDataGrid` `cellActions`
  - related PR: <elastic#105500>
- Use `BrowserFields` to display field metadata when hovering over a column
  - related PR: <elastic#105207>
- Migrate Security Solution's actions column config from a single column to multiple columns

### Desk testing

To desk test this PR, you must enable feature flags in the Observability and Security Solution:

- To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`:

```
xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true
```

- To desk test the TGrid in the following Security Solution, edit `x-pack/plugins/security_solution/common/experimental_features.ts` and in the `allowedExperimentalValues` section set:

```typescript
tGridEnabled: true,
```
@kibanamachine
Copy link
Copy Markdown
Contributor Author

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
timelines 246 226 -20

Async chunks

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

id before after diff
securitySolution 6.2MB 6.2MB +3.3KB
timelines 234.1KB 174.7KB -59.4KB
total -56.1KB

Page load bundle

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

id before after diff
timelines 320.7KB 319.6KB -1.2KB

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

cc @andrew-goldstein

@kibanamachine kibanamachine merged commit 1a27afb into elastic:7.x Jul 21, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants