[RAC] [Alerts] Add highlight to building block alerts (elastic#107727)

* [rac] [Alerts] Add highlight to building block alerts

* Pull back 'additional filters' button to t-grid

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -62,6 +62,7 @@ export interface OwnProps {
   renderCellValue: (props: CellValueElementProps) => React.ReactNode;
   rowRenderers: RowRenderer[];
   utilityBar?: (refetch: inputsModel.Refetch, totalCount: number) => React.ReactNode;
+  additionalFilters?: React.ReactNode;
 }
 
 type Props = OwnProps & PropsFromRedux;
@@ -98,6 +99,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
   showCheckboxes,
   sort,
   utilityBar,
+  additionalFilters,
   // If truthy, the graph viewer (Resolver) is showing
   graphEventId,
 }) => {
@@ -165,7 +167,7 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
               setGlobalFullScreen,
               start,
               sort,
-              utilityBar,
+              additionalFilters,
               graphEventId,
               filterStatus: currentFilter,
               leadingControlColumns,
@@ -291,6 +293,7 @@ export const StatefulEventsViewer = connector(
       prevProps.showCheckboxes === nextProps.showCheckboxes &&
       prevProps.start === nextProps.start &&
       prevProps.utilityBar === nextProps.utilityBar &&
+      prevProps.additionalFilters === nextProps.additionalFilters &&
       prevProps.graphEventId === nextProps.graphEventId
   )
 );

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

@@ -50,14 +50,12 @@ const UtilityBarFlexGroup = styled(EuiFlexGroup)`
   min-width: 175px;
 `;
 
