Skip to content

Commit

Permalink
[Security Solution] [Timeline] Bugfix for timeline row actions disapp…
Browse files Browse the repository at this point in the history
…ear sometimes (#70958) (#71000)
  • Loading branch information
stephmilovic authored Jul 7, 2020
1 parent 634bc3f commit 85a3ceb
Show file tree
Hide file tree
Showing 11 changed files with 37 additions and 49 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import {
displaySuccessToast,
displayErrorToast,
} from '../../../common/components/toasters';
import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';

interface OwnProps {
timelineId: TimelineIdLiteral;
Expand Down Expand Up @@ -331,13 +332,14 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({

useEffect(() => {
initializeTimeline({
id: timelineId,
documentType: i18n.ALERTS_DOCUMENT_TYPE,
defaultModel: alertsDefaultModel,
documentType: i18n.ALERTS_DOCUMENT_TYPE,
footerText: i18n.TOTAL_COUNT_OF_ALERTS,
id: timelineId,
loadingText: i18n.LOADING_ALERTS,
title: i18n.ALERTS_TABLE_TITLE,
selectAll: canUserCRUD ? selectAll : false,
timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
title: i18n.ALERTS_TABLE_TITLE,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,21 +69,18 @@ const AlertsTableComponent: React.FC<Props> = ({
}) => {
const dispatch = useDispatch();
const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
const { initializeTimeline, setTimelineRowActions } = useManageTimeline();
const { initializeTimeline } = useManageTimeline();

useEffect(() => {
initializeTimeline({
id: timelineId,
documentType: i18n.ALERTS_DOCUMENT_TYPE,
defaultModel: alertsDefaultModel,
footerText: i18n.TOTAL_COUNT_OF_ALERTS,
timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
title: i18n.ALERTS_TABLE_TITLE,
unit: i18n.UNIT,
});
setTimelineRowActions({
id: timelineId,
timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId })],
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { useAddToTimeline } from '../../hooks/use_add_to_timeline';
import { DraggableWrapperHoverContent } from './draggable_wrapper_hover_content';
import {
ManageGlobalTimeline,
timelineDefaults,
getTimelineDefaults,
} from '../../../timelines/components/manage_timeline';
import { TimelineId } from '../../../../common/types/timeline';

Expand Down Expand Up @@ -152,10 +152,7 @@ describe('DraggableWrapperHoverContent', () => {
beforeEach(() => {
onFilterAdded = jest.fn();
const manageTimelineForTesting = {
[timelineId]: {
...timelineDefaults,
id: timelineId,
},
[timelineId]: getTimelineDefaults(timelineId),
};

wrapper = mount(
Expand Down Expand Up @@ -249,8 +246,7 @@ describe('DraggableWrapperHoverContent', () => {

const manageTimelineForTesting = {
[timelineId]: {
...timelineDefaults,
id: timelineId,
...getTimelineDefaults(timelineId),
filterManager,
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import { EuiPanel } from '@elastic/eui';
import { getOr, isEmpty, union } from 'lodash/fp';
import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import deepEqual from 'fast-deep-equal';

Expand Down Expand Up @@ -35,7 +34,6 @@ import {
} from '../../../../../../../src/plugins/data/public';
import { inputsModel } from '../../store';
import { useManageTimeline } from '../../../timelines/components/manage_timeline';
import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';

const DEFAULT_EVENTS_VIEWER_HEIGHT = 500;

Expand Down Expand Up @@ -93,7 +91,6 @@ const EventsViewerComponent: React.FC<Props> = ({
toggleColumn,
utilityBar,
}) => {
const dispatch = useDispatch();
const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
const kibana = useKibana();
const { filterManager } = useKibana().services.data.query;
Expand All @@ -103,16 +100,8 @@ const EventsViewerComponent: React.FC<Props> = ({
getManageTimelineById,
setIsTimelineLoading,
setTimelineFilterManager,
setTimelineRowActions,
} = useManageTimeline();

useEffect(() => {
setTimelineRowActions({
id,
timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId: id })],
});
}, [setTimelineRowActions, id, dispatch]);

useEffect(() => {
setIsTimelineLoading({ id, isLoading: isQueryLoading });
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { Props } from './top_n';
import { StatefulTopN } from '.';
import {
ManageGlobalTimeline,
timelineDefaults,
getTimelineDefaults,
} from '../../../timelines/components/manage_timeline';
import { TimelineId } from '../../../../common/types/timeline';

Expand Down Expand Up @@ -272,8 +272,7 @@ describe('StatefulTopN', () => {
filterManager = new FilterManager(mockUiSettingsForFilterManager);
const manageTimelineForTesting = {
[TimelineId.active]: {
...timelineDefaults,
id: TimelineId.active,
...getTimelineDefaults(TimelineId.active),
filterManager,
},
};
Expand Down Expand Up @@ -351,8 +350,7 @@ describe('StatefulTopN', () => {

const manageTimelineForTesting = {
[TimelineId.active]: {
...timelineDefaults,
id: TimelineId.active,
...getTimelineDefaults(TimelineId.active),
filterManager,
documentType: 'alerts',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { TimelineId } from '../../../../common/types/timeline';
import { StatefulEventsViewer } from '../../../common/components/events_viewer';
import { HostsComponentsQueryProps } from './types';
Expand All @@ -18,6 +19,7 @@ import { MatrixHistogramContainer } from '../../../common/components/matrix_hist
import * as i18n from '../translations';
import { HistogramType } from '../../../graphql/types';
import { useManageTimeline } from '../../../timelines/components/manage_timeline';
import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';

const EVENTS_HISTOGRAM_ID = 'eventsOverTimeQuery';

Expand Down Expand Up @@ -57,13 +59,17 @@ export const EventsQueryTabBody = ({
startDate,
}: HostsComponentsQueryProps) => {
const { initializeTimeline } = useManageTimeline();
const dispatch = useDispatch();

useEffect(() => {
initializeTimeline({
id: TimelineId.hostsPageEvents,
defaultModel: eventsDefaultModel,
timelineRowActions: [
getInvestigateInResolverAction({ dispatch, timelineId: TimelineId.hostsPageEvents }),
],
});
}, [initializeTimeline]);
}, [dispatch, initializeTimeline]);

useEffect(() => {
return () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

import React, { createContext, useCallback, useContext, useReducer } from 'react';
import { noop } from 'lodash/fp';

// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { FilterManager } from '../../../../../../../src/plugins/data/public/query/filter_manager';
import { TimelineRowAction } from '../timeline/body/actions';
Expand All @@ -22,6 +23,7 @@ interface ManageTimelineInit {
indexToAdd?: string[] | null;
loadingText?: string;
selectAll?: boolean;
timelineRowActions: TimelineRowAction[];
title?: string;
unit?: (totalCount: number) => string;
}
Expand Down Expand Up @@ -73,19 +75,20 @@ type ActionManageTimeline =
payload: { filterManager: FilterManager };
};

export const timelineDefaults = {
export const getTimelineDefaults = (id: string) => ({
indexToAdd: null,
defaultModel: timelineDefaultModel,
loadingText: i18n.LOADING_EVENTS,
footerText: i18nF.TOTAL_COUNT_OF_EVENTS,
documentType: i18nF.TOTAL_COUNT_OF_EVENTS,
selectAll: false,
id,
isLoading: false,
queryFields: [],
timelineRowActions: [],
title: i18n.EVENTS,
unit: (n: number) => i18n.UNIT(n),
};
});
const reducerManageTimeline = (
state: ManageTimelineById,
action: ActionManageTimeline
Expand All @@ -95,7 +98,7 @@ const reducerManageTimeline = (
return {
...state,
[action.id]: {
...timelineDefaults,
...getTimelineDefaults(action.id),
...state[action.id],
...action.payload,
},
Expand Down Expand Up @@ -216,8 +219,8 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT
if (state[id] != null) {
return state[id];
}
initializeTimeline({ id });
return { ...timelineDefaults, id };
initializeTimeline({ id, timelineRowActions: [] });
return getTimelineDefaults(id);
},
[initializeTimeline, state]
);
Expand All @@ -236,7 +239,7 @@ const useTimelineManager = (manageTimelineForTesting?: ManageTimelineById): UseT
};

const init = {
getManageTimelineById: (id: string) => ({ ...timelineDefaults, id }),
getManageTimelineById: (id: string) => getTimelineDefaults(id),
getTimelineFilterManager: () => undefined,
setIndexToAdd: () => undefined,
isManagedTimeline: () => false,
Expand All @@ -245,6 +248,7 @@ const init = {
setTimelineRowActions: () => noop,
setTimelineFilterManager: () => noop,
};

const ManageTimelineContext = createContext<UseTimelineManager>(init);

export const useManageTimeline = () => useContext(ManageTimelineContext);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -194,8 +194,7 @@ export const EventColumnView = React.memo<Props>(
</EventsTdContent>,
]
: grouped.icon;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [button, ecsData, timelineActions, isPopoverOpen]); // , isPopoverOpen, closePopover, onButtonClick]);
}, [button, closePopover, id, onClickCb, ecsData, timelineActions, isPopoverOpen]);

return (
<EventsTrData data-test-subj="event-column-view">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useMountAppended } from '../../../../common/utils/use_mount_appended';
import { DataProviders } from '.';
import { DataProvider } from './data_provider';
import { mockDataProviders } from './mock/mock_data_providers';
import { ManageGlobalTimeline, timelineDefaults } from '../../manage_timeline';
import { ManageGlobalTimeline, getTimelineDefaults } from '../../manage_timeline';
import { FilterManager } from '../../../../../../../../src/plugins/data/public/query/filter_manager';
import { createKibanaCoreStartMock } from '../../../../common/mock/kibana_core';
const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;
Expand All @@ -28,8 +28,7 @@ describe('DataProviders', () => {
test('renders correctly against snapshot', () => {
const manageTimelineForTesting = {
foo: {
...timelineDefaults,
id: 'foo',
...getTimelineDefaults('foo'),
filterManager,
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { mockDataProviders } from './mock/mock_data_providers';
import { Providers } from './providers';
import { DELETE_CLASS_NAME, ENABLE_CLASS_NAME, EXCLUDE_CLASS_NAME } from './provider_item_actions';
import { useMountAppended } from '../../../../common/utils/use_mount_appended';
import { ManageGlobalTimeline, timelineDefaults } from '../../manage_timeline';
import { ManageGlobalTimeline, getTimelineDefaults } from '../../manage_timeline';

const mockUiSettingsForFilterManager = createKibanaCoreStartMock().uiSettings;

Expand All @@ -27,8 +27,7 @@ describe('Providers', () => {

const manageTimelineForTesting = {
foo: {
...timelineDefaults,
id: 'foo',
...getTimelineDefaults('foo'),
filterManager,
isLoading,
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,11 @@ export const TimelineComponent: React.FC<Props> = ({
setIndexToAdd,
setIsTimelineLoading,
setTimelineFilterManager,
setTimelineRowActions,
} = useManageTimeline();
useEffect(() => {
initializeTimeline({ id, indexToAdd });
setTimelineRowActions({
initializeTimeline({
id,
indexToAdd,
timelineRowActions: [getInvestigateInResolverAction({ dispatch, timelineId: id })],
});
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand Down

0 comments on commit 85a3ceb

Please sign in to comment.