[Security Solution] Prevents the Status
badge from stretching in the Alert Details flyout (#116237)
## [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:
parent
b17e01dd9a
commit
9911883ba4
3 changed files with 23 additions and 16 deletions
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue