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

[Security Solution] UI is broken for status under alert details flyout #115709

Closed
ghost opened this issue Oct 20, 2021 · 1 comment · Fixed by #116237
Closed

[Security Solution] UI is broken for status under alert details flyout #115709

ghost opened this issue Oct 20, 2021 · 1 comment · Fixed by #116237
Assignees
@andrew-goldstein
Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team v7.16.0

Comments

@ghost
Copy link

ghost commented Oct 20, 2021 •
edited by ghost
Loading

Describe the bug
UI is broken for status under alert details flyout.

Build Details:

Version:8.0.0 SNAPSHOT
Build: 47315
COMMIT: 9d0bf40c25dcdb3e58a489f936d7413c15c6949a

Browser Details:
N/A

Preconditions

  1. Kibana should be running.
  2. Agent should be installed
  3. Alerts should be created

Steps to Reproduce

  1. Navigate to alerts tab
  2. Click on view details
  3. observe that UI is broken for status under alert details flyout

Actual Result
UI is broken for status under alert details flyout

Expected Result
UI should not be broken for status under alert details flyout

What's Working

  • N/A

What's Not Working

  • N/A

Screen-Shot
image
@ghost ghost added bug Fixes for quality problems that affect the customer experience triage_needed Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. v7.16.0 labels Oct 20, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@ghost ghost added the impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. label Oct 20, 2021
@ghost ghost assigned MadameSheema Oct 20, 2021
@ghost ghost added impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. and removed impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Oct 20, 2021
@MadameSheema MadameSheema added impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. and removed impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. labels Oct 20, 2021
@MadameSheema MadameSheema removed their assignment Oct 20, 2021
@MadameSheema MadameSheema added Team:Threat Hunting:Investigations Security Solution Investigations Team and removed triage_needed labels Oct 20, 2021
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue Oct 26, 2021
@andrew-goldstein
## [Security Solution] Prevents the Status badge from stretching in…
0f74218 
… the Alert Details flyout

This PR fixes <elastic#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)
@andrew-goldstein andrew-goldstein mentioned this issue Oct 26, 2021
Merged
andrew-goldstein added a commit that referenced this issue Oct 26, 2021
@andrew-goldstein
[Security Solution] Prevents the Status badge from stretching in th…
9911883 
…e Alert Details flyout (#116237)

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

This PR fixes <#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)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 26, 2021
@andrew-goldstein @kibanamachine
[Security Solution] Prevents the Status badge from stretching in th…
0435430 
…e Alert Details flyout (elastic#116237)

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

This PR fixes <elastic#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)
kibanamachine added a commit that referenced this issue Oct 26, 2021
@kibanamachine @andrew-goldstein
[Security Solution] Prevents the Status badge from stretching in th…
60d0e4a 
…e Alert Details flyout (#116237) (#116320)

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

This PR fixes <#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)

Co-authored-by: Andrew Goldstein <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andrew-goldstein andrew-goldstein

Labels
bug Fixes for quality problems that affect the customer experience impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team v7.16.0
Projects
None yet
Milestone
No milestone
3 participants
@andrew-goldstein @elasticmachine @MadameSheema