Skip to content

Commit

Permalink
pull out timeline tabs shared components
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelolo24
michaelolo24 committed Mar 29, 2024
1 parent 89fa2d8 commit c6eecdb
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 284 deletions.
117 changes: 19 additions & 98 deletions ...ins/security_solution/public/timelines/components/timeline/tabs/eql_tab_content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,9 @@
* 2.0.
*/

import {
EuiFlexGroup,
EuiFlexItem,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiFlyoutFooter,
EuiBadge,
} from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
import React, { useCallback, useEffect, useMemo } from 'react';
import styled from 'styled-components';
import type { Dispatch } from 'redux';
import type { ConnectedProps } from 'react-redux';
import { connect, useDispatch } from 'react-redux';
Expand All @@ -26,15 +18,13 @@ import { DataLoadingState } from '@kbn/unified-data-table';
import type { ControlColumnProps } from '../../../../../../common/types';
import { InputsModelId } from '../../../../../common/store/inputs/constants';
import { timelineActions, timelineSelectors } from '../../../../store';
import type { CellValueElementProps } from '../../cell_rendering';
import type { TimelineItem } from '../../../../../../common/search_strategy';
import { useTimelineEvents } from '../../../../containers';
import { defaultHeaders } from '../../body/column_headers/default_headers';
import { StatefulBody } from '../../body';
import { Footer, footerHeight } from '../../footer';
import { calculateTotalPages } from '../../helpers';
import { TimelineRefetch } from '../../refetch_timeline';
import type { RowRenderer, ToggleDetailPanel } from '../../../../../../common/types/timeline';
import type { ToggleDetailPanel } from '../../../../../../common/types/timeline';
import { TimelineTabs } from '../../../../../../common/types/timeline';
import { requiredFieldsForActions } from '../../../../../detections/components/alerts_table/default_config';
import { ExitFullScreen } from '../../../../../common/components/exit_full_screen';
Expand All @@ -56,89 +46,20 @@ import type { Sort } from '../../body/sort';
import { Sourcerer } from '../../../../../common/components/sourcerer';
import { useLicense } from '../../../../../common/hooks/use_license';
import { HeaderActions } from '../../../../../common/components/header_actions/header_actions';

const EqlTabHeaderContainer = styled.div`
margin-top: ${(props) => props.theme.eui.euiSizeS};
width: 100%;
`;

EqlTabHeaderContainer.displayName = 'EqlTabHeaderContainer';

const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
align-items: stretch;
box-shadow: none;
display: flex;
flex-direction: column;
margin-top: ${({ theme }) => theme.eui.euiSizeM}
padding: 0;
&.euiFlyoutHeader {
${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}
}
`;

const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
overflow-y: hidden;
flex: 1;
.euiFlyoutBody__overflow {
overflow: hidden;
mask-image: none;
}
.euiFlyoutBody__overflowContent {
padding: 0;
height: 100%;
display: flex;
}
`;

const StyledEuiFlyoutFooter = styled(EuiFlyoutFooter)`
background: none;
padding: 0;
&.euiFlyoutFooter {
${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}
}
`;

const FullWidthFlexGroup = styled(EuiFlexGroup)`
margin: 0;
width: 100%;
overflow: hidden;
`;

const ScrollableFlexItem = styled(EuiFlexItem)`
${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
overflow: hidden;
`;

const VerticalRule = styled.div`
width: 2px;
height: 100%;
background: ${({ theme }) => theme.eui.euiColorLightShade};
`;

VerticalRule.displayName = 'VerticalRule';

const EventsCountBadge = styled(EuiBadge)`
margin-left: ${({ theme }) => theme.eui.euiSizeS};
`;

const isTimerangeSame = (prevProps: Props, nextProps: Props) =>
prevProps.end === nextProps.end &&
prevProps.start === nextProps.start &&
prevProps.timerangeKind === nextProps.timerangeKind;

interface OwnProps {
renderCellValue: (props: CellValueElementProps) => React.ReactNode;
rowRenderers: RowRenderer[];
timelineId: string;
}

