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

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

Merged
merged 4 commits into from
Nov 15, 2021
Merged

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

merged 4 commits into from
Nov 15, 2021

Conversation

andrew-goldstein
Copy link
Contributor

Backports the following commits to 7.16:

@andrew-goldstein
[Security Solution] Adjusts the width of the Actions column and act…
ee0f9eb 
…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/events_viewer.test.tsx
#	x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
#	x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx
#	x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx
@andrew-goldstein andrew-goldstein enabled auto-merge (squash) November 15, 2021 18:52
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 2738 2737 -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 848 849 +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.6MB 4.6MB -2.3KB
timelines 235.1KB 206.3KB -28.9KB
total -31.2KB

Page load bundle

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

id before after diff
securitySolution 103.6KB 103.6KB +2.0B
timelines 156.6KB 167.2KB +10.6KB
total +10.6KB
Unknown metric groups

API count

id before after diff
timelines 969 972 +3

async chunk count

id before after diff
securitySolution 22 23 +1

References to deprecated APIs

id before after diff
securitySolution 1005 991 -14

History

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

@andrew-goldstein andrew-goldstein merged commit 79528f1 into elastic:7.16 Nov 15, 2021
@andrew-goldstein andrew-goldstein deleted the backport/7.16/pr-118454 branch November 16, 2021 00:52
@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
No one assigned
Labels
backport
Projects
None yet
Milestone
No milestone
Development

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