[Security Solution][Detection Page] Status filter refactor

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,14 +6,27 @@
  */
 
 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';
 
 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);