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.

Sign up for GitHub

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

Jump to bottom

[RAC] [Meta] Alerts Table UI updates #106585

Closed
25 tasks done
mdefazio opened this issue Jul 22, 2021 · 5 comments
Closed
25 tasks done

[RAC] [Meta] Alerts Table UI updates #106585

mdefazio opened this issue Jul 22, 2021 · 5 comments
Assignees
@mdefazio
Labels
Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Theme: rac label obsolete

Comments

@mdefazio
Copy link
Contributor

mdefazio commented Jul 22, 2021 •
edited by asnehalb
Loading

The following list of UI updates should be considered alongside https://github.com/elastic/security-team/issues/1299

Figma file with updated mockups

Observability updated mockup:

image

Security updated mockup:

image

Alerts Page

The following are changes that should be reflected on both Observability and Security

Header

Current:
image

Update:
image

Alerts Table

Current:
image

Alerts Table Filter Options

Current:
image

Alert Count

Empty States

I'm unclear as to what our options are with the virtualized EUIDataGrid. So the below is showing the loading of the component itself, not the data from the search (as I understand, the DataGrid headers will be visible but the grid will just be blank? As shown in second mockup)

Datagrid component has not yet rendered
image

Search loading but datagrid component has rendered
(Is there more we can do here?)
image

Loading State

I am referencing Discover here (are we able to use the same panel component?). Do we have the capability to update the text here based on why there was no result?

image

Topics to still be discussed:

  1. Should we force the click of the cell to trigger the cell popover menu, (instead of going to the host or rule)?
  2. For Observability: Can we remove the banner in favor of just having the 'Experimental' badge (maybe with a tooltip?
@mdefazio mdefazio self-assigned this Jul 22, 2021
@botelastic botelastic bot added the needs-team Issues missing a team label label Jul 22, 2021
@mdefazio mdefazio changed the title [DRAFT] [RAC] UI updates [DRAFT] [RAC] Alerts Table UI updates Jul 26, 2021
@mdefazio mdefazio changed the title [DRAFT] [RAC] Alerts Table UI updates [RAC] Alerts Table UI updates Jul 26, 2021
@mdefazio mdefazio added the Theme: rac label obsolete label Jul 26, 2021
@mdefazio
Copy link
Contributor Author

Not sure if I labeled this correctly, so please feel free to update

I know some of these items are already being worked on (or completed). I'm happy to link up the PRs or mark off the checkbox if so.

I will create a separate issue for the flyouts.

cc/ @paulewing , @katrin-freihofner, @jasonrhodes , @XavierM

@mdefazio mdefazio changed the title [RAC] Alerts Table UI updates [RAC] [Meta] Alerts Table UI updates Jul 26, 2021
@mdefazio
Copy link
Contributor Author

Added in Empty and Loading state mockups (for DataGrid—should apply to both solutions)

@mdefazio mdefazio mentioned this issue Jul 28, 2021
Closed
@semd semd mentioned this issue Jul 29, 2021
Merged
3 tasks
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Aug 3, 2021
@andrew-goldstein
[RAC] [TGrid] Implements sorting in the TGrid
fd6f8da 
## 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 andrew-goldstein mentioned this issue Aug 3, 2021
Merged
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Aug 3, 2021
@andrew-goldstein
[RAC] [TGrid] Implements sorting in the TGrid
124cdfa 
## 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 issue Aug 3, 2021
@andrew-goldstein
[RAC] [TGrid] Implements sorting in the TGrid
a083f46 
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
@mgiota
Copy link
Contributor

mgiota commented Aug 4, 2021

@mdefazio

For Observability: Can we remove the banner in favor of just having the 'Experimental' badge (maybe with a tooltip)?

We have created a ticket for that with a note to fix it towards the end of the 7.15.0 cycle #105237. What you suggest here is to still keep the Experimental badge. Can you clarify if we still need the badge or not, cause in the above mentioned ticket we suggest to remove it

This was referenced Aug 4, 2021
Closed
Closed
@mdefazio
Copy link
Contributor Author

mdefazio commented Aug 4, 2021

@mgiota My concern was simply the combined uses. I have no issue removing the badge as well.

@mgiota mgiota mentioned this issue Aug 4, 2021
Closed
This was referenced Aug 9, 2021
Closed
Closed
Closed
@machadoum machadoum mentioned this issue Aug 12, 2021
Merged
4 tasks
@vadimkibana vadimkibana added Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) and removed needs-team Issues missing a team label labels Sep 3, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-alerting-services (Team:Alerting Services)

@kobelb kobelb added the needs-team Issues missing a team label label Jan 31, 2022
@botelastic botelastic bot removed the needs-team Issues missing a team label label Jan 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mdefazio mdefazio

Labels
Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Theme: rac label obsolete
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@kobelb @mgiota @mdefazio @elasticmachine @katrin-freihofner @vadimkibana