[Security Solution] Add more actions to alerts flyout

x-pack/plugins/security_solution/common/types/timeline/index.ts

@@ -469,6 +469,7 @@ export type TimelineExpandedEventType =
       params?: {
         eventId: string;
         indexName: string;
+        refetch?: () => void;
       };
     }
   | EmptyObject;

x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx

@@ -7,8 +7,6 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { SearchResponse } from 'elasticsearch';
-import { isEmpty } from 'lodash';
 
 import {
   getCaseDetailsUrl,
@@ -18,18 +16,17 @@ import {
   getRuleDetailsUrl,
   useFormatUrl,
 } from '../../../common/components/link_to';
-import { Ecs } from '../../../../common/ecs';
 import { Case, CaseViewRefreshPropInterface } from '../../../../../cases/common';
 import { TimelineId } from '../../../../common/types/timeline';
 import { SecurityPageName } from '../../../app/types';
-import { KibanaServices, useKibana } from '../../../common/lib/kibana';
-import { APP_ID, DETECTION_ENGINE_QUERY_SIGNALS_URL } from '../../../../common/constants';
+import { useKibana } from '../../../common/lib/kibana';
+import { APP_ID } from '../../../../common/constants';
 import { timelineActions } from '../../../timelines/store/timeline';
 import { useSourcererScope } from '../../../common/containers/sourcerer';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { DetailsPanel } from '../../../timelines/components/side_panel';
 import { InvestigateInTimelineAction } from '../../../detections/components/alerts_table/timeline_actions/investigate_in_timeline_action';
-import { buildAlertsQuery, formatAlertToEcsSignal, useFetchAlertData } from './helpers';
+import { useFetchAlertData } from './helpers';
 import { SEND_ALERT_TO_TIMELINE } from './translations';
 import { useInsertTimeline } from '../use_insert_timeline';
 import { SpyRoute } from '../../../common/utils/route/spy_routes';
@@ -70,39 +67,12 @@ const TimelineDetailsPanel = () => {
 };
 
 const InvestigateInTimelineActionComponent = (alertIds: string[]) => {
-  const fetchEcsAlertsData = async (fetchAlertIds?: string[]): Promise<Ecs[]> => {
-    if (isEmpty(fetchAlertIds)) {
-      return [];
-    }
-    const alertResponse = await KibanaServices.get().http.fetch<
-      SearchResponse<{ '@timestamp': string; [key: string]: unknown }>
-    >(DETECTION_ENGINE_QUERY_SIGNALS_URL, {
-      method: 'POST',
-      body: JSON.stringify(buildAlertsQuery(fetchAlertIds ?? [])),
-    });
-    return (
-      alertResponse?.hits.hits.reduce<Ecs[]>(
-        (acc, { _id, _index, _source }) => [
-          ...acc,
-          {
-            ...formatAlertToEcsSignal(_source as {}),
-            _id,
-            _index,
-            timestamp: _source['@timestamp'],
-          },
-        ],
-        []
-      ) ?? []
-    );
-  };
-
   return (
     <InvestigateInTimelineAction
       ariaLabel={SEND_ALERT_TO_TIMELINE}
       alertIds={alertIds}
       key="investigate-in-timeline"
       ecsRowData={null}
-      fetchEcsAlertsData={fetchEcsAlertsData}
       nonEcsRowData={[]}
     />
   );

x-pack/plugins/security_solution/public/common/components/event_details/json_view.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiCodeEditor } from '@elastic/eui';
+import { EuiCodeBlock } from '@elastic/eui';
 import { set } from '@elastic/safer-lodash-set/fp';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -23,8 +23,6 @@ const EuiCodeEditorContainer = styled.div`
   }
 `;
 
-const EDITOR_SET_OPTIONS = { fontSize: '12px' };
-
 export const JsonView = React.memo<Props>(({ data }) => {
   const value = useMemo(
     () =>
@@ -38,15 +36,15 @@ export const JsonView = React.memo<Props>(({ data }) => {
 
   return (
     <EuiCodeEditorContainer>
-      <EuiCodeEditor
+      <EuiCodeBlock
+        language="json"
+        fontSize="m"
+        paddingSize="m"
+        isCopyable
         data-test-subj="jsonView"
-        isReadOnly
-        mode="javascript"
-        setOptions={EDITOR_SET_OPTIONS}
-        value={value}
-        width="100%"
-        height="100%"
-      />
+      >
+        {value}
+      </EuiCodeBlock>
     </EuiCodeEditorContainer>
   );
 });

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

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import React from 'react';
+import * as i18n from '../translations';
+
+interface AddEndpointExceptionProps {
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const AddEndpointExceptionComponent: React.FC<AddEndpointExceptionProps> = ({
+  onClick,
+  disabled,
+}) => {
+  return (
+    <EuiContextMenuItem
+      key="add-endpoint-exception-menu-item"
+      aria-label={i18n.ACTION_ADD_ENDPOINT_EXCEPTION}
+      data-test-subj="add-endpoint-exception-menu-item"
+      id="addEndpointException"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <EuiText size="m">{i18n.ACTION_ADD_ENDPOINT_EXCEPTION}</EuiText>
+    </EuiContextMenuItem>
+  );
+};
+
+export const AddEndpointException = React.memo(AddEndpointExceptionComponent);

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

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import React from 'react';
+import * as i18n from '../translations';
+
+interface AddEventFilterProps {
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const AddEventFilterComponent: React.FC<AddEventFilterProps> = ({ onClick, disabled }) => {
+  return (
+    <EuiContextMenuItem
+      key="add-event-filter-menu-item"
+      aria-label={i18n.ACTION_ADD_EVENT_FILTER}
+      data-test-subj="add-event-filter-menu-item"
+      id="addEventFilter"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <EuiText data-test-subj="addEventFilterButton" size="m">
+        {i18n.ACTION_ADD_EVENT_FILTER}
+      </EuiText>
+    </EuiContextMenuItem>
+  );
+};
+
+export const AddEventFilter = React.memo(AddEventFilterComponent);

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiContextMenuItem, EuiText } from '@elastic/eui';
+import React from 'react';
+import * as i18n from '../translations';
+
+interface AddExceptionProps {
+  disabled?: boolean;
+  eventKind?: string | null | undefined;
+  onClick: () => void;
+  ruleId: string | null | undefined;
+}
+
+const AddExceptionComponent: React.FC<AddExceptionProps> = ({
+  disabled,
+  eventKind,
+  onClick,
+  ruleId,
+}) => {
+  return eventKind === 'event' && ruleId ? (
+    <EuiContextMenuItem
+      key="add-exception-menu-item"
+      aria-label={i18n.ACTION_ADD_EXCEPTION}
+      data-test-subj="add-exception-menu-item"
+      id="addException"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <EuiText data-test-subj="addExceptionButton" size="m">
+        {i18n.ACTION_ADD_EXCEPTION}
+      </EuiText>
+    </EuiContextMenuItem>
+  ) : null;
+};
+
+export const AddException = React.memo(AddExceptionComponent);