[Security Solution] Coverage overview dashboard filter and search bar

x-pack/plugins/security_solution/common/api/detection_engine/rule_management/coverage_overview/coverage_overview_route.mock.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { CoverageOverviewFilter } from './coverage_overview_route';
+import {
+  CoverageOverviewRuleSource,
+  CoverageOverviewRuleActivity,
+} from './coverage_overview_route';
+
+export const getCoverageOverviewFilterMock = (): CoverageOverviewFilter => ({
+  search_term: 'test query',
+  activity: [CoverageOverviewRuleActivity.Enabled],
+  source: [CoverageOverviewRuleSource.Prebuilt],
+});

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,31 @@ export const coverageOverviewCardColorThresholds = [
   { threshold: 3, color: coverageOverviewPaletteColors[1] },
   { threshold: 1, color: coverageOverviewPaletteColors[0] },
 ];
+
+export const ruleActivityFilterDefaultOptions = [
+  {
+    label: CoverageOverviewRuleActivity.Enabled,
+  },
+  {
+    label: CoverageOverviewRuleActivity.Disabled,
+  },
+];
+
+export const ruleActivityFilterLabelMap: Record<string, string> = {
+  [CoverageOverviewRuleActivity.Enabled]: i18n.CoverageOverviewEnabledRuleActivity,
+  [CoverageOverviewRuleActivity.Disabled]: i18n.CoverageOverviewDisabledRuleActivity,
+};
+
+export const ruleSourceFilterDefaultOptions = [
+  {
+    label: CoverageOverviewRuleSource.Prebuilt,
+  },
+  {
+    label: CoverageOverviewRuleSource.Custom,
+  },
+];
+
+export const ruleSourceFilterLabelMap: Record<string, string> = {
+  [CoverageOverviewRuleSource.Prebuilt]: i18n.CoverageOverviewElasticRuleSource,
+  [CoverageOverviewRuleSource.Custom]: i18n.CoverageOverviewCustomRuleSource,
+};

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

@@ -11,32 +11,35 @@ import { useFetchCoverageOverviewQuery } from '../../../rule_management/api/hook
 
 import { getMockCoverageOverviewDashboard } from '../../../rule_management/model/coverage_overview/__mocks__';
 import { TestProviders } from '../../../../common/mock';
-import { CoverageOverviewPage } from './coverage_overview_page';
+import { CoverageOverviewDashboard } from './coverage_overview_dashboard';
+import { CoverageOverviewDashboardContextProvider } from './coverage_overview_dashboard_context';
 
 jest.mock('../../../../common/utils/route/spy_routes', () => ({ SpyRoute: () => null }));
 jest.mock('../../../rule_management/api/hooks/use_fetch_coverage_overview');
 
 (useFetchCoverageOverviewQuery as jest.Mock).mockReturnValue({
   data: getMockCoverageOverviewDashboard(),
+  isLoading: false,
+  refetch: jest.fn(),
 });
 
 const renderCoverageOverviewDashboard = () => {
   return render(
     <TestProviders>
-      <CoverageOverviewPage />
+      <CoverageOverviewDashboardContextProvider>
+        <CoverageOverviewDashboard />
+      </CoverageOverviewDashboardContextProvider>
     </TestProviders>
   );
 };
 
