Merge branch 'master' into tech-debt/redux-structure

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression.tsx

@@ -185,7 +185,7 @@ export const Expressions: React.FC<Props> = (props) => {
 
   const preFillAlertCriteria = useCallback(() => {
     const md = alertsContext.metadata;
-    if (md && md.currentOptions?.metrics) {
+    if (md?.currentOptions?.metrics?.length) {
       setAlertParams(
         'criteria',
         md.currentOptions.metrics.map((metric) => ({
@@ -249,13 +249,18 @@ export const Expressions: React.FC<Props> = (props) => {
     if (!alertParams.sourceId) {
       setAlertParams('sourceId', source?.id || 'default');
     }
-  }, [alertsContext.metadata, defaultExpression, source]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [alertsContext.metadata, source]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleFieldSearchChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => onFilterChange(e.target.value),
     [onFilterChange]
   );
 
+  const groupByPreviewDisplayName = useMemo(() => {
+    if (Array.isArray(alertParams.groupBy)) return alertParams.groupBy.join(', ');
+    return alertParams.groupBy;
+  }, [alertParams.groupBy]);
+
   return (
     <>
       <EuiSpacer size={'m'} />
@@ -400,7 +405,7 @@ export const Expressions: React.FC<Props> = (props) => {
         showNoDataResults={alertParams.alertOnNoData}
         validate={validateMetricThreshold}
         fetch={alertsContext.http.fetch}
-        groupByDisplayName={alertParams.groupBy}
+        groupByDisplayName={groupByPreviewDisplayName}
       />
       <EuiSpacer size={'m'} />
     </>

x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx

@@ -45,7 +45,7 @@ interface Props {
   derivedIndexPattern: IIndexPattern;
   source: InfraSource | null;
   filterQuery?: string;
-  groupBy?: string;
+  groupBy?: string | string[];
 }
 
 const tooltipProps = {

x-pack/plugins/infra/public/alerting/metric_threshold/hooks/use_metrics_explorer_chart_data.ts

@@ -19,7 +19,7 @@ export const useMetricsExplorerChartData = (
   derivedIndexPattern: IIndexPattern,
   source: InfraSource | null,
   filterQuery?: string,
-  groupBy?: string
+  groupBy?: string | string[]
 ) => {
   const { timeSize, timeUnit } = expression || { timeSize: 1, timeUnit: 'm' };
   const options: MetricsExplorerOptions = useMemo(

x-pack/plugins/infra/public/alerting/metric_threshold/types.ts

@@ -53,7 +53,7 @@ export interface ExpressionChartData {
 
 export interface AlertParams {
   criteria: MetricExpression[];
-  groupBy?: string;
+  groupBy?: string[];
   filterQuery?: string;
   sourceId?: string;
   filterQueryText?: string;

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

@@ -5,14 +5,15 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
-import { AlertsUtilityBar } from './index';
+import { AlertsUtilityBar, AlertsUtilityBarProps } from './index';
+import { TestProviders } from '../../../../common/mock/test_providers';
 
 jest.mock('../../../../common/lib/kibana');
 
 describe('AlertsUtilityBar', () => {
-  it('renders correctly', () => {
+  test('renders correctly', () => {
     const wrapper = shallow(
       <AlertsUtilityBar
         canUserCRUD={true}
@@ -32,4 +33,185 @@ describe('AlertsUtilityBar', () => {
 
     expect(wrapper.find('[dataTestSubj="alertActionPopover"]')).toBeTruthy();
   });
+
+  describe('UtilityBarAdditionalFiltersContent', () => {
+    test('does not show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is false', () => {
+      const onShowBuildingBlockAlertsChanged = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <AlertsUtilityBar
+            canUserCRUD={true}
+            hasIndexWrite={true}
+            areEventsLoading={false}
+            clearSelection={jest.fn()}
+            totalCount={100}
+            selectedEventIds={{}}
+            currentFilter="closed"
+            selectAll={jest.fn()}
+            showClearSelection={true}
+            showBuildingBlockAlerts={false} // Does not show showBuildingBlockAlerts checked if this is false
+            onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+            updateAlertsStatus={jest.fn()}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      wrapper
+        .find('[data-test-subj="additionalFilters"] button')
+        .first()
+        .simulate('click')
+        .update();
+
+      // The check box should be false
+      expect(
+        wrapper
+          .find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
+          .first()
+          .prop('checked')
+      ).toEqual(false);
+    });
+
+    test('does show the showBuildingBlockAlerts checked if the showBuildingBlockAlerts is true', () => {
+      const onShowBuildingBlockAlertsChanged = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <AlertsUtilityBar
+            canUserCRUD={true}
+            hasIndexWrite={true}
+            areEventsLoading={false}
+            clearSelection={jest.fn()}
+            totalCount={100}
+            selectedEventIds={{}}
+            currentFilter="closed"
+            selectAll={jest.fn()}
+            showClearSelection={true}
+            showBuildingBlockAlerts={true} // Does show showBuildingBlockAlerts checked if this is true
+            onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+            updateAlertsStatus={jest.fn()}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      wrapper
+        .find('[data-test-subj="additionalFilters"] button')
+        .first()
+        .simulate('click')
+        .update();
+
+      // The check box should be true
+      expect(
+        wrapper
+          .find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
+          .first()
+          .prop('checked')
+      ).toEqual(true);
+    });
+
+    test('calls the onShowBuildingBlockAlertsChanged when the check box is clicked', () => {
+      const onShowBuildingBlockAlertsChanged = jest.fn();
+      const wrapper = mount(
+        <TestProviders>
+          <AlertsUtilityBar
+            canUserCRUD={true}
+            hasIndexWrite={true}
+            areEventsLoading={false}
+            clearSelection={jest.fn()}
+            totalCount={100}
+            selectedEventIds={{}}
+            currentFilter="closed"
+            selectAll={jest.fn()}
+            showClearSelection={true}
+            showBuildingBlockAlerts={false}
+            onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+            updateAlertsStatus={jest.fn()}
+          />
+        </TestProviders>
+      );
+      // click the filters button to popup the checkbox to make it visible
+      wrapper
+        .find('[data-test-subj="additionalFilters"] button')
+        .first()
+        .simulate('click')
+        .update();
+
+      // check the box
+      wrapper
+        .find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
+        .first()
+        .simulate('change', { target: { checked: true } });
+
+      // Make sure our callback is called
+      expect(onShowBuildingBlockAlertsChanged).toHaveBeenCalled();
+    });
+
+    test('can update showBuildingBlockAlerts from false to true', () => {
+      const Proxy = (props: AlertsUtilityBarProps) => (
+        <TestProviders>
+          <AlertsUtilityBar
+            canUserCRUD={true}
+            hasIndexWrite={true}
+            areEventsLoading={false}
+            clearSelection={jest.fn()}
+            totalCount={100}
+            selectedEventIds={{}}
+            currentFilter="closed"
+            selectAll={jest.fn()}
+            showClearSelection={true}
+            showBuildingBlockAlerts={props.showBuildingBlockAlerts}
+            onShowBuildingBlockAlertsChanged={jest.fn()}
+            updateAlertsStatus={jest.fn()}
+          />
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <Proxy
+          canUserCRUD={true}
+          hasIndexWrite={true}
+          areEventsLoading={false}
+          clearSelection={jest.fn()}
+          totalCount={100}
+          selectedEventIds={{}}
+          currentFilter="closed"
+          selectAll={jest.fn()}
+          showClearSelection={true}
+          showBuildingBlockAlerts={false}
+          onShowBuildingBlockAlertsChanged={jest.fn()}
+          updateAlertsStatus={jest.fn()}
+        />
+      );
+      // click the filters button to popup the checkbox to make it visible
+      wrapper
+        .find('[data-test-subj="additionalFilters"] button')
+        .first()
+        .simulate('click')
+        .update();
+
+      // The check box should false now since we initially set the showBuildingBlockAlerts to false
+      expect(
+        wrapper
+          .find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
+          .first()
+          .prop('checked')
+      ).toEqual(false);
+
+      wrapper.setProps({ showBuildingBlockAlerts: true });
+      wrapper.update();
+
+      // click the filters button to popup the checkbox to make it visible
+      wrapper
+        .find('[data-test-subj="additionalFilters"] button')
+        .first()
+        .simulate('click')
+        .update();
+
+      // The check box should be true now since we changed the showBuildingBlockAlerts from false to true
+      expect(
+        wrapper
+          .find('[data-test-subj="showBuildingBlockAlertsCheckbox"] input')
+          .first()
+          .prop('checked')
+      ).toEqual(true);
+    });
+  });
 });

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

@@ -28,7 +28,7 @@ import { TimelineNonEcsData } from '../../../../graphql/types';
 import { UpdateAlertsStatus } from '../types';
 import { FILTER_CLOSED, FILTER_IN_PROGRESS, FILTER_OPEN } from '../alerts_filter_group';
 
-interface AlertsUtilityBarProps {
+export interface AlertsUtilityBarProps {
   canUserCRUD: boolean;
   hasIndexWrite: boolean;
   areEventsLoading: boolean;
@@ -223,5 +223,6 @@ export const AlertsUtilityBar = React.memo(
     prevProps.areEventsLoading === nextProps.areEventsLoading &&
     prevProps.selectedEventIds === nextProps.selectedEventIds &&
     prevProps.totalCount === nextProps.totalCount &&
-    prevProps.showClearSelection === nextProps.showClearSelection
+    prevProps.showClearSelection === nextProps.showClearSelection &&
+    prevProps.showBuildingBlockAlerts === nextProps.showBuildingBlockAlerts
 );