[SIEM] template timeline UI

x-pack/plugins/siem/public/components/link_to/index.ts

@@ -12,7 +12,11 @@ export {
 export { getOverviewUrl, RedirectToOverviewPage } from './redirect_to_overview';
 export { getHostDetailsUrl, getHostsUrl } from './redirect_to_hosts';
 export { getNetworkUrl, getIPDetailsUrl, RedirectToNetworkPage } from './redirect_to_network';
-export { getTimelinesUrl, RedirectToTimelinesPage } from './redirect_to_timelines';
+export {
+  getTimelinesUrl,
+  getTimelineTabsUrl,
+  RedirectToTimelinesPage,
+} from './redirect_to_timelines';
 export {
   getCaseDetailsUrl,
   getCaseUrl,

x-pack/plugins/siem/public/components/link_to/link_to.tsx

@@ -26,6 +26,7 @@ import {
   RedirectToConfigureCasesPage,
 } from './redirect_to_case';
 import { DetectionEngineTab } from '../../pages/detection_engine/types';
+import { TimelineType } from '../../../common/types/timeline';
 
 interface LinkToPageProps {
   match: RouteMatch<{}>;
@@ -112,8 +113,18 @@ export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
     />
     <Route
       component={RedirectToTimelinesPage}
+      exact
       path={`${match.url}/:pageName(${SiemPageName.timelines})`}
     />
+    <Route
+      component={RedirectToTimelinesPage}
+      exact
+      path={`${match.url}/:pageName(${SiemPageName.timelines})`}
+    />
+    <Route
+      component={RedirectToTimelinesPage}
+      path={`${match.url}/:pageName(${SiemPageName.timelines})/:tabName(${TimelineType.default}|${TimelineType.template})`}
+    />
     <Redirect to="/" />
   </Switch>
 ));

x-pack/plugins/siem/public/components/link_to/redirect_to_timelines.tsx

@@ -11,14 +11,30 @@ import { SiemPageName } from '../../pages/home/types';
 
 import { appendSearch } from './helpers';
 import { RedirectWrapper } from './redirect_wrapper';
+import { TimelineTypeLiteral, TimelineType } from '../../../common/types/timeline';
 
 export type TimelineComponentProps = RouteComponentProps<{
+  tabName: TimelineTypeLiteral;
   search: string;
 }>;
 
-export const RedirectToTimelinesPage = ({ location: { search } }: TimelineComponentProps) => (
-  <RedirectWrapper to={`/${SiemPageName.timelines}${search}`} />
+export const RedirectToTimelinesPage = ({
+  match: {
+    params: { tabName },
+  },
+  location: { search },
+}: TimelineComponentProps) => (
+  <RedirectWrapper
+    to={
+      tabName
+        ? `/${SiemPageName.timelines}/${tabName}${search}`
+        : `/${SiemPageName.timelines}/${TimelineType.default}${search}`
+    }
+  />
 );
 
 export const getTimelinesUrl = (search?: string) =>
   `#/link-to/${SiemPageName.timelines}${appendSearch(search)}`;
+
+export const getTimelineTabsUrl = (tabName: TimelineTypeLiteral, search?: string) =>
+  `#/link-to/${SiemPageName.timelines}/${tabName}${appendSearch(search)}`;

x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.test.ts

@@ -148,7 +148,7 @@ describe('Navigation Breadcrumbs', () => {
       );
       expect(breadcrumbs).toEqual([
         { text: 'SIEM', href: '#/link-to/overview' },
-        { text: 'Timelines', href: '' },
+        { text: 'Timelines', href: '#/link-to/timelines' },
       ]);
     });
 

x-pack/plugins/siem/public/components/navigation/breadcrumbs/index.ts

@@ -13,8 +13,14 @@ import { getBreadcrumbs as getHostDetailsBreadcrumbs } from '../../../pages/host
 import { getBreadcrumbs as getIPDetailsBreadcrumbs } from '../../../pages/network/ip_details';
 import { getBreadcrumbs as getCaseDetailsBreadcrumbs } from '../../../pages/case/utils';
 import { getBreadcrumbs as getDetectionRulesBreadcrumbs } from '../../../pages/detection_engine/rules/utils';
+import { getBreadcrumbs as getTimelinesBreadcrumbs } from '../../../pages/timelines';
 import { SiemPageName } from '../../../pages/home/types';
-import { RouteSpyState, HostRouteSpyState, NetworkRouteSpyState } from '../../../utils/route/types';
+import {
+  RouteSpyState,
+  HostRouteSpyState,
+  NetworkRouteSpyState,
+  TimelineRouteSpyState,
+} from '../../../utils/route/types';
 import { getOverviewUrl } from '../../link_to';
 
 import { TabNavigationProps } from '../tab_navigation/types';
@@ -44,6 +50,9 @@ const isNetworkRoutes = (spyState: RouteSpyState): spyState is NetworkRouteSpySt
 const isHostsRoutes = (spyState: RouteSpyState): spyState is HostRouteSpyState =>
   spyState != null && spyState.pageName === SiemPageName.hosts;
 
+const isTimelinesRoutes = (spyState: RouteSpyState): spyState is TimelineRouteSpyState =>
+  spyState != null && spyState.pageName === SiemPageName.timelines;
+
 const isCaseRoutes = (spyState: RouteSpyState): spyState is RouteSpyState =>
   spyState != null && spyState.pageName === SiemPageName.case;
 
@@ -124,6 +133,24 @@ export const getBreadcrumbsForRoute = (
       ),
     ];
   }
