Skip to content

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

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
Merged
merged 17 commits into from
Jul 15, 2020
Merged

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

merged 17 commits into from
Jul 15, 2020

Conversation

@andrew-goldstein
Copy link
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
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
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
Contributor

tylersmalley commented Jul 15, 2020

@elasticmachine merge upstream

@andrew-goldstein
Copy link
Contributor Author

andrew-goldstein commented Jul 15, 2020

@elasticmachine merge upstream

@kibanamachine
Copy link
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
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