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

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

Merged

Conversation

andrew-goldstein
Copy link
Contributor

@andrew-goldstein andrew-goldstein commented Jul 20, 2021

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

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

o11y_alerts

security_solution_alerts

Related RAC Issue: https://github.com/elastic/security-team/issues/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.

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

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:
tGridEnabled: true,

@andrew-goldstein andrew-goldstein added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting Security Solution Threat Hunting Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. auto-backport Deprecated - use backport:version if exact versions are needed v7.15.0 labels Jul 20, 2021
@andrew-goldstein andrew-goldstein requested review from a team as code owners July 20, 2021 07:44
@andrew-goldstein andrew-goldstein self-assigned this Jul 20, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

@snide snide requested a review from a team July 20, 2021 11:56
@andrew-goldstein andrew-goldstein force-pushed the render-via-eui-data-grid branch 2 times, most recently from e5101fb to 5214ae9 Compare July 20, 2021 19:05
@XavierM
Copy link
Contributor

XavierM commented Jul 20, 2021

@andrew-goldstein
I was testing it locally and I can see some whitespace between the last column and the scrolling bar when my browser is on my big screen. I think we can remove our fix width for our columns now since we are using EuiDatagrid.

image

@andrew-goldstein
Copy link
Contributor Author

@andrew-goldstein
I was testing it locally and I can see some whitespace between the last column and the scrolling bar when my browser is on my big screen. I think we can remove our fix width for our columns now since we are using EuiDatagrid.

Great catch @XavierM! We can eliminate the fixed widths from the column config for all but a few fields, like @timestamp and rule name.

@XavierM
Copy link
Contributor

XavierM commented Jul 20, 2021

@andrew-goldstein I am wondering if you can add a label Fields in front of this icon (browser fields for us)
image

@XavierM
Copy link
Contributor

XavierM commented Jul 20, 2021

@andrew-goldstein -> I am sure you know about it but the sorting look like busted when you introduce back the functionality make sure that the popover is showing the right information here.
image