+  if (isTimelinesRoutes(spyState) && object.navTabs) {
+    const tempNav: SearchNavTab = { urlKey: 'timeline', isDetailPage: false };
+    let urlStateKeys = [getOr(tempNav, spyState.pageName, object.navTabs)];
+    if (spyState.tabName != null) {
+      urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
+    }
+
+    return [
+      ...siemRootBreadcrumb,
+      ...getTimelinesBreadcrumbs(
+        spyState,
+        urlStateKeys.reduce(
+          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
+          []
+        )
+      ),
+    ];
+  }
   if (
     spyState != null &&
     object.navTabs &&

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

@@ -23,10 +23,20 @@ jest.mock('../../lib/kibana');
 jest.mock('../../containers/timeline/all', () => {
   const originalModule = jest.requireActual('../../containers/timeline/all');
   return {
+    ...originalModule,
     useGetAllTimeline: jest.fn(),
     getAllTimeline: originalModule.getAllTimeline,
   };
 });
+jest.mock('./use_timeline_types', () => {
+  return {
+    useTimelineTypes: jest.fn().mockReturnValue({
+      timelineTypes: 'default',
+      timelineTabs: <div />,
+      timelineFilters: <div />,
+    }),
+  };
+});
 
 describe('StatefulOpenTimeline', () => {
   const theme = () => ({ eui: euiDarkVars, darkMode: true });
@@ -491,33 +501,6 @@ describe('StatefulOpenTimeline', () => {
     });
   });
 
-  test('it renders the title', async () => {
-    const wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <TestProviderWithoutDragAndDrop>
-          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
-            <StatefulOpenTimeline
-              data-test-subj="stateful-timeline"
-              apolloClient={apolloClient}
-              isModal={false}
-              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-              title={title}
-            />
-          </MockedProvider>
-        </TestProviderWithoutDragAndDrop>
-      </ThemeProvider>
-    );
-
-    await wait();
-
-    expect(
-      wrapper
-        .find('[data-test-subj="header-section-title"]')
-        .first()
-        .text()
-    ).toEqual(title);
-  });
-
   describe('#resetSelectionState', () => {
     test('when the user deletes selected timelines, resetSelectionState is invoked to clear the selection state', async () => {
       const wrapper = mount(

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

@@ -9,6 +9,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 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 { useGetAllTimeline } from '../../containers/timeline/all';
@@ -40,6 +41,7 @@ import {
   OnDeleteOneTimeline,
 } from './types';
 import { DEFAULT_SORT_FIELD, DEFAULT_SORT_DIRECTION } from './constants';
+import { useTimelineTypes } from './use_timeline_types';
 
 interface OwnProps<TCache = object> {
   apolloClient: ApolloClient<TCache>;
@@ -103,6 +105,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
     /** The requested field to sort on */
     const [sortField, setSortField] = useState(DEFAULT_SORT_FIELD);
 
+    const { timelineTypes, timelineTabs, timelineFilters } = useTimelineTypes();
     const { fetchAllTimeline, timelines, loading, totalCount, refetch } = useGetAllTimeline();
 
     /** Invoked when the user presses enters to submit the text in the search input */
@@ -136,9 +139,12 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
 
     const deleteTimelines: DeleteTimelines = useCallback(
       async (timelineIds: string[]) => {
+        const existingTimelines = [...timelines];
+        const existingTimelinesCount = totalCount;
         if (timelineIds.includes(timeline.savedObjectId || '')) {
           createNewTimeline({ id: 'timeline-1', columns: defaultHeaders, show: false });
         }
+
         await apolloClient.mutate<
           DeleteTimelineMutation.Mutation,
           DeleteTimelineMutation.Variables
@@ -147,9 +153,9 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
           fetchPolicy: 'no-cache',
           variables: { id: timelineIds },
         });
-        refetch();
+        refetch(existingTimelines, existingTimelinesCount);
       },
-      [apolloClient, createNewTimeline, refetch, timeline]
+      [apolloClient, createNewTimeline, refetch, timeline, timelines, totalCount]
     );
 
     const onDeleteOneTimeline: OnDeleteOneTimeline = useCallback(
@@ -237,19 +243,9 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
         search,
         sort: { sortField: sortField as SortFieldTimeline, sortOrder: sortDirection as Direction },
         onlyUserFavorite: onlyFavorites,
-        timelines,
-        totalCount,
+        timelineTypes,
       });
-    }, [
-      pageIndex,
-      pageSize,
-      search,
-      sortField,
-      sortDirection,
-      timelines,
-      totalCount,
-      onlyFavorites,
-    ]);
+    }, [pageIndex, pageSize, search, sortField, sortDirection, timelineTypes, onlyFavorites]);
 
     return !isModal ? (
       <OpenTimeline
@@ -277,6 +273,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
         selectedItems={selectedItems}
         sortDirection={sortDirection}
         sortField={sortField}
+        tabs={timelineTabs}
         title={title}
         totalSearchResultsCount={totalCount}
       />
@@ -303,6 +300,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
         selectedItems={selectedItems}
         sortDirection={sortDirection}
         sortField={sortField}
+        tabs={timelineFilters}
         title={title}
         totalSearchResultsCount={totalCount}
       />