Skip to content

Conversation

@andrew-goldstein
Copy link
Contributor

Backports the following commits to 7.x:

## [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`
@andrew-goldstein andrew-goldstein added the backport This PR is a backport of another PR label Jul 21, 2020
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Build metrics

async chunks size

id value diff baseline
securitySolution 7.3MB +246.0B 7.3MB

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

@andrew-goldstein andrew-goldstein merged commit 2d9e5c2 into elastic:7.x Jul 21, 2020
@andrew-goldstein andrew-goldstein deleted the backport/7.x/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

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants