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 7ddb09e28fead8..fdb565ad78538e 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 @@ -6,7 +6,13 @@ */ import React, { useMemo, useEffect, useRef, useLayoutEffect } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLoadingSpinner } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiLoadingSpinner, + EuiSpacer, +} from '@elastic/eui'; import { euiThemeVars } from '@kbn/ui-theme'; import { useDispatch } from 'react-redux'; import styled, { css } from 'styled-components'; @@ -30,6 +36,8 @@ import { SourcererScopeName } from '../../../common/store/sourcerer/model'; import { useSourcererDataView } from '../../../common/containers/sourcerer'; import { sourcererSelectors } from '../../../common/store'; +const SESSION_VIEW_FULL_SCREEN = 'sessionViewFullScreen'; + const OverlayStyle = css` display: flex; flex-direction: column; @@ -59,10 +67,12 @@ const StyledResolver = styled(Resolver)` `; const ScrollableFlexItem = styled(EuiFlexItem)` - ${({ theme }) => `padding: 0 ${theme.eui.euiSizeM}; - background-color: ${theme.eui.euiColorEmptyShade};`} + ${({ theme }) => `background-color: ${theme.eui.euiColorEmptyShade};`} overflow: hidden; width: 100%; + &.${SESSION_VIEW_FULL_SCREEN} { + ${({ theme }) => `padding: 0 ${theme.eui.euiSizeM}`} + } `; interface GraphOverlayProps { @@ -158,8 +168,13 @@ const GraphOverlayComponent: React.FC = ({ return ( + {Navigation} - {SessionView} + + + + {SessionView} + ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx index 324c13d320f459..1685f55076c583 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx @@ -6,13 +6,15 @@ */ import React, { useState, useCallback } from 'react'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui'; import styled from 'styled-components'; import { TimelineId } from '../../../../../common/types/timeline'; import { useSessionViewNavigation, useSessionView } from './use_session_view'; -const FlexItemWithMargin = styled(EuiFlexItem)` +const MaxWidthFlexItem = styled(EuiFlexItem)` width: 100%; +`; +const SessionViewWrapper = styled.div` ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`} `; @@ -59,10 +61,13 @@ const SessionTabContent: React.FC = ({ timelineId }) => { ref={measuredRef} data-test-subj="timeline-session-content" > - + + {Navigation} - {SessionView} - + + + {SessionView} + {shouldShowDetailsPanel && ( <> diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts index 1f0135e631858f..14f8e7f8b6a3c8 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/translations.ts @@ -17,6 +17,6 @@ export const CLOSE_ANALYZER = i18n.translate( export const CLOSE_SESSION = i18n.translate( 'xpack.securitySolution.timeline.graphOverlay.closeSessionButton', { - defaultMessage: 'Close session', + defaultMessage: 'Close session viewer', } ); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx index 12fedad3b225e1..b9977db080cd89 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx @@ -145,7 +145,7 @@ describe('useSessionView with active timeline and a session id and graph event i ); const navigation = result.current.Navigation; const renderResult = render({navigation}); - expect(renderResult.getByText('Close session')).toBeTruthy(); + expect(renderResult.getByText('Close session viewer')).toBeTruthy(); }); it('uses an optional height when passed', () => {