maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Security Solution] JSON view for data is not displayed properly (#87008)

Browse source
This commit is contained in:
Angela Chuang 2021-01-05 16:07:04 +00:00 committed by GitHub
parent ff94674919
commit 81887b7400
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 1356 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1332
x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/event_details.test.tsx.snap generated
View file

File diff suppressed because it is too large Load diff

8
x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
View file

@ -5,7 +5,7 @@
*/
import { waitFor } from '@testing-library/dom';
import { ReactWrapper, shallow } from 'enzyme';
import { ReactWrapper } from 'enzyme';
import React from 'react';
import '../../mock/match_media';
@ -54,12 +54,6 @@ describe('EventDetails', () => {
) as ReactWrapper;
await waitFor(() => wrapper.update());
});
describe('rendering', () => {
test('should match snapshot', () => {
const shallowWrap = shallow(<EventDetails {...defaultProps} />);
expect(shallowWrap).toMatchSnapshot();
});
});
describe('tabs', () => {
['Table', 'JSON View'].forEach((tab) => {

9
x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
View file

@ -48,6 +48,11 @@ const StyledEuiTabbedContent = styled(EuiTabbedContent)`
}
`;
const TabContentWrapper = styled.div`
height: 100%;
position: relative;
`;
const EventDetailsComponent: React.FC<Props> = ({
browserFields,
data,
@ -105,7 +110,9 @@ const EventDetailsComponent: React.FC<Props> = ({
content: (
<>
<EuiSpacer size="m" />
<JsonView data={data} />
<TabContentWrapper>
<JsonView data={data} />
</TabContentWrapper>
</>
),
},

18
x-pack/plugins/security_solution/public/common/components/events_viewer/event_details_flyout.tsx
View file

@ -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<EventDetailsFlyoutProps> = ({
<EuiFlyoutHeader hasBorder>
<ExpandableEventTitle isAlert={isAlert} loading={loading} />
</EuiFlyoutHeader>
<EuiFlyoutBody>
<StyledEuiFlyoutBody>
<ExpandableEvent
browserFields={browserFields}
detailsData={detailsData}
@ -77,7 +91,7 @@ const EventDetailsFlyoutComponent: React.FC<EventDetailsFlyoutProps> = ({
timelineId={timelineId}
timelineTabType="flyout"
/>
</EuiFlyoutBody>
</StyledEuiFlyoutBody>
</StyledEuiFlyout>
);
};

39
x-pack/plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx
View file

@ -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<ExpandableEventTitleProps>(
({ isAlert, loading, handleOnEventClosed }) => (
<StyledEuiFlexGroup justifyContent="spaceBetween" wrap={true}>
@ -99,9 +108,9 @@ export const ExpandableEvent = React.memo<Props>(
}
return (
<>
<StyledFlexGroup direction="column" gutterSize="none">
{message && (
<>
<EuiFlexItem grow={false}>
<EuiDescriptionList data-test-subj="event-message" compressed>
<EuiDescriptionListTitle>{i18n.MESSAGE}</EuiDescriptionListTitle>
<EuiDescriptionListDescription>
@ -109,19 +118,21 @@ export const ExpandableEvent = React.memo<Props>(
</EuiDescriptionListDescription>
</EuiDescriptionList>
<EuiSpacer size="m" />
</>
</EuiFlexItem>
)}
<EventDetails
browserFields={browserFields}
data={detailsData!}
id={event.eventId!}
isAlert={isAlert}
onViewSelected={setView}
timelineTabType={timelineTabType}
timelineId={timelineId}
view={view}
/>
</>
<StyledEuiFlexItem grow={true}>
<EventDetails
browserFields={browserFields}
data={detailsData!}
id={event.eventId!}
isAlert={isAlert}
onViewSelected={setView}
timelineTabType={timelineTabType}
timelineId={timelineId}
view={view}
/>
</StyledEuiFlexItem>
</StyledFlexGroup>
);
}
);