diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.test.tsx index 7589e481bd1f1..ab4d10ac2c0a5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.test.tsx @@ -19,6 +19,7 @@ describe('Eql Header', () => { timelineId: TimelineId.test, timelineFullScreen: false, setTimelineFullScreen: jest.fn(), + newDataViewPickerEnabled: false, } as EqlTabHeaderProps; describe('rendering', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx index a4ecfca93e20b..de7ba77dcfe2b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx @@ -18,14 +18,22 @@ import type { TimelineFullScreen } from '../../../../../../common/containers/use import { EqlQueryBarTimeline } from '../../../query_bar/eql'; import { Sourcerer } from '../../../../../../sourcerer/components'; import { StyledEuiFlyoutHeader, TabHeaderContainer } from '../../shared/layout'; +import { DataViewPicker } from '../../../../../../data_view_manager/components/data_view_picker'; export type EqlTabHeaderProps = { activeTab: TimelineTabs; timelineId: string; + newDataViewPickerEnabled: boolean; } & TimelineFullScreen; export const EqlTabHeader = memo( - ({ activeTab, setTimelineFullScreen, timelineFullScreen, timelineId }: EqlTabHeaderProps) => ( + ({ + activeTab, + setTimelineFullScreen, + timelineFullScreen, + timelineId, + newDataViewPickerEnabled, + }: EqlTabHeaderProps) => ( <> @@ -43,7 +51,12 @@ export const EqlTabHeader = memo( /> )} - {activeTab === TimelineTabs.eql && } + {activeTab === TimelineTabs.eql && + (newDataViewPickerEnabled ? ( + + ) : ( + + ))} diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx index ed68e8cfc9bec..bc4e0dc27d315 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx @@ -48,6 +48,8 @@ import { useNotesInFlyout } from '../../properties/use_notes_in_flyout'; import { NotesFlyout } from '../../properties/notes_flyout'; import { DocumentEventTypes, NotesEventTypes } from '../../../../../common/lib/telemetry'; import { TimelineRefetch } from '../../refetch_timeline'; +import { useDataViewSpec } from '../../../../../data_view_manager/hooks/use_data_view_spec'; +import { useSelectedPatterns } from '../../../../../data_view_manager/hooks/use_selected_patterns'; export type Props = TimelineTabCommonProps & PropsFromRedux; @@ -76,12 +78,28 @@ export const EqlTabContentComponent: React.FC = ({ const { query: eqlQuery = '', ...restEqlOption } = eqlOptions; const { portalNode: eqlEventsCountPortalNode } = useEqlEventsCountPortal(); const { setTimelineFullScreen, timelineFullScreen } = useTimelineFullScreen(); + + const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled'); const { - dataViewId, - loading: loadingSourcerer, - selectedPatterns, - sourcererDataView, + dataViewId: oldDataViewId, + loading: oldSourcererLoading, + selectedPatterns: oldSelectedPatterns, + sourcererDataView: oldSourcererDataView, } = useSourcererDataView(SourcererScopeName.timeline); + + const { dataViewSpec: experimentalDataView, status } = useDataViewSpec( + SourcererScopeName.timeline + ); + const experimentalSelectedPatterns = useSelectedPatterns(SourcererScopeName.timeline); + const experimentalDataViewId = experimentalDataView.id ?? null; + + const dataViewId = newDataViewPickerEnabled ? experimentalDataViewId : oldDataViewId; + const dataViewLoading = newDataViewPickerEnabled ? status !== 'ready' : oldSourcererLoading; + const sourcererDataView = newDataViewPickerEnabled ? experimentalDataView : oldSourcererDataView; + const selectedPatterns = newDataViewPickerEnabled + ? experimentalSelectedPatterns + : oldSelectedPatterns; + const { augmentedColumnHeaders, timelineQueryFieldsFromColumns } = useTimelineColumns(columns); const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []); @@ -96,12 +114,12 @@ export const EqlTabContentComponent: React.FC = ({ const canQueryTimeline = useCallback( () => - loadingSourcerer != null && - !loadingSourcerer && + dataViewLoading != null && + !dataViewLoading && !isEmpty(start) && !isEmpty(end) && !isBlankTimeline, - [end, isBlankTimeline, loadingSourcerer, start] + [end, isBlankTimeline, dataViewLoading, start] ); const [dataLoadingState, { events, inspect, totalCount, loadNextBatch, refreshedAt, refetch }] = @@ -236,10 +254,11 @@ export const EqlTabContentComponent: React.FC = ({ setTimelineFullScreen={setTimelineFullScreen} timelineFullScreen={timelineFullScreen} timelineId={timelineId} + newDataViewPickerEnabled={newDataViewPickerEnabled} /> ), - [activeTab, setTimelineFullScreen, timelineFullScreen, timelineId] + [activeTab, newDataViewPickerEnabled, setTimelineFullScreen, timelineFullScreen, timelineId] ); const NotesFlyoutMemo = useMemo(() => {