maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Security Solution] Prevents the Status badge from stretching in the Alert Details flyout (#116237)

Browse source 
## [Security Solution] Prevents the `Status` badge from stretching in the Alert Details flyout

This PR fixes <https://github.com/elastic/kibana/issues/115709> to prevent the `Status` badge from stretching in the Alert Details flyout.

### Screenshots

**Before:**

![before](https://user-images.githubusercontent.com/4459398/138806049-895317b6-2990-43f6-b978-dab1711494a5.png)

After Chrome `95.0.4638.54`:

![after-chrome](https://user-images.githubusercontent.com/4459398/138806164-ce802982-5c5a-4a30-a906-1583e2ba9939.png)

After Firefox `93.0`:

![after-firefox](https://user-images.githubusercontent.com/4459398/138806249-152a6b33-f1b9-4a5b-8607-8da29689d599.png)

After Safari `15.0`:

![after-safari](https://user-images.githubusercontent.com/4459398/138806320-45202b3a-1f84-4a4f-8fd0-107523597a22.png)

### Details

The fix overrides the default value of `EuiFlexGroup`'s `alignItems` prop, which has a default value of `stretch`, per the image below:

![EuiFlexGroup_alignItems](https://user-images.githubusercontent.com/4459398/138805941-96e06533-8df7-447c-bb74-9278a06d39db.png)
This commit is contained in:
Andrew Goldstein 2021-10-26 09:46:01 -06:00 committed by GitHub
parent b17e01dd9a
commit 9911883ba4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap generated
View file

@ -136,7 +136,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.status"
>
<div
@ -207,7 +207,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-@timestamp"
>
<div
@ -278,7 +278,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.name"
>
<div
@ -349,7 +349,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.severity"
>
<div
@ -420,7 +420,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.risk_score"
>
<div
@ -491,7 +491,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-host.name"
>
<div
@ -562,7 +562,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-user.name"
>
<div
@ -633,7 +633,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1`
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-source.ip"
>
<div
@ -828,7 +828,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.status"
>
<div
@ -899,7 +899,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-@timestamp"
>
<div
@ -970,7 +970,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.name"
>
<div
@ -1041,7 +1041,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.severity"
>
<div
@ -1112,7 +1112,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-signal.rule.risk_score"
>
<div
@ -1183,7 +1183,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-host.name"
>
<div
@ -1254,7 +1254,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-user.name"
>
<div
@ -1325,7 +1325,7 @@ exports[`AlertSummaryView Memory event code renders additional summary rows 1`]
class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent"
>
<div
class="euiFlexGroup euiFlexGroup--directionColumn euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn euiFlexGroup--responsive"
data-test-subj="event-field-source.ip"
>
<div

6
x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.test.tsx
View file

@ -180,6 +180,12 @@ describe('FieldValueCell', () => {
);
});
test('it aligns items at the start of the group to prevent content from stretching (by default)', () => {
expect(screen.getByTestId(`event-field-${hostIpData.field}`)).toHaveClass(
'euiFlexGroup--alignItemsFlexStart'
);
});
test('it renders link buttons for each of the host ip addresses', () => {
expect(screen.getAllByRole('button').length).toBe(hostIpValues.length);
});

1
x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
View file

@ -37,6 +37,7 @@ export const FieldValueCell = React.memo(
}: FieldValueCellProps) => {
return (
<EuiFlexGroup
alignItems="flexStart"
data-test-subj={`event-field-${data.field}`}
direction="column"
gutterSize="none"