-describe('CoverageOverviewPage', () => {
+describe('CoverageOverviewDashboard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   test('it renders', () => {
-    const wrapper = renderCoverageOverviewDashboard();
-
-    expect(wrapper.getByTestId('coverageOverviewPage')).toBeInTheDocument();
+    renderCoverageOverviewDashboard();
     expect(useFetchCoverageOverviewQuery).toHaveBeenCalled();
   });
 });

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

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { HeaderPage } from '../../../../common/components/header_page';
+
+import * as i18n from './translations';
+import { CoverageOverviewTacticPanel } from './tactic_panel';
+import { CoverageOverviewMitreTechniquePanelPopover } from './technique_panel_popover';
+import { CoverageOverviewFiltersPanel } from './filters_panel';
+import { useCoverageOverviewDashboardContext } from './coverage_overview_dashboard_context';
+
+const CoverageOverviewDashboardComponent = () => {
+  const {
+    state: { data },
+  } = useCoverageOverviewDashboardContext();
+  return (
+    <>
+      <HeaderPage title={i18n.COVERAGE_OVERVIEW_DASHBOARD_TITLE} />
+      <CoverageOverviewFiltersPanel />
+      <EuiSpacer />
+      <EuiFlexGroup gutterSize="m" className="eui-xScroll">
+        {data?.mitreTactics.map((tactic) => (
+          <EuiFlexGroup direction="column" key={tactic.id} gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <CoverageOverviewTacticPanel tactic={tactic} />
+            </EuiFlexItem>
+
+            {tactic.techniques.map((technique, techniqueKey) => (
+              <EuiFlexItem grow={false} key={`${technique.id}-${techniqueKey}`}>
+                <CoverageOverviewMitreTechniquePanelPopover technique={technique} />
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        ))}
+      </EuiFlexGroup>
+    </>
+  );
+};
+
+export const CoverageOverviewDashboard = CoverageOverviewDashboardComponent;

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

@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+} from 'react';
+import { invariant } from '../../../../../common/utils/invariant';
+import type {
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
+import { BulkActionType } from '../../../../../common/api/detection_engine';
+import type { CoverageOverviewDashboardState } from './coverage_overview_dashboard_reducer';
+import {
+  SET_SHOW_EXPANDED_CELLS,
+  SET_RULE_ACTIVITY_FILTER,
+  SET_RULE_SOURCE_FILTER,
+  SET_RULE_SEARCH_FILTER,
+  createCoverageOverviewDashboardReducer,
+} from './coverage_overview_dashboard_reducer';
+import { useFetchCoverageOverviewQuery } from '../../../rule_management/api/hooks/use_fetch_coverage_overview';
+import { useExecuteBulkAction } from '../../../rule_management/logic/bulk_actions/use_execute_bulk_action';
+
+export interface CoverageOverviewDashboardActions {
+  refetch: () => void;
+  setShowExpandedCells: (value: boolean) => void;
+  setRuleActivityFilter: (value: CoverageOverviewRuleActivity[]) => void;
+  setRuleSourceFilter: (value: CoverageOverviewRuleSource[]) => void;
+  setRuleSearchFilter: (value: string) => void;
+  enableAllDisabled: (ruleIds: string[]) => Promise<void>;
+}
+
+export interface CoverageOverviewDashboardContextType {
+  state: CoverageOverviewDashboardState;
+  actions: CoverageOverviewDashboardActions;
+}
+
+export const CoverageOverviewDashboardContext =
+  createContext<CoverageOverviewDashboardContextType | null>(null);
+
+interface CoverageOverviewDashboardContextProviderProps {
+  children: React.ReactNode;
+}
+
+export const initialState: CoverageOverviewDashboardState = {
+  showExpandedCells: false,
+  filter: {},
+  data: undefined,
+  isLoading: false,
+};
+
+export const CoverageOverviewDashboardContextProvider = ({
+  children,
+}: CoverageOverviewDashboardContextProviderProps) => {
+  const [state, dispatch] = useReducer(createCoverageOverviewDashboardReducer(), initialState);
+  const { data, isLoading, refetch } = useFetchCoverageOverviewQuery(state.filter);
+  const { executeBulkAction } = useExecuteBulkAction();
+
+  useEffect(() => {
+    refetch();
+  }, [refetch, state.filter]);
+
+  const setShowExpandedCells = useCallback(
+    (value: boolean): void => {
+      dispatch({
+        type: SET_SHOW_EXPANDED_CELLS,
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleActivityFilter = useCallback(
+    (value: CoverageOverviewRuleActivity[]): void => {
+      dispatch({
+        type: SET_RULE_ACTIVITY_FILTER,
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleSourceFilter = useCallback(
+    (value: CoverageOverviewRuleSource[]): void => {
+      dispatch({
+        type: SET_RULE_SOURCE_FILTER,
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const setRuleSearchFilter = useCallback(
+    (value: string): void => {
+      dispatch({
+        type: SET_RULE_SEARCH_FILTER,
+        value,
+      });
+    },
+    [dispatch]
+  );
+
+  const enableAllDisabled = useCallback(
+    async (ruleIds: string[]) => {
+      await executeBulkAction({ type: BulkActionType.enable, ids: ruleIds });
+    },
+    [executeBulkAction]
+  );
+
+  const actions = useMemo(
+    () => ({
+      refetch,
+      setShowExpandedCells,
+      setRuleActivityFilter,
+      setRuleSourceFilter,
+      setRuleSearchFilter,
+      enableAllDisabled,
+    }),
+    [
+      refetch,
+      setRuleActivityFilter,
+      setRuleSearchFilter,
+      setRuleSourceFilter,
+      setShowExpandedCells,
+      enableAllDisabled,
+    ]
+  );
+
+  const providerValue = useMemo<CoverageOverviewDashboardContextType>(() => {
+    return {
+      state: { ...state, isLoading, data },
+      actions,
+    };
+  }, [actions, data, isLoading, state]);
+
+  return (
+    <CoverageOverviewDashboardContext.Provider value={providerValue}>
+      {children}
+    </CoverageOverviewDashboardContext.Provider>
+  );
+};
+
+export const useCoverageOverviewDashboardContext = (): CoverageOverviewDashboardContextType => {
+  const dashboardContext = useContext(CoverageOverviewDashboardContext);
+  invariant(
+    dashboardContext,
+    'useCoverageOverviewDashboardContext should be used inside CoverageOverviewDashboardContextProvider'
+  );
+
+  return dashboardContext;
+};

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

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type {
+  CoverageOverviewFilter,
+  CoverageOverviewRuleActivity,
+  CoverageOverviewRuleSource,
+} from '../../../../../common/api/detection_engine';
+import type { CoverageOverviewDashboard } from '../../../rule_management/model/coverage_overview/dashboard';
+
+export interface CoverageOverviewDashboardState {
+  showExpandedCells: boolean;
+  filter: CoverageOverviewFilter;
+  isLoading: boolean;
+  data: CoverageOverviewDashboard | undefined;
+}
+
+// Action type names
+export const SET_SHOW_EXPANDED_CELLS = 'setShowExpandedCells' as const;
+export const SET_RULE_ACTIVITY_FILTER = 'setRuleActivityFilter' as const;
+export const SET_RULE_SOURCE_FILTER = 'setRuleSourceFilter' as const;
+export const SET_RULE_SEARCH_FILTER = 'setRuleSearchFilter' as const;
+
+export type Action =
+  | {
+      type: typeof SET_SHOW_EXPANDED_CELLS;
+      value: boolean;
+    }
+  | {
+      type: typeof SET_RULE_ACTIVITY_FILTER;
+      value: CoverageOverviewRuleActivity[];
+    }
+  | {
+      type: typeof SET_RULE_SOURCE_FILTER;
+      value: CoverageOverviewRuleSource[];
+    }
+  | {
+      type: typeof SET_RULE_SEARCH_FILTER;
+      value: string;
+    };
+
+export const createCoverageOverviewDashboardReducer =
+  () =>
+  (state: CoverageOverviewDashboardState, action: Action): CoverageOverviewDashboardState => {
+    switch (action.type) {
+      case SET_SHOW_EXPANDED_CELLS: {
+        const { value } = action;
+        return { ...state, showExpandedCells: value };
+      }
+      case SET_RULE_ACTIVITY_FILTER: {
+        const { value } = action;
+        const updatedFilter = { ...state.filter, activity: value.length !== 0 ? value : undefined };
+        return { ...state, filter: updatedFilter };
+      }
+      case SET_RULE_SOURCE_FILTER: {
+        const { value } = action;
+        const updatedFilter = { ...state.filter, source: value.length !== 0 ? value : undefined };
+        return { ...state, filter: updatedFilter };
+      }
+      case SET_RULE_SEARCH_FILTER: {
+        const { value } = action;
+        const updatedFilter = {
+          ...state.filter,
+          search_term: value.length !== 0 ? value : undefined,
+        };
+        return { ...state, filter: updatedFilter };
+      }
+      default:
+        return state;
+    }
+  };