[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/tasks/live_query.ts

@@ -11,7 +11,10 @@ export const DEFAULT_QUERY = 'select * from processes;';
 export const BIG_QUERY = 'select * from processes, users;';
 
 export const selectAllAgents = () => {
-  cy.react('EuiComboBox', { props: { placeholder: 'Select agents or groups' } }).type('All agents');
+  cy.react('EuiComboBox', { props: { placeholder: 'Select agents or groups' } })
+    .find('input')
+    .should('not.be.disabled');
+  cy.react('EuiComboBox', { props: { placeholder: 'Select agents or groups' } }).click();
   cy.react('EuiFilterSelectItem').contains('All agents').should('exist');
   cy.react('EuiComboBox', { props: { placeholder: 'Select agents or groups' } }).type(
     '{downArrow}{enter}{esc}'

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

@@ -62,7 +62,7 @@ interface LiveQueryFormProps {
   ecsMappingField?: boolean;
   formType?: FormType;
   enabled?: boolean;
-  isExternal?: 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,
-  isExternal,
+  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}
-          isExternal={isExternal}
+          addToTimeline={addToTimeline}
         />
       ) : null,
-    [actionId, agentIds, data?.actions, isExternal]
+    [actionId, agentIds, data?.actions, addToTimeline]
   );
 
   const formSteps: EuiContainedStepProps[] = useMemo(
@@ -467,7 +467,7 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
       </Form>
       {showSavedQueryFlyout ? (
         <SavedQueryFlyout
-          isExternal={isExternal}
+          isExternal={!!addToTimeline}
           onClose={handleCloseSaveQueryFlout}
           defaultValue={flyoutFormDefaultValue}
         />

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

@@ -28,7 +28,7 @@ interface LiveQueryProps {
   ecsMappingField?: boolean;
   enabled?: boolean;
   formType?: 'steps' | 'simple';
-  isExternal?: 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,
-  isExternal,
+  addToTimeline,
 }) => {
   const { data: hasActionResultsPrivileges, isLoading } = useActionResultsPrivileges();
 
@@ -115,7 +115,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
       onSuccess={onSuccess}
       formType={formType}
       enabled={enabled}
-      isExternal={isExternal}
+      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;
-  isExternal?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
   actionId,
   agentIds,
   startDate,
   endDate,
-  isExternal,
+  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: !isExternal,
+      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, isExternal]
+    [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;
-  isExternal?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
 const ResultTabsComponent: React.FC<ResultTabsProps> = ({
   actionId,
   agentIds,
   endDate,
   startDate,
-  isExternal,
+  addToTimeline,
 }) => {
   const tabs = useMemo(
     () => [
@@ -40,7 +40,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
               agentIds={agentIds}
               startDate={startDate}
               endDate={endDate}
-              isExternal={isExternal}
+              addToTimeline={addToTimeline}
             />
           </>
         ),
@@ -60,7 +60,7 @@ const ResultTabsComponent: React.FC<ResultTabsProps> = ({
         ),
       },
     ],
-    [actionId, agentIds, endDate, startDate, isExternal]
+    [actionId, agentIds, endDate, startDate, addToTimeline]
   );
 
   return (

x-pack/plugins/osquery/public/saved_queries/saved_query_flyout.tsx

@@ -28,7 +28,7 @@ import { useCreateSavedQuery } from './use_create_saved_query';
 interface AddQueryFlyoutProps {
   defaultValue: unknown;
   onClose: () => void;
-  isExternal?: true;
+  isExternal?: boolean;
 }
 
 const additionalZIndexStyle = { style: 'z-index: 6000' };
@@ -60,7 +60,7 @@ const SavedQueryFlyoutComponent: React.FC<AddQueryFlyoutProps> = ({
         ownFocus
         onClose={onClose}
         aria-labelledby="flyoutTitle"
-        maskProps={isExternal && additionalZIndexStyle} // For an edge case to display above the alerts flyout
+        maskProps={isExternal ? additionalZIndexStyle : undefined} // For an edge case to display above the alerts flyout
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">

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

@@ -26,10 +26,14 @@ import { useIsOsqueryAvailable } from './use_is_osquery_available';
 interface OsqueryActionProps {
   agentId?: string;
   formType: 'steps' | 'simple';
-  isExternal?: true;
+  addToTimeline?: (payload: { query: [string, string]; isIcon?: true }) => React.ReactElement;
 }
 
-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(
@@ -99,18 +103,18 @@ const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({ agentId, formTyp
     );
   }
 
-  return <LiveQuery formType={formType} agentId={agentId} isExternal={true} />;
+  return <LiveQuery formType={formType} agentId={agentId} addToTimeline={addToTimeline} />;
 };
 
 export const OsqueryAction = React.memo(OsqueryActionComponent);
 
 // @ts-expect-error update types
-const OsqueryActionWrapperComponent = ({ services, agentId, formType, isExternal }) => (
+const OsqueryActionWrapperComponent = ({ services, agentId, formType, addToTimeline }) => (
   <KibanaThemeProvider theme$={services.theme.theme$}>
     <KibanaContextProvider services={services}>
       <EuiErrorBoundary>
         <QueryClientProvider client={queryClient}>
-          <OsqueryAction agentId={agentId} formType={formType} isExternal={isExternal} />
+          <OsqueryAction agentId={agentId} formType={formType} addToTimeline={addToTimeline} />
         </QueryClientProvider>
       </EuiErrorBoundary>
     </KibanaContextProvider>

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

@@ -78,35 +78,27 @@ describe('Osquery Action', () => {
     spyOsquery();
     mockKibana();
 
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(EMPTY_PROMPT)).toBeInTheDocument();
   });
   it('should return empty prompt when no agentId', async () => {
     spyOsquery();
     mockKibana();
 
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={''} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={''} formType={'steps'} />);
     expect(getByText(EMPTY_PROMPT)).toBeInTheDocument();
   });
   it('should return permission denied when agentFetched and agentData available', async () => {
     spyOsquery({ agentData: {} });
     mockKibana();
 
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(PERMISSION_DENIED)).toBeInTheDocument();
   });
   it('should return agent status error when permissions are ok and agent status is wrong', async () => {
     spyOsquery({ agentData: {} });
     mockKibana(properPermissions);
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(AGENT_STATUS_ERROR)).toBeInTheDocument();
   });
   it('should return permission denied if just one permission (runSavedQueries) is available', async () => {
@@ -116,9 +108,7 @@ describe('Osquery Action', () => {
         runSavedQueries: true,
       },
     });
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(PERMISSION_DENIED)).toBeInTheDocument();
   });
   it('should return permission denied if just one permission (readSavedQueries) is available', async () => {
@@ -128,9 +118,7 @@ describe('Osquery Action', () => {
         readSavedQueries: true,
       },
     });
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(PERMISSION_DENIED)).toBeInTheDocument();
   });
   it('should return permission denied if no writeLiveQueries', async () => {
@@ -140,9 +128,7 @@ describe('Osquery Action', () => {
         writeLiveQueries: true,
       },
     });
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(AGENT_STATUS_ERROR)).toBeInTheDocument();
   });
   it('should return not available prompt if osquery is not available', async () => {
@@ -152,17 +138,15 @@ describe('Osquery Action', () => {
         writeLiveQueries: true,
       },
     });
-    const { getByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
-    );
+    const { getByText } = renderWithContext(<OsqueryAction agentId={'test'} formType={'steps'} />);
     expect(getByText(NOT_AVAILABLE)).toBeInTheDocument();
   });
   it('should not return any errors when all data is ok', async () => {
     spyOsquery({ agentData: { status: 'online' } });
     mockKibana(properPermissions);
 
     const { queryByText } = renderWithContext(
-      <OsqueryAction agentId={'test'} formType={'steps'} isExternal={true} />
+      <OsqueryAction agentId={'test'} formType={'steps'} />
     );
     expect(queryByText(EMPTY_PROMPT)).not.toBeInTheDocument();
     expect(queryByText(PERMISSION_DENIED)).not.toBeInTheDocument();