[Osquery] Add to timeline button

x-pack/plugins/osquery/cypress/integration/all/alerts.spec.ts

@@ -37,6 +37,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');
@@ -57,19 +58,24 @@ describe('Alert Event Details', () => {
     cy.getBySel('ruleSwitch').click();
     cy.getBySel('ruleSwitch').should('have.attr', 'aria-checked', 'true');
     cy.visit('/app/security/alerts');
+    cy.wait(500);
     cy.getBySel('expand-event').first().click();
     cy.getBySel('take-action-dropdown-btn').click();
     cy.getBySel('osquery-action-item').click();
     cy.contains('1 agent selected.');
     inputQuery('select * from uptime;');
     submitQuery();
     checkResults();
-
+    cy.contains('Save for later').click();
+    cy.contains('Save query');
+    cy.get('.euiButtonEmpty--flushLeft').contains('Cancel').click();
+    cy.getBySel('add-to-timeline').first().click();
+    cy.getBySel('globalToastList').contains('Added');
     cy.getBySel(RESULTS_TABLE).within(() => {
       cy.getBySel(RESULTS_TABLE_BUTTON).should('not.exist');
     });
-    cy.contains('Save for later').click();
-    cy.contains('Save query');
-    cy.contains(/^Save$/);
+    cy.contains('Cancel').click();
+    cy.contains(TIMELINE_NAME).click();
+    cy.getBySel('draggableWrapperKeyboardHandler').contains('action_id: "');
   });
 });

x-pack/plugins/osquery/cypress/integration/all/live_query.spec.ts

@@ -58,9 +58,18 @@ describe('ALL - Live Query', () => {
     });
     cy.react(RESULTS_TABLE_CELL_WRRAPER, {
       props: { id: 'message', index: 1 },
-    });
+    }).should('exist');
+    cy.wait(500);
+    cy.react(RESULTS_TABLE_CELL_WRRAPER, {
+      props: { id: 'osquery.days.number', index: 2 },
+    }).should('exist');
+
     cy.react(RESULTS_TABLE_CELL_WRRAPER, {
       props: { id: 'osquery.days.number', index: 2 },
-    }).react('EuiIconIndexMapping');
+    }).within(() => {
+      cy.get('.euiToolTipAnchor').within(() => {
+        cy.get('svg').should('exist');
+      });
+    });
   });
 });

x-pack/plugins/osquery/public/live_queries/form/index.tsx

@@ -62,7 +62,7 @@ interface LiveQueryFormProps {
   ecsMappingField?: boolean;
   formType?: FormType;
   enabled?: boolean;
-  hideFullscreen?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
@@ -73,7 +73,7 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
   ecsMappingField = true,
   formType = 'steps',
   enabled = true,
-  hideFullscreen,
+  addToTimeline,
 }) => {
   const ecsFieldRef = useRef<ECSMappingEditorFieldRef>();
   const permissions = useKibana().services.application.capabilities.osquery;
@@ -393,10 +393,10 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
           actionId={actionId}
           endDate={data?.actions[0].expiration}
           agentIds={agentIds}
-          hideFullscreen={hideFullscreen}
+          addToTimeline={addToTimeline}
         />
       ) : null,
-    [actionId, agentIds, data?.actions, hideFullscreen]
+    [actionId, agentIds, data?.actions, addToTimeline]
   );
 
   const formSteps: EuiContainedStepProps[] = useMemo(

x-pack/plugins/osquery/public/live_queries/index.tsx

@@ -28,7 +28,7 @@ interface LiveQueryProps {
   ecsMappingField?: boolean;
   enabled?: boolean;
   formType?: 'steps' | 'simple';
-  hideFullscreen?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const LiveQueryComponent: React.FC<LiveQueryProps> = ({
@@ -45,7 +45,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
   ecsMappingField,
   formType,
   enabled,
-  hideFullscreen,
+  addToTimeline,
 }) => {
   const { data: hasActionResultsPrivileges, isLoading } = useActionResultsPrivileges();
 
@@ -115,7 +115,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
       onSuccess={onSuccess}
       formType={formType}
       enabled={enabled}
-      hideFullscreen={hideFullscreen}
+      addToTimeline={addToTimeline}
     />
   );
 };

x-pack/plugins/osquery/public/results/results_table.tsx

@@ -18,6 +18,8 @@ import {
   EuiProgress,
   EuiSpacer,
   EuiIconTip,
+  EuiDataGridCellValueElementProps,
+  EuiDataGridControlColumn,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -46,15 +48,15 @@ interface ResultsTableComponentProps {
   agentIds?: string[];
   endDate?: string;
   startDate?: string;
-  hideFullscreen?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
   actionId,
   agentIds,
   startDate,
   endDate,
-  hideFullscreen,
+  addToTimeline,
 }) => {
   const [isLive, setIsLive] = useState(true);
   const { data: hasActionResultsPrivileges } = useActionResultsPrivileges();
@@ -309,10 +311,30 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allResultsData?.columns.length, ecsMappingColumns, getHeaderDisplay]);
 
