Skip to content

[Security Solution] Full screen timeline, Collapse event#71786

Merged
andrew-goldstein merged 17 commits intoelastic:masterfrom
andrew-goldstein:full-screen-timeline
Jul 15, 2020
Merged

[Security Solution] Full screen timeline, Collapse event#71786
andrew-goldstein merged 17 commits intoelastic:masterfrom
andrew-goldstein:full-screen-timeline

Conversation

@andrew-goldstein
Copy link
Copy Markdown
Contributor

@andrew-goldstein andrew-goldstein commented Jul 14, 2020 •
edited
Loading

Full screen Timeline & Timeline-based views

  • Adds a Full screen mode to Timeline, and all Timeline-based views, including:
    • Detections
    • Detections > Rule details
    • Hosts > Events
    • Hosts > External alerts
    • Network > External alerts
    • Timeline
  • Enter full screen from any Resolver
  • Adds a Collapse event action for quickly collapsing an expanded Timeline event
  • Hides the Add to case action in timeline-based Resolver views, so those actions are only enabled in Timeline (a TODO from [Security] Investigate in Resolver Timeline Integration #70111)

Full screen detections

full-screen-detections

Enter full screen from any Resolver

full-screen-resolver

Full screen Timeline

full-screen-timeline

Collapse event

collapse-event

Sort tooltip

sort-tooltip

@andrew-goldstein
- wip: basic toggle in Alert list and timeline
cffe3fa 
- increase margin around `Exit full screen` button
- cleanup timeline resize handle
- wip: fix style issue
- restored full screen button style
- Extends full screen mode to all timeline-based views
- Fixes an issue where the size of the actions column changed while loading data in timeline based views
- Collapse event button to avoid scrolling to the top of an event
- Adds tooltip to the timeline sort indiciator to indicate current sort direction
- fixing tests
@andrew-goldstein
* added a ts-expect-error and TODO in `x-pack/plugins/security_so…
00ec93a 
…lution/public/common/store/store.ts`
@andrew-goldstein
Merge branch 'master' of github.com:elastic/kibana into full-screen-t…
61fe7c4 
…imeline
@andrew-goldstein andrew-goldstein requested a review from XavierM July 14, 2020 22:39
@andrew-goldstein andrew-goldstein requested review from a team as code owners July 14, 2020 22:39
@andrew-goldstein andrew-goldstein self-assigned this Jul 14, 2020
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jul 14, 2020

Pinging @elastic/siem (Team:SIEM)

XavierM
XavierM reviewed Jul 14, 2020
View reviewed changes
XavierM
XavierM approved these changes Jul 15, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@XavierM XavierM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

This is so nice, I feel like I am in a magic security solutions castle.

Good job, @andrew-goldstein another feature who would be loved by our users.

@andrew-goldstein
This error was actually an artifact of the optimized (for editing) `t…
e3f6def 
…sconfig`, which was generated by running:

```
node x-pack/plugins/security_solution/scripts/optimize_tsconfig
```

After returning to the default (checked-in) `tsconfig` via:

```
node x-pack/plugins/security_solution/scripts/unoptimize_tsconfig.js
```

it passes the type checker without error, so I'm removing the `@ts-ignore`
@andrew-goldstein
Merge branch 'master' of github.com:elastic/kibana into full-screen-t…
8330b64 
…imeline
@andrew-goldstein
- updated snapshot
8a7fe1b
@tylersmalley
Copy link
Copy Markdown
Member

tylersmalley commented Jul 15, 2020

@elasticmachine merge upstream

@andrew-goldstein
Copy link
Copy Markdown
Contributor Author

andrew-goldstein commented Jul 15, 2020

@elasticmachine merge upstream

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jul 15, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

id value diff baseline
securitySolution 895 +131 764

async chunks size

id value diff baseline
securitySolution 9.2MB +212.5KB 9.0MB

miscellaneous assets size

id value diff baseline
securitySolution 654.7KB +305.0B 654.4KB
upgradeAssistant 22.5KB +3.0B 22.5KB
total - +308.0B -

page load bundle size

id value diff baseline
securitySolution 869.3KB +1.5KB 867.8KB

History

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

@andrew-goldstein andrew-goldstein merged commit 0c0aaf0 into elastic:master Jul 15, 2020
@andrew-goldstein andrew-goldstein deleted the full-screen-timeline branch July 15, 2020 10:12
@andrew-goldstein andrew-goldstein mentioned this pull request Jul 15, 2020
Merged
angorayc pushed a commit that referenced this pull request Jul 15, 2020
@andrew-goldstein
[Security Solution] Full screen timeline, Collapse event (#71786) (#7…
887cc12 
…1838)

## Full screen Timeline & Timeline-based views

- Adds a _Full screen_ mode to Timeline, and all Timeline-based views, including:
  - Detections
  - Detections > Rule details
  - Hosts > Events
  - Hosts > External alerts
  - Network > External alerts
  - Timeline
- Enter full screen from any Resolver
- Adds a `Collapse event` action for quickly collapsing an expanded Timeline event
- Hides the `Add to case action` in timeline-based Resolver views, so those actions are only enabled in Timeline (a `TODO`  from #70111)

### Full screen detections
![full-screen-detections](https://user-images.githubusercontent.com/4459398/87493332-d348f280-c609-11ea-9399-126d2259daa2.gif)

### Enter full screen from any Resolver
![full-screen-resolver](https://user-images.githubusercontent.com/4459398/87493348-de038780-c609-11ea-86a3-52ab24055e38.gif)

### Full screen Timeline
![full-screen-timeline](https://user-images.githubusercontent.com/4459398/87493394-f4114800-c609-11ea-8d62-4add291d937a.gif)

### Collapse event
![collapse-event](https://user-images.githubusercontent.com/4459398/87493408-fa9fbf80-c609-11ea-88c8-fa87d82d1eb1.gif)

### Sort tooltip
![sort-tooltip](https://user-images.githubusercontent.com/4459398/87493417-012e3700-c60a-11ea-9905-44e3b7cfe60f.gif)
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 15, 2020
@gmmorris
Merge branch 'master' into alerting/consumer-based-rbac-with-feature
9346bf5 
* master:
  [APM] Add error rates to Service Map popovers (elastic#69520)
  [Security Solution][Detection Engine] - Update exceptions logic (elastic#71512)
  [Security Solution] Full screen timeline, Collapse event (elastic#71786)
  [Security Solution][Exception Modal] Create endpoint exception list if it doesn't already exist (elastic#71807)
  [Detection Rules] Add 7.9 rules (elastic#71808)
  [Search] Add telemetry for data plugin search service (elastic#70677)
  Add @elastic/safer-lodash-set as an alternative to lodash.set (elastic#67452)
  [tests] Temporarily skipped to promote snapshot
gmmorris added a commit to gmmorris/kibana that referenced this pull request Jul 15, 2020
@gmmorris
Merge branch 'master' into alerting/consumer-based-rbac
cdef95d 
* master:
  [APM] Add error rates to Service Map popovers (elastic#69520)
  [Security Solution][Detection Engine] - Update exceptions logic (elastic#71512)
  [Security Solution] Full screen timeline, Collapse event (elastic#71786)
  [Security Solution][Exception Modal] Create endpoint exception list if it doesn't already exist (elastic#71807)
  [Detection Rules] Add 7.9 rules (elastic#71808)
  [Search] Add telemetry for data plugin search service (elastic#70677)
  Add @elastic/safer-lodash-set as an alternative to lodash.set (elastic#67452)
  [tests] Temporarily skipped to promote snapshot
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request Jul 21, 2020
@andrew-goldstein
## [Security Solution] Full screen Timeline CSS fixes
4a2f7a7 
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**
- [ ] 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**
- [ ] 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**
- [ ] 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 mentioned this pull request Jul 21, 2020
Merged
6 tasks
andrew-goldstein added a commit that referenced this pull request Jul 21, 2020
@andrew-goldstein
[Security Solution] Full screen Timeline CSS fixes (#72559)
3f2913b 
## [Security Solution] Full screen Timeline CSS fixes

Fixes CSS issues related to the [Full screen timeline, Collapse event](#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 added a commit to andrew-goldstein/kibana that referenced this pull request Jul 21, 2020
@andrew-goldstein
[Security Solution] Full screen Timeline CSS fixes (elastic#72559)
8671803 
## [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 added a commit to andrew-goldstein/kibana that referenced this pull request Jul 21, 2020
@andrew-goldstein
[Security Solution] Full screen Timeline CSS fixes (elastic#72559)
3d054fe 
## [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 added a commit that referenced this pull request Jul 21, 2020
@andrew-goldstein
[Security Solution] Full screen Timeline CSS fixes (#72559) (#72729)
b563297 
## [Security Solution] Full screen Timeline CSS fixes

Fixes CSS issues related to the [Full screen timeline, Collapse event](#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 added a commit that referenced this pull request Jul 21, 2020
@andrew-goldstein
[Security Solution] Full screen Timeline CSS fixes (#72559) (#72727)
2d9e5c2 
## [Security Solution] Full screen Timeline CSS fixes

Fixes CSS issues related to the [Full screen timeline, Collapse event](#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`
@MindyRS MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 23, 2021
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Sep 23, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@XavierM XavierM XavierM approved these changes

Assignees

@andrew-goldstein andrew-goldstein

Labels

release_note:enhancement Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:SIEM v7.9.0 v8.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@andrew-goldstein @elasticmachine @tylersmalley @kibanamachine @XavierM @MindyRS