timelineId,
width,
}: Props) => {
const { data: timelineNonEcsData, ecs: ecsData, _id: eventId, _index: indexName } = data[
Copy link
Contributor

@XavierM XavierM Jul 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think it will be valid to add a useMemo here? since we are passing this attributes as props

@andrew-goldstein
Copy link
Contributor Author

@andrew-goldstein -> I am sure you know about it but the sorting look like busted when you introduce back the functionality make sure that the popover is showing the right information here.
image

Yes, the behavior in the screenshot is expected until we map the sort state (currently in Redux) to EuiDataGrid's sorting prop (per the PR description):

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

Copy link
Contributor

@XavierM XavierM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is nice to see this progress in just two weeks of development. I think the designer/product folks will be able to see iterative development, and we will be able to improve the UX of the alerts table with their feedback in future PRs.

andrew-goldstein and others added 7 commits July 20, 2021 19:31
…enshots below:

![o11y_alerts](https://user-images.githubusercontent.com/4459398/126273572-7e02e3b1-c075-4b1a-9b77-03a6843d6b72.png)

![security_solution_alerts](https://user-images.githubusercontent.com/4459398/126279321-60d8c118-a97f-4c3f-b997-a966f7755d33.png)

Related RAC Issue: elastic/security-team#1299

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>
- Integrate with the Field Browser for adding / removing columns
  - related PR: <elastic#105207>
- 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

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,
```
- removed a skipped test that is no longer applicable
@kibanamachine
Copy link
Contributor

💚 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.3MB +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

History

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

cc @andrew-goldstein

@andrew-goldstein andrew-goldstein merged commit f1539dd into elastic:master Jul 21, 2021
@andrew-goldstein andrew-goldstein deleted the render-via-eui-data-grid branch July 21, 2021 03:55
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 21, 2021
…#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

💚 Backport successful

Status Branch Result
7.x

This backport PR will be merged automatically after passing CI.

andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Jul 21, 2021
This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from <elastic#105446>
  - This task was originally tracked by <elastic#105227>
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- Removed the `Status` column
- Increased the width of the `Triggered` column
- Renamed the `Duration` column to `Alert duration`
- Eliminated the gap between actions

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

![after](https://user-images.githubusercontent.com/4459398/126430476-3a8109de-629c-4d35-b6b0-09e4f0d9590c.png)

### Desk testing

- 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
```
@andrew-goldstein andrew-goldstein added the Theme: rac label obsolete label Jul 21, 2021
kibanamachine added a commit that referenced this pull request Jul 21, 2021
#106348)

## [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: #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: <#105500>
- Use `BrowserFields` to display field metadata when hovering over a column
  - related PR: <#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,
```

Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
jloleysens added a commit to jloleysens/kibana that referenced this pull request Jul 21, 2021
…y-show-migrate-to-authzd-users

* 'master' of github.com:elastic/kibana: (48 commits)
  [Canvas] Expression shape (elastic#103219)
  [FTR] Skips Vega tests
  [Sample data] Use Lens in ecommerce data (elastic#106039)
  [APM] Backends inventory & overview page routes (elastic#106223)
  [TSVB] Add more functional tests for Gauge and TopN (elastic#105361)
  Add toggle to enable/disable rule install from SOs (elastic#106189)
  Improve unit test coverage of FS API calls (elastic#106242)
  Remove recursive plugin status in meta field (elastic#106286)
  [Ingest pipelines] add community id processor (elastic#103863)
  [XY axis] Fixes the values inside bar charts (elastic#106198)
  [data.search] Set default expiration to 1m if search sessions are disabled (elastic#105329)
  set the doc title when navigating to reporting and unset when navigating away (elastic#106253)
  [Lens] Display legend inside chart (elastic#105571)
  [RAC] [TGrid] Migrate the TGrid's rendering to `EuiDataGrid` (elastic#106199)
  [Security Solutions] Removes the elastic legacy client from lists and security_solution plugins (elastic#106130)
  [Enterprise Search] Require security plugin in 8.0 (elastic#106307)
  [DOCS] Updates screenshots in Dev Tools docs (elastic#105859)
  [DOCS] Updates text and screenshots in tags doc (elastic#105853)
  [Alerting] Allow rule types to extract/inject saved object references on rule CRU (elastic#101896)
  Jest and Storybook fixes (elastic#104991)
  ...

# Conflicts:
#	x-pack/plugins/reporting/public/plugin.ts
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Jul 22, 2021
This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from <elastic#105446>
  - This task was originally tracked by <elastic#105227>
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- Removed the `Status` column
- Increased the width of the `Triggered` column
- Renamed the `Duration` column to `Alert duration`
- Eliminated the gap between actions

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

![after](https://user-images.githubusercontent.com/4459398/126430476-3a8109de-629c-4d35-b6b0-09e4f0d9590c.png)

### Desk testing

- 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
```
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Jul 26, 2021
This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from <elastic#105446>
  - This task was originally tracked by <elastic#105227>
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- Removed the `Status` column
- Increased the width of the `Triggered` column
- Renamed the `Duration` column to `Alert duration`
- Eliminated the gap between actions

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

![after](https://user-images.githubusercontent.com/4459398/126430476-3a8109de-629c-4d35-b6b0-09e4f0d9590c.png)

### Desk testing

- 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
```
andrew-goldstein added a commit that referenced this pull request Jul 27, 2021
…06349)

## [Observability RAC] Alerts table post-`EuiDataGrid` style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](#106199), and [this PR](#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from #105446
  - This task was originally tracked by #105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">

### Desk testing

- 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
```

cc @mdefazio
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jul 27, 2021
…astic#106349)

## [Observability RAC] Alerts table post-`EuiDataGrid` style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from elastic#105446
  - This task was originally tracked by elastic#105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">

### Desk testing

- 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
```

cc @mdefazio
kibanamachine added a commit that referenced this pull request Jul 27, 2021
…06349) (#106923)

## [Observability RAC] Alerts table post-`EuiDataGrid` style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](#106199), and [this PR](#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from #105446
  - This task was originally tracked by #105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">

### Desk testing

- 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
```

cc @mdefazio

Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Aug 3, 2021
## Summary

This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/127961574-00639d4d-762c-4529-bc43-6851d98728da.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

## Details

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment))
* This PR restores the column header tooltips where the TGrid is used in the Security Solution

### Hide column

* The `Hide column` action now hides the selected column. Users may re-add hidden columns via the `Fields` browser

@mdefazio, please note this behavior differs slightly from the following request in elastic#106585 :

> Include toggles on column modifier popover to allow for show/hide option (And the field menu would only be for what is available in the column list) See [EUI Docs examples](https://elastic.github.io/eui/#/tabular-content/data-grid) for expected behavior

The behavior is different because, if the `Hide column` action only interacted with the toggles in the column modifier popover, users would have to (re) locate the field in the `Fields` browser, and then uncheck it, to _actually_ remove the column.

To allow users to remove columns in a single step, and to avoid confusion, toggles are **not** included in the column modifier popover.

## 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,
``

cc @mdefazio
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Aug 3, 2021
## Summary

This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/127961574-00639d4d-762c-4529-bc43-6851d98728da.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

## Details

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment))
* This PR restores the column header tooltips where the TGrid is used in the Security Solution

### Hide column

* The `Hide column` action now hides the selected column. Users may re-add hidden columns via the `Fields` browser

@mdefazio, please note this behavior differs slightly from the following request in elastic#106585 :

> Include toggles on column modifier popover to allow for show/hide option (And the field menu would only be for what is available in the column list) See [EUI Docs examples](https://elastic.github.io/eui/#/tabular-content/data-grid) for expected behavior

The behavior is different because, if the `Hide column` action only interacted with the toggles in the column modifier popover, users would have to (re) locate the field in the `Fields` browser, and then uncheck it, to _actually_ remove the column.

To allow users to remove columns in a single step, and to avoid confusion, toggles are **not** included in the column modifier popover.

## 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,
``

cc @mdefazio
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Aug 3, 2021
This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/127961574-00639d4d-762c-4529-bc43-6851d98728da.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment))
* This PR restores the column header tooltips where the TGrid is used in the Security Solution

* The `Hide column` action now hides the selected column. Users may re-add hidden columns via the `Fields` browser

@mdefazio, please note this behavior differs slightly from the following request in elastic#106585 :

> Include toggles on column modifier popover to allow for show/hide option (And the field menu would only be for what is available in the column list) See [EUI Docs examples](https://elastic.github.io/eui/#/tabular-content/data-grid) for expected behavior

The behavior is different because, if the `Hide column` action only interacted with the toggles in the column modifier popover, users would have to (re) locate the field in the `Fields` browser, and then uncheck it, to _actually_ remove the column.

To allow users to remove columns in a single step, and to avoid confusion, toggles are **not** included in the column modifier popover.

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,
``

cc @mdefazio
andrew-goldstein added a commit that referenced this pull request Aug 3, 2021
## Summary

This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/128050301-0ea9ccbc-7896-46ef-96da-17b5b6d2e34b.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

## Details

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](#106199 (comment))
* ~This PR restores the column header tooltips where the TGrid is used in the Security Solution~

## 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,
```

cc @mdefazio
andrew-goldstein added a commit that referenced this pull request Aug 4, 2021
## Summary

This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/128050301-0ea9ccbc-7896-46ef-96da-17b5b6d2e34b.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

## Details

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](#106199 (comment))
* ~This PR restores the column header tooltips where the TGrid is used in the Security Solution~

## 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,
```

cc @mdefazio
streamich pushed a commit to vadimkibana/kibana that referenced this pull request Aug 8, 2021
…astic#106349)

## [Observability RAC] Alerts table post-`EuiDataGrid` style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from elastic#105446
  - This task was originally tracked by elastic#105227
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- ~Removed the `Status` column~ (EDIT: we won't remove this, per a discussion w/ UX)
- Increased the width of the `Triggered` column
- ~Renamed the `Duration` column to `Alert duration`~ (EDIT: we won't rename this, per a discussion w/ UX)
- Eliminated the gap between actions
- Added truncation to the `Reason` column

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

<img width="1280" alt="after" src="https://user-images.githubusercontent.com/4459398/126716690-be310fdf-3760-4014-998b-3c89099c2564.png">

### Desk testing

- 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
```

cc @mdefazio
streamich pushed a commit to vadimkibana/kibana that referenced this pull request Aug 8, 2021
## Summary

This PR implements sorting in the `TGrid`, per the animated gifs below:

![observability-sorting](https://user-images.githubusercontent.com/4459398/127960825-5be21a92-81c1-487d-9c62-1335495f4561.gif)

_Above: Sorting in Observability, via `EuiDataGrid`'s sort popover_

![security-solution-sorting](https://user-images.githubusercontent.com/4459398/128050301-0ea9ccbc-7896-46ef-96da-17b5b6d2e34b.gif)

_Above: Sorting and hiding columns in the Security Solution via `EuiDataGrid`'s column header actions_

## Details

* Sorting is disabled for non-aggregatble fields
* This PR resolves the `Sort [Object Object]` TODO described [here](elastic#106199 (comment))
* ~This PR restores the column header tooltips where the TGrid is used in the Security Solution~

## 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,
```

cc @mdefazio
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-backport Deprecated - use backport:version if exact versions are needed release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting Security Solution Threat Hunting Team Theme: rac label obsolete v7.15.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants