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

[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

Commits on Nov 15, 2021

  1. [Security Solution] Adjusts the width of the Actions column and act…

    …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 committed Nov 15, 2021
    Configuration menu
    Copy the full SHA
    6401c65 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    82497d7 View commit details
    Browse the repository at this point in the history