* [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 * Update event_details.test.tsx Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com>
This commit is contained in:
parent
ce8f529f15
commit
8062425ddb
File diff suppressed because it is too large
Load diff
|
@ -4,7 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
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) => {
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
),
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue