Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Session View] Close session viewer button fixes #131910

Merged
merged 3 commits into from
May 12, 2022
Merged

[Session View] Close session viewer button fixes #131910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33d9c0a
fix close session viewer button
opauloh May 9, 2022
9ce671e
adding fullscreen class for session view
opauloh May 10, 2022
bbe9cb6
Merge branch 'main' into fix-close-session-viewer
opauloh May 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -158,8 +168,13 @@ const GraphOverlayComponent: React.FC<GraphOverlayProps> = ({
return (
<OverlayContainer data-test-subj="overlayContainer" ref={sessionContainerRef}>
<EuiFlexGroup alignItems="flexStart" gutterSize="none" direction="column">
<EuiHorizontalRule margin="none" />
<EuiFlexItem grow={false}>{Navigation}</EuiFlexItem>
<ScrollableFlexItem grow={2}>{SessionView}</ScrollableFlexItem>
<EuiHorizontalRule margin="none" />
<EuiSpacer size="m" />
<ScrollableFlexItem grow={2} className={fullScreen ? SESSION_VIEW_FULL_SCREEN : ''}>
{SessionView}
</ScrollableFlexItem>
</EuiFlexGroup>
</OverlayContainer>
);
Expand Down
15 changes: 10 additions & 5 deletions ...gins/security_solution/public/timelines/components/timeline/session_tab_content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};`}
`;

Expand Down Expand Up @@ -59,10 +61,13 @@ const SessionTabContent: React.FC<Props> = ({ timelineId }) => {
ref={measuredRef}
data-test-subj="timeline-session-content"
>
<FlexItemWithMargin grow={false}>
<MaxWidthFlexItem grow={false}>
<EuiHorizontalRule margin="none" />
{Navigation}
{SessionView}
</FlexItemWithMargin>
<EuiHorizontalRule margin="none" />
<EuiSpacer size="m" />
<SessionViewWrapper>{SessionView}</SessionViewWrapper>
</MaxWidthFlexItem>
{shouldShowDetailsPanel && (
<>
<VerticalRule />
Expand Down
2 changes: 1 addition & 1 deletion ...ecurity_solution/public/timelines/components/timeline/session_tab_content/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
);
2 changes: 1 addition & 1 deletion ...lution/public/timelines/components/timeline/session_tab_content/use_session_view.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<TestProviders>{navigation}</TestProviders>);
expect(renderResult.getByText('Close session')).toBeTruthy();
expect(renderResult.getByText('Close session viewer')).toBeTruthy();
});

it('uses an optional height when passed', () => {
Expand Down