From 7450bb1264d2a5c73482e65a0d26db7f7e9140a3 Mon Sep 17 00:00:00 2001 From: Angela Chuang <6295984+angorayc@users.noreply.github.com> Date: Tue, 5 Jan 2021 16:07:04 +0000 Subject: [PATCH] [Security Solution] JSON view for data is not displayed properly (#87008) # Conflicts: # x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx --- .../__snapshots__/event_details.test.tsx.snap | 1332 ----------------- .../event_details/event_details.test.tsx | 34 +- .../event_details/event_details.tsx | 9 +- .../events_viewer/event_details_flyout.tsx | 18 +- .../timeline/expandable_event/index.tsx | 39 +- 5 files changed, 65 insertions(+), 1367 deletions(-) delete mode 100644 x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap deleted file mode 100644 index e9b11d9bcdf71..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap +++ /dev/null @@ -1,1332 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EventDetails rendering should match snapshot 1`] = ` - - - - , - "id": "table-view", - "name": "Table", - } - } - tabs={ - Array [ - Object { - "content": - - - , - "id": "table-view", - "name": "Table", - }, - Object { - "content": - - - , - "id": "json-view", - "name": "JSON View", - }, - ] - } -/> -`; diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx index aece7f0da9419..4bd3ae126e9dc 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx @@ -4,7 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import { shallow } from 'enzyme'; +import { waitFor } from '@testing-library/dom'; +import { ReactWrapper } from 'enzyme'; import React from 'react'; import '../../mock/match_media'; @@ -38,23 +39,20 @@ describe('EventDetails', () => { isAlert: true, }; - const wrapper = mount( - - - - ); - - const alertsWrapper = mount( - - - - ); - - describe('rendering', () => { - test('should match snapshot', () => { - const shallowWrap = shallow(); - expect(shallowWrap).toMatchSnapshot(); - }); + let wrapper: ReactWrapper; + let alertsWrapper: ReactWrapper; + beforeAll(async () => { + wrapper = mount( + + + + ) as ReactWrapper; + alertsWrapper = mount( + + + + ) as ReactWrapper; + await waitFor(() => wrapper.update()); }); describe('tabs', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx index 123a3fa7b610b..0a8046e461d20 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx @@ -48,6 +48,11 @@ const StyledEuiTabbedContent = styled(EuiTabbedContent)` } `; +const TabContentWrapper = styled.div` + height: 100%; + position: relative; +`; + const EventDetailsComponent: React.FC = ({ browserFields, data, @@ -105,7 +110,9 @@ const EventDetailsComponent: React.FC = ({ content: ( <> - + + + ), }, diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx index 9c09f2e696104..72ec918fd0577 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx @@ -25,6 +25,20 @@ const StyledEuiFlyout = styled(EuiFlyout)` z-index: ${({ theme }) => theme.eui.euiZLevel7}; `; +const StyledEuiFlyoutBody = styled(EuiFlyoutBody)` + .euiFlyoutBody__overflow { + display: flex; + flex: 1; + overflow: hidden; + + .euiFlyoutBody__overflowContent { + flex: 1; + overflow: hidden; + padding: ${({ theme }) => `${theme.eui.paddingSizes.xs} ${theme.eui.paddingSizes.m} 64px`}; + } + } +`; + interface EventDetailsFlyoutProps { browserFields: BrowserFields; docValueFields: DocValueFields[]; @@ -67,7 +81,7 @@ const EventDetailsFlyoutComponent: React.FC = ({ - + = ({ timelineId={timelineId} timelineTabType="flyout" /> - + ); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx index a38fde0e3f548..27d28aa525d56 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx @@ -38,6 +38,7 @@ interface Props { event: TimelineExpandedEventType; isAlert: boolean; loading: boolean; + messageHeight?: number; timelineTabType: TimelineTabs | 'flyout'; timelineId: string; } @@ -52,6 +53,14 @@ const StyledEuiFlexGroup = styled(EuiFlexGroup)` flex: 0; `; +const StyledFlexGroup = styled(EuiFlexGroup)` + height: 100%; +`; + +const StyledEuiFlexItem = styled(EuiFlexItem)` + overflow: hidden; +`; + export const ExpandableEventTitle = React.memo( ({ isAlert, loading, handleOnEventClosed }) => ( @@ -99,9 +108,9 @@ export const ExpandableEvent = React.memo( } return ( - <> + {message && ( - <> + {i18n.MESSAGE} @@ -109,19 +118,21 @@ export const ExpandableEvent = React.memo( - + )} - - + + + + ); } );