+  const leadingControlColumns: EuiDataGridControlColumn[] = useMemo(() => {
+    const data = allResultsData?.edges;
+    if (addToTimeline && data) {
+      return [
+        {
+          id: 'timeline',
+          width: 38,
+          headerCellRender: () => null,
+          rowCellRender: (actionProps: EuiDataGridCellValueElementProps) => {
+            const eventId = data[actionProps.rowIndex]._id;
+
+            return addToTimeline({ query: ['_id', eventId], isIcon: true });
+          },
+        },
+      ];
+    }
+
+    return [];
+  }, [addToTimeline, allResultsData?.edges]);
+
   const toolbarVisibility = useMemo(
     () => ({
       showDisplaySelector: false,
-      showFullScreenSelector: !hideFullscreen,
+      showFullScreenSelector: !addToTimeline,
       additionalControls: (
         <>
           <ViewResultsInDiscoverAction
@@ -327,10 +349,11 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
             endDate={endDate}
             startDate={startDate}
           />
+          {addToTimeline && addToTimeline({ query: ['action_id', actionId] })}
         </>
       ),
     }),
-    [actionId, endDate, startDate, hideFullscreen]
+    [actionId, addToTimeline, endDate, startDate]
   );
 
   useEffect(
@@ -380,6 +403,7 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
             columnVisibility={columnVisibility}
             rowCount={allResultsData?.totalCount ?? 0}
             renderCellValue={renderCellValue}
+            leadingControlColumns={leadingControlColumns}
             sorting={tableSorting}
             pagination={tablePagination}
             height="500px"

x-pack/plugins/osquery/public/routes/saved_queries/edit/tabs.tsx

@@ -17,15 +17,15 @@ interface ResultTabsProps {
   agentIds?: string[];
   startDate?: string;
   endDate?: string;
-  hideFullscreen?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const ResultTabsComponent: React.FC<ResultTabsProps> = ({
   actionId,
   agentIds,
   endDate,
   startDate,
-  hideFullscreen,
+  addToTimeline,
 }) => {
   const tabs = useMemo(
     () => [
@@ -40,7 +40,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
               agentIds={agentIds}
               startDate={startDate}
               endDate={endDate}
-              hideFullscreen={hideFullscreen}
+              addToTimeline={addToTimeline}
             />
           </>
         ),
@@ -60,7 +60,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
         ),
       },
     ],
-    [actionId, agentIds, endDate, startDate, hideFullscreen]
+    [actionId, agentIds, endDate, startDate, addToTimeline]
   );
 
   return (

x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx

@@ -20,13 +20,13 @@ import { useIsOsqueryAvailable } from './use_is_osquery_available';
 interface OsqueryActionProps {
   agentId?: string;
   formType: 'steps' | 'simple';
-  hideFullscreen?: true;
+  addToTimeline: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({
   agentId,
   formType = 'simple',
-  hideFullscreen,
+  addToTimeline,
 }) => {
   const permissions = useKibana().services.application.capabilities.osquery;
 
@@ -139,18 +139,18 @@ const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({
     );
   }
 
-  return <LiveQuery formType={formType} agentId={agentId} hideFullscreen={hideFullscreen} />;
+  return <LiveQuery formType={formType} agentId={agentId} addToTimeline={addToTimeline} />;
 };
 
 const OsqueryAction = React.memo(OsqueryActionComponent);
 
 // @ts-expect-error update types
-const OsqueryActionWrapperComponent = ({ services, agentId, formType, hideFullscreen }) => (
+const OsqueryActionWrapperComponent = ({ services, agentId, formType, addToTimeline }) => (
   <KibanaThemeProvider theme$={services.theme.theme$}>
     <KibanaContextProvider services={services}>
       <EuiErrorBoundary>
         <QueryClientProvider client={queryClient}>
-          <OsqueryAction agentId={agentId} formType={formType} hideFullscreen={hideFullscreen} />
+          <OsqueryAction agentId={agentId} formType={formType} addToTimeline={addToTimeline} />
         </QueryClientProvider>
       </EuiErrorBoundary>
     </KibanaContextProvider>

x-pack/plugins/security_solution/public/detections/components/osquery/osquery_flyout.tsx

@@ -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,44 @@ 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(
+    (payload: { query: [string, string]; isIcon?: true }) => {
+      const [field, value] = payload.query;
+      const providerA: DataProvider = {
+        and: [],
+        enabled: true,
+        excluded: false,
+        id: value,
+        kqlQuery: '',
+        name: value,
+        queryMatch: {
+          field,
+          value,
+          operator: ':',
+        },
+      };
+
+      return getAddToTimelineButton({
+        dataProvider: providerA,
+        field: value,
+        ownFocus: false,
+        ...(payload.isIcon ? { showTooltip: true } : { Component: TimelineComponent }),
+      });
+    },
+    [getAddToTimelineButton]
+  );
   // @ts-expect-error
   const { OsqueryAction } = osquery;
   return (
@@ -45,7 +85,7 @@ export const OsqueryFlyout: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <OsqueryActionWrapper data-test-subj="flyout-body-osquery">
-          <OsqueryAction agentId={agentId} formType="steps" hideFullscreen={true} />
+          <OsqueryAction agentId={agentId} formType="steps" addToTimeline={handleAddToTimeline} />
         </OsqueryActionWrapper>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
@@ -55,4 +95,4 @@ export const OsqueryFlyout: React.FC<OsqueryFlyoutProps> = ({ agentId, onClose }
   );
 };
 
-OsqueryFlyout.displayName = 'OsqueryFlyout';
+export const OsqueryFlyout = React.memo(OsqueryFlyoutComponent);