[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 /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
elastic · May 26, 2023 · b2355a9 · b2355a9
1 parent 7c5b99f
commit b2355a9
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 39 deletions.
diff --git a/...nt/components/endpoint_response_actions_list/components/actions_log_date_range_picker.tsx b/...nt/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,21 +36,18 @@ export const ActionLogDateRangePicker = memo(
   ({
     dateRangePickerState,
     isDataLoading,
-    isFlyout,
     onRefresh,
     onRefreshChange,
     onTimeChange,
     'data-test-subj': dataTestSubj,
   }: {
     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<IUnifiedSearchPluginServices>();
     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/...c/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx b/...c/management/components/endpoint_response_actions_list/components/actions_log_filters.tsx
@@ -118,7 +118,6 @@ export const ActionsLogFilters = memo(
           <ActionLogDateRangePicker
             dateRangePickerState={dateRangePickerState}
             isDataLoading={isDataLoading}
-            isFlyout={isFlyout}
             onRefresh={onRefresh}
             onRefreshChange={onRefreshChange}
             onTimeChange={onTimeChange}

diff --git a/...solution/public/management/components/endpoint_response_actions_list/components/hooks.tsx b/...solution/public/management/components/endpoint_response_actions_list/components/hooks.tsx
@@ -27,7 +27,7 @@ import { StatusBadge } from './status_badge';
 import { useActionHistoryUrlParams } from './use_action_history_url_params';
 import { useGetEndpointsList } from '../../../hooks/endpoint/use_get_endpoints_list';
 
-const defaultDateRangeOptions = Object.freeze({
+export const DEFAULT_DATE_RANGE_OPTIONS = Object.freeze({
   autoRefreshOptions: {
     enabled: false,
     duration: 10000,
@@ -38,9 +38,20 @@ const defaultDateRangeOptions = Object.freeze({
 });
 
 export const useDateRangePicker = (isFlyout: boolean) => {
-  const { setUrlDateRangeFilters } = useActionHistoryUrlParams();
-  const [dateRangePickerState, setDateRangePickerState] =
-    useState<DateRangePickerValues>(defaultDateRangeOptions);
+  const {
+    setUrlDateRangeFilters,
+    startDate: startDateFromUrl,
+    endDate: endDateFromUrl,
+  } = useActionHistoryUrlParams();
+  const [dateRangePickerState, setDateRangePickerState] = useState<DateRangePickerValues>({
+    ...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/...ent/components/endpoint_response_actions_list/components/use_action_history_url_params.ts b/...ent/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/...components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx b/...components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx
@@ -198,9 +198,6 @@ describe('Response actions history', () => {
       (renderResult = mockedContext.render(
         <ResponseActionsLog data-test-subj={testPrefix} {...(props ?? {})} />
       ));
-    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/...tion/public/management/components/endpoint_response_actions_list/response_actions_log.tsx b/...tion/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/...olution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx b/...olution/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(<ResponseActionsListPage />));
     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`
         );