[Security Solution][Detection Page] Status filter refactor (#107249)

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { waitFor, act } from '@testing-library/react';
 import { mount } from 'enzyme';
 
-import { esQuery } from '../../../../../../../../src/plugins/data/public';
+import { esQuery, Filter } from '../../../../../../../../src/plugins/data/public';
 import { TestProviders } from '../../../../common/mock';
 import { SecurityPageName } from '../../../../app/types';
 
@@ -78,6 +78,11 @@ describe('AlertsHistogramPanel', () => {
     updateDateRange: jest.fn(),
   };
 
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+
   it('renders correctly', () => {
     const wrapper = mount(
       <TestProviders>
@@ -157,7 +162,7 @@ describe('AlertsHistogramPanel', () => {
         combinedQueries:
           '{"bool":{"must":[],"filter":[{"match_all":{}},{"exists":{"field":"process.name"}}],"should":[],"must_not":[]}}',
       };
-      mount(
+      const wrapper = mount(
         <TestProviders>
           <AlertsHistogramPanel {...props} />
         </TestProviders>
@@ -180,6 +185,60 @@ describe('AlertsHistogramPanel', () => {
           ],
         ]);
       });
+      wrapper.unmount();
+    });
+  });
+
+  describe('Filters', () => {
+    it('filters props is valid, alerts query include filter', async () => {
+      const mockGetAlertsHistogramQuery = jest.spyOn(helpers, 'getAlertsHistogramQuery');
+      const statusFilter: Filter = {
+        meta: {
+          alias: null,
+          disabled: false,
+          key: 'signal.status',
+          negate: false,
+          params: {
+            query: 'open',
+          },
+          type: 'phrase',
+        },
+        query: {
+          term: {
+            'signal.status': 'open',
+          },
+        },
+      };
+
+      const props = {
+        ...defaultProps,
+        query: { query: '', language: 'kql' },
+        filters: [statusFilter],
+      };
+      const wrapper = mount(
+        <TestProviders>
+          <AlertsHistogramPanel {...props} />
+        </TestProviders>
+      );
+
+      await waitFor(() => {
+        expect(mockGetAlertsHistogramQuery.mock.calls[1]).toEqual([
+          'signal.rule.name',
+          '2020-07-07T08:20:18.966Z',
+          '2020-07-08T08:20:18.966Z',
+          [
+            {
+              bool: {
+                filter: [{ term: { 'signal.status': 'open' } }],
+                must: [],
+                must_not: [],
+                should: [],
+              },
+            },
+          ],
+        ]);
+      });
+      wrapper.unmount();
     });
   });
 

x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_filter_group/index.tsx

@@ -6,7 +6,9 @@
  */
 
 import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
+import { rgba } from 'polished';
 import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
 import { Status } from '../../../../../common/detection_engine/schemas/common/schemas';
 import * as i18n from '../translations';
 
@@ -14,6 +16,17 @@ export const FILTER_OPEN: Status = 'open';
 export const FILTER_CLOSED: Status = 'closed';
 export const FILTER_IN_PROGRESS: Status = 'in-progress';
 
+const StatusFilterButton = styled(EuiFilterButton)<{ isActive: boolean }>`
+  background: ${({ isActive, theme }) => (isActive ? theme.eui.euiColorPrimary : '')};
+`;
+
+const StatusFilterGroup = styled(EuiFilterGroup)`
+  background: ${({ theme }) => rgba(theme.eui.euiColorPrimary, 0.2)};
+  .euiButtonEmpty--ghost:enabled:focus {
+    background-color: ${({ theme }) => theme.eui.euiColorPrimary};
+  }
+`;
+
 interface Props {
   onFilterGroupChanged: (filterGroup: Status) => void;
 }
@@ -37,33 +50,39 @@ const AlertsTableFilterGroupComponent: React.FC<Props> = ({ onFilterGroupChanged
   }, [setFilterGroup, onFilterGroupChanged]);
 
   return (
-    <EuiFilterGroup data-test-subj="alerts-table-filter-group">
-      <EuiFilterButton
+    <StatusFilterGroup data-test-subj="alerts-table-filter-group">
+      <StatusFilterButton
         data-test-subj="openAlerts"
         hasActiveFilters={filterGroup === FILTER_OPEN}
+        isActive={filterGroup === FILTER_OPEN}
         onClick={onClickOpenFilterCallback}
         withNext
+        color={filterGroup === FILTER_OPEN ? 'ghost' : 'primary'}
       >
         {i18n.OPEN_ALERTS}
-      </EuiFilterButton>
+      </StatusFilterButton>
 
-      <EuiFilterButton
+      <StatusFilterButton
         data-test-subj="inProgressAlerts"
         hasActiveFilters={filterGroup === FILTER_IN_PROGRESS}
+        isActive={filterGroup === FILTER_IN_PROGRESS}
         onClick={onClickInProgressFilterCallback}
         withNext
+        color={filterGroup === FILTER_IN_PROGRESS ? 'ghost' : 'primary'}
       >
         {i18n.IN_PROGRESS_ALERTS}
-      </EuiFilterButton>
+      </StatusFilterButton>
 
-      <EuiFilterButton
+      <StatusFilterButton
         data-test-subj="closedAlerts"
         hasActiveFilters={filterGroup === FILTER_CLOSED}
+        isActive={filterGroup === FILTER_CLOSED}
         onClick={onClickCloseFilterCallback}
+        color={filterGroup === FILTER_CLOSED ? 'ghost' : 'primary'}
       >
         {i18n.CLOSED_ALERTS}
-      </EuiFilterButton>
-    </EuiFilterGroup>
+      </StatusFilterButton>
+    </StatusFilterGroup>
   );
 };
 

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.test.tsx

@@ -35,9 +35,7 @@ describe('AlertsTableComponent', () => {
           isSelectAllChecked={false}
           clearSelected={jest.fn()}
           setEventsLoading={jest.fn()}
-          clearEventsLoading={jest.fn()}
           setEventsDeleted={jest.fn()}
-          clearEventsDeleted={jest.fn()}
           showBuildingBlockAlerts={false}
           onShowBuildingBlockAlertsChanged={jest.fn()}
           showOnlyThreatIndicatorAlerts={false}

x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx

@@ -31,7 +31,6 @@ import {
   alertsDefaultModelRuleRegistry,
   buildAlertStatusFilterRuleRegistry,
 } from './default_config';
-import { FILTER_OPEN, AlertsTableFilterGroup } from './alerts_filter_group';
 import { AlertsUtilityBar } from './alerts_utility_bar';
 import * as i18nCommon from '../../../common/translations';
 import * as i18n from './translations';
@@ -68,13 +67,12 @@ interface OwnProps {
   showOnlyThreatIndicatorAlerts: boolean;
   timelineId: TimelineIdLiteral;
   to: string;
+  filterGroup?: Status;
 }
 
 type AlertsTableComponentProps = OwnProps & PropsFromRedux;
 
 export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
-  clearEventsDeleted,
-  clearEventsLoading,
   clearSelected,
   defaultFilters,
   from,
@@ -95,10 +93,10 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
   showOnlyThreatIndicatorAlerts,
   timelineId,
   to,
+  filterGroup = 'open',
 }) => {
   const dispatch = useDispatch();
   const [showClearSelectionAction, setShowClearSelectionAction] = useState(false);
-  const [filterGroup, setFilterGroup] = useState<Status>(FILTER_OPEN);
   const {
     browserFields,
     indexPattern: indexPatterns,
@@ -216,17 +214,6 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     }
   }, [dispatch, isSelectAllChecked, timelineId]);
 
-  // Callback for when open/closed filter changes
-  const onFilterGroupChangedCallback = useCallback(
-    (newFilterGroup: Status) => {
-      clearEventsLoading!({ id: timelineId });
-      clearEventsDeleted!({ id: timelineId });
-      clearSelected!({ id: timelineId });
-      setFilterGroup(newFilterGroup);
-    },
-    [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup, timelineId]
-  );
-
   // Callback for clearing entire selection from utility bar
   const clearSelectionCallback = useCallback(() => {
     clearSelected!({ id: timelineId });
@@ -372,11 +359,6 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     );
   }, [dispatch, defaultTimelineModel, filterManager, tGridEnabled, timelineId]);
 
-  const headerFilterGroup = useMemo(
-    () => <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />,
-    [onFilterGroupChangedCallback]
-  );
-
   if (loading || indexPatternsLoading || isEmpty(selectedPatterns)) {
     return (
       <EuiPanel hasBorder>
@@ -393,7 +375,6 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       defaultModel={defaultTimelineModel}
       end={to}
       currentFilter={filterGroup}
-      headerFilterGroup={headerFilterGroup}
       id={timelineId}
       onRuleChange={onRuleChange}
       renderCellValue={RenderCellValue}
@@ -438,8 +419,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     eventIds: string[];
     isLoading: boolean;
   }) => dispatch(timelineActions.setEventsLoading({ id, eventIds, isLoading })),
-  clearEventsLoading: ({ id }: { id: string }) =>
-    dispatch(timelineActions.clearEventsLoading({ id })),
   setEventsDeleted: ({
     id,
     eventIds,
@@ -449,8 +428,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     eventIds: string[];
     isDeleted: boolean;
   }) => dispatch(timelineActions.setEventsDeleted({ id, eventIds, isDeleted })),
-  clearEventsDeleted: ({ id }: { id: string }) =>
-    dispatch(timelineActions.clearEventsDeleted({ id })),
 });
 
 const connector = connect(makeMapStateToProps, mapDispatchToProps);

x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx

@@ -5,11 +5,19 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiWindowEvent } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiWindowEvent,
+  EuiHorizontalRule,
+} from '@elastic/eui';
 import styled from 'styled-components';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { connect, ConnectedProps, useDispatch } from 'react-redux';
+import { Dispatch } from 'redux';
+import { Status } from '../../../../common/detection_engine/schemas/common/schemas';
 import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import { isTab } from '../../../../../timelines/public';
 import { useDeepEqualSelector, useShallowEqualSelector } from '../../../common/hooks/use_selector';
@@ -44,9 +52,11 @@ import {
   resetKeyboardFocus,
   showGlobalFilters,
 } from '../../../timelines/components/timeline/helpers';
-import { timelineSelectors } from '../../../timelines/store/timeline';
+import { timelineActions, timelineSelectors } from '../../../timelines/store/timeline';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 import {
+  buildAlertStatusFilter,
+  buildAlertStatusFilterRuleRegistry,
   buildShowBuildingBlockFilter,
   buildShowBuildingBlockFilterRuleRegistry,
   buildThreatMatchFilter,
@@ -58,6 +68,10 @@ import { MissingPrivilegesCallOut } from '../../components/callouts/missing_priv
 import { useKibana } from '../../../common/lib/kibana';
 import { AlertsCountPanel } from '../../components/alerts_kpis/alerts_count_panel';
 import { CHART_HEIGHT } from '../../components/alerts_kpis/common/config';
+import {
+  AlertsTableFilterGroup,
+  FILTER_OPEN,
+} from '../../components/alerts_table/alerts_filter_group';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -68,7 +82,13 @@ const StyledFullHeightContainer = styled.div`
   flex: 1 1 auto;
 `;
 
-const DetectionEnginePageComponent = () => {
+type DetectionEngineComponentProps = PropsFromRedux;
+
+const DetectionEnginePageComponent: React.FC<DetectionEngineComponentProps> = ({
+  clearEventsDeleted,
+  clearEventsLoading,
+  clearSelected,
+}) => {
   const dispatch = useDispatch();
   const containerElement = useRef<HTMLDivElement | null>(null);
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
@@ -108,6 +128,7 @@ const DetectionEnginePageComponent = () => {
   const [showOnlyThreatIndicatorAlerts, setShowOnlyThreatIndicatorAlerts] = useState(false);
   const loading = userInfoLoading || listsConfigLoading;
   const { navigateToUrl } = useKibana().services.application;
+  const [filterGroup, setFilterGroup] = useState<Status>(FILTER_OPEN);
 
   const updateDateRangeCallback = useCallback<UpdateDateRange>(
     ({ x }) => {
@@ -134,23 +155,51 @@ const DetectionEnginePageComponent = () => {
     [formatUrl, navigateToUrl]
   );
 
+  // Callback for when open/closed filter changes
+  const onFilterGroupChangedCallback = useCallback(
+    (newFilterGroup: Status) => {
+      const timelineId = TimelineId.detectionsPage;
+      clearEventsLoading!({ id: timelineId });
+      clearEventsDeleted!({ id: timelineId });
+      clearSelected!({ id: timelineId });
+      setFilterGroup(newFilterGroup);
+    },
+    [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
+  );
+
   const alertsHistogramDefaultFilters = useMemo(
     () => [
       ...filters,
       ...(ruleRegistryEnabled
-        ? buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts) // TODO: Once we are past experimental phase this code should be removed
-        : buildShowBuildingBlockFilter(showBuildingBlockAlerts)),
+        ? [
+            // TODO: Once we are past experimental phase this code should be removed
+            ...buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts),
+            ...buildAlertStatusFilterRuleRegistry(filterGroup),
+          ]
+        : [
+            ...buildShowBuildingBlockFilter(showBuildingBlockAlerts),
+            ...buildAlertStatusFilter(filterGroup),
+          ]),
       ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
     ],
-    [filters, ruleRegistryEnabled, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts]
+    [
+      filters,
+      ruleRegistryEnabled,
+      showBuildingBlockAlerts,
+      showOnlyThreatIndicatorAlerts,
+      filterGroup,
+    ]
   );
 
   // AlertsTable manages global filters itself, so not including `filters`
   const alertsTableDefaultFilters = useMemo(
     () => [
       ...(ruleRegistryEnabled
-        ? buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts) // TODO: Once we are past experimental phase this code should be removed
-        : buildShowBuildingBlockFilter(showBuildingBlockAlerts)),
+        ? [
+            // TODO: Once we are past experimental phase this code should be removed
+            ...buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts),
+          ]
+        : [...buildShowBuildingBlockFilter(showBuildingBlockAlerts)]),
       ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
     ],
     [ruleRegistryEnabled, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts]
@@ -254,6 +303,9 @@ const DetectionEnginePageComponent = () => {
                   {i18n.BUTTON_MANAGE_RULES}
                 </LinkButton>
               </DetectionEngineHeaderPage>
+              <EuiHorizontalRule margin="m" />
+              <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />
+              <EuiSpacer size="m" />
               <EuiFlexGroup wrap>
                 <EuiFlexItem grow={2}>
                   <AlertsHistogramPanel
@@ -291,6 +343,7 @@ const DetectionEnginePageComponent = () => {
               showOnlyThreatIndicatorAlerts={showOnlyThreatIndicatorAlerts}
               onShowOnlyThreatIndicatorAlertsChanged={onShowOnlyThreatIndicatorAlertsCallback}
               to={to}
+              filterGroup={filterGroup}
             />
           </SecuritySolutionPageWrapper>
         </StyledFullHeightContainer>
@@ -304,4 +357,16 @@ const DetectionEnginePageComponent = () => {
   );
 };
 
-export const DetectionEnginePage = React.memo(DetectionEnginePageComponent);
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  clearSelected: ({ id }: { id: string }) => dispatch(timelineActions.clearSelected({ id })),
+  clearEventsLoading: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsLoading({ id })),
+  clearEventsDeleted: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsDeleted({ id })),
+});
+
+const connector = connect(null, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+export const DetectionEnginePage = connector(React.memo(DetectionEnginePageComponent));

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx

@@ -23,7 +23,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { connect, ConnectedProps, useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
 import {
@@ -31,6 +31,7 @@ import {
   ExceptionListIdentifiers,
 } from '@kbn/securitysolution-io-ts-list-types';
 
+import { Dispatch } from 'redux';
 import { isTab } from '../../../../../../../timelines/public';
 import {
   useDeepEqualSelector,
@@ -63,6 +64,8 @@ import { StepDefineRule } from '../../../../components/rules/step_define_rule';
 import { StepScheduleRule } from '../../../../components/rules/step_schedule_rule';
 import {
   buildAlertsRuleIdFilter,
+  buildAlertStatusFilter,
+  buildAlertStatusFilterRuleRegistry,
   buildShowBuildingBlockFilter,
   buildShowBuildingBlockFilterRuleRegistry,
   buildThreatMatchFilter,
@@ -98,7 +101,7 @@ import {
   resetKeyboardFocus,
   showGlobalFilters,
 } from '../../../../../timelines/components/timeline/helpers';
-import { timelineSelectors } from '../../../../../timelines/store/timeline';
+import { timelineActions, timelineSelectors } from '../../../../../timelines/store/timeline';
 import { timelineDefaults } from '../../../../../timelines/store/timeline/defaults';
 import { useSourcererScope } from '../../../../../common/containers/sourcerer';
 import { SourcererScopeName } from '../../../../../common/store/sourcerer/model';
@@ -118,6 +121,11 @@ import { MissingPrivilegesCallOut } from '../../../../components/callouts/missin
 import { useRuleWithFallback } from '../../../../containers/detection_engine/rules/use_rule_with_fallback';
 import { BadgeOptions } from '../../../../../common/components/header_page/types';
 import { AlertsStackByField } from '../../../../components/alerts_kpis/common/types';
+import { Status } from '../../../../../../common/detection_engine/schemas/common/schemas';
+import {
+  AlertsTableFilterGroup,
+  FILTER_OPEN,
+} from '../../../../components/alerts_table/alerts_filter_group';
 
 /**
  * Need a 100% height here to account for the graph/analyze tool, which sets no explicit height parameters, but fills the available space.
@@ -155,7 +163,13 @@ const ruleDetailTabs = [
   },
 ];
 
-const RuleDetailsPageComponent = () => {
+type DetectionEngineComponentProps = PropsFromRedux;
+
+const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
+  clearEventsDeleted,
+  clearEventsLoading,
+  clearSelected,
+}) => {
   const { navigateToApp } = useKibana().services.application;
   const dispatch = useDispatch();
   const containerElement = useRef<HTMLDivElement | null>(null);
@@ -226,6 +240,7 @@ const RuleDetailsPageComponent = () => {
   const mlCapabilities = useMlCapabilities();
   const { formatUrl } = useFormatUrl(SecurityPageName.rules);
   const { globalFullScreen } = useGlobalFullScreen();
+  const [filterGroup, setFilterGroup] = useState<Status>(FILTER_OPEN);
 
   // TODO: Once we are past experimental phase this code should be removed
   const ruleRegistryEnabled = useIsExperimentalFeatureEnabled('ruleRegistryEnabled');
@@ -315,6 +330,18 @@ const RuleDetailsPageComponent = () => {
     [rule, ruleLoading]
   );
 
+  // Callback for when open/closed filter changes
+  const onFilterGroupChangedCallback = useCallback(
+    (newFilterGroup: Status) => {
+      const timelineId = TimelineId.detectionsPage;
+      clearEventsLoading!({ id: timelineId });
+      clearEventsDeleted!({ id: timelineId });
+      clearSelected!({ id: timelineId });
+      setFilterGroup(newFilterGroup);
+    },
+    [clearEventsLoading, clearEventsDeleted, clearSelected, setFilterGroup]
+  );
+
   // Set showBuildingBlockAlerts if rule is a Building Block Rule otherwise we won't show alerts
   useEffect(() => {
     setShowBuildingBlockAlerts(rule?.building_block_type != null);
@@ -324,11 +351,38 @@ const RuleDetailsPageComponent = () => {
     () => [
       ...buildAlertsRuleIdFilter(ruleId),
       ...(ruleRegistryEnabled
-        ? buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts) // TODO: Once we are past experimental phase this code should be removed
-        : buildShowBuildingBlockFilter(showBuildingBlockAlerts)),
+        ? [
+            ...buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts), // TODO: Once we are past experimental phase this code should be removed
+            ...buildAlertStatusFilterRuleRegistry(filterGroup),
+          ]
+        : [
+            ...buildShowBuildingBlockFilter(showBuildingBlockAlerts),
+            ...buildAlertStatusFilter(filterGroup),
+          ]),
       ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
     ],
-    [ruleId, ruleRegistryEnabled, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts]
+    [
+      ruleId,
+      ruleRegistryEnabled,
+      showBuildingBlockAlerts,
+      showOnlyThreatIndicatorAlerts,
+      filterGroup,
+    ]
+  );
+
+  const alertsTableDefaultFilters = useMemo(
+    () => [
+      ...buildAlertsRuleIdFilter(ruleId),
+      ...filters,
+      ...(ruleRegistryEnabled
+        ? [
+            // TODO: Once we are past experimental phase this code should be removed
+            ...buildShowBuildingBlockFilterRuleRegistry(showBuildingBlockAlerts),
+          ]
+        : [...buildShowBuildingBlockFilter(showBuildingBlockAlerts)]),
+      ...buildThreatMatchFilter(showOnlyThreatIndicatorAlerts),
+    ],
+    [ruleId, filters, ruleRegistryEnabled, showBuildingBlockAlerts, showOnlyThreatIndicatorAlerts]
   );
 
   const alertMergedFilters = useMemo(() => [...alertDefaultFilters, ...filters], [
@@ -705,6 +759,8 @@ const RuleDetailsPageComponent = () => {
             </Display>
             {ruleDetailTab === RuleDetailTabs.alerts && (
               <>
+                <AlertsTableFilterGroup onFilterGroupChanged={onFilterGroupChangedCallback} />
+                <EuiSpacer size="m" />
                 <Display show={!globalFullScreen}>
                   <AlertsHistogramPanel
                     filters={alertMergedFilters}
@@ -717,8 +773,9 @@ const RuleDetailsPageComponent = () => {
                 </Display>
                 {ruleId != null && (
                   <AlertsTable
+                    filterGroup={filterGroup}
                     timelineId={TimelineId.detectionsRulesDetailsPage}
-                    defaultFilters={alertDefaultFilters}
+                    defaultFilters={alertsTableDefaultFilters}
                     hasIndexWrite={hasIndexWrite ?? false}
                     hasIndexMaintenance={hasIndexMaintenance ?? false}
                     from={from}
@@ -760,8 +817,20 @@ const RuleDetailsPageComponent = () => {
   );
 };
 
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  clearSelected: ({ id }: { id: string }) => dispatch(timelineActions.clearSelected({ id })),
+  clearEventsLoading: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsLoading({ id })),
+  clearEventsDeleted: ({ id }: { id: string }) =>
+    dispatch(timelineActions.clearEventsDeleted({ id })),
+});
+
+const connector = connect(null, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
 RuleDetailsPageComponent.displayName = 'RuleDetailsPageComponent';
 
-export const RuleDetailsPage = React.memo(RuleDetailsPageComponent);
+export const RuleDetailsPage = connector(React.memo(RuleDetailsPageComponent));
 
 RuleDetailsPage.displayName = 'RuleDetailsPage';