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

[Observability RAC] Improve alerts table columns #105227

Closed
weltenwort opened this issue Jul 12, 2021 · 4 comments · Fixed by #105446
Closed

[Observability RAC] Improve alerts table columns #105227

weltenwort opened this issue Jul 12, 2021 · 4 comments · Fixed by #105446
Assignees
@mgiota
Labels
Feature:RAC label obsolete refined Issue refined, ready to work on Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services Theme: rac label obsolete v7.15.0

Comments

@weltenwort
Copy link
Member

📝 Summary

The new alerts table merged with #103270 should be improved in several way to match the intended UX.

🔗 extracted from #104269

✔️ Acceptance criteria

  • The content of the "duration" column is right-aligned.
  • Units in the "duration" column are abbreviated in a useful way.
  • The "reason" columns uses up the remaining width.
  • The "actions" column (on the very left) has the headline "Actions".
  • The labels and values are internationalized.

❓ Open questions

  • If the intention is to minimize the UX difference between the Security and Observability solutions, how do we make sure these improvements are made uniformly?
@weltenwort weltenwort added Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services release_note:skip Skip the PR/issue when compiling release notes Theme: rac label obsolete Feature:RAC label obsolete v7.15.0 labels Jul 12, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

@weltenwort weltenwort removed the release_note:skip Skip the PR/issue when compiling release notes label Jul 12, 2021
@weltenwort weltenwort mentioned this issue Jul 12, 2021
Closed
@mgiota mgiota self-assigned this Jul 12, 2021
@jasonrhodes jasonrhodes added the refined Issue refined, ready to work on label Jul 12, 2021
@mgiota
Copy link
Contributor

mgiota commented Jul 13, 2021 •
edited
Loading

Here's how it looks like with the fixes (apart from abbreviated units)

Screenshot 2021-07-13 at 23 34 27

I need some design input regarding right-alignment for the duration column. As stated in the ticket I aligned the content (not the header). Is this how it is supposed to look like? Aligning the header would be a bit tricky, since there is a invisible delete icon which appears on hover
@katefarrar @katrin-freihofner

The table at the moment is not responsive and the reason text gets cut in smaller screens, so as a quick solution I used a horizontal scrollbar. I guess it doesn't make sense to deal with responsiveness, since EuiDataGrid will soon replace current implementation.

Regarding abbreviated units in the "duration" column @jasonrhodes do you maybe know if we have something I could reuse?

@mgiota mgiota mentioned this issue Jul 13, 2021
Merged
@mgiota
Copy link
Contributor

mgiota commented Jul 14, 2021 •
edited
Loading

@cyrille-leclerc @katrin-freihofner Can you elaborate a bit more on this part Units in the "duration" column are abbreviated in a useful way.?

Right now we use an extended formatter for our units. We could easily turn it off and use the default one.

Here's how the default formatter looks like:

hours -> hours
minutes -> minutes
seconds -> s
milliseconds -> ms
microseconds -> μs

Can you confirm if this is fine by you?

@weltenwort
Copy link
Member Author

I'd recommend to take a look at the <FormattedRelative /> component exported by @kbn/i18n. It has defaults that might be appropriate here.

andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Jul 21, 2021
@andrew-goldstein
## [Observability RAC] Alerts table post-EuiDataGrid style updates
37f8bb7 
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 mentioned this issue Jul 21, 2021
Merged
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Jul 22, 2021
@andrew-goldstein
## [Observability RAC] Alerts table post-EuiDataGrid style updates
9332b78 
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 issue Jul 26, 2021
@andrew-goldstein
## [Observability RAC] Alerts table post-EuiDataGrid style updates
0f34dfd 
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 issue Jul 27, 2021
@andrew-goldstein
[Observability RAC] Alerts table post-EuiDataGrid style updates (#1…
4d92daf 
…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 issue Jul 27, 2021
@andrew-goldstein @kibanamachine
[Observability RAC] Alerts table post-EuiDataGrid style updates (el…
5b5dd83 
…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 issue Jul 27, 2021
@kibanamachine @andrew-goldstein
[Observability RAC] Alerts table post-EuiDataGrid style updates (#1…
fc066ca 
…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>
streamich pushed a commit to vadimkibana/kibana that referenced this issue Aug 8, 2021
@andrew-goldstein @vadimkibana
[Observability RAC] Alerts table post-EuiDataGrid style updates (el…
7acd0ae 
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mgiota mgiota

Labels
Feature:RAC label obsolete refined Issue refined, ready to work on Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services Theme: rac label obsolete v7.15.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Observability RAC] Improve alerts table columns mgiota/kibana
4 participants
@jasonrhodes @weltenwort @mgiota @elasticmachine