elastic · tomsonpl · Apr 29, 2022 · Mar 28, 2022 · Mar 28, 2022 · Mar 28, 2022
@@ -35,6 +35,7 @@ describe('Alert Event Details', () => {
   it('should be able to run live query', () => {
     const PACK_NAME = 'testpack';
     const RULE_NAME = 'Test-rule';
+    const TIMELINE_NAME = 'Untitled timeline';
     navigateTo('/app/osquery/packs');
     preparePack(PACK_NAME);
     findAndClickButton('Edit');
@@ -61,5 +62,10 @@ describe('Alert Event Details', () => {
     inputQuery('select * from uptime;');
     submitQuery();
     checkResults();
+    cy.getBySel('add-to-timeline').click();
+    cy.getBySel('globalToastList').contains('Added');
+    cy.contains('Cancel').click();
+    cy.contains(TIMELINE_NAME).click();
+    cy.getBySel('draggableWrapperKeyboardHandler').contains('action_id: "');
   });
 });
@@ -62,6 +62,7 @@ interface LiveQueryFormProps {
   ecsMappingField?: boolean;
   formType?: FormType;
   enabled?: boolean;
+  addToTimeline?: (actionId: string) => void;
 }
 
 const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
@@ -72,6 +73,7 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
   ecsMappingField = true,
   formType = 'steps',
   enabled = true,
+  addToTimeline,
 }) => {
   const ecsFieldRef = useRef<ECSMappingEditorFieldRef>();
   const permissions = useKibana().services.application.capabilities.osquery;
@@ -388,9 +390,14 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
   const resultsStepContent = useMemo(
     () =>
       actionId ? (
-        <ResultTabs actionId={actionId} endDate={data?.actions[0].expiration} agentIds={agentIds} />
+        <ResultTabs
+          actionId={actionId}
+          endDate={data?.actions[0].expiration}
+          agentIds={agentIds}
+          addToTimeline={addToTimeline}
+        />
       ) : null,
-    [actionId, agentIds, data?.actions]
+    [actionId, agentIds, data?.actions, addToTimeline]
   );
 
   const formSteps: EuiContainedStepProps[] = useMemo(

@@ -28,6 +28,7 @@ interface LiveQueryProps {
   ecsMappingField?: boolean;
   enabled?: boolean;
   formType?: 'steps' | 'simple';
+  addToTimeline?: (actionId: string) => void;
 }
 
 const LiveQueryComponent: React.FC<LiveQueryProps> = ({
@@ -44,6 +45,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
   ecsMappingField,
   formType,
   enabled,
+  addToTimeline,
 }) => {
   const { data: hasActionResultsPrivileges, isLoading } = useActionResultsPrivileges();
 
@@ -113,6 +115,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
       onSuccess={onSuccess}
       formType={formType}
       enabled={enabled}
+      addToTimeline={addToTimeline}
     />
   );
 };

@@ -46,13 +46,15 @@ interface ResultsTableComponentProps {
   agentIds?: string[];
   endDate?: string;
   startDate?: string;
+  addToTimeline?: (actionId: string) => void;
 }
 
 const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
   actionId,
   agentIds,
   startDate,
   endDate,
+  addToTimeline,
 }) => {
   const [isLive, setIsLive] = useState(true);
   const { data: hasActionResultsPrivileges } = useActionResultsPrivileges();
@@ -307,6 +309,7 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
   const toolbarVisibility = useMemo(
     () => ({
       showDisplaySelector: false,
+      showFullScreenSelector: !addToTimeline,
       additionalControls: (
         <>
           <ViewResultsInDiscoverAction
@@ -321,10 +324,11 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
             endDate={endDate}
             startDate={startDate}
           />
+          {addToTimeline && addToTimeline(actionId)}
         </>
       ),
     }),
-    [actionId, endDate, startDate]
+    [actionId, addToTimeline, endDate, startDate]
   );
 
   useEffect(

@@ -17,13 +17,15 @@ interface ResultTabsProps {
   agentIds?: string[];
   startDate?: string;
   endDate?: string;
+  addToTimeline?: (actionId: string) => void;
 }
 
 const ResultTabsComponent: React.FC<ResultTabsProps> = ({
   actionId,
   agentIds,
   endDate,
   startDate,
+  addToTimeline,
 }) => {
   const tabs = useMemo(
     () => [
@@ -38,6 +40,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
               agentIds={agentIds}
               startDate={startDate}
               endDate={endDate}
+              addToTimeline={addToTimeline}
             />
           </>
         ),
@@ -57,7 +60,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
         ),
       },
     ],
-    [actionId, agentIds, endDate, startDate]
+    [actionId, agentIds, endDate, startDate, addToTimeline]
   );
 
   return (

@@ -48,7 +48,14 @@ const SavedQueryFlyoutComponent: React.FC<AddQueryFlyoutProps> = ({ defaultValue
 
   return (
     <EuiPortal>
-      <EuiFlyout size="m" ownFocus onClose={onClose} aria-labelledby="flyoutTitle">
+      <EuiFlyout
+        size="m"
+        ownFocus
+        onClose={onClose}
+        aria-labelledby="flyoutTitle"
+        // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+        maskProps={{ style: 'z-index: 6000' }} // For an edge case to display above the alerts flyout
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
             <h2 id="flyoutTitle">

@@ -20,9 +20,14 @@ import { useIsOsqueryAvailable } from './use_is_osquery_available';
 interface OsqueryActionProps {
   agentId?: string;
   formType: 'steps' | 'simple';
+  addToTimeline: (actionId: string) => void;
 }
 
-const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({ agentId, formType = 'simple' }) => {
+const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({
+  agentId,
+  formType = 'simple',
+  addToTimeline,
+}) => {
   const permissions = useKibana().services.application.capabilities.osquery;
 
   const emptyPrompt = useMemo(
@@ -134,18 +139,18 @@ const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({ agentId, formTyp
     );
   }
 
-  return <LiveQuery formType={formType} agentId={agentId} />;
+  return <LiveQuery formType={formType} agentId={agentId} addToTimeline={addToTimeline} />;
 };
 
 const OsqueryAction = React.memo(OsqueryActionComponent);
 
 // @ts-expect-error update types
-const OsqueryActionWrapperComponent = ({ services, agentId, formType }) => (
+const OsqueryActionWrapperComponent = ({ services, agentId, formType, addToTimeline }) => (
   <KibanaThemeProvider theme$={services.theme.theme$}>
     <KibanaContextProvider services={services}>
       <EuiErrorBoundary>
         <QueryClientProvider client={queryClient}>
-          <OsqueryAction agentId={agentId} formType={formType} />
+          <OsqueryAction agentId={agentId} formType={formType} addToTimeline={addToTimeline} />
         </QueryClientProvider>
       </EuiErrorBoundary>
     </KibanaContextProvider>

@@ -5,13 +5,20 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
-import { EuiFlyout, EuiFlyoutFooter, EuiFlyoutBody, EuiFlyoutHeader } from '@elastic/eui';
+import {
+  EuiFlyout,
+  EuiFlyoutFooter,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 import { useKibana } from '../../../common/lib/kibana';
 import { OsqueryEventDetailsFooter } from './osquery_flyout_footer';
 import { OsqueryEventDetailsHeader } from './osquery_flyout_header';
 import { ACTION_OSQUERY } from './translations';
+import { DataProvider } from '../../../timelines/components/timeline/data_providers/data_provider';
 
 const OsqueryActionWrapper = styled.div`
   padding: 8px;
@@ -22,11 +29,43 @@ export interface OsqueryFlyoutProps {
   onClose: () => void;
 }
 
-export const OsqueryFlyout: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }) => {
+const TimelineComponent = React.memo((props) => {
+  return <EuiButtonEmpty {...props} size="xs" />;
+});
+TimelineComponent.displayName = 'TimelineComponent';
+
+export const OsqueryFlyoutComponent: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }) => {
   const {
-    services: { osquery },
+    services: { osquery, timelines },
   } = useKibana();
 
+  const { getAddToTimelineButton } = timelines.getHoverActions();
+
+  const handleAddToTimeline = useCallback(
+    (actionId: string) => {
+      const providerA: DataProvider = {
+        and: [],
+        enabled: true,
+        excluded: false,
+        id: actionId,
+        kqlQuery: '',
+        name: actionId,
+        queryMatch: {
+          field: 'action_id',
+          value: actionId,
+          operator: ':',
+        },
+      };
+
+      return getAddToTimelineButton({
+        dataProvider: providerA,
+        field: actionId,
+        ownFocus: false,
+        Component: TimelineComponent,
+      });
+    },
+    [getAddToTimelineButton]
+  );
   // @ts-expect-error
   const { OsqueryAction } = osquery;
   return (
@@ -45,7 +84,7 @@ export const OsqueryFlyout: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <OsqueryActionWrapper data-test-subj="flyout-body-osquery">
-          <OsqueryAction agentId={agentId} formType="steps" />
+          <OsqueryAction agentId={agentId} formType="steps" addToTimeline={handleAddToTimeline} />
         </OsqueryActionWrapper>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
@@ -55,4 +94,4 @@ export const OsqueryFlyout: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }
   );
 };
 
-OsqueryFlyout.displayName = 'OsqueryFlyout';
+export const OsqueryFlyout = React.memo(OsqueryFlyoutComponent);