const EMPTY_EVENTS: TimelineItem[] = [];

export type Props = OwnProps & PropsFromRedux;
import {
EventsCountBadge,
FullWidthFlexGroup,
ScrollableFlexItem,
StyledEuiFlyoutHeader,
StyledEuiFlyoutBody,
StyledEuiFlyoutFooter,
VerticalRule,
TabHeaderContainer,
} from '../shared/layout';
import { EMPTY_EVENTS, isTimerangeSame } from '../shared/utils';
import { TimelineTabCommonProps } from '../shared/types';

export type Props = TimelineTabCommonProps & PropsFromRedux;

const NO_SORTING: Sort[] = [];

Expand Down Expand Up @@ -284,9 +205,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
</EuiFlexItem>
</EuiFlexGroup>
</StyledEuiFlyoutHeader>
<EqlTabHeaderContainer data-test-subj="timelineHeader">
<TabHeaderContainer data-test-subj="timelineHeader">
<EqlQueryBarTimeline timelineId={timelineId} />
</EqlTabHeaderContainer>
</TabHeaderContainer>

<EventDetailsWidthProvider>
<StyledEuiFlyoutBody
Expand Down Expand Up @@ -357,7 +278,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
const makeMapStateToProps = () => {
const getTimeline = timelineSelectors.getTimelineByIdSelector();
const getInputsTimeline = inputsSelectors.getTimelineSelector();
const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
const mapStateToProps = (state: State, { timelineId }: TimelineTabCommonProps) => {
const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
const input: inputsModel.InputsRange = getInputsTimeline(state);
const { activeTab, columns, eqlOptions, expandedDetail, itemsPerPage, itemsPerPageOptions } =
Expand Down
14 changes: 1 addition & 13 deletions ...s/security_solution/public/timelines/components/timeline/tabs/graph_tab_content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,17 @@
*/

import React, { useMemo } from 'react';
import { EuiFlexItem } from '@elastic/eui';
import styled from 'styled-components';
import { timelineSelectors } from '../../../../store';
import { useShallowEqualSelector } from '../../../../../common/hooks/use_selector';
import type { TimelineId } from '../../../../../../common/types/timeline';
import { GraphOverlay } from '../../../graph_overlay';
import { useSessionViewNavigation, useSessionView } from '../session_tab_content/use_session_view';
import { ScrollableFlexItem, VerticalRule } from '../shared/layout';

interface GraphTabContentProps {
timelineId: TimelineId;
}

const ScrollableFlexItem = styled(EuiFlexItem)`
${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
overflow: hidden;
`;

const VerticalRule = styled.div`
width: 2px;
height: 100%;
background: ${({ theme }) => theme.eui.euiColorLightShade};
`;

const GraphTabContentComponent: React.FC<GraphTabContentProps> = ({ timelineId }) => {
const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
const graphEventId = useShallowEqualSelector(
Expand Down
13 changes: 1 addition & 12 deletions ...s/security_solution/public/timelines/components/timeline/tabs/notes_tab_content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,7 @@ import { DetailsPanel } from '../../../side_panel';
import { getScrollToTopSelector } from '../../tabs_content/selectors';
import { useScrollToTop } from '../../../../../common/components/scroll_to_top';
import { useUserPrivileges } from '../../../../../common/components/user_privileges';

const FullWidthFlexGroup = styled(EuiFlexGroup)`
width: 100%;
margin: 0;
overflow: hidden;
`;
import { FullWidthFlexGroup, VerticalRule } from '../shared/layout';

const ScrollableFlexItem = styled(EuiFlexItem)`
overflow-x: hidden;
Expand All @@ -56,12 +51,6 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
padding-block: ${({ theme }) => (theme as EuiTheme).eui.euiSizeS};
`;

const VerticalRule = styled.div`
width: 2px;
height: 100%;
background: ${({ theme }) => theme.eui.euiColorLightShade};
`;

const StyledPanel = styled(EuiPanel)`
border: 0;
box-shadow: none;
Expand Down
62 changes: 6 additions & 56 deletions .../security_solution/public/timelines/components/timeline/tabs/pinned_tab_content/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* 2.0.
*/

import { EuiFlexGroup, EuiFlexItem, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
import React, { useMemo, useCallback } from 'react';
import styled from 'styled-components';
Expand All @@ -17,7 +16,6 @@ import deepEqual from 'fast-deep-equal';
import { DataLoadingState } from '@kbn/unified-data-table';
import type { ControlColumnProps } from '../../../../../../common/types';
import { timelineActions, timelineSelectors } from '../../../../store';
import type { CellValueElementProps } from '../../cell_rendering';
import type { Direction } from '../../../../../../common/search_strategy';
import { useTimelineEvents } from '../../../../containers';
import { defaultHeaders } from '../../body/column_headers/default_headers';
Expand All @@ -32,75 +30,27 @@ import { useTimelineFullScreen } from '../../../../../common/containers/use_full
import type { TimelineModel } from '../../../../store/model';
import type { State } from '../../../../../common/store';
import { calculateTotalPages } from '../../helpers';
import type { RowRenderer, ToggleDetailPanel } from '../../../../../../common/types/timeline';
import type { ToggleDetailPanel } from '../../../../../../common/types/timeline';
import { TimelineTabs } from '../../../../../../common/types/timeline';
import { DetailsPanel } from '../../../side_panel';
import { ExitFullScreen } from '../../../../../common/components/exit_full_screen';
import { getDefaultControlColumn } from '../../body/control_columns';
import { useLicense } from '../../../../../common/hooks/use_license';
import { HeaderActions } from '../../../../../common/components/header_actions/header_actions';

const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
overflow-y: hidden;
flex: 1;
.euiFlyoutBody__overflow {
overflow: hidden;
mask-image: none;
}
.euiFlyoutBody__overflowContent {
padding: 0;
height: 100%;
display: flex;
}
`;

const StyledEuiFlyoutFooter = styled(EuiFlyoutFooter)`
background: none;
padding: 0;
&.euiFlyoutFooter {
${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}
}
`;
import { FullWidthFlexGroup, ScrollableFlexItem, StyledEuiFlyoutBody, StyledEuiFlyoutFooter, VerticalRule } from '../shared/layout';
import { TimelineTabCommonProps } from '../shared/types';

const ExitFullScreenContainer = styled.div`
width: 180px;
`;

const FullWidthFlexGroup = styled(EuiFlexGroup)`
margin: 0;
width: 100%;
overflow: hidden;
`;

const ScrollableFlexItem = styled(EuiFlexItem)`
overflow: hidden;
`;

const VerticalRule = styled.div`
width: 2px;
height: 100%;
background: ${({ theme }) => theme.eui.euiColorLightShade};
`;

VerticalRule.displayName = 'VerticalRule';

interface OwnProps {
renderCellValue: (props: CellValueElementProps) => React.ReactNode;
rowRenderers: RowRenderer[];
timelineId: string;
}

interface PinnedFilter {
bool: {
should: Array<{ match_phrase: { _id: string } }>;
minimum_should_match: number;
};
}

export type Props = OwnProps & PropsFromRedux;
export type Props = TimelineTabCommonProps & PropsFromRedux;

const trailingControlColumns: ControlColumnProps[] = []; // stable reference

Expand Down Expand Up @@ -294,7 +244,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({

const makeMapStateToProps = () => {
const getTimeline = timelineSelectors.getTimelineByIdSelector();
const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
const mapStateToProps = (state: State, { timelineId }: TimelineTabCommonProps) => {
const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
const { columns, expandedDetail, itemsPerPage, itemsPerPageOptions, pinnedEventIds, sort } =
timeline;
Expand All @@ -313,7 +263,7 @@ const makeMapStateToProps = () => {
return mapStateToProps;
};

const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: TimelineTabCommonProps) => ({
onEventClosed: (args: ToggleDetailPanel) => {
dispatch(timelineActions.toggleDetailPanel(args));
},
Expand Down
Loading

0 comments on commit c6eecdb

Please sign in to comment.