Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 21, 2021

Conversation

kibanamachine
Copy link
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
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants