[Detections Engine] Add Alert actions to the Timeline

x-pack/plugins/security_solution/public/app/app.tsx

@@ -15,6 +15,7 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 
+import { ManageUserInfo } from '../detections/components/user_info';
 import { DEFAULT_DARK_MODE, APP_NAME } from '../../common/constants';
 import { ErrorToastDispatcher } from '../common/components/error_toast_dispatcher';
 import { MlCapabilitiesProvider } from '../common/components/ml/permissions/ml_capabilities_provider';
@@ -28,6 +29,7 @@ import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
 import { StartServices } from '../types';
 import { PageRouter } from './routes';
 import { ManageSource } from '../common/containers/sourcerer';
+
 interface StartAppComponent extends AppFrontendLibs {
   children: React.ReactNode;
   history: History;
@@ -57,7 +59,9 @@ const StartAppComponent: FC<StartAppComponent> = ({ children, apolloClient, hist
                   <ManageSource>
                     <ThemeProvider theme={theme}>
                       <MlCapabilitiesProvider>
-                        <PageRouter history={history}>{children}</PageRouter>
+                        <ManageUserInfo>
+                          <PageRouter history={history}>{children}</PageRouter>
+                        </ManageUserInfo>
                       </MlCapabilitiesProvider>
                     </ThemeProvider>
                   </ManageSource>

x-pack/plugins/security_solution/public/app/home/index.tsx

@@ -7,6 +7,7 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
+import { TimelineId } from '../../../common/types/timeline';
 import { DragDropContextWrapper } from '../../common/components/drag_and_drop/drag_drop_context_wrapper';
 import { Flyout } from '../../timelines/components/flyout';
 import { HeaderGlobal } from '../../common/components/header_global';
@@ -17,6 +18,7 @@ import { useWithSource } from '../../common/containers/source';
 import { useShowTimeline } from '../../common/utils/timeline/use_show_timeline';
 import { navTabs } from './home_navigations';
 import { useSignalIndex } from '../../detections/containers/detection_engine/alerts/use_signal_index';
+import { useUserInfo } from '../../detections/components/user_info';
 
 const SecuritySolutionAppWrapper = styled.div`
   display: flex;
@@ -52,6 +54,8 @@ const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
   const [showTimeline] = useShowTimeline();
   const { browserFields, indexPattern, indicesExist } = useWithSource('default', indexToAdd);
 
+  useUserInfo();
+
   return (
     <SecuritySolutionAppWrapper>
       <HeaderGlobal />
@@ -62,7 +66,7 @@ const HomePageComponent: React.FC<HomePageProps> = ({ children }) => {
           {indicesExist && showTimeline && (
             <>
               <AutoSaveWarningMsg />
-              <Flyout timelineId="timeline-1" usersViewing={usersViewing} />
+              <Flyout timelineId={TimelineId.active} usersViewing={usersViewing} />
             </>
           )}
 

x-pack/plugins/security_solution/public/common/components/alerts_viewer/alerts_table.tsx

@@ -5,14 +5,12 @@
  */
 
 import React, { useEffect, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 
 import { Filter } from '../../../../../../../src/plugins/data/public';
 import { TimelineIdLiteral } from '../../../../common/types/timeline';
 import { StatefulEventsViewer } from '../events_viewer';
 import { alertsDefaultModel } from './default_headers';
 import { useManageTimeline } from '../../../timelines/components/manage_timeline';
-import { getInvestigateInResolverAction } from '../../../timelines/components/timeline/body/helpers';
 import * as i18n from './translations';
 import { useKibana } from '../../lib/kibana';
 
@@ -68,7 +66,6 @@ const AlertsTableComponent: React.FC<Props> = ({
   startDate,
   pageFilters = [],
 }) => {
-  const dispatch = useDispatch();
   const alertsFilter = useMemo(() => [...defaultAlertsFilters, ...pageFilters], [pageFilters]);
   const { filterManager } = useKibana().services.data.query;
   const { initializeTimeline } = useManageTimeline();
@@ -80,12 +77,12 @@ const AlertsTableComponent: React.FC<Props> = ({
       filterManager,
       defaultModel: alertsDefaultModel,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
-      timelineRowActions: () => [getInvestigateInResolverAction({ dispatch, timelineId })],
       title: i18n.ALERTS_TABLE_TITLE,
       unit: i18n.UNIT,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return (
     <StatefulEventsViewer
       pageFilters={alertsFilter}

x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts

@@ -12,6 +12,7 @@ import * as H from 'history';
 import { Query, Filter } from '../../../../../../../src/plugins/data/public';
 import { url } from '../../../../../../../src/plugins/kibana_utils/public';
 
+import { TimelineId } from '../../../../common/types/timeline';
 import { SecurityPageName } from '../../../app/types';
 import { inputsSelectors, State } from '../../store';
 import { UrlInputsModel } from '../../store/inputs/model';
@@ -122,7 +123,7 @@ export const makeMapStateToProps = () => {
     const { linkTo: globalLinkTo, timerange: globalTimerange } = inputState.global;
     const { linkTo: timelineLinkTo, timerange: timelineTimerange } = inputState.timeline;
 
-    const flyoutTimeline = getTimeline(state, 'timeline-1');
+    const flyoutTimeline = getTimeline(state, TimelineId.active);
     const timeline =
       flyoutTimeline != null
         ? {

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -5,7 +5,7 @@
  */
 import { FilterStateStore } from '../../../../../../src/plugins/data/common/es_query/filters/meta_filter';
 
-import { TimelineType, TimelineStatus } from '../../../common/types/timeline';
+import { TimelineId, TimelineType, TimelineStatus } from '../../../common/types/timeline';
 
 import { OpenTimelineResult } from '../../timelines/components/open_timeline/types';
 import {
@@ -2227,7 +2227,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     filters: [],
     highlightedDropAndProviderId: '',
     historyIds: [],
-    id: 'timeline-1',
+    id: TimelineId.active,
     isFavorite: false,
     isLive: false,
     isLoading: false,

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../../common/mock/';
 import { CreateTimeline, UpdateTimelineLoading } from './types';
 import { Ecs } from '../../../graphql/types';
-import { TimelineType, TimelineStatus } from '../../../../common/types/timeline';
+import { TimelineId, TimelineType, TimelineStatus } from '../../../../common/types/timeline';
 
 jest.mock('apollo-client');
 
@@ -67,7 +67,10 @@ describe('alert actions', () => {
         });
 
         expect(updateTimelineIsLoading).toHaveBeenCalledTimes(1);
-        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
+        expect(updateTimelineIsLoading).toHaveBeenCalledWith({
+          id: TimelineId.active,
+          isLoading: true,
+        });
       });
 
       test('it invokes createTimeline with designated timeline template if "timelineTemplate" exists', async () => {
@@ -313,9 +316,12 @@ describe('alert actions', () => {
           updateTimelineIsLoading,
         });
 
-        expect(updateTimelineIsLoading).toHaveBeenCalledWith({ id: 'timeline-1', isLoading: true });
         expect(updateTimelineIsLoading).toHaveBeenCalledWith({
-          id: 'timeline-1',
+          id: TimelineId.active,
+          isLoading: true,
+        });
+        expect(updateTimelineIsLoading).toHaveBeenCalledWith({
+          id: TimelineId.active,
           isLoading: false,
         });
         expect(createTimeline).toHaveBeenCalledTimes(1);

x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx

@@ -10,6 +10,7 @@ import dateMath from '@elastic/datemath';
 import { get, getOr, isEmpty, find } from 'lodash/fp';
 import moment from 'moment';
 
+import { TimelineId } from '../../../../common/types/timeline';
 import { updateAlertStatus } from '../../containers/detection_engine/alerts/api';
 import { SendAlertToTimelineActionProps, UpdateAlertStatusActionProps } from './types';
 import {
@@ -67,7 +68,6 @@ export const getFilterAndRuleBounds = (
 export const updateAlertStatusAction = async ({
   query,
   alertIds,
-  status,
   selectedStatus,
   setEventsLoading,
   setEventsDeleted,
@@ -126,7 +126,7 @@ export const getThresholdAggregationDataProvider = (
   return [
     {
       and: [],
-      id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-timeline-1-${aggregationFieldId}-${dataProviderValue}`,
+      id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-${TimelineId.active}-${aggregationFieldId}-${dataProviderValue}`,
       name: ecsData.signal?.rule?.threshold.field,
       enabled: true,
       excluded: false,
@@ -155,7 +155,7 @@ export const sendAlertToTimelineAction = async ({
 
   if (timelineId !== '' && apolloClient != null) {
     try {
-      updateTimelineIsLoading({ id: 'timeline-1', isLoading: true });
+      updateTimelineIsLoading({ id: TimelineId.active, isLoading: true });
       const [responseTimeline, eventDataResp] = await Promise.all([
         apolloClient.query<GetOneTimeline.Query, GetOneTimeline.Variables>({
           query: oneTimelineQuery,
@@ -236,7 +236,7 @@ export const sendAlertToTimelineAction = async ({
       }
     } catch {
       openAlertInBasicTimeline = true;
-      updateTimelineIsLoading({ id: 'timeline-1', isLoading: false });
+      updateTimelineIsLoading({ id: TimelineId.active, isLoading: false });
     }
   }
 
@@ -253,7 +253,7 @@ export const sendAlertToTimelineAction = async ({
         dataProviders: [
           {
             and: [],
-            id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-timeline-1-alert-id-${ecsData._id}`,
+            id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-${TimelineId.active}-alert-id-${ecsData._id}`,
             name: ecsData._id,
             enabled: true,
             excluded: false,
@@ -266,7 +266,7 @@ export const sendAlertToTimelineAction = async ({
           },
           ...getThresholdAggregationDataProvider(ecsData, nonEcsData),
         ],
-        id: 'timeline-1',
+        id: TimelineId.active,
         dateRange: {
           start: from,
           end: to,
@@ -304,7 +304,7 @@ export const sendAlertToTimelineAction = async ({
         dataProviders: [
           {
             and: [],
-            id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-timeline-1-alert-id-${ecsData._id}`,
+            id: `send-alert-to-timeline-action-default-draggable-event-details-value-formatted-field-value-${TimelineId.active}-alert-id-${ecsData._id}`,
             name: ecsData._id,
             enabled: true,
             excluded: false,
@@ -316,7 +316,7 @@ export const sendAlertToTimelineAction = async ({
             },
           },
         ],
-        id: 'timeline-1',
+        id: TimelineId.active,
         dateRange: {
           start: from,
           end: to,