From b2355a9d333bf606b3df5ad5903db584d74291aa Mon Sep 17 00:00:00 2001 From: Ashokaditya <1849116+ashokaditya@users.noreply.github.com> Date: Fri, 26 May 2023 19:21:47 +0200 Subject: [PATCH] [Security Solution][Endpoint][Response Actions] Set default start/end dates for response actions history page (#158407) ## Summary Fixes a bug on the response actions history page where even though the date range filter shows `Last 24 hours` the table actually shows all actions log. fixes elastic/kibana/issues/157676 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --- .../actions_log_date_range_picker.tsx | 16 ++---------- .../components/actions_log_filters.tsx | 1 - .../components/hooks.tsx | 19 +++++++++++--- .../use_action_history_url_params.ts | 5 ++-- .../response_actions_log.test.tsx | 26 ++++++++++++++++--- .../response_actions_log.tsx | 6 ++--- .../view/response_actions_list_page.test.tsx | 24 +++++++++-------- 7 files changed, 58 insertions(+), 39 deletions(-) diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx index fef40433c6848..801f5b563169c 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx @@ -17,7 +17,6 @@ import type { } from '@elastic/eui/src/components/date_picker/types'; import { UI_SETTINGS } from '@kbn/data-plugin/common'; import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; -import { useActionHistoryUrlParams } from './use_action_history_url_params'; export interface DateRangePickerValues { autoRefreshOptions: { @@ -37,7 +36,6 @@ export const ActionLogDateRangePicker = memo( ({ dateRangePickerState, isDataLoading, - isFlyout, onRefresh, onRefreshChange, onTimeChange, @@ -45,13 +43,11 @@ export const ActionLogDateRangePicker = memo( }: { dateRangePickerState: DateRangePickerValues; isDataLoading: boolean; - isFlyout: boolean; onRefresh: () => void; onRefreshChange: (evt: OnRefreshChangeProps) => void; onTimeChange: ({ start, end }: DurationRange) => void; 'data-test-subj'?: string; }) => { - const { startDate: startDateFromUrl, endDate: endDateFromUrl } = useActionHistoryUrlParams(); const getTestId = useTestIdGenerator(dataTestSubj); const kibana = useKibana(); const { uiSettings } = kibana.services; @@ -77,22 +73,14 @@ export const ActionLogDateRangePicker = memo( isLoading={isDataLoading} dateFormat={uiSettings.get('dateFormat')} commonlyUsedRanges={commonlyUsedRanges} - end={ - isFlyout - ? dateRangePickerState.endDate - : endDateFromUrl ?? dateRangePickerState.endDate - } + end={dateRangePickerState.endDate} isPaused={!dateRangePickerState.autoRefreshOptions.enabled} onTimeChange={onTimeChange} onRefreshChange={onRefreshChange} refreshInterval={dateRangePickerState.autoRefreshOptions.duration} onRefresh={onRefresh} recentlyUsedRanges={dateRangePickerState.recentlyUsedDateRanges} - start={ - isFlyout - ? dateRangePickerState.startDate - : startDateFromUrl ?? dateRangePickerState.startDate - } + start={dateRangePickerState.startDate} showUpdateButton={false} updateButtonProps={{ iconOnly: true, fill: false }} width="auto" diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx index 2c47fc0d717a5..5824e90f9c9f1 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx @@ -118,7 +118,6 @@ export const ActionsLogFilters = memo( { - const { setUrlDateRangeFilters } = useActionHistoryUrlParams(); - const [dateRangePickerState, setDateRangePickerState] = - useState(defaultDateRangeOptions); + const { + setUrlDateRangeFilters, + startDate: startDateFromUrl, + endDate: endDateFromUrl, + } = useActionHistoryUrlParams(); + const [dateRangePickerState, setDateRangePickerState] = useState({ + ...DEFAULT_DATE_RANGE_OPTIONS, + startDate: isFlyout + ? DEFAULT_DATE_RANGE_OPTIONS.startDate + : startDateFromUrl ?? DEFAULT_DATE_RANGE_OPTIONS.startDate, + endDate: isFlyout + ? DEFAULT_DATE_RANGE_OPTIONS.endDate + : endDateFromUrl ?? DEFAULT_DATE_RANGE_OPTIONS.endDate, + }); const updateActionListDateRanges = useCallback( ({ start, end }) => { diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/use_action_history_url_params.ts b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/use_action_history_url_params.ts index 3201aad1478d4..5337bb8c8c3cf 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/use_action_history_url_params.ts +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/use_action_history_url_params.ts @@ -14,6 +14,7 @@ import { type ResponseActionStatus, } from '../../../../../common/endpoint/service/response_actions/constants'; import { useUrlParams } from '../../../hooks/use_url_params'; +import { DEFAULT_DATE_RANGE_OPTIONS } from './hooks'; interface UrlParamsActionsLogFilters { commands: string; @@ -63,8 +64,8 @@ export const actionsLogFiltersFromUrlParams = ( commands: [], hosts: [], statuses: [], - startDate: 'now-24h/h', - endDate: 'now', + startDate: DEFAULT_DATE_RANGE_OPTIONS.startDate, + endDate: DEFAULT_DATE_RANGE_OPTIONS.endDate, users: [], withOutputs: [], withAutomatedActions: undefined, diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx index 5e2fb4bb4969f..f437ef224d78e 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx @@ -198,9 +198,6 @@ describe('Response actions history', () => { (renderResult = mockedContext.render( )); - reactTestingLibrary.act(() => { - history.push(`${MANAGEMENT_PATH}/response_actions`); - }); useGetEndpointActionListMock.mockReturnValue({ ...getBaseMockedActionList(), @@ -229,6 +226,29 @@ describe('Response actions history', () => { useUserPrivilegesMock.mockReset(); }); + it('should call API with default date range', () => { + reactTestingLibrary.act(() => { + history.push(`${MANAGEMENT_PATH}/response_actions_history`); + }); + + render(); + expect(useGetEndpointActionListMock).toHaveBeenCalledWith( + { + page: 1, + pageSize: 10, + agentIds: undefined, + commands: [], + statuses: [], + userIds: [], + withOutputs: [], + withAutomatedActions: false, + startDate: 'now-24h/h', + endDate: 'now', + }, + { retry: false } + ); + }); + describe('When index does not exist yet', () => { it('should show global loader when waiting for response', () => { useGetEndpointActionListMock.mockReturnValue({ diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx index 86fd2ea11f54a..d20cabd91267e 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/response_actions_log.tsx @@ -50,8 +50,6 @@ export const ResponseActionsLog = memo< commands: commandsFromUrl, hosts: agentIdsFromUrl, statuses: statusesFromUrl, - startDate: startDateFromUrl, - endDate: endDateFromUrl, users: usersFromUrl, withAutomatedActions: withAutomatedActionsFromUrl, withOutputs: withOutputsFromUrl, @@ -115,8 +113,8 @@ export const ResponseActionsLog = memo< } = useGetEndpointActionList( { ...queryParams, - startDate: isFlyout ? dateRangePickerState.startDate : startDateFromUrl, - endDate: isFlyout ? dateRangePickerState.endDate : endDateFromUrl, + startDate: dateRangePickerState.startDate, + endDate: dateRangePickerState.endDate, }, { retry: false } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx b/x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx index 076f567dbad94..20f94a83de00b 100644 --- a/x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx @@ -137,7 +137,7 @@ describe('Response actions history page', () => { ({ history } = mockedContext); render = () => (renderResult = mockedContext.render()); reactTestingLibrary.act(() => { - history.push(`${MANAGEMENT_PATH}/response_actions`); + history.push(`${MANAGEMENT_PATH}/response_actions_history`); }); mockUseGetEndpointActionList = { @@ -168,7 +168,7 @@ describe('Response actions history page', () => { describe('Hide/Show header', () => { it('should show header when data is in', () => { reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?page=3&pageSize=20'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`); }); render(); const { getByTestId } = renderResult; @@ -177,7 +177,7 @@ describe('Response actions history page', () => { it('should not show header when there is no actions index', () => { reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?page=3&pageSize=20'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`); }); mockUseGetEndpointActionList = { ...baseMockedActionList, @@ -194,7 +194,7 @@ describe('Response actions history page', () => { describe('Read from URL params', () => { it('should read and set paging values from URL params', () => { reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?page=3&pageSize=20'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?page=3&pageSize=20`); }); render(); const { getByTestId } = renderResult; @@ -207,7 +207,7 @@ describe('Response actions history page', () => { it('should read and set command filter values from URL params', () => { const filterPrefix = 'actions-filter'; reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?commands=release,processes'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?commands=release,processes`); }); render(); @@ -244,7 +244,7 @@ describe('Response actions history page', () => { const filterPrefix = 'hosts-filter'; reactTestingLibrary.act(() => { history.push( - '/administration/response_actions_history?hosts=agent-id-1,agent-id-2,agent-id-4,agent-id-5' + `${MANAGEMENT_PATH}/response_actions_history?hosts=agent-id-1,agent-id-2,agent-id-4,agent-id-5` ); }); @@ -274,7 +274,7 @@ describe('Response actions history page', () => { it('should read and set status filter values from URL params', () => { const filterPrefix = 'statuses-filter'; reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?statuses=pending,failed'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?statuses=pending,failed`); }); render(); @@ -297,7 +297,7 @@ describe('Response actions history page', () => { it('should set selected users search input strings to URL params ', () => { const filterPrefix = 'users-filter'; reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?users=userX,userY'); + history.push(`${MANAGEMENT_PATH}/response_actions_history?users=userX,userY`); }); render(); @@ -309,7 +309,9 @@ describe('Response actions history page', () => { it('should read and set relative date ranges filter values from URL params', () => { reactTestingLibrary.act(() => { - history.push('/administration/response_actions_history?startDate=now-23m&endDate=now-1m'); + history.push( + `${MANAGEMENT_PATH}/response_actions_history?startDate=now-23m&endDate=now-1m` + ); }); render(); @@ -329,7 +331,7 @@ describe('Response actions history page', () => { const endDate = '2022-09-12T11:30:33.000Z'; reactTestingLibrary.act(() => { history.push( - `/administration/response_actions_history?startDate=${startDate}&endDate=${endDate}` + `${MANAGEMENT_PATH}/response_actions_history?startDate=${startDate}&endDate=${endDate}` ); }); @@ -351,7 +353,7 @@ describe('Response actions history page', () => { reactTestingLibrary.act(() => { // load page 1 but with expanded actions. history.push( - `/administration/response_actions_history?withOutputs=${actionIdsWithDetails.join( + `${MANAGEMENT_PATH}/response_actions_history?withOutputs=${actionIdsWithDetails.join( ',' )}&page=1&pageSize=10` );