-const BuildingBlockContainer = styled(EuiFlexItem)`
-  background: repeating-linear-gradient(
-    127deg,
-    rgba(245, 167, 0, 0.2),
-    rgba(245, 167, 0, 0.2) 1px,
-    rgba(245, 167, 0, 0.05) 2px,
-    rgba(245, 167, 0, 0.05) 10px
-  );
+const AdditionalFiltersItem = styled(EuiFlexItem)`
+  padding: ${({ theme }) => theme.eui.paddingSizes.s};
+`;
+
+const BuildingBlockContainer = styled(AdditionalFiltersItem)`
+  background: ${({ theme }) => theme.eui.euiColorHighlight};
 `;
 
 const AlertsUtilityBarComponent: React.FC<AlertsUtilityBarProps> = ({
@@ -146,39 +144,6 @@ const AlertsUtilityBarComponent: React.FC<AlertsUtilityBarProps> = ({
     </UtilityBarFlexGroup>
   );
 
-  const UtilityBarAdditionalFiltersContent = (closePopover: () => void) => (
-    <UtilityBarFlexGroup direction="column" gutterSize="m">
-      <BuildingBlockContainer>
-        <EuiCheckbox
-          id="showBuildingBlockAlertsCheckbox"
-          aria-label="showBuildingBlockAlerts"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            closePopover();
-            onShowBuildingBlockAlertsChanged(e.target.checked);
-          }}
-          checked={showBuildingBlockAlerts}
-          color="text"
-          data-test-subj="showBuildingBlockAlertsCheckbox"
-          label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_BUILDING_BLOCK}
-        />
-      </BuildingBlockContainer>
-      <EuiFlexItem>
-        <EuiCheckbox
-          id="showOnlyThreatIndicatorAlertsCheckbox"
-          aria-label="showOnlyThreatIndicatorAlerts"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            closePopover();
-            onShowOnlyThreatIndicatorAlertsChanged(e.target.checked);
-          }}
-          checked={showOnlyThreatIndicatorAlerts}
-          color="text"
-          data-test-subj="showOnlyThreatIndicatorAlertsCheckbox"
-          label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_ONLY_THREAT_INDICATOR_ALERTS}
-        />
-      </EuiFlexItem>
-    </UtilityBarFlexGroup>
-  );
-
   const handleSelectAllAlertsClick = useCallback(() => {
     if (!showClearSelection) {
       selectAll();
@@ -233,16 +198,13 @@ const AlertsUtilityBarComponent: React.FC<AlertsUtilityBarProps> = ({
               </>
             )}
             <UtilityBarSpacer />
-            <UtilityBarAction
-              dataTestSubj="additionalFilters"
-              disabled={areEventsLoading}
-              iconType="arrowDown"
-              iconSide="right"
-              ownFocus={true}
-              popoverContent={UtilityBarAdditionalFiltersContent}
-            >
-              {i18n.ADDITIONAL_FILTERS_ACTIONS}
-            </UtilityBarAction>
+            <AditionalFiltersAction
+              areEventsLoading={areEventsLoading}
+              onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+              showBuildingBlockAlerts={showBuildingBlockAlerts}
+              onShowOnlyThreatIndicatorAlertsChanged={onShowOnlyThreatIndicatorAlertsChanged}
+              showOnlyThreatIndicatorAlerts={showOnlyThreatIndicatorAlerts}
+            />
           </UtilityBarGroup>
         </UtilityBarSection>
       </UtilityBar>
@@ -260,3 +222,63 @@ export const AlertsUtilityBar = React.memo(
     prevProps.showBuildingBlockAlerts === nextProps.showBuildingBlockAlerts &&
     prevProps.showOnlyThreatIndicatorAlerts === nextProps.showOnlyThreatIndicatorAlerts
 );
+
+export const AditionalFiltersAction = ({
+  areEventsLoading,
+  onShowBuildingBlockAlertsChanged,
+  showBuildingBlockAlerts,
+  onShowOnlyThreatIndicatorAlertsChanged,
+  showOnlyThreatIndicatorAlerts,
+}: {
+  areEventsLoading: boolean;
+  onShowBuildingBlockAlertsChanged: (showBuildingBlockAlerts: boolean) => void;
+  showBuildingBlockAlerts: boolean;
+  onShowOnlyThreatIndicatorAlertsChanged: (showOnlyThreatIndicatorAlerts: boolean) => void;
+  showOnlyThreatIndicatorAlerts: boolean;
+}) => {
+  const UtilityBarAdditionalFiltersContent = (closePopover: () => void) => (
+    <UtilityBarFlexGroup direction="column" gutterSize="none">
+      <BuildingBlockContainer>
+        <EuiCheckbox
+          id="showBuildingBlockAlertsCheckbox"
+          aria-label="showBuildingBlockAlerts"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            closePopover();
+            onShowBuildingBlockAlertsChanged(e.target.checked);
+          }}
+          checked={showBuildingBlockAlerts}
+          color="text"
+          data-test-subj="showBuildingBlockAlertsCheckbox"
+          label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_BUILDING_BLOCK}
+        />
+      </BuildingBlockContainer>
+      <AdditionalFiltersItem>
+        <EuiCheckbox
+          id="showOnlyThreatIndicatorAlertsCheckbox"
+          aria-label="showOnlyThreatIndicatorAlerts"
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            closePopover();
+            onShowOnlyThreatIndicatorAlertsChanged(e.target.checked);
+          }}
+          checked={showOnlyThreatIndicatorAlerts}
+          color="text"
+          data-test-subj="showOnlyThreatIndicatorAlertsCheckbox"
+          label={i18n.ADDITIONAL_FILTERS_ACTIONS_SHOW_ONLY_THREAT_INDICATOR_ALERTS}
+        />
+      </AdditionalFiltersItem>
+    </UtilityBarFlexGroup>
+  );
+
+  return (
+    <UtilityBarAction
+      dataTestSubj="additionalFilters"
+      disabled={areEventsLoading}
+      iconType="arrowDown"
+      iconSide="right"
+      ownFocus={true}
+      popoverContent={UtilityBarAdditionalFiltersContent}
+    >
+      {i18n.ADDITIONAL_FILTERS_ACTIONS}
+    </UtilityBarAction>
+  );
+};

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

@@ -31,7 +31,7 @@ import {
   alertsDefaultModelRuleRegistry,
   buildAlertStatusFilterRuleRegistry,
 } from './default_config';
-import { AlertsUtilityBar } from './alerts_utility_bar';
+import { AditionalFiltersAction, AlertsUtilityBar } from './alerts_utility_bar';
 import * as i18nCommon from '../../../common/translations';
 import * as i18n from './translations';
 import {
@@ -313,6 +313,16 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
     ]
   );
 
+  const additionalFiltersComponent = (
+    <AditionalFiltersAction
+      areEventsLoading={loadingEventIds.length > 0}
+      onShowBuildingBlockAlertsChanged={onShowBuildingBlockAlertsChanged}
+      showBuildingBlockAlerts={showBuildingBlockAlerts}
+      onShowOnlyThreatIndicatorAlertsChanged={onShowOnlyThreatIndicatorAlertsChanged}
+      showOnlyThreatIndicatorAlerts={showOnlyThreatIndicatorAlerts}
+    />
+  );
+
   const defaultFiltersMemo = useMemo(() => {
     // TODO: Once we are past experimental phase this code should be removed
     const alertStatusFilter = ruleRegistryEnabled
@@ -382,6 +392,7 @@ export const AlertsTableComponent: React.FC<AlertsTableComponentProps> = ({
       scopeId={SourcererScopeName.detections}
       start={from}
       utilityBar={utilityBarCallback}
+      additionalFilters={additionalFiltersComponent}
     />
   );
 };

x-pack/plugins/timelines/public/components/t_grid/body/helpers.test.tsx

@@ -14,8 +14,12 @@ import {
   mapSortDirectionToDirection,
   mapSortingColumns,
   stringifyEvent,
+  addBuildingBlockStyle,
 } from './helpers';
 
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+import { mockDnsEvent } from '../../../mock';
+
 describe('helpers', () => {
   describe('stringifyEvent', () => {
     test('it omits __typename when it appears at arbitrary levels', () => {
@@ -388,4 +392,32 @@ describe('helpers', () => {
       ).toBe(false);
     });
   });
+
+  describe('addBuildingBlockStyle', () => {
+    const THEME = { eui: euiThemeVars, darkMode: false };
+
+    test('it calls `setCellProps` with background color when event is a building block', () => {
+      const mockedSetCellProps = jest.fn();
+      const ecs = {
+        ...mockDnsEvent,
+        ...{ signal: { rule: { building_block_type: ['default'] } } },
+      };
+
+      addBuildingBlockStyle(ecs, THEME, mockedSetCellProps);
+
+      expect(mockedSetCellProps).toBeCalledWith({
+        style: {
+          backgroundColor: euiThemeVars.euiColorHighlight,
+        },
+      });
+    });
+
+    test('it call `setCellProps` reseting the background color when event is not a building block', () => {
+      const mockedSetCellProps = jest.fn();
+
+      addBuildingBlockStyle(mockDnsEvent, THEME, mockedSetCellProps);
+
+      expect(mockedSetCellProps).toBeCalledWith({ style: { backgroundColor: 'inherit' } });
+    });
+  });
 });

x-pack/plugins/timelines/public/components/t_grid/body/helpers.tsx

@@ -7,6 +7,7 @@
 
 import { isEmpty } from 'lodash/fp';
 
+import { EuiDataGridCellValueElementProps } from '@elastic/eui';
 import type { Ecs } from '../../../../common/ecs';
 import type {
   BrowserField,
@@ -20,6 +21,8 @@ import type {
   TimelineEventsType,
 } from '../../../../common/types/timeline';
 
+import type { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const omitTypenameAndEmpty = (k: string, v: any): any | undefined =>
   k !== '__typename' && v != null ? v : undefined;
@@ -185,3 +188,23 @@ export const allowSorting = ({
 
   return isAllowlistedNonBrowserField || isAggregatable;
 };
+export const addBuildingBlockStyle = (
+  ecs: Ecs,
+  theme: EuiTheme,
+  setCellProps: EuiDataGridCellValueElementProps['setCellProps']
+) => {
+  if (isEventBuildingBlockType(ecs)) {
+    setCellProps({
+      style: {
+        backgroundColor: `${theme.eui.euiColorHighlight}`,
+      },
+    });
+  } else {
+    // reset cell style
+    setCellProps({
+      style: {
+        backgroundColor: 'inherit',
+      },
+    });
+  }
+};