[SIEM] Create template timeline

x-pack/legacy/plugins/siem/public/components/open_timeline/export_timeline/index.tsx

@@ -9,7 +9,7 @@ import { DeleteTimelines } from '../types';
 
 import { TimelineDownloader } from './export_timeline';
 import { DeleteTimelineModalOverlay } from '../delete_timeline_modal';
-import { exportSelectedTimeline } from '../../../containers/timeline/all/api';
+import { exportSelectedTimeline } from '../../../containers/timeline/api';
 
 export interface ExportTimeline {
   disableExportTimelineDownloader: () => void;

x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx

@@ -9,21 +9,41 @@ import { mount } from 'enzyme';
 import { MockedProvider } from 'react-apollo/test-utils';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
+import { getOr } from 'lodash/fp';
 
 import { wait } from '../../lib/helpers';
 import { TestProviderWithoutDragAndDrop, apolloClient } from '../../mock/test_providers';
 import { mockOpenTimelineQueryResults } from '../../mock/timeline_results';
 import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines/timelines_page';
 
-import { StatefulOpenTimeline } from '.';
 import { NotePreviews } from './note_previews';
 import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
-
+import { StatefulOpenTimeline } from '.';
+import { useGetAllTimeline, getAllTimeline } from '../../containers/timeline/all';
 jest.mock('../../lib/kibana');
+jest.mock('../../containers/timeline/all', () => {
+  const originalModule = jest.requireActual('../../containers/timeline/all');
+  return {
+    useGetAllTimeline: jest.fn(),
+    getAllTimeline: originalModule.getAllTimeline,
+  };
+});
 
 describe('StatefulOpenTimeline', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
   const title = 'All Timelines / Open Timelines';
+  beforeEach(() => {
+    ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
+      fetchAllTimeline: jest.fn(),
+      timelines: getAllTimeline(
+        '',
+        getOr([], 'getAllTimeline.timeline', mockOpenTimelineQueryResults[0].result.data)
+      ),
+      loading: false,
+      totalCount: mockOpenTimelineQueryResults[0].result.data.getAllTimeline.totalCount,
+      refetch: jest.fn(),
+    });
+  });
 
   test('it has the expected initial state', () => {
     const wrapper = mount(
@@ -459,6 +479,8 @@ describe('StatefulOpenTimeline', () => {
         .find('[data-test-subj="expand-notes"]')
         .first()
         .simulate('click');
+      expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toEqual(true);
+      expect(wrapper.find('[data-test-subj="updated-by"]').exists()).toEqual(true);
 
       expect(
         wrapper
@@ -532,7 +554,7 @@ describe('StatefulOpenTimeline', () => {
   test('it renders the expected count of matching timelines when no query has been entered', async () => {
     const wrapper = mount(
       <ThemeProvider theme={theme}>
-        <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+        <MockedProvider addTypename={false}>
           <TestProviderWithoutDragAndDrop>
             <StatefulOpenTimeline
               data-test-subj="stateful-timeline"

x-pack/legacy/plugins/siem/public/components/open_timeline/index.tsx

@@ -11,7 +11,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { Dispatch } from 'redux';
 import { defaultHeaders } from '../../components/timeline/body/column_headers/default_headers';
 import { deleteTimelineMutation } from '../../containers/timeline/delete/persist.gql_query';
-import { AllTimelinesVariables, AllTimelinesQuery } from '../../containers/timeline/all';
+import { AllTimelinesVariables, useGetAllTimeline } from '../../containers/timeline/all';
 import { allTimelinesQuery } from '../../containers/timeline/all/index.gql_query';
 import { DeleteTimelineMutation, SortFieldTimeline, Direction } from '../../graphql/types';
 import { State, timelineSelectors } from '../../store';
@@ -104,6 +104,8 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
     /** The requested field to sort on */
     const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD);
 
+    const { fetchAllTimeline, timelines, loading, totalCount, refetch } = useGetAllTimeline();
+
     /** Invoked when the user presses enters to submit the text in the search input */
     const onQueryChange: OnQueryChange = useCallback((query: EuiSearchBarQuery) => {
       setSearch(query.queryText.trim());
@@ -251,75 +253,73 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
       focusInput();
     }, []);
 
-    return (
-      <AllTimelinesQuery
-        pageInfo={{
+    useEffect(() => {
+      fetchAllTimeline({
+        pageInfo: {
           pageIndex: pageIndex + 1,
           pageSize,
-        }}
-        search={search}
-        sort={{ sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction }}
-        onlyUserFavorite={onlyFavorites}
-      >
-        {({ timelines, loading, totalCount, refetch }) => {
-          return !isModal ? (
-            <OpenTimeline
-              data-test-subj={'open-timeline'}
-              deleteTimelines={onDeleteOneTimeline}
-              defaultPageSize={defaultPageSize}
-              isLoading={loading}
-              itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
-              importDataModalToggle={importDataModalToggle}
-              onAddTimelinesToFavorites={undefined}
-              onDeleteSelected={onDeleteSelected}
-              onlyFavorites={onlyFavorites}
-              onOpenTimeline={openTimeline}
-              onQueryChange={onQueryChange}
-              onSelectionChange={onSelectionChange}
-              onTableChange={onTableChange}
-              onToggleOnlyFavorites={onToggleOnlyFavorites}
-              onToggleShowNotes={onToggleShowNotes}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              query={search}
-              refetch={refetch}
-              searchResults={timelines}
-              setImportDataModalToggle={setImportDataModalToggle}
-              selectedItems={selectedItems}
-              sortDirection={sortDirection}
-              sortField={sortField}
-              title={title}
-              totalSearchResultsCount={totalCount}
-            />
-          ) : (
-            <OpenTimelineModalBody
-              data-test-subj={'open-timeline-modal'}
-              deleteTimelines={onDeleteOneTimeline}
-              defaultPageSize={defaultPageSize}
-              hideActions={hideActions}
-              isLoading={loading}
-              itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
-              onAddTimelinesToFavorites={undefined}
-              onlyFavorites={onlyFavorites}
-              onOpenTimeline={openTimeline}
-              onQueryChange={onQueryChange}
-              onSelectionChange={onSelectionChange}
-              onTableChange={onTableChange}
-              onToggleOnlyFavorites={onToggleOnlyFavorites}
-              onToggleShowNotes={onToggleShowNotes}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              query={search}
-              searchResults={timelines}
-              selectedItems={selectedItems}
-              sortDirection={sortDirection}
-              sortField={sortField}
-              title={title}
-              totalSearchResultsCount={totalCount}
-            />
-          );
-        }}
-      </AllTimelinesQuery>
+        },
+        search,
+        sort: { sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction },
+        onlyUserFavorite: onlyFavorites,
+      });
+    }, [pageIndex, pageSize, search, sortField, sortDirection, onlyFavorites]);
+
+    return !isModal ? (
+      <OpenTimeline
+        data-test-subj={'open-timeline'}
+        deleteTimelines={onDeleteOneTimeline}
+        defaultPageSize={defaultPageSize}
+        isLoading={loading}
+        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
+        importDataModalToggle={importDataModalToggle}
+        onAddTimelinesToFavorites={undefined}
+        onDeleteSelected={onDeleteSelected}
+        onlyFavorites={onlyFavorites}
+        onOpenTimeline={openTimeline}
+        onQueryChange={onQueryChange}
+        onSelectionChange={onSelectionChange}
+        onTableChange={onTableChange}
+        onToggleOnlyFavorites={onToggleOnlyFavorites}
+        onToggleShowNotes={onToggleShowNotes}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        query={search}
+        refetch={refetch}
+        searchResults={timelines}
+        setImportDataModalToggle={setImportDataModalToggle}
+        selectedItems={selectedItems}
+        sortDirection={sortDirection}
+        sortField={sortField}
+        title={title}
+        totalSearchResultsCount={totalCount}
+      />
+    ) : (
+      <OpenTimelineModalBody
+        data-test-subj={'open-timeline-modal'}
+        deleteTimelines={onDeleteOneTimeline}
+        defaultPageSize={defaultPageSize}
+        hideActions={hideActions}
+        isLoading={loading}
+        itemIdToExpandedNotesRowMap={itemIdToExpandedNotesRowMap}
+        onAddTimelinesToFavorites={undefined}
+        onlyFavorites={onlyFavorites}
+        onOpenTimeline={openTimeline}
+        onQueryChange={onQueryChange}
+        onSelectionChange={onSelectionChange}
+        onTableChange={onTableChange}
+        onToggleOnlyFavorites={onToggleOnlyFavorites}
+        onToggleShowNotes={onToggleShowNotes}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        query={search}
+        searchResults={timelines}
+        selectedItems={selectedItems}
+        sortDirection={sortDirection}
+        sortField={sortField}
+        title={title}
+        totalSearchResultsCount={totalCount}
+      />
     );
   }
 );
@@ -328,7 +328,6 @@ const makeMapStateToProps = () => {
   const getTimeline = timelineSelectors.getTimelineByIdSelector();
   const mapStateToProps = (state: State) => {
     const timeline = getTimeline(state, 'timeline-1') ?? timelineDefaults;
-
     return {
       timeline,
     };

x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx

@@ -14,7 +14,7 @@ import { TimelinesTable } from './timelines_table';
 import { TitleRow } from './title_row';
 import { ImportDataModal } from '../import_data_modal';
 import * as i18n from './translations';
-import { importTimelines } from '../../containers/timeline/all/api';
+import { importTimelines } from '../../containers/timeline/api';
 
 import {
   UtilityBarGroup,

x-pack/legacy/plugins/siem/public/components/open_timeline/types.ts

@@ -36,6 +36,10 @@ export interface TimelineActionsOverflowColumns {
   } | null>;
 }
 
+enum TimelineTypes {
+  default = 'default',
+  template = 'template',
+}
 /** The results of the query run by the OpenTimeline component */
 export interface OpenTimelineResult {
   created?: number | null;
@@ -47,6 +51,8 @@ export interface OpenTimelineResult {
   pinnedEventIds?: Readonly<Record<string, boolean>> | null;
   savedObjectId?: string | null;
   title?: string | null;
+  templateTimelineId?: string | null;
+  type?: TimelineTypes.template | TimelineTypes.default;
   updated?: number | null;
   updatedBy?: string | null;
 }

x-pack/legacy/plugins/siem/public/components/recent_timelines/index.tsx

@@ -6,11 +6,11 @@
 
 import ApolloClient from 'apollo-client';
 import { EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Dispatch } from 'redux';
 
-import { AllTimelinesQuery } from '../../containers/timeline/all';
+import { useGetAllTimeline } from '../../containers/timeline/all';
 import { SortFieldTimeline, Direction } from '../../graphql/types';
 import { queryTimelineById, dispatchUpdateTimeline } from '../open_timeline/helpers';
 import { OnOpenTimeline } from '../open_timeline/types';
@@ -62,35 +62,37 @@ const StatefulRecentTimelinesComponent = React.memo<Props>(
       [filterBy]
     );
 
-    return (
-      <AllTimelinesQuery
-        pageInfo={{
+    const { fetchAllTimeline, timelines, loading } = useGetAllTimeline();
+
+    useEffect(() => {
+      fetchAllTimeline({
+        pageInfo: {
           pageIndex: 1,
           pageSize: PAGE_SIZE,
-        }}
-        search={''}
-        sort={{
+        },
+        search: '',
+        sort: {
           sortField: SortFieldTimeline.updated,
           sortOrder: Direction.desc,
-        }}
-        onlyUserFavorite={filterBy === 'favorites'}
-      >
-        {({ timelines, loading }) => (
-          <>
-            {loading ? (
-              loadingPlaceholders
-            ) : (
-              <RecentTimelines
-                noTimelinesMessage={noTimelinesMessage}
-                onOpenTimeline={onOpenTimeline}
-                timelines={timelines}
-              />
-            )}
-            <EuiHorizontalRule margin="s" />
-            <EuiText size="xs">{linkAllTimelines}</EuiText>
-          </>
+        },
+        onlyUserFavorite: filterBy === 'favorites',
+      });
+    }, [filterBy]);
+
+    return (
+      <>
+        {loading ? (
+          loadingPlaceholders
+        ) : (
+          <RecentTimelines
+            noTimelinesMessage={noTimelinesMessage}
+            onOpenTimeline={onOpenTimeline}
+            timelines={timelines}
+          />
         )}
-      </AllTimelinesQuery>
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="xs">{linkAllTimelines}</EuiText>
+      </>
     );
   }
 );