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

[7.9] [Security Solution] Full screen Timeline CSS fixes (#72559) #72729

Merged

Conversation

andrew-goldstein
Copy link
Contributor

Backports the following commits to 7.9:

## [Security Solution] Full screen Timeline CSS fixes

Fixes CSS issues related to the [Full screen timeline, Collapse event](elastic#71786) feature:

- Sometimes, Timeline's left padding is missing in Full screen mode
- The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode
- The Timeline flyout button is not opaque when the alerts table is in Full screen mode

### Sometimes, Timeline's left padding is missing in Full screen mode

To reproduce:

1) Drag anything to the Timeline
2) Click the `Full screen` button

**Expected result**
- [x] The timeline has left padding in full screen mode

**Actual result**
- [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:

![timeline-full-screen-before](https://user-images.githubusercontent.com/4459398/87998223-8acf8000-cab4-11ea-91a1-6b5644856b44.png)

### Fix: screenshot

![timeline-full-screen-after](https://user-images.githubusercontent.com/4459398/87998363-e3068200-cab4-11ea-8484-41d87ba4c97e.png)

### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode

1) Create a new timeline with the following KQL query: `agent.type : endpoint`
2) Click the `Analyze event` button on any enabled event to view Resolver

**Expected result**
- [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines

**Actual result**
- [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:

![attach-to-case-before](https://user-images.githubusercontent.com/4459398/87998636-b9018f80-cab5-11ea-87e8-a54355386519.png)

### Fix: screenshot

![attach-to-case-after](https://user-images.githubusercontent.com/4459398/87998553-82c41000-cab5-11ea-9e33-fcffce11e4b4.png)

### The Timeline flyout button is not opaque when the alerts table is in Full screen mode

To reproduce:

1) Navigate to Security > Detections
2) Click on the `Full screen` button

**Expected result**
- [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode

**Actual result**
- [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:

![flyout-button-before](https://user-images.githubusercontent.com/4459398/87998761-0d0c7400-cab6-11ea-9cd3-0c091e0291c9.png)

## Fix: screenshot (light theme)

![flyout-button-after-light](https://user-images.githubusercontent.com/4459398/87998784-231a3480-cab6-11ea-8fc9-17c28cf25202.png)

## Fix: screenshot (dark theme)

![flyout-button-after-dark](https://user-images.githubusercontent.com/4459398/87998824-45ac4d80-cab6-11ea-96ef-6242b8494f84.png)

### Desk testing

Desk tested in :
- Chrome `84.0.4147.89`
- Firefox `78.0.2`
- Safari `13.1.2`
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Build metrics

✅ unchanged

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

@andrew-goldstein andrew-goldstein merged commit b563297 into elastic:7.9 Jul 21, 2020
@andrew-goldstein andrew-goldstein deleted the backport/7.9/pr-72559 branch July 21, 2020 21:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants