[Security Solution] Coverage overview dashboard filter and search bar

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/constants.ts

@@ -6,13 +6,20 @@
  */
 
 import { euiPalettePositive } from '@elastic/eui';
+import {
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
+import * as i18n from './translations';
 
 export const coverageOverviewPaletteColors = euiPalettePositive(5);
 
 export const coverageOverviewPanelWidth = 160;
 
 export const coverageOverviewLegendWidth = 380;
 
+export const coverageOverviewFilterWidth = 300;
+
 /**
  * Rules count -> color map
  *
@@ -24,3 +31,29 @@ export const coverageOverviewCardColorThresholds = [
   { threshold: 3, color: coverageOverviewPaletteColors[1] },
   { threshold: 1, color: coverageOverviewPaletteColors[0] },
 ];
+
+export const ruleStatusFilterOptions = [
+  {
+    label: i18n.CoverageOverviewEnabledRuleStatus,
+    key: CoverageOverviewRuleActivity.Enabled,
+  },
+  {
+    label: i18n.CoverageOverviewDisabledRuleStatus,
+    key: CoverageOverviewRuleActivity.Disabled,
+  },
+];
+
+export const ruleTypeFilterOptions = [
+  {
+    label: i18n.CoverageOverviewElasticRuleType,
+    key: CoverageOverviewRuleSource.Prebuilt,
+  },
+  {
+    label: i18n.CoverageOverviewCustomizedRuleType,
+    key: CoverageOverviewRuleSource.Customized,
+  },
+  {
+    label: i18n.CoverageOverviewCustomRuleType,
+    key: CoverageOverviewRuleSource.Custom,
+  },
+];

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/coverage_overview_page.test.tsx

@@ -18,6 +18,8 @@ jest.mock('../../../rule_management/api/hooks/use_fetch_coverage_overview');
 
 (useFetchCoverageOverviewQuery as jest.Mock).mockReturnValue({
   data: getMockCoverageOverviewDashboard(),
+  isLoading: false,
+  refetch: () => {},
 });
 
 const renderCoverageOverviewDashboard = () => {

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/coverage_overview_page.tsx

@@ -4,8 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useCallback, useReducer } from 'react';
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { invariant } from '../../../../../common/utils/invariant';
 import { SecuritySolutionPageWrapper } from '../../../../common/components/page_wrapper';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
 import { SecurityPageName } from '../../../../app/types';
@@ -16,36 +17,37 @@ import { useFetchCoverageOverviewQuery } from '../../../rule_management/api/hook
 import { CoverageOverviewTacticPanel } from './tactic_panel';
 import { CoverageOverviewMitreTechniquePanelPopover } from './technique_panel_popover';
 import { CoverageOverviewFiltersPanel } from './filters_panel';
+import type { CoverageOverviewDashboardContextType } from './reducer';
 import { createCoverageOverviewDashboardReducer, initialState } from './reducer';
 
-const CoverageOverviewPageComponent = () => {
-  const { data } = useFetchCoverageOverviewQuery();
+export const CoverageOverviewDashboardContext =
+  createContext<CoverageOverviewDashboardContextType | null>(null);
 
-  const [{ showExpandedCells }, dispatch] = useReducer(
-    createCoverageOverviewDashboardReducer(),
-    initialState
+export const useCoverageOverviewDashboardContext = (): CoverageOverviewDashboardContextType => {
+  const dashboardContext = useContext(CoverageOverviewDashboardContext);
+  invariant(
+    dashboardContext,
+    'dashboardContext should be used inside CoverageOverviewDashboardContext'
   );
 
-  const setShowExpandedCells = useCallback(
-    (value: boolean): void => {
-      dispatch({
-        type: 'setShowExpandedCells',
-        value,
-      });
-    },
-    [dispatch]
-  );
+  return dashboardContext;
+};
+
+const CoverageOverviewPageComponent = () => {
+  const [state, dispatch] = useReducer(createCoverageOverviewDashboardReducer(), initialState);
+  const { data, isLoading, refetch } = useFetchCoverageOverviewQuery(state.filter);
+
+  useEffect(() => {
+    refetch();
+  }, [refetch, state.filter]);
 
   return (
-    <>
+    <CoverageOverviewDashboardContext.Provider value={{ state, dispatch }}>
       <SecuritySolutionPageWrapper data-test-subj="coverageOverviewPage">
         <HeaderPage title={i18n.COVERAGE_OVERVIEW_DASHBOARD_TITLE} />
       </SecuritySolutionPageWrapper>
 
-      <CoverageOverviewFiltersPanel
-        setShowExpandedCells={setShowExpandedCells}
-        showExpandedCells={showExpandedCells}
-      />
+      <CoverageOverviewFiltersPanel isLoading={isLoading} />
       <EuiSpacer />
       <EuiFlexGroup gutterSize="m" className="eui-xScroll">
         {data?.mitreTactics.map((tactic) => (
@@ -56,17 +58,14 @@ const CoverageOverviewPageComponent = () => {
 
             {tactic.techniques.map((technique, techniqueKey) => (
               <EuiFlexItem grow={false} key={`${technique.id}-${techniqueKey}`}>
-                <CoverageOverviewMitreTechniquePanelPopover
-                  technique={technique}
-                  isExpanded={showExpandedCells}
-                />
+                <CoverageOverviewMitreTechniquePanelPopover technique={technique} />
               </EuiFlexItem>
             ))}
           </EuiFlexGroup>
         ))}
       </EuiFlexGroup>
       <SpyRoute pageName={SecurityPageName.coverageOverview} />
-    </>
+    </CoverageOverviewDashboardContext.Provider>
   );
 };
 

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/filters_panel.tsx

@@ -5,42 +5,163 @@
  * 2.0.
  */
 
-import { EuiFilterButton, EuiFilterGroup, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
-import React, { memo } from 'react';
+import {
+  EuiFilterButton,
+  EuiFilterGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSearchBar,
+} from '@elastic/eui';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { css } from '@emotion/css';
+import type {
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
+import { useCoverageOverviewDashboardContext } from './coverage_overview_page';
+import { DashboardFilterButtonComponent } from './shared_components/dashboard_filter_button';
 import { CoverageOverviewLegend } from './shared_components/dashboard_legend';
+import {
+  formatRuleFilterOptions,
+  getInitialRuleStatusFilter,
+  getInitialRuleTypeFilter,
+} from './helpers';
 import * as i18n from './translations';
 
 export interface CoverageOverviewFiltersPanelProps {
-  setShowExpandedCells: (arg: boolean) => void;
-  showExpandedCells: boolean;
+  isLoading: boolean;
 }
 
 const CoverageOverviewFiltersPanelComponent = ({
-  setShowExpandedCells,
-  showExpandedCells,
+  isLoading,
 }: CoverageOverviewFiltersPanelProps) => {
+  const {
+    dispatch,
+    state: { showExpandedCells, filter },
+  } = useCoverageOverviewDashboardContext();
+
+  const setShowExpandedCells = useCallback(
+    (value: boolean): void => {
+      dispatch({
+        type: 'setShowExpandedCells',
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleStatusFilter = useCallback(
+    (value: CoverageOverviewRuleActivity[]): void => {
+      dispatch({
+        type: 'setRuleStatusFilter',
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleTypeFilter = useCallback(
+    (value: CoverageOverviewRuleSource[]): void => {
+      dispatch({
+        type: 'setRuleTypeFilter',
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleSearchFilter = useCallback(
+    (value: string): void => {
+      dispatch({
+        type: 'setRuleSearchFilter',
+        value,
+      });
+    },
+    [dispatch]
+  );
+
   const handleExpandCellsFilterClick = () => setShowExpandedCells(true);
   const handleCollapseCellsFilterClick = () => setShowExpandedCells(false);
 
+  const ruleStatusFilterInitalValue = useMemo(() => getInitialRuleStatusFilter(filter), [filter]);
+  const ruleTypeFilterInitalValue = useMemo(() => getInitialRuleTypeFilter(filter), [filter]);
+
+  const [ruleStatusFilterOptions, setRuleStatusFilterOptions] = useState(
+    ruleStatusFilterInitalValue
+  );
+
+  const [ruleTypeFilterOptions, setRuleTypeFilterOptions] = useState(ruleTypeFilterInitalValue);
+
+  const handleRuleStatusFilterOnChange = useCallback(
+    (options) => {
+      setRuleStatusFilterOptions(options);
+      const formattedOptions = formatRuleFilterOptions<CoverageOverviewRuleActivity>(options);
+      setRuleStatusFilter(formattedOptions);
+    },
+    [setRuleStatusFilter]
+  );
+
+  const handleRuleTypeFilterOnChange = useCallback(
+    (options) => {
+      setRuleTypeFilterOptions(options);
+      const formattedOptions = formatRuleFilterOptions<CoverageOverviewRuleSource>(options);
+      setRuleTypeFilter(formattedOptions);
+    },
+    [setRuleTypeFilter]
+  );
+
+  const handleRuleSearchOnChange = useCallback(
+    ({ queryText }: { queryText: string }) => {
+      setRuleSearchFilter(queryText);
+    },
+    [setRuleSearchFilter]
+  );
+
   return (
     <EuiPanel>
       <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiFilterGroup>
-            <EuiFilterButton
-              withNext
-              hasActiveFilters={!showExpandedCells}
-              onClick={handleCollapseCellsFilterClick}
-            >
-              {i18n.COLLAPSE_CELLS_FILTER_BUTTON}
-            </EuiFilterButton>
-            <EuiFilterButton
-              hasActiveFilters={showExpandedCells}
-              onClick={handleExpandCellsFilterClick}
-            >
-              {i18n.EXPAND_CELLS_FILTER_BUTTON}
-            </EuiFilterButton>
-          </EuiFilterGroup>
+        <EuiFlexItem>
+          <EuiFlexGroup
+            css={css`
+              flex-grow: 0;
+            `}
+          >
+            <DashboardFilterButtonComponent
+              title={i18n.CoverageOverviewRuleStatusFilterLabel}
+              options={ruleStatusFilterOptions}
+              onChange={handleRuleStatusFilterOnChange}
+              isLoading={isLoading}
+            />
+            <DashboardFilterButtonComponent
+              title={i18n.CoverageOverviewRuleTypeFilterLabel}
+              options={ruleTypeFilterOptions}
+              onChange={handleRuleTypeFilterOnChange}
+              isLoading={isLoading}
+            />
+          </EuiFlexGroup>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiSearchBar onChange={handleRuleSearchOnChange} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFilterGroup>
+                <EuiFilterButton
+                  withNext
+                  hasActiveFilters={!showExpandedCells}
+                  onClick={handleCollapseCellsFilterClick}
+                >
+                  {i18n.COLLAPSE_CELLS_FILTER_BUTTON}
+                </EuiFilterButton>
+                <EuiFilterButton
+                  hasActiveFilters={showExpandedCells}
+                  onClick={handleExpandCellsFilterClick}
+                >
+                  {i18n.EXPAND_CELLS_FILTER_BUTTON}
+                </EuiFilterButton>
+              </EuiFilterGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <CoverageOverviewLegend />

x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/coverage_overview/helpers.ts

@@ -5,9 +5,19 @@
  * 2.0.
  */
 
+import type { EuiSelectableOption } from '@elastic/eui';
+import type {
+  CoverageOverviewFilter,
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
 import type { CoverageOverviewMitreTactic } from '../../../rule_management/model/coverage_overview/mitre_tactic';
 import type { CoverageOverviewMitreTechnique } from '../../../rule_management/model/coverage_overview/mitre_technique';
-import { coverageOverviewCardColorThresholds } from './constants';
+import {
+  coverageOverviewCardColorThresholds,
+  ruleStatusFilterOptions,
+  ruleTypeFilterOptions,
+} from './constants';
 
 export const getNumOfCoveredTechniques = (tactic: CoverageOverviewMitreTactic): number =>
   tactic.techniques.filter((technique) => technique.enabledRules.length !== 0).length;
@@ -22,3 +32,27 @@ export const getCardBackgroundColor = (value: number) => {
     }
   }
 };
+
+export const formatRuleFilterOptions = <
+  T extends CoverageOverviewRuleSource | CoverageOverviewRuleActivity
+>(
+  options: Array<{ checked: string; key: T }>
+): T[] => {
+  return options.filter((option) => option.checked === 'on').map((option) => option.key);
+};
+
+export const getInitialRuleStatusFilter = (filter: CoverageOverviewFilter): EuiSelectableOption[] =>
+  ruleStatusFilterOptions.map((option) => {
+    if (filter.activity?.includes(option.key)) {
+      return { ...option, checked: 'on' };
+    }
+    return option;
+  });
+
+export const getInitialRuleTypeFilter = (filter: CoverageOverviewFilter): EuiSelectableOption[] =>
+  ruleTypeFilterOptions.map((option) => {
+    if (filter.source?.includes(option.key)) {
+      return { ...option, checked: 'on' };
+    }
+    return option;
+  });