From 4a2f7a7cd9ca10a34540e4a5f4f3dafce7714b54 Mon Sep 17 00:00:00 2001 From: Andrew Goldstein Date: Mon, 20 Jul 2020 17:56:38 -0600 Subject: [PATCH 1/2] ## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](https://github.com/elastic/kibana/pull/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` --- .../public/timelines/components/flyout/button/index.tsx | 1 + .../public/timelines/components/flyout/pane/index.tsx | 4 ++-- .../public/timelines/components/graph_overlay/index.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx index 5896a02b82023..c0a59fd07e348 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx @@ -39,6 +39,7 @@ const Container = styled.div` } .${FLYOUT_BUTTON_CLASS_NAME} { + background: ${({ theme }) => rgba(theme.eui.euiPageBackgroundColor, 1)}; border-radius: 4px 4px 0 0; box-shadow: none; height: 46px; diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx index f41d318ba9587..b3145e65b847e 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx @@ -100,8 +100,8 @@ const FlyoutPaneComponent: React.FC = ({ diff --git a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx index 9f20c7f6c1571..54b30aca44a1f 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx @@ -181,7 +181,7 @@ const GraphOverlayComponent = ({ {timelineId === TimelineId.active && timelineType === TimelineType.default && ( - + Date: Tue, 21 Jul 2020 09:44:13 -0600 Subject: [PATCH 2/2] - hides the resize handle in full screen mode --- .../public/timelines/components/flyout/pane/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx index b3145e65b847e..3f842bcc2eb68 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/pane/index.tsx @@ -44,6 +44,8 @@ const StyledResizable = styled(Resizable)` const RESIZABLE_ENABLE = { left: true }; +const RESIZABLE_DISABLED = { left: false }; + const FlyoutPaneComponent: React.FC = ({ children, onClose, @@ -98,7 +100,7 @@ const FlyoutPaneComponent: React.FC = ({ size="l" >