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

[8.0] [Security Solution] Adjusts the width of the Actions column and action icon buttons (#118454) #118598

Merged
merged 2 commits into from
Nov 16, 2021
Merged

[8.0] [Security Solution] Adjusts the width of the Actions column and action icon buttons (#118454) #118598

merged 2 commits into from
Nov 16, 2021

Conversation

andrew-goldstein
Copy link
Contributor

Backports the following commits to 8.0:

@andrew-goldstein
[Security Solution] Adjusts the width of the Actions column and act…
6401c65 
…ion icon buttons (elastic#118454)

## [Security Solution] Adjusts the width of the `Actions` column and action icon buttons

This PR adjusts the width of the `Actions` column, and normalizes the action icon button sizes throughout the Security Solution, per elastic#115726

### Before / after screenshots

This section provides before / after screenshots for the following views:

- Alerts
- Alerts > Event rendered
- Rules > Details
- Rules > Details > Event rendered
- Host > Events
- Host > External alerts
- Network > External alerts
- Timeline > Query tab
- Timeline > Correlation tab
- Timeline > Pinned tab
- Observability > alerts (no change)

#### Alerts (before)

![01-security_alerts_before](https://user-images.githubusercontent.com/4459398/141429498-a6040f8b-5bfb-468e-aa1a-993caa7f179c.png)

#### Alerts (after)

![01a-security_alerts_after](https://user-images.githubusercontent.com/4459398/141429618-8ad313e1-fabc-424e-9e7d-c24240861c1d.png)

#### Alerts > Event rendered (before)

![02-security_alerts_event_rendered_before](https://user-images.githubusercontent.com/4459398/141430881-2bfeb57a-9881-47f1-99e4-cc7eadcfff69.png)

#### Alerts > Event rendered (after)

![02a-security_alerts_event_rendered_after](https://user-images.githubusercontent.com/4459398/141430976-88f8099a-81b1-4f1c-99a2-26f86218f909.png)

#### Rules > Details (before)

![03-security_rules_details_before](https://user-images.githubusercontent.com/4459398/141431149-a308f171-a170-4ce9-9616-77e5c08dc406.png)

#### Rules > Details (after)

![03a-security_rules_details_after](https://user-images.githubusercontent.com/4459398/141431221-06701540-97bb-400a-97bf-f2d22cd65caf.png)

#### Rules > Details > Event rendered (before)

![04-security_rule_details_event_rendered_before](https://user-images.githubusercontent.com/4459398/141431394-12b29689-41c8-44b6-b69f-7796f99c5424.png)

#### Rules > Details > Event rendered (after)

![04a-security_rule_details_event_rendered_after](https://user-images.githubusercontent.com/4459398/141431477-049804c0-1455-4216-a241-a44df5c9d398.png)

#### Host > Events (before)

![05-host_events_before](https://user-images.githubusercontent.com/4459398/141431858-31116980-47f7-4779-af26-3b3785638137.png)

#### Host > Events (after)

![05a-host_events_after](https://user-images.githubusercontent.com/4459398/141431956-664f86b9-2ad7-4281-bf82-8278fa23c755.png)

#### Host > External alerts (before)

![06-host_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432103-8cc9c10e-4d2d-42ec-a62c-a1e5867bf2d8.png)

#### Host > External alerts (after)

![06a-host_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432185-4d7e4007-dea9-47f3-af4b-1719f338a5ba.png)

#### Network > External alerts (before)

![07-network_external_alerts_before](https://user-images.githubusercontent.com/4459398/141432331-2bb5a714-f733-4c97-91dc-73ff76633daa.png)

#### Network > External alerts (after)

![07a-network_external_alerts_after](https://user-images.githubusercontent.com/4459398/141432428-b7b20450-db87-44ab-8014-cf4d6032dfe3.png)

#### Timeline > Query tab (before)

![08-timeline_query_tab_before](https://user-images.githubusercontent.com/4459398/141432638-e484813b-275d-4eff-aa38-1705f913ce59.png)

#### Timeline > Query tab (after)

![08a-timeline_query_tab_after](https://user-images.githubusercontent.com/4459398/141434461-1d36bba5-8fd1-484a-bacd-733aede95815.png)

#### Timeline > Correlation tab (before)

![09-timeline_correlation_tab_before](https://user-images.githubusercontent.com/4459398/141434637-33f05447-e3d3-4eac-b38a-3612945e8379.png)

#### Timeline > Correlation tab (after)

![09a-timeline_correlation_tab_after](https://user-images.githubusercontent.com/4459398/141434751-250fd26b-25fc-48cc-8a06-dbb17e53dce7.png)

#### Timeline > Pinned tab (before)

![10-timeline_pinned_tab_before](https://user-images.githubusercontent.com/4459398/141434893-3f2b3d17-7e4b-4e0c-9096-ab1ee57f096f.png)

#### Timeline > Pinned tab (after)

![10a-timeline_pinned_tab_after](https://user-images.githubusercontent.com/4459398/141435431-26eac065-bce4-4a25-99fd-095d447fb6f3.png)

#### Observability > alerts (before)

![11-observability_alerts_before](https://user-images.githubusercontent.com/4459398/141435607-da059e9c-af03-4a21-bb1b-e47d44d61dde.png)

#### Observability > alerts (after / no change)

![11a-observability_alerts_after_no_change](https://user-images.githubusercontent.com/4459398/141435696-52bcc5e1-6823-4b6a-b2da-32e3f8733dc8.png)

### Additional details

- Per [this comment](elastic#115726 (comment)) from @monina-n , the size of all action buttons have been normalized match the size off the `...` overflow button (`28 x 32` at the time of this writing) via the `EuiButtonIcon` `size` prop:

```
size="s"
```

- The horizontal alignment of the `Analyze event` icon was updated by the EUI team in the following PR: elastic/eui#5365

# Conflicts:
#	x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
@andrew-goldstein andrew-goldstein enabled auto-merge (squash) November 15, 2021 18:42
@andrew-goldstein andrew-goldstein self-assigned this Nov 15, 2021
@andrew-goldstein andrew-goldstein merged commit 6f17707 into elastic:8.0 Nov 16, 2021
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 2751 2750 -1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
timelines 861 862 +1

Async chunks

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

id before after diff
securitySolution 4.5MB 4.5MB -2.2KB
timelines 236.9KB 207.4KB -29.5KB
total -31.8KB

Page load bundle

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

id before after diff
securitySolution 254.0KB 253.9KB -158.0B
timelines 156.7KB 167.8KB +11.0KB
total +10.9KB
Unknown metric groups

API count

id before after diff
timelines 977 980 +3

async chunk count

id before after diff
securitySolution 20 21 +1

References to deprecated APIs

id before after diff
securitySolution 536 534 -2

History

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

cc @andrew-goldstein

@andrew-goldstein andrew-goldstein deleted the backport/8.0/pr-118454 branch November 16, 2021 00:51
@andrew-goldstein andrew-goldstein mentioned this pull request Nov 18, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@andrew-goldstein andrew-goldstein

Labels
backport
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@andrew-goldstein @kibana-ci