Skip to content

Commit

Permalink
[8.x] [Security Solution] Remove `unifiedComponentsInTimelineDis…
Browse files Browse the repository at this point in the history 
…abled` flag (#195959) (#197693)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] Remove
`unifiedComponentsInTimelineDisabled` flag
(#195959)](#195959)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jatin
Kathuria","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-24T16:41:19Z","message":"[Security
Solution] Remove `unifiedComponentsInTimelineDisabled` flag
(#195959)\n\n## Summary\r\n\r\nHandles
https://github.com/elastic/security-team/issues/9645\r\n\r\nFollow Up PR
for removal of Old timeline Code
:\r\nhttps://github.com//pull/196243\r\n\r\n- This PR
removes `unifiedComponentsInTimelineDisabled` flag. What this\r\nmeans
that that unified components in Timeline are now enabled
by\r\ndefault.\r\n\r\n- Consequently, the old timeline table code
becomes obsolete and is also\r\nremoved. (
https://github.com/elastic/kibana/pull/196243)\r\n\r\n##
Changes\r\n\r\n1. Converted all cypress and jest tests that were testing
old Timeline\r\ntable to test new unified components in Timeline. If the
test for new\r\ntimeline already existed, old tests are also
removed.","sha":"c41178d2d6e952798548ccd7db691d5ceff62053","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","v8.16.0"],"title":"[Security Solution] Remove
`unifiedComponentsInTimelineDisabled`
flag","number":195959,"url":"https://github.com/elastic/kibana/pull/195959","mergeCommit":{"message":"[Security
Solution] Remove `unifiedComponentsInTimelineDisabled` flag
(#195959)\n\n## Summary\r\n\r\nHandles
https://github.com/elastic/security-team/issues/9645\r\n\r\nFollow Up PR
for removal of Old timeline Code
:\r\nhttps://github.com//pull/196243\r\n\r\n- This PR
removes `unifiedComponentsInTimelineDisabled` flag. What this\r\nmeans
that that unified components in Timeline are now enabled
by\r\ndefault.\r\n\r\n- Consequently, the old timeline table code
becomes obsolete and is also\r\nremoved. (
https://github.com/elastic/kibana/pull/196243)\r\n\r\n##
Changes\r\n\r\n1. Converted all cypress and jest tests that were testing
old Timeline\r\ntable to test new unified components in Timeline. If the
test for new\r\ntimeline already existed, old tests are also
removed.","sha":"c41178d2d6e952798548ccd7db691d5ceff62053"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195959","number":195959,"mergeCommit":{"message":"[Security
Solution] Remove `unifiedComponentsInTimelineDisabled` flag
(#195959)\n\n## Summary\r\n\r\nHandles
https://github.com/elastic/security-team/issues/9645\r\n\r\nFollow Up PR
for removal of Old timeline Code
:\r\nhttps://github.com//pull/196243\r\n\r\n- This PR
removes `unifiedComponentsInTimelineDisabled` flag. What this\r\nmeans
that that unified components in Timeline are now enabled
by\r\ndefault.\r\n\r\n- Consequently, the old timeline table code
becomes obsolete and is also\r\nremoved. (
https://github.com/elastic/kibana/pull/196243)\r\n\r\n##
Changes\r\n\r\n1. Converted all cypress and jest tests that were testing
old Timeline\r\ntable to test new unified components in Timeline. If the
test for new\r\ntimeline already existed, old tests are also
removed.","sha":"c41178d2d6e952798548ccd7db691d5ceff62053"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jatin Kathuria <[email protected]>
  • Loading branch information
@kibanamachine @logeekal
kibanamachine and logeekal authored Oct 24, 2024
1 parent 7da3797 commit 0ffda7b
Show file tree
Hide file tree
Showing 40 changed files with 1,440 additions and 6,518 deletions.
4 changes: 0 additions & 4 deletions x-pack/plugins/security_solution/common/experimental_features.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,10 +183,6 @@ export const allowedExperimentalValues = Object.freeze({
*
*/
timelineEsqlTabDisabled: false,
/*
* Disables experimental Discover components, UnifiedFieldList and UnifiedDataTable in Timeline.
*/
unifiedComponentsInTimelineDisabled: false,

/*
* Disables date pickers and sourcerer in analyzer if needed.
Expand Down
59 changes: 15 additions & 44 deletions ...plugins/security_solution/public/common/components/header_actions/header_actions.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { TimelineTabs } from '../../../../common/types';
import { HeaderActions } from './header_actions';
import { timelineActions } from '../../../timelines/store';
import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';

jest.mock('../../hooks/use_experimental_features', () => ({
useIsExperimentalFeatureEnabled: jest.fn(),
Expand Down Expand Up @@ -141,51 +140,23 @@ describe('HeaderActions', () => {
});
});

describe('conditional components based on unifiedComponentsInTimelineDisabled', () => {
describe('when unifiedComponentsInTimelineDisabled is false', () => {
beforeEach(() => {
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
});
it('should not show the event renderer settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
});

it('should not show the sorting settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
});
describe('Controls', () => {
it('should not show the event renderer settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
});

describe('when unifiedComponentsInTimelineDisabled is true', () => {
beforeEach(() => {
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
});
it('should show the event renderer settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
result.getByTestId('show-row-renderers-gear');
});

it('should show the sorting settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
result.getByTestId('timeline-sorting-fields');
});
it('should not show the sorting settings', () => {
const result = render(
<TestProviders>
<HeaderActions {...defaultProps} />
</TestProviders>
);
expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
});
});
});
108 changes: 3 additions & 105 deletions x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,12 @@
*/

import React, { useMemo, useCallback, memo } from 'react';
import type { EuiDataGridSorting, EuiDataGridSchemaDetector } from '@elastic/eui';
import { EuiButtonIcon, EuiToolTip, useDataGridColumnSorting, EuiCheckbox } from '@elastic/eui';
import { EuiButtonIcon, EuiToolTip, EuiCheckbox } from '@elastic/eui';
import { useDispatch } from 'react-redux';

import styled from 'styled-components';
import type { HeaderActionProps, SortDirection } from '../../../../common/types';
import { TimelineTabs, TimelineId } from '../../../../common/types';
import type { HeaderActionProps } from '../../../../common/types';
import { TimelineId } from '../../../../common/types';
import { isFullScreen } from '../../../timelines/components/timeline/body/column_headers';
import { isActiveTimeline } from '../../../helpers';
import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
Expand All @@ -21,28 +20,12 @@ import { useGlobalFullScreen, useTimelineFullScreen } from '../../containers/use
import { useKibana } from '../../lib/kibana';
import { DEFAULT_ACTION_BUTTON_WIDTH } from '.';
import { EventsTh, EventsThContent } from '../../../timelines/components/timeline/styles';
import { StatefulRowRenderersBrowser } from '../../../timelines/components/row_renderers_browser';
import { EXIT_FULL_SCREEN } from '../exit_full_screen/translations';
import { EventsSelect } from '../../../timelines/components/timeline/body/column_headers/events_select';
import * as i18n from './translations';
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
import { useDeepEqualSelector } from '../../hooks/use_selector';
import { selectTimelineById } from '../../../timelines/store/selectors';

const SortingColumnsContainer = styled.div`
button {
color: ${({ theme }) => theme.eui.euiColorPrimary};
}
.euiPopover .euiButtonEmpty {
padding: 0;
.euiButtonEmpty__text {
display: none;
}
}
`;

const FieldBrowserContainer = styled.div`
.euiToolTipAnchor {
.euiButtonContent {
Expand All @@ -66,23 +49,15 @@ const ActionsContainer = styled.div`
display: flex;
`;

// Defined statically to reduce rerenders
const emptySchema = {};
const emptySchemaDetectors: EuiDataGridSchemaDetector[] = [];

const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
({
width,
browserFields,
columnHeaders,
isEventViewer = false,
isSelectAllChecked,
onSelectAll,
showEventsSelect,
showSelectAllCheckbox,
showFullScreenToggle = true,
sort,
tabType,
timelineId,
fieldBrowserOptions,
}) => {
Expand All @@ -91,10 +66,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
const dispatch = useDispatch();

const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
'unifiedComponentsInTimelineDisabled'
);

const { defaultColumns } = useDeepEqualSelector((state) =>
selectTimelineById(state, timelineId)
);
Expand Down Expand Up @@ -129,57 +100,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
[onSelectAll]
);

const onSortColumns = useCallback(
(cols: EuiDataGridSorting['columns']) =>
dispatch(
timelineActions.updateSort({
id: timelineId,
sort: cols.map(({ id, direction }) => {
const columnHeader = columnHeaders.find((ch) => ch.id === id);
const columnType = columnHeader?.type ?? '';
const esTypes = columnHeader?.esTypes ?? [];

return {
columnId: id,
columnType,
esTypes,
sortDirection: direction as SortDirection,
};
}),
})
),
[columnHeaders, dispatch, timelineId]
);

const sortedColumns = useMemo(
() => ({
onSort: onSortColumns,
columns:
sort?.map<{ id: string; direction: 'asc' | 'desc' }>(({ columnId, sortDirection }) => ({
id: columnId,
direction: sortDirection as 'asc' | 'desc',
})) ?? [],
}),
[onSortColumns, sort]
);
const displayValues = useMemo(
() =>
columnHeaders?.reduce((acc, ch) => ({ ...acc, [ch.id]: ch.displayAsText ?? ch.id }), {}) ??
{},
[columnHeaders]
);

const myColumns = useMemo(
() =>
columnHeaders?.map(({ aggregatable, displayAsText, id, type }) => ({
id,
isSortable: aggregatable,
displayAsText,
schema: type,
})) ?? [],
[columnHeaders]
);

const onResetColumns = useCallback(() => {
dispatch(timelineActions.updateColumns({ id: timelineId, columns: defaultColumns }));
}, [defaultColumns, dispatch, timelineId]);
Expand All @@ -206,14 +126,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
[columnHeaders, dispatch, timelineId, defaultColumns]
);

const ColumnSorting = useDataGridColumnSorting({
columns: myColumns,
sorting: sortedColumns,
schema: emptySchema,
schemaDetectors: emptySchemaDetectors,
displayValues,
});

return (
<ActionsContainer data-test-subj="header-actions-container">
{showSelectAllCheckbox && (
Expand Down Expand Up @@ -242,11 +154,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
</EventsTh>
)}

{unifiedComponentsInTimelineDisabled && (
<EventsTh role="button">
<StatefulRowRenderersBrowser timelineId={timelineId} />
</EventsTh>
)}
{showFullScreenToggle && (
<EventsTh role="button">
<EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
Expand Down Expand Up @@ -275,15 +182,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
</EventsThContent>
</EventsTh>
)}
{tabType !== TimelineTabs.eql && unifiedComponentsInTimelineDisabled && (
<EventsTh role="button" data-test-subj="timeline-sorting-fields">
<EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
<EuiToolTip content={i18n.SORT_FIELDS}>
<SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
</EuiToolTip>
</EventsThContent>
</EventsTh>
)}

{showEventsSelect && (
<EventsTh role="button">
Expand Down
7 changes: 1 addition & 6 deletions x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,6 @@ import { URL_PARAM_KEY } from '../use_url_state';
import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';

export const useInitTimelineFromUrlParam = () => {
const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
'unifiedComponentsInTimelineDisabled'
);

const isEsqlTabDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');

const queryTimelineById = useQueryTimelineById();
Expand All @@ -43,11 +39,10 @@ export const useInitTimelineFromUrlParam = () => {
timelineId: initialState.id,
openTimeline: initialState.isOpen,
savedSearchId: initialState.savedSearchId,
unifiedComponentsInTimelineDisabled,
});
}
},
[isEsqlTabDisabled, queryTimelineById, unifiedComponentsInTimelineDisabled]
[isEsqlTabDisabled, queryTimelineById]
);

useEffect(() => {
Expand Down
16 changes: 1 addition & 15 deletions .../security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
getQueryStringFromLocation,
} from '../../utils/global_query_string/helpers';
import { URL_PARAM_KEY } from '../use_url_state';
import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';

/**
* After the initial load of the security solution, timeline is not updated when the timeline URL search value is changed
Expand All @@ -42,10 +41,6 @@ export const useQueryTimelineByIdOnUrlChange = () => {
const oldSearch = usePrevious(search);
const timelineIdFromReduxStore = flyoutTimeline?.savedObjectId ?? '';

const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
'unifiedComponentsInTimelineDisabled'
);

const [previousTimeline, currentTimeline] = useMemo(() => {
const oldUrlStateString = getQueryStringKeyValue({
urlKey: URL_PARAM_KEY.timeline,
Expand Down Expand Up @@ -74,18 +69,9 @@ export const useQueryTimelineByIdOnUrlChange = () => {
graphEventId,
timelineId: newId,
openTimeline: true,
unifiedComponentsInTimelineDisabled,
});
}
}, [
timelineIdFromReduxStore,
oldId,
newId,
activeTab,
graphEventId,
queryTimelineById,
unifiedComponentsInTimelineDisabled,
]);
}, [timelineIdFromReduxStore, oldId, newId, activeTab, graphEventId, queryTimelineById]);
};

export const getQueryStringKeyValue = ({ search, urlKey }: { search: string; urlKey: string }) =>
Expand Down
8 changes: 1 addition & 7 deletions x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,19 @@
import { useCallback } from 'react';
import { useQueryTimelineById } from '../../../timelines/components/open_timeline/helpers';
import type { TimelineErrorCallback } from '../../../timelines/components/open_timeline/types';
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';

export const useTimelineClick = () => {
const queryTimelineById = useQueryTimelineById();

const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
'unifiedComponentsInTimelineDisabled'
);

const handleTimelineClick = useCallback(
(timelineId: string, onError: TimelineErrorCallback, graphEventId?: string) => {
queryTimelineById({
graphEventId,
timelineId,
onError,
unifiedComponentsInTimelineDisabled,
});
},
[queryTimelineById, unifiedComponentsInTimelineDisabled]
[queryTimelineById]
);

return handleTimelineClick;
Expand Down
Loading

0 comments on commit 0ffda7b

Please sign in to comment.