Skip to content

Commit

Permalink
[Security Solution] add timeline id to context (#111435)
Browse files Browse the repository at this point in the history 
* add timeline context

* remove an unused file
  • Loading branch information
@angorayc
angorayc authored Sep 9, 2021
1 parent c1697a1 commit dd69697
Show file tree
Hide file tree
Showing 10 changed files with 166 additions and 199 deletions.
37 changes: 0 additions & 37 deletions ...security_solution/public/common/components/drag_and_drop/use_get_timeline_id_from_dom.tsx
View file

This file was deleted.

10 changes: 3 additions & 7 deletions ...ck/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
* 2.0.
*/

import React, { useCallback, useState, useRef } from 'react';
import React, { useCallback, useState, useContext } from 'react';
import { HoverActions } from '../../hover_actions';
import { useActionCellDataProvider } from './use_action_cell_data_provider';
import { EventFieldsData, FieldsData } from '../types';
import { useGetTimelineId } from '../../drag_and_drop/use_get_timeline_id_from_dom';
import { ColumnHeaderOptions } from '../../../../../common/types/timeline';
import { BrowserField } from '../../../containers/source';
import { TimelineContext } from '../../../../../../timelines/public';

interface Props {
contextId: string;
Expand Down Expand Up @@ -52,12 +52,9 @@ export const ActionCell: React.FC<Props> = React.memo(
values,
});

const draggableRef = useRef<HTMLDivElement | null>(null);
const [showTopN, setShowTopN] = useState<boolean>(false);
const [goGetTimelineId, setGoGetTimelineId] = useState(false);
const timelineIdFind = useGetTimelineId(draggableRef, goGetTimelineId);
const { timelineId: timelineIdFind } = useContext(TimelineContext);
const [hoverActionsOwnFocus] = useState<boolean>(false);

const toggleTopN = useCallback(() => {
setShowTopN((prevShowTopN) => {
const newShowTopN = !prevShowTopN;
Expand All @@ -76,7 +73,6 @@ export const ActionCell: React.FC<Props> = React.memo(
dataProvider={actionCellConfig?.dataProvider}
enableOverflowButton={true}
field={data.field}
goGetTimelineId={setGoGetTimelineId}
isObjectArray={data.isObjectArray}
onFilterAdded={onFilterAdded}
ownFocus={hoverActionsOwnFocus}
Expand Down
105 changes: 54 additions & 51 deletions x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ import { SELECTOR_TIMELINE_GLOBAL_CONTAINER } from '../../../timelines/component
import { timelineSelectors, timelineActions } from '../../../timelines/store/timeline';
import { useDeepEqualSelector } from '../../hooks/use_selector';
import { defaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
import { TimelineContext } from '../../../../../timelines/public';

export const EVENTS_VIEWER_HEADER_HEIGHT = 90; // px
const UTILITY_BAR_HEIGHT = 19; // px
Expand Down Expand Up @@ -287,7 +288,7 @@ const EventsViewerComponent: React.FC<Props> = ({

const leadingControlColumns: ControlColumnProps[] = [defaultControlColumn];
const trailingControlColumns: ControlColumnProps[] = [];

const timelineContext = useMemo(() => ({ timelineId: id }), [id]);
return (
<StyledEuiPanel
data-test-subj="events-viewer-panel"
Expand All @@ -309,57 +310,59 @@ const EventsViewerComponent: React.FC<Props> = ({
{utilityBar && !resolverIsShowing(graphEventId) && (
<UtilityBar>{utilityBar?.(refetch, totalCountMinusDeleted)}</UtilityBar>
)}
<EventsContainerLoading
data-timeline-id={id}
data-test-subj={`events-container-loading-${loading}`}
>
<TimelineRefetch
id={id}
inputId="global"
inspect={inspect}
loading={loading}
refetch={refetch}
/>
<TimelineContext.Provider value={timelineContext}>
<EventsContainerLoading
data-timeline-id={id}
data-test-subj={`events-container-loading-${loading}`}
>
<TimelineRefetch
id={id}
inputId="global"
inspect={inspect}
loading={loading}
refetch={refetch}
/>

{graphEventId && <GraphOverlay timelineId={id} />}
<FullWidthFlexGroup $visible={!graphEventId} gutterSize="none">
<ScrollableFlexItem grow={1}>
<StatefulBody
activePage={pageInfo.activePage}
browserFields={browserFields}
data={nonDeletedEvents}
id={id}
isEventViewer={true}
onRuleChange={onRuleChange}
refetch={refetch}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
sort={sort}
tabType={TimelineTabs.query}
totalPages={calculateTotalPages({
itemsCount: totalCountMinusDeleted,
itemsPerPage,
})}
leadingControlColumns={leadingControlColumns}
trailingControlColumns={trailingControlColumns}
/>
<Footer
activePage={pageInfo.activePage}
data-test-subj="events-viewer-footer"
updatedAt={updatedAt}
height={footerHeight}
id={id}
isLive={isLive}
isLoading={loading}
itemsCount={nonDeletedEvents.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangePage={loadPage}
totalCount={totalCountMinusDeleted}
/>
</ScrollableFlexItem>
</FullWidthFlexGroup>
</EventsContainerLoading>
{graphEventId && <GraphOverlay timelineId={id} />}
<FullWidthFlexGroup $visible={!graphEventId} gutterSize="none">
<ScrollableFlexItem grow={1}>
<StatefulBody
activePage={pageInfo.activePage}
browserFields={browserFields}
data={nonDeletedEvents}
id={id}
isEventViewer={true}
onRuleChange={onRuleChange}
refetch={refetch}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
sort={sort}
tabType={TimelineTabs.query}
totalPages={calculateTotalPages({
itemsCount: totalCountMinusDeleted,
itemsPerPage,
})}
leadingControlColumns={leadingControlColumns}
trailingControlColumns={trailingControlColumns}
/>
<Footer
activePage={pageInfo.activePage}
data-test-subj="events-viewer-footer"
updatedAt={updatedAt}
height={footerHeight}
id={id}
isLive={isLive}
isLoading={loading}
itemsCount={nonDeletedEvents.length}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={itemsPerPageOptions}
onChangePage={loadPage}
totalCount={totalCountMinusDeleted}
/>
</ScrollableFlexItem>
</FullWidthFlexGroup>
</EventsContainerLoading>
</TimelineContext.Provider>
</>
</EventDetailsWidthProvider>
) : null}
Expand Down
8 changes: 3 additions & 5 deletions ...ck/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
* 2.0.
*/

import React, { useCallback, useMemo, useState, useRef } from 'react';
import React, { useCallback, useMemo, useState, useRef, useContext } from 'react';
import { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd';
import { HoverActions } from '.';
import { TimelineContext } from '../../../../../timelines/public';

import { DataProvider } from '../../../../common/types';
import { ProviderContentWrapper } from '../drag_and_drop/draggable_wrapper';
import { getDraggableId } from '../drag_and_drop/helpers';
import { useGetTimelineId } from '../drag_and_drop/use_get_timeline_id_from_dom';

const draggableContainsLinks = (draggableElement: HTMLDivElement | null) => {
const links = draggableElement?.querySelectorAll('.euiLink') ?? [];
Expand Down Expand Up @@ -50,8 +50,7 @@ export const useHoverActions = ({
const [closePopOverTrigger, setClosePopOverTrigger] = useState(false);
const [showTopN, setShowTopN] = useState<boolean>(false);
const [hoverActionsOwnFocus, setHoverActionsOwnFocus] = useState<boolean>(false);
const [goGetTimelineId, setGoGetTimelineId] = useState(false);
const timelineIdFind = useGetTimelineId(containerRef, goGetTimelineId);
const { timelineId: timelineIdFind } = useContext(TimelineContext);

const handleClosePopOverTrigger = useCallback(() => {
setClosePopOverTrigger((prevClosePopOverTrigger) => !prevClosePopOverTrigger);
Expand Down Expand Up @@ -105,7 +104,6 @@ export const useHoverActions = ({
field={dataProvider.queryMatch.field}
hideTopN={hideTopN}
isObjectArray={false}
goGetTimelineId={setGoGetTimelineId}
onFilterAdded={onFilterAdded}
ownFocus={hoverActionsOwnFocus}
showOwnFocus={false}
Expand Down
8 changes: 3 additions & 5 deletions x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
*/

import { EuiHighlight, EuiText } from '@elastic/eui';
import React, { useCallback, useState, useMemo, useRef } from 'react';
import React, { useCallback, useState, useMemo, useRef, useContext } from 'react';
import styled from 'styled-components';

import { OnUpdateColumns } from '../timeline/events';
import { WithHoverActions } from '../../../common/components/with_hover_actions';
import { useGetTimelineId } from '../../../common/components/drag_and_drop/use_get_timeline_id_from_dom';
import { ColumnHeaderOptions } from '../../../../common';
import { HoverActions } from '../../../common/components/hover_actions';
import { TimelineContext } from '../../../../../timelines/public';

/**
* The name of a (draggable) field
Expand Down Expand Up @@ -95,8 +95,7 @@ export const FieldName = React.memo<{
}) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const [showTopN, setShowTopN] = useState<boolean>(false);
const [goGetTimelineId, setGoGetTimelineId] = useState(false);
const timelineIdFind = useGetTimelineId(containerRef, goGetTimelineId);
const { timelineId: timelineIdFind } = useContext(TimelineContext);

const toggleTopN = useCallback(() => {
setShowTopN((prevShowTopN) => {
Expand All @@ -122,7 +121,6 @@ export const FieldName = React.memo<{
ownFocus={hoverActionsOwnFocus}
showTopN={showTopN}
toggleTopN={toggleTopN}
goGetTimelineId={setGoGetTimelineId}
timelineId={timelineIdFind}
/>
),
Expand Down
63 changes: 33 additions & 30 deletions x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';

import { isTab } from '../../../../../timelines/public';
import { isTab, TimelineContext } from '../../../../../timelines/public';
import { timelineActions, timelineSelectors } from '../../store/timeline';
import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
import { defaultHeaders } from './body/column_headers/default_headers';
Expand Down Expand Up @@ -118,38 +118,41 @@ const StatefulTimelineComponent: React.FC<Props> = ({
},
[containerElement, onSkipFocusBeforeEventsTable, onSkipFocusAfterEventsTable]
);
const timelineContext = useMemo(() => ({ timelineId }), [timelineId]);

return (
<TimelineContainer
data-test-subj="timeline"
data-timeline-id={timelineId}
onKeyDown={onKeyDown}
ref={containerElement}
>
<TimelineSavingProgress timelineId={timelineId} />
{timelineType === TimelineType.template && (
<TimelineTemplateBadge>{i18n.TIMELINE_TEMPLATE}</TimelineTemplateBadge>
)}

<HideShowContainer
$isVisible={!timelineFullScreen}
data-test-subj="timeline-hide-show-container"
<TimelineContext.Provider value={timelineContext}>
<TimelineContainer
data-test-subj="timeline"
data-timeline-id={timelineId}
onKeyDown={onKeyDown}
ref={containerElement}
>
<FlyoutHeaderPanel timelineId={timelineId} />
<FlyoutHeader timelineId={timelineId} />
</HideShowContainer>

<TabsContent
graphEventId={graphEventId}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
setTimelineFullScreen={setTimelineFullScreen}
timelineId={timelineId}
timelineType={timelineType}
timelineDescription={description}
timelineFullScreen={timelineFullScreen}
/>
</TimelineContainer>
<TimelineSavingProgress timelineId={timelineId} />
{timelineType === TimelineType.template && (
<TimelineTemplateBadge>{i18n.TIMELINE_TEMPLATE}</TimelineTemplateBadge>
)}

<HideShowContainer
$isVisible={!timelineFullScreen}
data-test-subj="timeline-hide-show-container"
>
<FlyoutHeaderPanel timelineId={timelineId} />
<FlyoutHeader timelineId={timelineId} />
</HideShowContainer>

<TabsContent
graphEventId={graphEventId}
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
setTimelineFullScreen={setTimelineFullScreen}
timelineId={timelineId}
timelineType={timelineType}
timelineDescription={description}
timelineFullScreen={timelineFullScreen}
/>
</TimelineContainer>
</TimelineContext.Provider>
);
};

Expand Down
Loading

0 comments on commit dd69697

Please sign in to comment.