[Security Solution] Remove sourcerer browser fields hover actions to help performance

x-pack/plugins/security_solution/public/common/components/authentication/helpers.tsx

@@ -97,6 +97,8 @@ const FAILURES_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
             operator: IS_OPERATOR,
           },
         }}
+        isAggregatable={true}
+        fieldType={'keyword'}
         render={(dataProvider, _, snapshot) =>
           snapshot.isDragging ? (
             <DragEffects>
@@ -129,6 +131,8 @@ const LAST_SUCCESSFUL_SOURCE_COLUMN: Columns<AuthenticationsEdges, Authenticatio
   render: ({ node }) =>
     getRowItemDraggables({
       rowItems: node.lastSuccess?.source?.ip || null,
+      isAggregatable: true,
+      fieldType: 'ip',
       attrName: 'source.ip',
       idPrefix: `authentications-table-${node._id}-lastSuccessSource`,
       render: (item) => <NetworkDetailsLink ip={item} />,
@@ -141,6 +145,8 @@ const LAST_SUCCESSFUL_DESTINATION_COLUMN: Columns<AuthenticationsEdges, Authenti
   render: ({ node }) =>
     getRowItemDraggables({
       rowItems: node.lastSuccess?.host?.name ?? null,
+      isAggregatable: true,
+      fieldType: 'keyword',
       attrName: 'host.name',
       idPrefix: `authentications-table-${node._id}-lastSuccessfulDestination`,
       render: (item) => <HostDetailsLink hostName={item} />,
@@ -164,6 +170,8 @@ const LAST_FAILED_SOURCE_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEd
   render: ({ node }) =>
     getRowItemDraggables({
       rowItems: node.lastFailure?.source?.ip || null,
+      isAggregatable: true,
+      fieldType: 'ip',
       attrName: 'source.ip',
       idPrefix: `authentications-table-${node._id}-lastFailureSource`,
       render: (item) => <NetworkDetailsLink ip={item} />,
@@ -179,6 +187,8 @@ const LAST_FAILED_DESTINATION_COLUMN: Columns<AuthenticationsEdges, Authenticati
       attrName: 'host.name',
       idPrefix: `authentications-table-${node._id}-lastFailureDestination`,
       render: (item) => <HostDetailsLink hostName={item} />,
+      isAggregatable: true,
+      fieldType: 'ip',
     }),
 };
 
@@ -192,6 +202,8 @@ const getUserColumn = (
     getRowItemDraggables({
       rowItems: node.stackedValue,
       attrName: 'user.name',
+      isAggregatable: true,
+      fieldType: 'keyword',
       idPrefix: `authentications-table-${node._id}-userName`,
       render: (item) => (usersEnabled ? <UserDetailsLink userName={item} /> : <>{item}</>),
     }),
@@ -205,6 +217,8 @@ const HOST_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
     getRowItemDraggables({
       rowItems: node.stackedValue,
       attrName: 'host.name',
+      isAggregatable: true,
+      fieldType: 'keyword',
       idPrefix: `authentications-table-${node._id}-hostName`,
       render: (item) => <HostDetailsLink hostName={item} />,
     }),
@@ -234,6 +248,8 @@ const SUCCESS_COLUMN: Columns<AuthenticationsEdges, AuthenticationsEdges> = {
             operator: IS_OPERATOR,
           },
         }}
+        isAggregatable={true}
+        fieldType="keyword"
         render={(dataProvider, _, snapshot) =>
           snapshot.isDragging ? (
             <DragEffects>

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx

@@ -102,6 +102,8 @@ interface Props {
   hideTopN?: boolean;
   isDraggable?: boolean;
   render: RenderFunctionProp;
+  isAggregatable?: boolean;
+  fieldType?: string;
   timelineId?: string;
   truncate?: boolean;
   onFilterAdded?: () => void;
@@ -131,6 +133,8 @@ const DraggableOnWrapperComponent: React.FC<Props> = ({
   hideTopN = false,
   onFilterAdded,
   render,
+  fieldType = '',
+  isAggregatable = false,
   timelineId,
   truncate,
 }) => {
@@ -154,6 +158,8 @@ const DraggableOnWrapperComponent: React.FC<Props> = ({
     hideTopN,
     onFilterAdded,
     render,
+    fieldType,
+    isAggregatable,
     timelineId,
     truncate,
   });
@@ -313,6 +319,8 @@ const DraggableWrapperComponent: React.FC<Props> = ({
   isDraggable = false,
   onFilterAdded,
   render,
+  isAggregatable = false,
+  fieldType = '',
   timelineId,
   truncate,
 }) => {
@@ -327,6 +335,8 @@ const DraggableWrapperComponent: React.FC<Props> = ({
     dataProvider,
     hideTopN,
     isDraggable,
+    isAggregatable,
+    fieldType,
     onFilterAdded,
     render,
     timelineId,
@@ -372,6 +382,8 @@ const DraggableWrapperComponent: React.FC<Props> = ({
       dataProvider={dataProvider}
       hideTopN={hideTopN}
       onFilterAdded={onFilterAdded}
+      fieldType={fieldType}
+      isAggregatable={isAggregatable}
       render={render}
       timelineId={timelineId}
       truncate={truncate}

x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts

@@ -653,7 +653,8 @@ describe('helpers', () => {
     test('it returns true for an aggregatable field that is an allowed type', () => {
       expect(
         allowTopN({
-          browserField: aggregatableAllowedType,
+          fieldType: 'keyword',
+          isAggregatable: true,
           fieldName: aggregatableAllowedType.name,
           hideTopN: false,
         })
@@ -663,7 +664,8 @@ describe('helpers', () => {
     test('it returns true for a allowlisted non-BrowserField', () => {
       expect(
         allowTopN({
-          browserField: undefined,
+          fieldType: 'not right',
+          isAggregatable: false,
           fieldName: 'kibana.alert.rule.name',
           hideTopN: false,
         })
@@ -678,7 +680,8 @@ describe('helpers', () => {
 
       expect(
         allowTopN({
-          browserField: nonAggregatableAllowedType,
+          fieldType: 'keyword',
+          isAggregatable: false,
           fieldName: nonAggregatableAllowedType.name,
           hideTopN: false,
         })
@@ -693,31 +696,21 @@ describe('helpers', () => {
 
       expect(
         allowTopN({
-          browserField: aggregatableNotAllowedType,
+          fieldType: 'text',
+          isAggregatable: false,
           fieldName: aggregatableNotAllowedType.name,
           hideTopN: false,
         })
       ).toBe(false);
     });
 
-    test('it returns false if the BrowserField is missing the aggregatable property', () => {
-      const missingAggregatable = omit('aggregatable', aggregatableAllowedType);
-
-      expect(
-        allowTopN({
-          browserField: missingAggregatable,
-          fieldName: missingAggregatable.name,
-          hideTopN: false,
-        })
-      ).toBe(false);
-    });
-
     test('it returns false if the BrowserField is missing the type property', () => {
       const missingType = omit('type', aggregatableAllowedType);
 
       expect(
         allowTopN({
-          browserField: missingType,
+          fieldType: 'not real',
+          isAggregatable: false,
           fieldName: missingType.name,
           hideTopN: false,
         })
@@ -727,7 +720,8 @@ describe('helpers', () => {
     test('it returns false for a non-allowlisted field when a BrowserField is not provided', () => {
       expect(
         allowTopN({
-          browserField: undefined,
+          fieldType: 'string',
+          isAggregatable: false,
           fieldName: 'non-allowlisted',
           hideTopN: false,
         })
@@ -737,7 +731,8 @@ describe('helpers', () => {
     test('it returns false when hideTopN is true', () => {
       expect(
         allowTopN({
-          browserField: aggregatableAllowedType,
+          fieldType: 'keyword',
+          isAggregatable: true,
           fieldName: aggregatableAllowedType.name,
           hideTopN: true, // <-- the Top N action shall not be shown for this (otherwise valid) field
         })

x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts

@@ -9,7 +9,6 @@ import { Dispatch } from 'redux';
 import { ActionCreator } from 'typescript-fsa';
 import { getProviderIdFromDraggable } from '@kbn/securitysolution-t-grid';
 
-import { BrowserField } from '../../containers/source';
 import { dragAndDropActions } from '../../store/actions';
 import { IdToDataProvider } from '../../store/drag_and_drop/model';
 import { addContentToTimeline } from '../../../timelines/components/timeline/data_providers/helpers';
@@ -90,16 +89,16 @@ export const addProviderToTimeline = ({
 };
 
 export const allowTopN = ({
-  browserField,
+  isAggregatable,
+  fieldType,
   fieldName,
   hideTopN,
 }: {
-  browserField: Partial<BrowserField> | undefined;
   fieldName: string;
+  isAggregatable: boolean;
+  fieldType: string;
   hideTopN: boolean;
 }): boolean => {
-  const isAggregatable = browserField?.aggregatable ?? false;
-  const fieldType = browserField?.type ?? '';
   const isAllowedType = [
     'boolean',
     'geo-point',

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

@@ -23,6 +23,8 @@ export interface DefaultDraggableType {
   hideTopN?: boolean;
   id: string;
   isDraggable?: boolean;
+  fieldType?: string;
+  isAggregatable?: boolean;
   field: string;
   value?: string | number | null;
   name?: string | null;
@@ -102,6 +104,8 @@ export const DefaultDraggable = React.memo<DefaultDraggableType>(
     id,
     isDraggable = true,
     field,
+    fieldType = '',
+    isAggregatable = false,
     value,
     name,
     children,
@@ -151,6 +155,8 @@ export const DefaultDraggable = React.memo<DefaultDraggableType>(
     return (
       <DraggableWrapper
         dataProvider={dataProviderProp}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
         hideTopN={hideTopN}
         isDraggable={isDraggable}
         render={renderCallback}
@@ -198,6 +204,8 @@ const DraggableBadgeComponent: React.FC<BadgeDraggableType> = ({
   value,
   iconType,
   isDraggable,
+  isAggregatable,
+  fieldType,
   name,
   color = 'hollow',
   children,
@@ -208,6 +216,8 @@ const DraggableBadgeComponent: React.FC<BadgeDraggableType> = ({
     <DefaultDraggable
       id={`draggable-badge-default-draggable-${contextId}-${eventId}-${field}-${value}`}
       isDraggable={isDraggable}
+      isAggregatable={isAggregatable}
+      fieldType={fieldType}
       field={field}
       name={name}
       value={value}

x-pack/plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx

@@ -60,7 +60,6 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
   flex: 1;
   overflow: auto;
   overflow-x: hidden;
-
   &::-webkit-scrollbar {
     height: ${({ theme }) => theme.eui.euiScrollBar};
     width: ${({ theme }) => theme.eui.euiScrollBar};

x-pack/plugins/security_solution/public/common/components/event_details/table/action_cell.tsx

@@ -51,6 +51,8 @@ export const ActionCell: React.FC<Props> = React.memo(
       values,
     });
 
+    const { aggregatable, type } = fieldFromBrowserField || { aggregatable: false, type: '' };
+
     const [showTopN, setShowTopN] = useState<boolean>(false);
     const { timelineId: timelineIdFind } = useContext(TimelineContext);
     const [hoverActionsOwnFocus] = useState<boolean>(false);
@@ -74,6 +76,8 @@ export const ActionCell: React.FC<Props> = React.memo(
         dataProvider={actionCellConfig?.dataProvider}
         enableOverflowButton={true}
         field={data.field}
+        isAggregatable={aggregatable}
+        fieldType={type}
         hideAddToTimeline={hideAddToTimeline}
         isObjectArray={data.isObjectArray}
         onFilterAdded={onFilterAdded}

x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx

@@ -72,6 +72,7 @@ export const FieldValueCell = React.memo(
                     fieldFormat={data.format}
                     fieldName={data.field}
                     fieldType={data.type}
+                    isAggregatable={fieldFromBrowserField.aggregatable}
                     isDraggable={isDraggable}
                     isObjectArray={data.isObjectArray}
                     value={value}

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

@@ -96,6 +96,8 @@ interface Props {
   draggableId?: DraggableId;
   enableOverflowButton?: boolean;
   field: string;
+  fieldType: string;
+  isAggregatable: boolean;
   goGetTimelineId?: (args: boolean) => void;
   hideAddToTimeline?: boolean;
   hideTopN?: boolean;
@@ -136,6 +138,8 @@ export const HoverActions: React.FC<Props> = React.memo(
     enableOverflowButton = false,
     applyWidthAndPadding = true,
     field,
+    fieldType,
+    isAggregatable,
     goGetTimelineId,
     isObjectArray,
     hideAddToTimeline = false,
@@ -219,6 +223,8 @@ export const HoverActions: React.FC<Props> = React.memo(
       draggableId,
       enableOverflowButton: enableOverflowButton && !isCaseView,
       field,
+      fieldType,
+      isAggregatable,
       handleHoverActionClicked,
       hideAddToTimeline,
       hideTopN,