diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts
index 0503a9c327467..f673fca290a29 100644
--- a/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts
+++ b/x-pack/plugins/security_solution/common/search_strategy/timeline/events/all/index.ts
@@ -6,7 +6,7 @@
 
 import { IEsSearchResponse } from '../../../../../../../../src/plugins/data/common';
 import { Ecs } from '../../../../ecs';
-import { CursorType, Inspect, Maybe } from '../../../common';
+import { CursorType, Inspect, Maybe, PageInfoPaginated } from '../../../common';
 import { TimelineRequestOptionsPaginated } from '../..';
 
 export interface TimelineEdges {
@@ -29,10 +29,7 @@ export interface TimelineNonEcsData {
 export interface TimelineEventsAllStrategyResponse extends IEsSearchResponse {
   edges: TimelineEdges[];
   totalCount: number;
-  pageInfo: {
-    activePage: number;
-    totalPages: number;
-  };
+  pageInfo: PageInfoPaginated;
   inspect?: Maybe<Inspect>;
 }
 
diff --git a/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts b/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts
index 773ee60855886..6b96783adc25a 100644
--- a/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts
+++ b/x-pack/plugins/security_solution/common/search_strategy/timeline/index.ts
@@ -14,7 +14,13 @@ import {
   TimelineEventsLastEventTimeRequestOptions,
   TimelineEventsLastEventTimeStrategyResponse,
 } from './events';
-import { DocValueFields, TimerangeInput, SortField } from '../common';
+import {
+  DocValueFields,
+  PaginationInput,
+  PaginationInputPaginated,
+  TimerangeInput,
+  SortField,
+} from '../common';
 
 export * from './events';
 
@@ -29,19 +35,13 @@ export interface TimelineRequestBasicOptions extends IEsSearchRequest {
 }
 
 export interface TimelineRequestOptions<Field = string> extends TimelineRequestBasicOptions {
-  pagination: {
-    activePage: number;
-    querySize: number;
-  };
+  pagination: PaginationInput;
   sort: SortField<Field>;
 }
 
 export interface TimelineRequestOptionsPaginated<Field = string>
   extends TimelineRequestBasicOptions {
-  pagination: {
-    activePage: number;
-    querySize: number;
-  };
+  pagination: PaginationInputPaginated;
   sort: SortField<Field>;
 }
 
diff --git a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx
index 8a294ec1b71fd..9f273b4f293ba 100644
--- a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { Filter } from '../../../../../../../src/plugins/data/public';
 import { WithHoverActions } from '../with_hover_actions';
@@ -47,34 +47,36 @@ export const AddFilterToGlobalSearchBar = React.memo<OwnProps>(
       }
     }, [filterManager, filter, onFilterAdded]);
 
-    return (
-      <WithHoverActions
-        hoverContent={
-          <div data-test-subj="hover-actions-container">
-            <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_FOR_VALUE}
-                color="text"
-                data-test-subj="add-to-filter"
-                iconType="magnifyWithPlus"
-                onClick={filterForValue}
-              />
-            </EuiToolTip>
+    const HoverContent = useMemo(
+      () => (
+        <div data-test-subj="hover-actions-container">
+          <EuiToolTip content={i18n.FILTER_FOR_VALUE}>
+            <EuiButtonIcon
+              aria-label={i18n.FILTER_FOR_VALUE}
+              color="text"
+              data-test-subj="add-to-filter"
+              iconType="magnifyWithPlus"
+              onClick={filterForValue}
+            />
+          </EuiToolTip>
 
-            <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
-              <EuiButtonIcon
-                aria-label={i18n.FILTER_OUT_VALUE}
-                color="text"
-                data-test-subj="filter-out-value"
-                iconType="magnifyWithMinus"
-                onClick={filterOutValue}
-              />
-            </EuiToolTip>
-          </div>
-        }
-        render={() => children}
-      />
+          <EuiToolTip content={i18n.FILTER_OUT_VALUE}>
+            <EuiButtonIcon
+              aria-label={i18n.FILTER_OUT_VALUE}
+              color="text"
+              data-test-subj="filter-out-value"
+              iconType="magnifyWithMinus"
+              onClick={filterOutValue}
+            />
+          </EuiToolTip>
+        </div>
+      ),
+      [filterForValue, filterOutValue]
     );
+
+    const render = useCallback(() => children, [children]);
+
+    return <WithHoverActions hoverContent={HoverContent} render={render} />;
   }
 );
 
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
index 74efe2d34fcca..4efb662a4aab6 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -9,6 +9,7 @@ import React, { useCallback } from 'react';
 import { DropResult, DragDropContext } from 'react-beautiful-dnd';
 import { connect, ConnectedProps } from 'react-redux';
 import { Dispatch } from 'redux';
+import deepEqual from 'fast-deep-equal';
 
 import { BeforeCapture } from './drag_drop_context';
 import { BrowserFields } from '../../containers/source';
@@ -134,13 +135,11 @@ export const DragDropContextWrapperComponent = React.memo<Props & PropsFromRedux
       </DragDropContext>
     );
   },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.children === nextProps.children &&
-      prevProps.dataProviders === nextProps.dataProviders &&
-      prevProps.activeTimelineDataProviders === nextProps.activeTimelineDataProviders
-    ); // prevent re-renders when data providers are added or removed, but all other props are the same
-  }
+  // prevent re-renders when data providers are added or removed, but all other props are the same
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+    prevProps.activeTimelineDataProviders === nextProps.activeTimelineDataProviders
 );
 
 DragDropContextWrapperComponent.displayName = 'DragDropContextWrapperComponent';
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
index 64f6699d21dac..bd22811612a67 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx
@@ -196,76 +196,93 @@ const DraggableWrapperComponent: React.FC<Props> = ({
     ]
   );
 
-  const renderContent = useCallback(
+  const RenderClone = useCallback(
+    (provided, snapshot) => (
+      <ConditionalPortal registerProvider={registerProvider}>
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={getStyle(provided.draggableProps.style, snapshot)}
+          ref={provided.innerRef}
+          data-test-subj="providerContainer"
+        >
+          <ProviderContentWrapper
+            data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
+          >
+            {render(dataProvider, provided, snapshot)}
+          </ProviderContentWrapper>
+        </div>
+      </ConditionalPortal>
+    ),
+    [dataProvider, registerProvider, render]
+  );
+
+  const DraggableContent = useCallback(
+    (provided, snapshot) => (
+      <ProviderContainer
+        {...provided.draggableProps}
+        {...provided.dragHandleProps}
+        ref={(e: HTMLDivElement) => {
+          provided.innerRef(e);
+          draggableRef.current = e;
+        }}
+        data-test-subj="providerContainer"
+        isDragging={snapshot.isDragging}
+        registerProvider={registerProvider}
+      >
+        {truncate && !snapshot.isDragging ? (
+          <TruncatableText data-test-subj="draggable-truncatable-content">
+            {render(dataProvider, provided, snapshot)}
+          </TruncatableText>
+        ) : (
+          <ProviderContentWrapper
+            data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
+          >
+            {render(dataProvider, provided, snapshot)}
+          </ProviderContentWrapper>
+        )}
+      </ProviderContainer>
+    ),
+    [dataProvider, registerProvider, render, truncate]
+  );
+
+  const DroppableContent = useCallback(
+    (droppableProvided) => (
+      <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+        <Draggable
+          draggableId={getDraggableId(dataProvider.id)}
+          index={0}
+          key={getDraggableId(dataProvider.id)}
+          isDragDisabled={isDisabled}
+        >
+          {DraggableContent}
+        </Draggable>
+        {droppableProvided.placeholder}
+      </div>
+    ),
+    [DraggableContent, dataProvider.id, isDisabled]
+  );
+
+  const content = useMemo(
     () => (
       <Wrapper data-test-subj="draggableWrapperDiv" disabled={isDisabled}>
         <DragDropErrorBoundary>
           <Droppable
             isDropDisabled={true}
             droppableId={getDroppableId(dataProvider.id)}
-            renderClone={(provided, snapshot) => (
-              <ConditionalPortal registerProvider={registerProvider}>
-                <div
-                  {...provided.draggableProps}
-                  {...provided.dragHandleProps}
-                  style={getStyle(provided.draggableProps.style, snapshot)}
-                  ref={provided.innerRef}
-                  data-test-subj="providerContainer"
-                >
-                  <ProviderContentWrapper
-                    data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
-                  >
-                    {render(dataProvider, provided, snapshot)}
-                  </ProviderContentWrapper>
-                </div>
-              </ConditionalPortal>
-            )}
+            renderClone={RenderClone}
           >
-            {(droppableProvided) => (
-              <div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
-                <Draggable
-                  draggableId={getDraggableId(dataProvider.id)}
-                  index={0}
-                  key={getDraggableId(dataProvider.id)}
-                  isDragDisabled={isDisabled}
-                >
-                  {(provided, snapshot) => (
-                    <ProviderContainer
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      ref={(e: HTMLDivElement) => {
-                        provided.innerRef(e);
-                        draggableRef.current = e;
-                      }}
-                      data-test-subj="providerContainer"
-                      isDragging={snapshot.isDragging}
-                      registerProvider={registerProvider}
-                    >
-                      {truncate && !snapshot.isDragging ? (
-                        <TruncatableText data-test-subj="draggable-truncatable-content">
-                          {render(dataProvider, provided, snapshot)}
-                        </TruncatableText>
-                      ) : (
-                        <ProviderContentWrapper
-                          data-test-subj={`draggable-content-${dataProvider.queryMatch.field}`}
-                        >
-                          {render(dataProvider, provided, snapshot)}
-                        </ProviderContentWrapper>
-                      )}
-                    </ProviderContainer>
-                  )}
-                </Draggable>
-                {droppableProvided.placeholder}
-              </div>
-            )}
+            {DroppableContent}
           </Droppable>
         </DragDropErrorBoundary>
       </Wrapper>
     ),
-    [dataProvider, registerProvider, render, isDisabled, truncate]
+    [DroppableContent, RenderClone, dataProvider.id, isDisabled]
   );
 
-  if (isDisabled) return <>{renderContent()}</>;
+  const renderContent = useCallback(() => content, [content]);
+
+  if (isDisabled) return <>{content}</>;
 
   return (
     <WithHoverActions
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx
index 30c54a8b44a75..6818b03d450a7 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx
@@ -5,7 +5,7 @@
  */
 
 import { rgba } from 'polished';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
@@ -96,15 +96,9 @@ export const DroppableWrapper = React.memo<Props>(
     type,
     render = null,
     renderClone,
-  }) => (
-    <Droppable
-      isDropDisabled={isDropDisabled}
-      droppableId={droppableId}
-      direction={'horizontal'}
-      type={type}
-      renderClone={renderClone}
-    >
-      {(provided, snapshot) => (
+  }) => {
+    const DroppableContent = useCallback(
+      (provided, snapshot) => (
         <ReactDndDropTarget
           height={height}
           ref={provided.innerRef}
@@ -114,8 +108,21 @@ export const DroppableWrapper = React.memo<Props>(
           {render == null ? children : render({ isDraggingOver: snapshot.isDraggingOver })}
           {provided.placeholder}
         </ReactDndDropTarget>
-      )}
-    </Droppable>
-  )
+      ),
+      [children, height, render]
+    );
+
+    return (
+      <Droppable
+        isDropDisabled={isDropDisabled}
+        droppableId={droppableId}
+        direction={'horizontal'}
+        type={type}
+        renderClone={renderClone}
+      >
+        {DroppableContent}
+      </Droppable>
+    );
+  }
 );
 DroppableWrapper.displayName = 'DroppableWrapper';
diff --git a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
index 4dc3c6fcbe440..d37de2cd3ec3d 100644
--- a/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/draggables/index.tsx
@@ -135,7 +135,7 @@ DefaultDraggable.displayName = 'DefaultDraggable';
 
 export const Badge = styled(EuiBadge)`
   vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+`;
 
 Badge.displayName = 'Badge';
 
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
index 2c8c8136a4733..7859f5584b0e5 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
-import { getOr, isEmpty, union } from 'lodash/fp';
+import { isEmpty, union } from 'lodash/fp';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
@@ -239,6 +239,19 @@ const EventsViewerComponent: React.FC<Props> = ({
     events,
   ]);
 
+  const HeaderSectionContent = useMemo(
+    () =>
+      headerFilterGroup && (
+        <HeaderFilterGroupWrapper
+          data-test-subj="header-filter-group-wrapper"
+          show={!resolverIsShowing(graphEventId)}
+        >
+          {headerFilterGroup}
+        </HeaderFilterGroupWrapper>
+      ),
+    [graphEventId, headerFilterGroup]
+  );
+
   useEffect(() => {
     setIsQueryLoading(loading);
   }, [loading]);
@@ -257,14 +270,7 @@ const EventsViewerComponent: React.FC<Props> = ({
               subtitle={utilityBar ? undefined : subtitle}
               title={inspect ? justTitle : titleWithExitFullScreen}
             >
-              {headerFilterGroup && (
-                <HeaderFilterGroupWrapper
-                  data-test-subj="header-filter-group-wrapper"
-                  show={!resolverIsShowing(graphEventId)}
-                >
-                  {headerFilterGroup}
-                </HeaderFilterGroupWrapper>
-              )}
+              {HeaderSectionContent}
             </HeaderSection>
             {utilityBar && !resolverIsShowing(graphEventId) && (
               <UtilityBar>{utilityBar?.(refetch, totalCountMinusDeleted)}</UtilityBar>
@@ -293,7 +299,7 @@ const EventsViewerComponent: React.FC<Props> = ({
                 /** Hide the footer if Resolver is showing. */
                 !graphEventId && (
                   <Footer
-                    activePage={getOr(0, 'activePage', pageInfo)}
+                    activePage={pageInfo.activePage}
                     data-test-subj="events-viewer-footer"
                     updatedAt={updatedAt}
                     height={footerHeight}
@@ -306,7 +312,7 @@ const EventsViewerComponent: React.FC<Props> = ({
                     onChangeItemsPerPage={onChangeItemsPerPage}
                     onChangePage={loadPage}
                     serverSideEventCount={totalCountMinusDeleted}
-                    totalPages={getOr(0, 'totalPages', pageInfo)}
+                    totalCount={pageInfo.fakeTotalCount}
                   />
                 )
               }
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts b/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts
index f6fb01be4371f..d2bd940dcc266 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/mock.ts
@@ -8,7 +8,7 @@ export const mockEventViewerResponse = {
   totalCount: 12,
   pageInfo: {
     activePage: 0,
-    totalPages: 10,
+    fakeTotalCount: 100,
   },
   events: [],
 };
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.tsx b/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.tsx
index 9024aec17400c..1c5b13acb0c22 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.tsx
@@ -4,9 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DraggableWrapper, DragEffects } from '../drag_and_drop/draggable_wrapper';
-import { IS_OPERATOR } from '../../../timelines/components/timeline/data_providers/data_provider';
+import {
+  IS_OPERATOR,
+  QueryOperator,
+} from '../../../timelines/components/timeline/data_providers/data_provider';
 import { Provider } from '../../../timelines/components/timeline/data_providers/provider';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 
@@ -16,39 +19,43 @@ interface Props {
   entityValue: string;
 }
 
-export const EntityDraggableComponent = ({
+export const EntityDraggableComponent: React.FC<Props> = ({
   idPrefix,
   entityName,
   entityValue,
-}: Props): JSX.Element => {
+}) => {
   const id = escapeDataProviderId(`entity-draggable-${idPrefix}-${entityName}-${entityValue}`);
-  return (
-    <DraggableWrapper
-      key={id}
-      dataProvider={{
-        and: [],
-        enabled: true,
-        id,
-        name: entityValue,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: entityName,
-          value: entityValue,
-          operator: IS_OPERATOR,
-        },
-      }}
-      render={(dataProvider, _, snapshot) =>
-        snapshot.isDragging ? (
-          <DragEffects>
-            <Provider dataProvider={dataProvider} />
-          </DragEffects>
-        ) : (
-          <>{`${entityName}: "${entityValue}"`}</>
-        )
-      }
-    />
+
+  const dataProviderProp = useMemo(
+    () => ({
+      and: [],
+      enabled: true,
+      id,
+      name: entityValue,
+      excluded: false,
+      kqlQuery: '',
+      queryMatch: {
+        field: entityName,
+        value: entityValue,
+        operator: IS_OPERATOR as QueryOperator,
+      },
+    }),
+    [entityName, entityValue, id]
+  );
+
+  const render = useCallback(
+    (dataProvider, _, snapshot) =>
+      snapshot.isDragging ? (
+        <DragEffects>
+          <Provider dataProvider={dataProvider} />
+        </DragEffects>
+      ) : (
+        <>{`${entityName}: "${entityValue}"`}</>
+      ),
+    [entityName, entityValue]
   );
+
+  return <DraggableWrapper key={id} dataProvider={dataProviderProp} render={render} />;
 };
 
 EntityDraggableComponent.displayName = 'EntityDraggableComponent';
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/draggable_score.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/draggable_score.tsx
index c849476f0c3db..668a374e57f0d 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/draggable_score.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/draggable_score.tsx
@@ -4,10 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DraggableWrapper, DragEffects } from '../../drag_and_drop/draggable_wrapper';
 import { Anomaly } from '../types';
-import { IS_OPERATOR } from '../../../../timelines/components/timeline/data_providers/data_provider';
+import {
+  IS_OPERATOR,
+  QueryOperator,
+} from '../../../../timelines/components/timeline/data_providers/data_provider';
 import { Provider } from '../../../../timelines/components/timeline/data_providers/provider';
 import { Spacer } from '../../page';
 import { getScoreString } from './score_health';
@@ -23,39 +26,48 @@ export const DraggableScoreComponent = ({
 }): JSX.Element => {
   const scoreString = getScoreString(score.severity);
 
+  const dataProviderProp = useMemo(
+    () => ({
+      and: [],
+      enabled: true,
+      id,
+      name: score.entityName,
+      excluded: false,
+      kqlQuery: '',
+      queryMatch: {
+        field: score.entityName,
+        value: score.entityValue,
+        operator: IS_OPERATOR as QueryOperator,
+      },
+    }),
+    [id, score.entityName, score.entityValue]
+  );
+
+  const render = useCallback(
+    (dataProvider, _, snapshot) =>
+      snapshot.isDragging ? (
+        <DragEffects>
+          <Provider dataProvider={dataProvider} />
+        </DragEffects>
+      ) : (
+        <>
+          {index !== 0 && (
+            <>
+              {','}
+              <Spacer />
+            </>
+          )}
+          {scoreString}
+        </>
+      ),
+    [index, scoreString]
+  );
+
   return (
     <DraggableWrapper
       key={`draggable-score-draggable-wrapper-${id}`}
-      dataProvider={{
-        and: [],
-        enabled: true,
-        id,
-        name: score.entityName,
-        excluded: false,
-        kqlQuery: '',
-        queryMatch: {
-          field: score.entityName,
-          value: score.entityValue,
-          operator: IS_OPERATOR,
-        },
-      }}
-      render={(dataProvider, _, snapshot) =>
-        snapshot.isDragging ? (
-          <DragEffects>
-            <Provider dataProvider={dataProvider} />
-          </DragEffects>
-        ) : (
-          <>
-            {index !== 0 && (
-              <>
-                {','}
-                <Spacer />
-              </>
-            )}
-            {scoreString}
-          </>
-        )
-      }
+      dataProvider={dataProviderProp}
+      render={render}
     />
   );
 };
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/recent_timelines.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/recent_timelines.tsx
index ddad72081645b..598849c917d33 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/recent_timelines.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/recent_timelines.tsx
@@ -12,7 +12,7 @@ import {
   EuiToolTip,
   EuiButtonIcon,
 } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { RecentTimelineHeader } from './header';
 import {
@@ -25,76 +25,110 @@ import { TimelineType } from '../../../../common/types/timeline';
 import { RecentTimelineCounts } from './counts';
 import * as i18n from './translations';
 
-export const RecentTimelines = React.memo<{
-  noTimelinesMessage: string;
+interface RecentTimelinesItemProps {
+  timeline: OpenTimelineResult;
   onOpenTimeline: OnOpenTimeline;
-  timelines: OpenTimelineResult[];
-}>(({ noTimelinesMessage, onOpenTimeline, timelines }) => {
-  if (timelines.length === 0) {
+  isLastItem: boolean;
+}
+
+const RecentTimelinesItem = React.memo<RecentTimelinesItemProps>(
+  ({ timeline, onOpenTimeline, isLastItem }) => {
+    const handleClick = useCallback(
+      () =>
+        onOpenTimeline({
+          duplicate: true,
+          timelineId: `${timeline.savedObjectId}`,
+        }),
+      [onOpenTimeline, timeline.savedObjectId]
+    );
+
+    const render = useCallback(
+      (showHoverContent) => (
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <RecentTimelineHeader onOpenTimeline={onOpenTimeline} timeline={timeline} />
+            <RecentTimelineCounts timeline={timeline} />
+            {timeline.description && timeline.description.length && (
+              <EuiText color="subdued" size="xs">
+                {timeline.description}
+              </EuiText>
+            )}
+          </EuiFlexItem>
+
+          {showHoverContent && (
+            <EuiFlexItem grow={false}>
+              <EuiToolTip
+                content={
+                  timeline.timelineType === TimelineType.default
+                    ? i18n.OPEN_AS_DUPLICATE
+                    : i18n.OPEN_AS_DUPLICATE_TEMPLATE
+                }
+              >
+                <EuiButtonIcon
+                  aria-label={
+                    timeline.timelineType === TimelineType.default
+                      ? i18n.OPEN_AS_DUPLICATE
+                      : i18n.OPEN_AS_DUPLICATE_TEMPLATE
+                  }
+                  data-test-subj="open-duplicate"
+                  isDisabled={timeline.savedObjectId == null}
+                  iconSize="s"
+                  iconType="copy"
+                  onClick={handleClick}
+                  size="s"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      ),
+      [handleClick, onOpenTimeline, timeline]
+    );
+
     return (
       <>
-        <EuiText color="subdued" size="s">
-          {noTimelinesMessage}
-        </EuiText>
+        <WithHoverActions render={render} />
+        <>{!isLastItem && <EuiSpacer size="l" />}</>
       </>
     );
   }
+);
 
-  return (
-    <>
-      {timelines.map((t, i) => (
-        <React.Fragment key={`${t.savedObjectId}-${i}`}>
-          <WithHoverActions
-            render={(showHoverContent) => (
-              <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
-                <EuiFlexItem grow={false}>
-                  <RecentTimelineHeader onOpenTimeline={onOpenTimeline} timeline={t} />
-                  <RecentTimelineCounts timeline={t} />
-                  {t.description && t.description.length && (
-                    <EuiText color="subdued" size="xs">
-                      {t.description}
-                    </EuiText>
-                  )}
-                </EuiFlexItem>
+RecentTimelinesItem.displayName = 'RecentTimelinesItem';
 
-                {showHoverContent && (
-                  <EuiFlexItem grow={false}>
-                    <EuiToolTip
-                      content={
-                        t.timelineType === TimelineType.default
-                          ? i18n.OPEN_AS_DUPLICATE
-                          : i18n.OPEN_AS_DUPLICATE_TEMPLATE
-                      }
-                    >
-                      <EuiButtonIcon
-                        aria-label={
-                          t.timelineType === TimelineType.default
-                            ? i18n.OPEN_AS_DUPLICATE
-                            : i18n.OPEN_AS_DUPLICATE_TEMPLATE
-                        }
-                        data-test-subj="open-duplicate"
-                        isDisabled={t.savedObjectId == null}
-                        iconSize="s"
-                        iconType="copy"
-                        onClick={() =>
-                          onOpenTimeline({
-                            duplicate: true,
-                            timelineId: `${t.savedObjectId}`,
-                          })
-                        }
-                        size="s"
-                      />
-                    </EuiToolTip>
-                  </EuiFlexItem>
-                )}
-              </EuiFlexGroup>
-            )}
+interface RecentTimelinesProps {
+  noTimelinesMessage: string;
+  onOpenTimeline: OnOpenTimeline;
+  timelines: OpenTimelineResult[];
+}
+
+export const RecentTimelines = React.memo<RecentTimelinesProps>(
+  ({ noTimelinesMessage, onOpenTimeline, timelines }) => {
+    const content = useMemo(
+      () =>
+        timelines.map((timeline, index) => (
+          <RecentTimelinesItem
+            key={`${timeline.savedObjectId}-${timeline.title}`}
+            timeline={timeline}
+            onOpenTimeline={onOpenTimeline}
+            isLastItem={index === timelines.length - 1}
           />
-          <>{i !== timelines.length - 1 && <EuiSpacer size="l" />}</>
-        </React.Fragment>
-      ))}
-    </>
-  );
-});
+        )),
+      [onOpenTimeline, timelines]
+    );
+
+    if (timelines.length === 0) {
+      return (
+        <>
+          <EuiText color="subdued" size="s">
+            {noTimelinesMessage}
+          </EuiText>
+        </>
+      );
+    }
+
+    return <>{content}</>;
+  }
+);
 
 RecentTimelines.displayName = 'RecentTimelines';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
index 954ae0b6a0d40..72fa20c9f152d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/button/index.tsx
@@ -4,11 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { noop } from 'lodash/fp';
 import { EuiButton, EuiNotificationBadge, EuiPanel } from '@elastic/eui';
 import { rgba } from 'polished';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import deepEqual from 'fast-deep-equal';
 
 import { IS_DRAGGING_CLASS_NAME } from '../../../../common/components/drag_and_drop/helpers';
 import { DataProvider } from '../../timeline/data_providers/data_provider';
@@ -88,6 +88,18 @@ export const FlyoutButton = React.memo<FlyoutButtonProps>(
     const badgeCount = useMemo(() => getBadgeCount(dataProviders), [dataProviders]);
     const { browserFields } = useSourcererScope(SourcererScopeName.timeline);
 
+    const badgeStyles: React.CSSProperties = useMemo(
+      () => ({
+        left: '-9px',
+        position: 'relative',
+        top: '-6px',
+        transform: 'rotate(90deg)',
+        visibility: dataProviders.length !== 0 ? 'inherit' : 'hidden',
+        zIndex: 10,
+      }),
+      [dataProviders.length]
+    );
+
     if (!show) {
       return null;
     }
@@ -108,18 +120,7 @@ export const FlyoutButton = React.memo<FlyoutButtonProps>(
           >
             {i18n.FLYOUT_BUTTON}
           </EuiButton>
-          <EuiNotificationBadge
-            color="accent"
-            data-test-subj="badge"
-            style={{
-              left: '-9px',
-              position: 'relative',
-              top: '-6px',
-              transform: 'rotate(90deg)',
-              visibility: dataProviders.length !== 0 ? 'inherit' : 'hidden',
-              zIndex: 10,
-            }}
-          >
+          <EuiNotificationBadge color="accent" data-test-subj="badge" style={badgeStyles}>
             {badgeCount}
           </EuiNotificationBadge>
         </BadgeButtonContainer>
@@ -128,11 +129,6 @@ export const FlyoutButton = React.memo<FlyoutButtonProps>(
             browserFields={browserFields}
             timelineId={timelineId}
             dataProviders={dataProviders}
-            onDataProviderEdited={noop}
-            onDataProviderRemoved={noop}
-            onToggleDataProviderEnabled={noop}
-            onToggleDataProviderExcluded={noop}
-            onToggleDataProviderType={noop}
           />
         </DataProvidersPanel>
       </Container>
@@ -140,7 +136,7 @@ export const FlyoutButton = React.memo<FlyoutButtonProps>(
   },
   (prevProps, nextProps) =>
     prevProps.show === nextProps.show &&
-    prevProps.dataProviders === nextProps.dataProviders &&
+    deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
     prevProps.timelineId === nextProps.timelineId
 );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx
index e4148b5581435..091bb41bc2080 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/formatted_ip/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { isArray, isEmpty, isString, uniq } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import {
   DragEffects,
@@ -71,16 +71,25 @@ const NonDecoratedIpComponent: React.FC<{
   fieldName: string;
   truncate?: boolean;
   value: string | object | null | undefined;
-}> = ({ contextId, eventId, fieldName, truncate, value }) => (
-  <DraggableWrapper
-    dataProvider={getDataProvider({ contextId, eventId, fieldName, address: value })}
-    key={`non-decorated-ip-draggable-wrapper-${getUniqueId({
-      contextId,
-      eventId,
-      fieldName,
-      address: value,
-    })}`}
-    render={(dataProvider, _, snapshot) =>
+}> = ({ contextId, eventId, fieldName, truncate, value }) => {
+  const key = useMemo(
+    () =>
+      `non-decorated-ip-draggable-wrapper-${getUniqueId({
+        contextId,
+        eventId,
+        fieldName,
+        address: value,
+      })}`,
+    [contextId, eventId, fieldName, value]
+  );
+
+  const dataProviderProp = useMemo(
+    () => getDataProvider({ contextId, eventId, fieldName, address: value }),
+    [contextId, eventId, fieldName, value]
+  );
+
+  const render = useCallback(
+    (dataProvider, _, snapshot) =>
       snapshot.isDragging ? (
         <DragEffects>
           <Provider dataProvider={dataProvider} />
@@ -89,47 +98,107 @@ const NonDecoratedIpComponent: React.FC<{
         getOrEmptyTagFromValue(value)
       ) : (
         getOrEmptyTagFromValue(tryStringify(value))
-      )
-    }
-    truncate={truncate}
-  />
-);
+      ),
+    [value]
+  );
+
+  return (
+    <DraggableWrapper
+      dataProvider={dataProviderProp}
+      key={key}
+      render={render}
+      truncate={truncate}
+    />
+  );
+};
 
 const NonDecoratedIp = React.memo(NonDecoratedIpComponent);
 
-const AddressLinksComponent: React.FC<{
+interface AddressLinksItemProps extends Omit<AddressLinksProps, 'addresses'> {
+  address: string;
+}
+
+const AddressLinksItemComponent: React.FC<AddressLinksItemProps> = ({
+  address,
+  contextId,
+  eventId,
+  fieldName,
+  truncate,
+}) => {
+  const key = useMemo(
+    () =>
+      `address-links-draggable-wrapper-${getUniqueId({
+        contextId,
+        eventId,
+        fieldName,
+        address,
+      })}`,
+    [address, contextId, eventId, fieldName]
+  );
+
+  const dataProviderProp = useMemo(
+    () => getDataProvider({ contextId, eventId, fieldName, address }),
+    [address, contextId, eventId, fieldName]
+  );
+
+  const render = useCallback(
+    (_props, _provided, snapshot) =>
+      snapshot.isDragging ? (
+        <DragEffects>
+          <Provider dataProvider={dataProviderProp} />
+        </DragEffects>
+      ) : (
+        <NetworkDetailsLink data-test-subj="network-details" ip={address} />
+      ),
+    [address, dataProviderProp]
+  );
+
+  return (
+    <DraggableWrapper
+      dataProvider={dataProviderProp}
+      key={key}
+      render={render}
+      truncate={truncate}
+    />
+  );
+};
+
+const AddressLinksItem = React.memo(AddressLinksItemComponent);
+
+interface AddressLinksProps {
   addresses: string[];
   contextId: string;
   eventId: string;
   fieldName: string;
   truncate?: boolean;
-}> = ({ addresses, contextId, eventId, fieldName, truncate }) => (
-  <>
-    {uniq(addresses).map((address) => (
-      <DraggableWrapper
-        dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
-        key={`address-links-draggable-wrapper-${getUniqueId({
-          contextId,
-          eventId,
-          fieldName,
-          address,
-        })}`}
-        render={(_props, _provided, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider
-                dataProvider={getDataProvider({ contextId, eventId, fieldName, address })}
-              />
-            </DragEffects>
-          ) : (
-            <NetworkDetailsLink data-test-subj="network-details" ip={address} />
-          )
-        }
-        truncate={truncate}
-      />
-    ))}
-  </>
-);
+}
+
+const AddressLinksComponent: React.FC<AddressLinksProps> = ({
+  addresses,
+  contextId,
+  eventId,
+  fieldName,
+  truncate,
+}) => {
+  const uniqAddresses = useMemo(() => uniq(addresses), [addresses]);
+
+  const content = useMemo(
+    () =>
+      uniqAddresses.map((address) => (
+        <AddressLinksItem
+          key={address}
+          address={address}
+          contextId={contextId}
+          eventId={eventId}
+          fieldName={fieldName}
+          truncate={truncate}
+        />
+      )),
+    [contextId, eventId, fieldName, truncate, uniqAddresses]
+  );
+
+  return <>{content}</>;
+};
 
 const AddressLinks = React.memo(AddressLinksComponent);
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
index 18a648f2abfaa..153128fb41826 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/__snapshots__/timeline.test.tsx.snap
@@ -646,34 +646,7 @@ In other use cases the message field can be used to concatenate different values
               dataProviders={
                 Array [
                   Object {
-                    "and": Array [
-                      Object {
-                        "and": Array [],
-                        "enabled": true,
-                        "excluded": false,
-                        "id": "id-Provider 2",
-                        "kqlQuery": "",
-                        "name": "Provider 2",
-                        "queryMatch": Object {
-                          "field": "name",
-                          "operator": ":",
-                          "value": "Provider 2",
-                        },
-                      },
-                      Object {
-                        "and": Array [],
-                        "enabled": true,
-                        "excluded": false,
-                        "id": "id-Provider 3",
-                        "kqlQuery": "",
-                        "name": "Provider 3",
-                        "queryMatch": Object {
-                          "field": "name",
-                          "operator": ":",
-                          "value": "Provider 3",
-                        },
-                      },
-                    ],
+                    "and": Array [],
                     "enabled": true,
                     "excluded": false,
                     "id": "id-Provider 1",
@@ -921,11 +894,6 @@ In other use cases the message field can be used to concatenate different values
               loadingSourcerer={false}
               onChangeItemsPerPage={[MockFunction]}
               onClose={[MockFunction]}
-              onDataProviderEdited={[MockFunction]}
-              onDataProviderRemoved={[MockFunction]}
-              onToggleDataProviderEnabled={[MockFunction]}
-              onToggleDataProviderExcluded={[MockFunction]}
-              onToggleDataProviderType={[MockFunction]}
               show={true}
               showCallOutUnauthorizedMsg={false}
               sort={
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/auto_save_warning/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/auto_save_warning/index.tsx
index 210af7a571569..98faa84db851e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/auto_save_warning/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/auto_save_warning/index.tsx
@@ -11,84 +11,69 @@ import {
   EuiGlobalToastListToast as Toast,
 } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
-import React from 'react';
-import { connect, ConnectedProps } from 'react-redux';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 
-import { State } from '../../../../common/store';
-import { setTimelineRangeDatePicker as dispatchSetTimelineRangeDatePicker } from '../../../../common/store/inputs/actions';
+import { setTimelineRangeDatePicker } from '../../../../common/store/inputs/actions';
 import { timelineActions, timelineSelectors } from '../../../store/timeline';
-import { AutoSavedWarningMsg } from '../../../store/timeline/types';
 import { useStateToaster } from '../../../../common/components/toasters';
 import * as i18n from './translations';
 
-const AutoSaveWarningMsgComponent = React.memo<PropsFromRedux>(
-  ({
-    newTimelineModel,
-    setTimelineRangeDatePicker,
-    timelineId,
-    updateAutoSaveMsg,
-    updateTimeline,
-  }) => {
-    const dispatchToaster = useStateToaster()[1];
+const AutoSaveWarningMsgComponent = () => {
+  const dispatch = useDispatch();
+  const dispatchToaster = useStateToaster()[1];
+  const { timelineId, newTimelineModel } = useSelector(
+    timelineSelectors.autoSaveMsgSelector,
+    shallowEqual
+  );
+
+  const handleClick = useCallback(() => {
     if (timelineId != null && newTimelineModel != null) {
-      const toast: Toast = {
-        id: 'AutoSaveWarningMsg',
-        title: i18n.TITLE,
-        color: 'warning',
-        iconType: 'alert',
-        toastLifeTimeMs: 10000,
-        text: (
-          <>
-            <p>{i18n.DESCRIPTION}</p>
-            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  size="s"
-                  onClick={() => {
-                    updateTimeline({ id: timelineId, timeline: newTimelineModel });
-                    updateAutoSaveMsg({ timelineId: null, newTimelineModel: null });
-                    setTimelineRangeDatePicker({
-                      from: getOr(0, 'dateRange.start', newTimelineModel),
-                      to: getOr(0, 'dateRange.end', newTimelineModel),
-                    });
-                  }}
-                >
-                  {i18n.REFRESH_TIMELINE}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </>
-        ),
-      };
-      dispatchToaster({
-        type: 'addToaster',
-        toast,
-      });
+      dispatch(timelineActions.updateTimeline({ id: timelineId, timeline: newTimelineModel }));
+      dispatch(timelineActions.updateAutoSaveMsg({ timelineId: null, newTimelineModel: null }));
+      dispatch(
+        setTimelineRangeDatePicker({
+          from: getOr(0, 'dateRange.start', newTimelineModel),
+          to: getOr(0, 'dateRange.end', newTimelineModel),
+        })
+      );
     }
+  }, [dispatch, newTimelineModel, timelineId]);
 
-    return null;
-  }
-);
-
-AutoSaveWarningMsgComponent.displayName = 'AutoSaveWarningMsgComponent';
-
-const mapStateToProps = (state: State) => {
-  const autoSaveMessage: AutoSavedWarningMsg = timelineSelectors.autoSaveMsgSelector(state);
+  const TextComponent = useMemo(
+    () => (
+      <>
+        <p>{i18n.DESCRIPTION}</p>
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiButton size="s" onClick={handleClick}>
+              {i18n.REFRESH_TIMELINE}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    ),
+    [handleClick]
+  );
 
-  return {
-    timelineId: autoSaveMessage.timelineId,
-    newTimelineModel: autoSaveMessage.newTimelineModel,
-  };
-};
+  if (timelineId != null && newTimelineModel != null) {
+    const toast: Toast = {
+      id: 'AutoSaveWarningMsg',
+      title: i18n.TITLE,
+      color: 'warning',
+      iconType: 'alert',
+      toastLifeTimeMs: 10000,
+      text: TextComponent,
+    };
+    dispatchToaster({
+      type: 'addToaster',
+      toast,
+    });
+  }
 
-const mapDispatchToProps = {
-  setTimelineRangeDatePicker: dispatchSetTimelineRangeDatePicker,
-  updateAutoSaveMsg: timelineActions.updateAutoSaveMsg,
-  updateTimeline: timelineActions.updateTimeline,
+  return null;
 };
 
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
+AutoSaveWarningMsgComponent.displayName = 'AutoSaveWarningMsgComponent';
 
-export const AutoSaveWarningMsg = connector(AutoSaveWarningMsgComponent);
+export const AutoSaveWarningMsg = React.memo(AutoSaveWarningMsgComponent);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/actions/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/actions/index.tsx
index 3352639fa95f8..c4c4e0e0c7065 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/actions/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/actions/index.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiButtonIcon } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { ColumnHeaderOptions } from '../../../../../../timelines/store/timeline/model';
 import { OnColumnRemoved } from '../../../events';
@@ -26,20 +26,27 @@ interface Props {
 export const CloseButton = React.memo<{
   columnId: string;
   onColumnRemoved: OnColumnRemoved;
-}>(({ columnId, onColumnRemoved }) => (
-  <EuiButtonIcon
-    aria-label={i18n.REMOVE_COLUMN}
-    color="text"
-    data-test-subj="remove-column"
-    iconType="cross"
-    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+}>(({ columnId, onColumnRemoved }) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       // To avoid a re-sorting when you delete a column
       event.preventDefault();
       event.stopPropagation();
       onColumnRemoved(columnId);
-    }}
-  />
-));
+    },
+    [columnId, onColumnRemoved]
+  );
+
+  return (
+    <EuiButtonIcon
+      aria-label={i18n.REMOVE_COLUMN}
+      color="text"
+      data-test-subj="remove-column"
+      iconType="cross"
+      onClick={handleClick}
+    />
+  );
+});
 
 CloseButton.displayName = 'CloseButton';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/column_header.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/column_header.tsx
index 617b2935ee75c..6e21446944573 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/column_header.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/column_header.tsx
@@ -78,6 +78,29 @@ const ColumnHeaderComponent: React.FC<ColumneHeaderProps> = ({
     [timelineId, header.id]
   );
 
+  const DraggableContent = useCallback(
+    (dragProvided) => (
+      <EventsTh
+        data-test-subj="draggable-header"
+        {...dragProvided.draggableProps}
+        {...dragProvided.dragHandleProps}
+        ref={dragProvided.innerRef}
+      >
+        <EventsThContent>
+          <Header
+            timelineId={timelineId}
+            header={header}
+            onColumnRemoved={onColumnRemoved}
+            onColumnSorted={onColumnSorted}
+            onFilterChange={onFilterChange}
+            sort={sort}
+          />
+        </EventsThContent>
+      </EventsTh>
+    ),
+    [header, onColumnRemoved, onColumnSorted, onFilterChange, sort, timelineId]
+  );
+
   return (
     <Resizable
       enable={RESIZABLE_ENABLE}
@@ -94,25 +117,7 @@ const ColumnHeaderComponent: React.FC<ColumneHeaderProps> = ({
         index={draggableIndex}
         key={header.id}
       >
-        {(dragProvided) => (
-          <EventsTh
-            data-test-subj="draggable-header"
-            {...dragProvided.draggableProps}
-            {...dragProvided.dragHandleProps}
-            ref={dragProvided.innerRef}
-          >
-            <EventsThContent>
-              <Header
-                timelineId={timelineId}
-                header={header}
-                onColumnRemoved={onColumnRemoved}
-                onColumnSorted={onColumnSorted}
-                onFilterChange={onFilterChange}
-                sort={sort}
-              />
-            </EventsThContent>
-          </EventsTh>
-        )}
+        {DraggableContent}
       </Draggable>
     </Resizable>
   );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
index 6e802053ab29f..f4d4cf29ba38b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx
@@ -200,6 +200,22 @@ export const ColumnHeadersComponent = ({
     [globalFullScreen, timelineId, timelineFullScreen]
   );
 
+  const DroppableContent = useCallback(
+    (dropProvided, snapshot) => (
+      <>
+        <EventsThGroupData
+          data-test-subj="headers-group"
+          ref={dropProvided.innerRef}
+          isDragging={snapshot.isDraggingOver}
+          {...dropProvided.droppableProps}
+        >
+          {ColumnHeaderList}
+        </EventsThGroupData>
+      </>
+    ),
+    [ColumnHeaderList]
+  );
+
   return (
     <EventsThead data-test-subj="column-headers">
       <EventsTrHeader>
@@ -275,18 +291,7 @@ export const ColumnHeadersComponent = ({
           type={DRAG_TYPE_FIELD}
           renderClone={renderClone}
         >
-          {(dropProvided, snapshot) => (
-            <>
-              <EventsThGroupData
-                data-test-subj="headers-group"
-                ref={dropProvided.innerRef}
-                isDragging={snapshot.isDraggingOver}
-                {...dropProvided.droppableProps}
-              >
-                {ColumnHeaderList}
-              </EventsThGroupData>
-            </>
-          )}
+          {DroppableContent}
         </Droppable>
       </EventsTrHeader>
     </EventsThead>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
index 3b6585013c8d3..df5c48ad012a6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/event_column_view.tsx
@@ -151,13 +151,17 @@ export const EventColumnView = React.memo<Props>(
               />,
             ]
           : []),
-        <AlertContextMenu
-          key="alert-context-menu"
-          ecsRowData={ecsData}
-          timelineId={timelineId}
-          disabled={eventType !== 'signal'}
-          refetch={refetch}
-        />,
+        ...(eventType !== 'raw'
+          ? [
+              <AlertContextMenu
+                key="alert-context-menu"
+                ecsRowData={ecsData}
+                timelineId={timelineId}
+                disabled={eventType !== 'signal'}
+                refetch={refetch}
+              />,
+            ]
+          : []),
       ],
       [
         associateNote,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
index d71af86c80247..ee68c270e9aba 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_event.tsx
@@ -97,6 +97,8 @@ const TOP_OFFSET = 50;
  */
 const BOTTOM_OFFSET = -500;
 
+const VISIBILITY_SENSOR_OFFSET = { top: TOP_OFFSET, bottom: BOTTOM_OFFSET };
+
 const emptyNotes: string[] = [];
 
 const EventsTrSupplementContainerWrapper = React.memo(({ children }) => {
@@ -173,105 +175,145 @@ const StatefulEventComponent: React.FC<Props> = ({
   // Number of current columns plus one for actions.
   const columnCount = columnHeaders.length + 1;
 
+  const VisibilitySensorContent = useCallback(
+    ({ isVisible }) => {
+      if (isVisible || disableSensorVisibility) {
+        return (
+          <EventsTrGroup
+            className={STATEFUL_EVENT_CSS_CLASS_NAME}
+            data-test-subj="event"
+            eventType={getEventType(event.ecs)}
+            showLeftBorder={!isEventViewer}
+            ref={divElement}
+          >
+            <EventColumnView
+              id={event._id}
+              actionsColumnWidth={actionsColumnWidth}
+              associateNote={associateNote}
+              columnHeaders={columnHeaders}
+              columnRenderers={columnRenderers}
+              data={event.data}
+              ecsData={event.ecs}
+              expanded={!!expanded[event._id]}
+              eventIdToNoteIds={eventIdToNoteIds}
+              getNotesByIds={getNotesByIds}
+              isEventPinned={isEventPinned}
+              isEventViewer={isEventViewer}
+              loading={loading}
+              loadingEventIds={loadingEventIds}
+              onColumnResized={onColumnResized}
+              onEventToggled={onToggleExpanded}
+              onPinEvent={onPinEvent}
+              onRowSelected={onRowSelected}
+              onUnPinEvent={onUnPinEvent}
+              refetch={refetch}
+              selectedEventIds={selectedEventIds}
+              showCheckboxes={showCheckboxes}
+              showNotes={!!showNotes[event._id]}
+              timelineId={timelineId}
+              toggleShowNotes={onToggleShowNotes}
+              updateNote={updateNote}
+            />
+
+            <EventsTrSupplementContainerWrapper>
+              <EventsTrSupplement
+                className="siemEventsTable__trSupplement--notes"
+                data-test-subj="event-notes-flex-item"
+              >
+                <NoteCards
+                  associateNote={associateNote}
+                  data-test-subj="note-cards"
+                  getNewNoteId={getNewNoteId}
+                  getNotesByIds={getNotesByIds}
+                  noteIds={eventIdToNoteIds[event._id] || emptyNotes}
+                  showAddNote={!!showNotes[event._id]}
+                  status={timelineStatus}
+                  toggleShowAddNote={onToggleShowNotes}
+                  updateNote={updateNote}
+                />
+              </EventsTrSupplement>
+
+              {getRowRenderer(event.ecs, rowRenderers).renderRow({
+                browserFields,
+                data: event.ecs,
+                timelineId,
+              })}
+
+              <EventsTrSupplement
+                className="siemEventsTable__trSupplement--attributes"
+                data-test-subj="event-details"
+              >
+                <ExpandableEvent
+                  browserFields={browserFields}
+                  columnHeaders={columnHeaders}
+                  event={detailsData || emptyDetails}
+                  forceExpand={!!expanded[event._id] && !loading}
+                  id={event._id}
+                  onEventToggled={onToggleExpanded}
+                  onUpdateColumns={onUpdateColumns}
+                  timelineId={timelineId}
+                  toggleColumn={toggleColumn}
+                />
+              </EventsTrSupplement>
+            </EventsTrSupplementContainerWrapper>
+          </EventsTrGroup>
+        );
+      } else {
+        // Height place holder for visibility detection as well as re-rendering sections.
+        const height =
+          divElement.current != null && divElement.current!.clientHeight
+            ? `${divElement.current!.clientHeight}px`
+            : DEFAULT_ROW_HEIGHT;
+
+        return <SkeletonRow cellCount={columnCount} rowHeight={height} />;
+      }
+    },
+    [
+      actionsColumnWidth,
+      associateNote,
+      browserFields,
+      columnCount,
+      columnHeaders,
+      columnRenderers,
+      detailsData,
+      disableSensorVisibility,
+      event._id,
+      event.data,
+      event.ecs,
+      eventIdToNoteIds,
+      expanded,
+      getNotesByIds,
+      isEventPinned,
+      isEventViewer,
+      loading,
+      loadingEventIds,
+      onColumnResized,
+      onPinEvent,
+      onRowSelected,
+      onToggleExpanded,
+      onToggleShowNotes,
+      onUnPinEvent,
+      onUpdateColumns,
+      refetch,
+      rowRenderers,
+      selectedEventIds,
+      showCheckboxes,
+      showNotes,
+      timelineId,
+      timelineStatus,
+      toggleColumn,
+      updateNote,
+    ]
+  );
+
   return (
     <VisibilitySensor
       partialVisibility={true}
       scrollCheck={true}
       containment={containerElementRef}
-      offset={{ top: TOP_OFFSET, bottom: BOTTOM_OFFSET }}
+      offset={VISIBILITY_SENSOR_OFFSET}
     >
-      {({ isVisible }) => {
-        if (isVisible || disableSensorVisibility) {
-          return (
-            <EventsTrGroup
-              className={STATEFUL_EVENT_CSS_CLASS_NAME}
-              data-test-subj="event"
-              eventType={getEventType(event.ecs)}
-              showLeftBorder={!isEventViewer}
-              ref={divElement}
-            >
-              <EventColumnView
-                id={event._id}
-                actionsColumnWidth={actionsColumnWidth}
-                associateNote={associateNote}
-                columnHeaders={columnHeaders}
-                columnRenderers={columnRenderers}
-                data={event.data}
-                ecsData={event.ecs}
-                expanded={!!expanded[event._id]}
-                eventIdToNoteIds={eventIdToNoteIds}
-                getNotesByIds={getNotesByIds}
-                isEventPinned={isEventPinned}
-                isEventViewer={isEventViewer}
-                loading={loading}
-                loadingEventIds={loadingEventIds}
-                onColumnResized={onColumnResized}
-                onEventToggled={onToggleExpanded}
-                onPinEvent={onPinEvent}
-                onRowSelected={onRowSelected}
-                onUnPinEvent={onUnPinEvent}
-                refetch={refetch}
-                selectedEventIds={selectedEventIds}
-                showCheckboxes={showCheckboxes}
-                showNotes={!!showNotes[event._id]}
-                timelineId={timelineId}
-                toggleShowNotes={onToggleShowNotes}
-                updateNote={updateNote}
-              />
-
-              <EventsTrSupplementContainerWrapper>
-                <EventsTrSupplement
-                  className="siemEventsTable__trSupplement--notes"
-                  data-test-subj="event-notes-flex-item"
-                >
-                  <NoteCards
-                    associateNote={associateNote}
-                    data-test-subj="note-cards"
-                    getNewNoteId={getNewNoteId}
-                    getNotesByIds={getNotesByIds}
-                    noteIds={eventIdToNoteIds[event._id] || emptyNotes}
-                    showAddNote={!!showNotes[event._id]}
-                    status={timelineStatus}
-                    toggleShowAddNote={onToggleShowNotes}
-                    updateNote={updateNote}
-                  />
-                </EventsTrSupplement>
-
-                {getRowRenderer(event.ecs, rowRenderers).renderRow({
-                  browserFields,
-                  data: event.ecs,
-                  timelineId,
-                })}
-
-                <EventsTrSupplement
-                  className="siemEventsTable__trSupplement--attributes"
-                  data-test-subj="event-details"
-                >
-                  <ExpandableEvent
-                    browserFields={browserFields}
-                    columnHeaders={columnHeaders}
-                    event={detailsData || emptyDetails}
-                    forceExpand={!!expanded[event._id] && !loading}
-                    id={event._id}
-                    onEventToggled={onToggleExpanded}
-                    onUpdateColumns={onUpdateColumns}
-                    timelineId={timelineId}
-                    toggleColumn={toggleColumn}
-                  />
-                </EventsTrSupplement>
-              </EventsTrSupplementContainerWrapper>
-            </EventsTrGroup>
-          );
-        } else {
-          // Height place holder for visibility detection as well as re-rendering sections.
-          const height =
-            divElement.current != null && divElement.current!.clientHeight
-              ? `${divElement.current!.clientHeight}px`
-              : DEFAULT_ROW_HEIGHT;
-
-          return <SkeletonRow cellCount={columnCount} rowHeight={height} />;
-        }
-      }}
+      {VisibilitySensorContent}
     </VisibilitySensor>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
index 1cd78178d017f..5d4821757d774 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/suricata/suricata_signature.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
 import {
@@ -19,7 +19,7 @@ import { Provider } from '../../../data_providers/provider';
 import { TokensFlexItem } from '../helpers';
 import { getBeginningTokens } from './suricata_links';
 import { DefaultDraggable } from '../../../../../../common/components/draggables';
-import { IS_OPERATOR } from '../../../data_providers/data_provider';
+import { IS_OPERATOR, QueryOperator } from '../../../data_providers/data_provider';
 
 export const SURICATA_SIGNATURE_FIELD_NAME = 'suricata.eve.alert.signature';
 export const SURICATA_SIGNATURE_ID_FIELD_NAME = 'suricata.eve.alert.signature_id';
@@ -57,41 +57,49 @@ export const Tokens = React.memo<{ tokens: string[] }>(({ tokens }) => (
 Tokens.displayName = 'Tokens';
 
 export const DraggableSignatureId = React.memo<{ id: string; signatureId: number }>(
-  ({ id, signatureId }) => (
-    <SignatureFlexItem grow={false}>
-      <DraggableWrapper
-        dataProvider={{
-          and: [],
-          enabled: true,
-          id: escapeDataProviderId(`suricata-draggable-signature-id-${id}-sig-${signatureId}`),
-          name: String(signatureId),
-          excluded: false,
-          kqlQuery: '',
-          queryMatch: {
-            field: SURICATA_SIGNATURE_ID_FIELD_NAME,
-            value: signatureId,
-            operator: IS_OPERATOR,
-          },
-        }}
-        render={(dataProvider, _, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider dataProvider={dataProvider} />
-            </DragEffects>
-          ) : (
-            <EuiToolTip
-              data-test-subj="signature-id-tooltip"
-              content={SURICATA_SIGNATURE_ID_FIELD_NAME}
-            >
-              <Badge iconType="number" color="hollow" title="">
-                {signatureId}
-              </Badge>
-            </EuiToolTip>
-          )
-        }
-      />
-    </SignatureFlexItem>
-  )
+  ({ id, signatureId }) => {
+    const dataProviderProp = useMemo(
+      () => ({
+        and: [],
+        enabled: true,
+        id: escapeDataProviderId(`suricata-draggable-signature-id-${id}-sig-${signatureId}`),
+        name: String(signatureId),
+        excluded: false,
+        kqlQuery: '',
+        queryMatch: {
+          field: SURICATA_SIGNATURE_ID_FIELD_NAME,
+          value: signatureId,
+          operator: IS_OPERATOR as QueryOperator,
+        },
+      }),
+      [id, signatureId]
+    );
+
+    const render = useCallback(
+      (dataProvider, _, snapshot) =>
+        snapshot.isDragging ? (
+          <DragEffects>
+            <Provider dataProvider={dataProvider} />
+          </DragEffects>
+        ) : (
+          <EuiToolTip
+            data-test-subj="signature-id-tooltip"
+            content={SURICATA_SIGNATURE_ID_FIELD_NAME}
+          >
+            <Badge iconType="number" color="hollow" title="">
+              {signatureId}
+            </Badge>
+          </EuiToolTip>
+        ),
+      [signatureId]
+    );
+
+    return (
+      <SignatureFlexItem grow={false}>
+        <DraggableWrapper dataProvider={dataProviderProp} render={render} />
+      </SignatureFlexItem>
+    );
+  }
 );
 
 DraggableSignatureId.displayName = 'DraggableSignatureId';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
index 07e32a9a4e5d1..9ef579706f118 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/zeek/zeek_signature.tsx
@@ -6,7 +6,7 @@
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { get } from 'lodash/fp';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Ecs } from '../../../../../../../common/ecs';
@@ -17,7 +17,7 @@ import {
 import { escapeDataProviderId } from '../../../../../../common/components/drag_and_drop/helpers';
 import { GoogleLink, ReputationLink } from '../../../../../../common/components/links';
 import { Provider } from '../../../data_providers/provider';
-import { IS_OPERATOR } from '../../../data_providers/data_provider';
+import { IS_OPERATOR, QueryOperator } from '../../../data_providers/data_provider';
 
 import * as i18n from './translations';
 
@@ -68,42 +68,46 @@ export const DraggableZeekElement = React.memo<{
   field: string;
   value: string | null | undefined;
   stringRenderer?: StringRenderer;
-}>(({ id, field, value, stringRenderer = defaultStringRenderer }) =>
-  value != null ? (
+}>(({ id, field, value, stringRenderer = defaultStringRenderer }) => {
+  const dataProviderProp = useMemo(
+    () => ({
+      and: [],
+      enabled: true,
+      id: escapeDataProviderId(`draggable-zeek-element-draggable-wrapper-${id}-${field}-${value}`),
+      name: value!,
+      excluded: false,
+      kqlQuery: '',
+      queryMatch: {
+        field,
+        value: value!,
+        operator: IS_OPERATOR as QueryOperator,
+      },
+    }),
+    [field, id, value]
+  );
+
+  const render = useCallback(
+    (dataProvider, _, snapshot) =>
+      snapshot.isDragging ? (
+        <DragEffects>
+          <Provider dataProvider={dataProvider} />
+        </DragEffects>
+      ) : (
+        <EuiToolTip data-test-subj="badge-tooltip" content={field}>
+          <Badge iconType="tag" color="hollow" title="">
+            {stringRenderer(value!)}
+          </Badge>
+        </EuiToolTip>
+      ),
+    [field, stringRenderer, value]
+  );
+
+  return value != null ? (
     <TokensFlexItem grow={false}>
-      <DraggableWrapper
-        dataProvider={{
-          and: [],
-          enabled: true,
-          id: escapeDataProviderId(
-            `draggable-zeek-element-draggable-wrapper-${id}-${field}-${value}`
-          ),
-          name: value,
-          excluded: false,
-          kqlQuery: '',
-          queryMatch: {
-            field,
-            value,
-            operator: IS_OPERATOR,
-          },
-        }}
-        render={(dataProvider, _, snapshot) =>
-          snapshot.isDragging ? (
-            <DragEffects>
-              <Provider dataProvider={dataProvider} />
-            </DragEffects>
-          ) : (
-            <EuiToolTip data-test-subj="badge-tooltip" content={field}>
-              <Badge iconType="tag" color="hollow" title="">
-                {stringRenderer(value)}
-              </Badge>
-            </EuiToolTip>
-          )
-        }
-      />
+      <DraggableWrapper dataProvider={dataProviderProp} render={render} />
     </TokensFlexItem>
-  ) : null
-);
+  ) : null;
+});
 
 DraggableZeekElement.displayName = 'DraggableZeekElement';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
index 14304b99263ac..a8818517fb94b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
@@ -144,11 +144,6 @@ exports[`DataProviders rendering renders correctly against snapshot 1`] = `
           },
         ]
       }
-      onDataProviderEdited={[MockFunction]}
-      onDataProviderRemoved={[MockFunction]}
-      onToggleDataProviderEnabled={[MockFunction]}
-      onToggleDataProviderExcluded={[MockFunction]}
-      onToggleDataProviderType={[MockFunction]}
       timelineId="foo"
     />
   </DropTargetDataProviders>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
index a86c99cbc094a..281a26b08df67 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
@@ -2,556 +2,1717 @@
 
 exports[`Providers rendering renders correctly against snapshot 1`] = `
 <div>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={true}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.0"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+      ]
+    }
+    groupIndex={0}
+    isLastGroup={false}
+    key="droppable-0"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.1"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+      ]
+    }
+    groupIndex={1}
+    isLastGroup={false}
+    key="droppable-1"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.2"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+      ]
+    }
+    groupIndex={2}
+    isLastGroup={false}
+    key="droppable-2"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.3"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+      ]
+    }
+    groupIndex={3}
+    isLastGroup={false}
+    key="droppable-3"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.4"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+      ]
+    }
+    groupIndex={4}
+    isLastGroup={false}
+    key="droppable-4"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.5"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+      ]
+    }
+    groupIndex={5}
+    isLastGroup={false}
+    key="droppable-5"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.6"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+      ]
+    }
+    groupIndex={6}
+    isLastGroup={false}
+    key="droppable-6"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.7"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+      ]
+    }
+    groupIndex={7}
+    isLastGroup={false}
+    key="droppable-7"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.8"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+      ]
+    }
+    groupIndex={8}
+    isLastGroup={false}
+    key="droppable-8"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.9"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="xs"
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={
+      Array [
+        Object {
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    groupIndex={9}
+    isLastGroup={false}
+    key="droppable-9"
+    timelineId="test"
+  />
+  <DataProvidersGroup
+    browserFields={Object {}}
+    dataProviders={
+      Array [
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 1",
+          "kqlQuery": "",
+          "name": "Provider 1",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 1",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 2",
+          "kqlQuery": "",
+          "name": "Provider 2",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 2",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 3",
+          "kqlQuery": "",
+          "name": "Provider 3",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 3",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 4",
+          "kqlQuery": "",
+          "name": "Provider 4",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 4",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 5",
+          "kqlQuery": "",
+          "name": "Provider 5",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 5",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 6",
+          "kqlQuery": "",
+          "name": "Provider 6",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 6",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 7",
+          "kqlQuery": "",
+          "name": "Provider 7",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 7",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 8",
+          "kqlQuery": "",
+          "name": "Provider 8",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 8",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 9",
+          "kqlQuery": "",
+          "name": "Provider 9",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 9",
+          },
+        },
+        Object {
+          "and": Array [],
+          "enabled": true,
+          "excluded": false,
+          "id": "id-Provider 10",
+          "kqlQuery": "",
+          "name": "Provider 10",
+          "queryMatch": Object {
+            "field": "name",
+            "operator": ":",
+            "value": "Provider 10",
+          },
+        },
+      ]
+    }
+    group={Array []}
+    groupIndex={10}
+    isLastGroup={true}
+    key="droppable-10"
+    timelineId="test"
   />
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
-  >
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.div
-        hideBadge={false}
-      >
-        <AndOrBadge
-          type="or"
-        />
-      </styled.div>
-    </Styled(EuiFlexItem)>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        (
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <EuiFlexItem
-      grow={false}
-    >
-      <Connect(Droppable)
-        direction="horizontal"
-        droppableId="droppableId.timelineProviders.foo.group.10"
-        getContainerForClone={[Function]}
-        ignoreContainerClipping={false}
-        isCombineEnabled={false}
-        isDropDisabled={false}
-        mode="standard"
-        renderClone={null}
-        type="DEFAULT"
-      >
-        <Component />
-      </Connect(Droppable)>
-    </EuiFlexItem>
-    <Styled(EuiFlexItem)
-      grow={false}
-    >
-      <styled.span>
-        )
-      </styled.span>
-    </Styled(EuiFlexItem)>
-    <AddDataProviderPopover
-      browserFields={Object {}}
-      timelineId="foo"
-    />
-  </EuiFlexGroup>
 </div>
 `;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_providers.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_providers.test.tsx
index d48be25b08897..a7ae14dea510f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_providers.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/data_providers.test.tsx
@@ -41,11 +41,6 @@ describe('DataProviders', () => {
               data-test-subj="dataProviders-container"
               dataProviders={mockDataProviders}
               timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
             />
           </ManageGlobalTimeline>
         </TestProviders>
@@ -58,16 +53,7 @@ describe('DataProviders', () => {
 
       const wrapper = mount(
         <TestProviders>
-          <DataProviders
-            browserFields={{}}
-            timelineId="foo"
-            dataProviders={dataProviders}
-            onDataProviderEdited={jest.fn()}
-            onDataProviderRemoved={jest.fn()}
-            onToggleDataProviderEnabled={jest.fn()}
-            onToggleDataProviderExcluded={jest.fn()}
-            onToggleDataProviderType={jest.fn()}
-          />
+          <DataProviders browserFields={{}} timelineId="foo" dataProviders={dataProviders} />
         </TestProviders>
       );
 
@@ -77,16 +63,7 @@ describe('DataProviders', () => {
     test('it renders the data providers', () => {
       const wrapper = mount(
         <TestProviders>
-          <DataProviders
-            browserFields={{}}
-            timelineId="foo"
-            dataProviders={mockDataProviders}
-            onDataProviderEdited={jest.fn()}
-            onDataProviderRemoved={jest.fn()}
-            onToggleDataProviderEnabled={jest.fn()}
-            onToggleDataProviderExcluded={jest.fn()}
-            onToggleDataProviderType={jest.fn()}
-          />
+          <DataProviders browserFields={{}} timelineId="foo" dataProviders={mockDataProviders} />
         </TestProviders>
       );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx
index c9e06f89af41c..b892ca089eb4c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/index.tsx
@@ -14,13 +14,6 @@ import {
   droppableTimelineProvidersPrefix,
   IS_DRAGGING_CLASS_NAME,
 } from '../../../../common/components/drag_and_drop/helpers';
-import {
-  OnDataProviderEdited,
-  OnDataProviderRemoved,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-  OnToggleDataProviderType,
-} from '../events';
 
 import { DataProvider } from './data_provider';
 import { Empty } from './empty';
@@ -31,11 +24,6 @@ interface Props {
   browserFields: BrowserFields;
   timelineId: string;
   dataProviders: DataProvider[];
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  onToggleDataProviderType: OnToggleDataProviderType;
 }
 
 const DropTargetDataProvidersContainer = styled.div`
@@ -91,48 +79,32 @@ const getDroppableId = (id: string): string => `${droppableTimelineProvidersPref
  * the user to drop anything with a facet count into
  * the data pro section.
  */
-export const DataProviders = React.memo<Props>(
-  ({
-    browserFields,
-    dataProviders,
+export const DataProviders = React.memo<Props>(({ browserFields, dataProviders, timelineId }) => {
+  const { getManageTimelineById } = useManageTimeline();
+  const isLoading = useMemo(() => getManageTimelineById(timelineId).isLoading, [
+    getManageTimelineById,
     timelineId,
-    onDataProviderEdited,
-    onDataProviderRemoved,
-    onToggleDataProviderEnabled,
-    onToggleDataProviderExcluded,
-    onToggleDataProviderType,
-  }) => {
-    const { getManageTimelineById } = useManageTimeline();
-    const isLoading = useMemo(() => getManageTimelineById(timelineId).isLoading, [
-      getManageTimelineById,
-      timelineId,
-    ]);
-    return (
-      <DropTargetDataProvidersContainer className="drop-target-data-providers-container">
-        <DropTargetDataProviders
-          className="drop-target-data-providers"
-          data-test-subj="dataProviders"
-        >
-          {dataProviders != null && dataProviders.length ? (
-            <Providers
-              browserFields={browserFields}
-              timelineId={timelineId}
-              dataProviders={dataProviders}
-              onDataProviderEdited={onDataProviderEdited}
-              onDataProviderRemoved={onDataProviderRemoved}
-              onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-              onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-              onToggleDataProviderType={onToggleDataProviderType}
-            />
-          ) : (
-            <DroppableWrapper isDropDisabled={isLoading} droppableId={getDroppableId(timelineId)}>
-              <Empty browserFields={browserFields} timelineId={timelineId} />
-            </DroppableWrapper>
-          )}
-        </DropTargetDataProviders>
-      </DropTargetDataProvidersContainer>
-    );
-  }
-);
+  ]);
+  return (
+    <DropTargetDataProvidersContainer className="drop-target-data-providers-container">
+      <DropTargetDataProviders
+        className="drop-target-data-providers"
+        data-test-subj="dataProviders"
+      >
+        {dataProviders != null && dataProviders.length ? (
+          <Providers
+            browserFields={browserFields}
+            timelineId={timelineId}
+            dataProviders={dataProviders}
+          />
+        ) : (
+          <DroppableWrapper isDropDisabled={isLoading} droppableId={getDroppableId(timelineId)}>
+            <Empty browserFields={browserFields} timelineId={timelineId} />
+          </DroppableWrapper>
+        )}
+      </DropTargetDataProviders>
+    </DropTargetDataProvidersContainer>
+  );
+});
 
 DataProviders.displayName = 'DataProviders';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
index bf2094e7659ee..b66a332fc977d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_badge.tsx
@@ -91,7 +91,7 @@ const ConvertFieldBadge = styled(ProviderFieldBadge)`
   }
 `;
 
-const TemplateFieldBadge: React.FC<TemplateFieldBadgeProps> = ({ type, toggleType }) => {
+const TemplateFieldBadgeComponent: React.FC<TemplateFieldBadgeProps> = ({ type, toggleType }) => {
   if (type !== DataProviderType.template) {
     return (
       <ConvertFieldBadge onClick={toggleType}>{i18n.CONVERT_TO_TEMPLATE_FIELD}</ConvertFieldBadge>
@@ -101,6 +101,8 @@ const TemplateFieldBadge: React.FC<TemplateFieldBadgeProps> = ({ type, toggleTyp
   return <StyledTemplateFieldBadge>{i18n.TEMPLATE_FIELD_LABEL}</StyledTemplateFieldBadge>;
 };
 
+const TemplateFieldBadge = React.memo(TemplateFieldBadgeComponent);
+
 interface ProviderBadgeProps {
   deleteProvider: () => void;
   field: string;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
index 0093c43a17137..fc06d37b9663f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/provider_item_badge.tsx
@@ -117,21 +117,38 @@ export const ProviderItemBadge = React.memo<ProviderItemBadgeProps>(
       [unRegisterProvider]
     );
 
-    const button = (
-      <ProviderBadge
-        deleteProvider={!isLoading ? deleteProvider : noop}
-        field={field}
-        kqlQuery={kqlQuery}
-        isEnabled={isEnabled}
-        isExcluded={isExcluded}
-        providerId={providerId}
-        togglePopover={togglePopover}
-        toggleType={onToggleTypeProvider}
-        val={val}
-        operator={operator}
-        type={type}
-        timelineType={timelineType}
-      />
+    const button = useMemo(
+      () => (
+        <ProviderBadge
+          deleteProvider={!isLoading ? deleteProvider : noop}
+          field={field}
+          kqlQuery={kqlQuery}
+          isEnabled={isEnabled}
+          isExcluded={isExcluded}
+          providerId={providerId}
+          togglePopover={togglePopover}
+          toggleType={onToggleTypeProvider}
+          val={val}
+          operator={operator}
+          type={type}
+          timelineType={timelineType}
+        />
+      ),
+      [
+        deleteProvider,
+        field,
+        isEnabled,
+        isExcluded,
+        isLoading,
+        kqlQuery,
+        onToggleTypeProvider,
+        operator,
+        providerId,
+        timelineType,
+        togglePopover,
+        type,
+        val,
+      ]
     );
 
     return (
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.test.tsx
index 3f371349aa750..2df19605f813c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.test.tsx
@@ -12,6 +12,7 @@ import { TestProviders } from '../../../../common/mock/test_providers';
 import { DroppableWrapper } from '../../../../common/components/drag_and_drop/droppable_wrapper';
 import { FilterManager } from '../../../../../../../../src/plugins/data/public';
 
+import { timelineActions } from '../../../store/timeline';
 import { mockDataProviders } from './mock/mock_data_providers';
 import { Providers } from './providers';
 import { DELETE_CLASS_NAME, ENABLE_CLASS_NAME, EXCLUDE_CLASS_NAME } from './provider_item_actions';
@@ -24,27 +25,24 @@ describe('Providers', () => {
   const isLoading: boolean = true;
   const mount = useMountAppended();
   const filterManager = new FilterManager(mockUiSettingsForFilterManager);
+  const mockOnDataProviderRemoved = jest.spyOn(timelineActions, 'removeProvider');
 
   const manageTimelineForTesting = {
-    foo: {
-      ...getTimelineDefaults('foo'),
+    test: {
+      ...getTimelineDefaults('test'),
       filterManager,
       isLoading,
     },
   };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   describe('rendering', () => {
     test('renders correctly against snapshot', () => {
       const wrapper = shallow(
-        <Providers
-          browserFields={{}}
-          dataProviders={mockDataProviders}
-          timelineId="foo"
-          onDataProviderEdited={jest.fn()}
-          onDataProviderRemoved={jest.fn()}
-          onToggleDataProviderEnabled={jest.fn()}
-          onToggleDataProviderExcluded={jest.fn()}
-          onToggleDataProviderType={jest.fn()}
-        />
+        <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
       );
       expect(wrapper).toMatchSnapshot();
     });
@@ -53,16 +51,7 @@ describe('Providers', () => {
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -77,20 +66,10 @@ describe('Providers', () => {
 
   describe('#onDataProviderRemoved', () => {
     test('it invokes the onDataProviderRemoved callback when the close button is clicked', () => {
-      const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={mockOnDataProviderRemoved}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -98,25 +77,15 @@ describe('Providers', () => {
         .find('[data-test-subj="providerBadge"] [data-euiicon-type]')
         .first()
         .simulate('click');
-      expect(mockOnDataProviderRemoved.mock.calls[0][0]).toEqual('id-Provider 1');
+      expect(mockOnDataProviderRemoved.mock.calls[0][0].providerId).toEqual('id-Provider 1');
     });
 
     test('while loading data, it does NOT invoke the onDataProviderRemoved callback when the close button is clicked', () => {
-      const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={mockDataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={mockOnDataProviderRemoved}
-                onToggleDataProviderEnabled={jest.fn()}
-                onToggleDataProviderExcluded={jest.fn()}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -131,20 +100,10 @@ describe('Providers', () => {
     });
 
     test('it invokes the onDataProviderRemoved callback when you click on the option "Delete" in the provider menu', () => {
-      const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={mockOnDataProviderRemoved}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -156,25 +115,15 @@ describe('Providers', () => {
         .find(`[data-test-subj="providerActions"] .${DELETE_CLASS_NAME}`)
         .first()
         .simulate('click');
-      expect(mockOnDataProviderRemoved.mock.calls[0][0]).toEqual('id-Provider 1');
+      expect(mockOnDataProviderRemoved.mock.calls[0][0].providerId).toEqual('id-Provider 1');
     });
 
     test('while loading data, it does NOT invoke the onDataProviderRemoved callback when you click on the option "Delete" in the provider menu', () => {
-      const mockOnDataProviderRemoved = jest.fn();
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={mockDataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={mockOnDataProviderRemoved}
-                onToggleDataProviderEnabled={jest.fn()}
-                onToggleDataProviderExcluded={jest.fn()}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -194,20 +143,14 @@ describe('Providers', () => {
 
   describe('#onToggleDataProviderEnabled', () => {
     test('it invokes the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the provider menu', () => {
-      const mockOnToggleDataProviderEnabled = jest.fn();
+      const mockOnToggleDataProviderEnabled = jest.spyOn(
+        timelineActions,
+        'updateDataProviderEnabled'
+      );
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={mockOnToggleDataProviderEnabled}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -220,27 +163,23 @@ describe('Providers', () => {
         .first()
         .simulate('click');
       expect(mockOnToggleDataProviderEnabled.mock.calls[0][0]).toEqual({
+        andProviderId: undefined,
         enabled: false,
+        id: 'test',
         providerId: 'id-Provider 1',
       });
     });
 
     test('while loading data, it does NOT invoke the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the provider menu', () => {
-      const mockOnToggleDataProviderEnabled = jest.fn();
+      const mockOnToggleDataProviderEnabled = jest.spyOn(
+        timelineActions,
+        'updateDataProviderEnabled'
+      );
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={mockDataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={jest.fn()}
-                onToggleDataProviderEnabled={mockOnToggleDataProviderEnabled}
-                onToggleDataProviderExcluded={jest.fn()}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -260,21 +199,15 @@ describe('Providers', () => {
 
   describe('#onToggleDataProviderExcluded', () => {
     test('it invokes the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the provider menu', () => {
-      const onToggleDataProviderExcluded = jest.fn();
+      const mockOnToggleDataProviderExcluded = jest.spyOn(
+        timelineActions,
+        'updateDataProviderExcluded'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -288,29 +221,25 @@ describe('Providers', () => {
         .first()
         .simulate('click');
 
-      expect(onToggleDataProviderExcluded.mock.calls[0][0]).toEqual({
+      expect(mockOnToggleDataProviderExcluded.mock.calls[0][0]).toEqual({
+        andProviderId: undefined,
         excluded: true,
+        id: 'test',
         providerId: 'id-Provider 1',
       });
     });
 
     test('while loading data, it does NOT invoke the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the provider menu', () => {
-      const onToggleDataProviderExcluded = jest.fn();
+      const mockOnToggleDataProviderExcluded = jest.spyOn(
+        timelineActions,
+        'updateDataProviderExcluded'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={mockDataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={jest.fn()}
-                onToggleDataProviderEnabled={jest.fn()}
-                onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -325,7 +254,7 @@ describe('Providers', () => {
         .first()
         .simulate('click');
 
-      expect(onToggleDataProviderExcluded).not.toBeCalled();
+      expect(mockOnToggleDataProviderExcluded).not.toBeCalled();
     });
   });
 
@@ -337,16 +266,7 @@ describe('Providers', () => {
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={dataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={dataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -364,21 +284,11 @@ describe('Providers', () => {
     test('it invokes the onDataProviderRemoved callback when you click on the close button is clicked', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnDataProviderRemoved = jest.fn();
 
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={mockDataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={mockOnDataProviderRemoved}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -392,28 +302,22 @@ describe('Providers', () => {
 
       wrapper.update();
 
-      expect(mockOnDataProviderRemoved.mock.calls[0]).toEqual(['id-Provider 1', 'id-Provider 2']);
+      expect(mockOnDataProviderRemoved.mock.calls[0][0]).toEqual({
+        andProviderId: 'id-Provider 2',
+        id: 'test',
+        providerId: 'id-Provider 1',
+      });
     });
 
     test('while loading data, it does NOT invoke the onDataProviderRemoved callback when you click on the close button is clicked', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnDataProviderRemoved = jest.fn();
 
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={mockDataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={mockOnDataProviderRemoved}
-                onToggleDataProviderEnabled={jest.fn()}
-                onToggleDataProviderExcluded={jest.fn()}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={mockDataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -434,21 +338,15 @@ describe('Providers', () => {
     test('it invokes the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the provider menu', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnToggleDataProviderEnabled = jest.fn();
+      const mockOnToggleDataProviderEnabled = jest.spyOn(
+        timelineActions,
+        'updateDataProviderEnabled'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={dataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={mockOnToggleDataProviderEnabled}
-              onToggleDataProviderExcluded={jest.fn()}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={dataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -470,6 +368,7 @@ describe('Providers', () => {
       expect(mockOnToggleDataProviderEnabled.mock.calls[0][0]).toEqual({
         andProviderId: 'id-Provider 2',
         enabled: false,
+        id: 'test',
         providerId: 'id-Provider 1',
       });
     });
@@ -477,22 +376,16 @@ describe('Providers', () => {
     test('while loading data, it does NOT invoke the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the provider menu', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnToggleDataProviderEnabled = jest.fn();
+      const mockOnToggleDataProviderEnabled = jest.spyOn(
+        timelineActions,
+        'updateDataProviderEnabled'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={dataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={jest.fn()}
-                onToggleDataProviderEnabled={mockOnToggleDataProviderEnabled}
-                onToggleDataProviderExcluded={jest.fn()}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={dataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
@@ -518,21 +411,15 @@ describe('Providers', () => {
     test('it invokes the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the provider menu', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnToggleDataProviderExcluded = jest.fn();
+      const mockOnToggleDataProviderExcluded = jest.spyOn(
+        timelineActions,
+        'updateDataProviderExcluded'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <DroppableWrapper droppableId="unitTest">
-            <Providers
-              browserFields={{}}
-              dataProviders={dataProviders}
-              timelineId="foo"
-              onDataProviderEdited={jest.fn()}
-              onDataProviderRemoved={jest.fn()}
-              onToggleDataProviderEnabled={jest.fn()}
-              onToggleDataProviderExcluded={mockOnToggleDataProviderExcluded}
-              onToggleDataProviderType={jest.fn()}
-            />
+            <Providers browserFields={{}} dataProviders={dataProviders} timelineId="test" />
           </DroppableWrapper>
         </TestProviders>
       );
@@ -554,6 +441,7 @@ describe('Providers', () => {
       expect(mockOnToggleDataProviderExcluded.mock.calls[0][0]).toEqual({
         andProviderId: 'id-Provider 2',
         excluded: true,
+        id: 'test',
         providerId: 'id-Provider 1',
       });
     });
@@ -561,22 +449,16 @@ describe('Providers', () => {
     test('while loading data, it does NOT invoke the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the provider menu', () => {
       const dataProviders = mockDataProviders.slice(0, 1);
       dataProviders[0].and = mockDataProviders.slice(1, 3);
-      const mockOnToggleDataProviderExcluded = jest.fn();
+      const mockOnToggleDataProviderExcluded = jest.spyOn(
+        timelineActions,
+        'updateDataProviderExcluded'
+      );
 
       const wrapper = mount(
         <TestProviders>
           <ManageGlobalTimeline manageTimelineForTesting={manageTimelineForTesting}>
             <DroppableWrapper droppableId="unitTest">
-              <Providers
-                browserFields={{}}
-                dataProviders={dataProviders}
-                timelineId="foo"
-                onDataProviderEdited={jest.fn()}
-                onDataProviderRemoved={jest.fn()}
-                onToggleDataProviderEnabled={jest.fn()}
-                onToggleDataProviderExcluded={mockOnToggleDataProviderExcluded}
-                onToggleDataProviderType={jest.fn()}
-              />
+              <Providers browserFields={{}} dataProviders={dataProviders} timelineId="test" />
             </DroppableWrapper>
           </ManageGlobalTimeline>
         </TestProviders>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx
index 1142bbc214d74..4b6f3c6701794 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx
@@ -6,9 +6,12 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiFormHelpText, EuiSpacer } from '@elastic/eui';
 import { rgba } from 'polished';
-import React, { Fragment, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Draggable, DraggingStyle, Droppable, NotDraggingStyle } from 'react-beautiful-dnd';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
+import { useDispatch } from 'react-redux';
+
+import { timelineActions } from '../../../store/timeline';
 
 import { AndOrBadge } from '../../../../common/components/and_or_badge';
 import { AddDataProviderPopover } from './add_data_provider_popover';
@@ -18,13 +21,6 @@ import {
   IS_DRAGGING_CLASS_NAME,
   getTimelineProviderDraggableId,
 } from '../../../../common/components/drag_and_drop/helpers';
-import {
-  OnDataProviderEdited,
-  OnDataProviderRemoved,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-  OnToggleDataProviderType,
-} from '../events';
 
 import { DataProvider, DataProviderType, DataProvidersAnd, IS_OPERATOR } from './data_provider';
 import { EMPTY_GROUP, flattenIntoAndGroups } from './helpers';
@@ -36,11 +32,6 @@ interface Props {
   browserFields: BrowserFields;
   timelineId: string;
   dataProviders: DataProvider[];
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  onToggleDataProviderType: OnToggleDataProviderType;
 }
 
 /**
@@ -74,12 +65,10 @@ const DroppableContainer = styled.div`
 `;
 
 const Parens = styled.span`
-  ${({ theme }) => css`
-    color: ${theme.eui.euiColorMediumShade};
-    font-size: 32px;
-    padding: 2px;
-    user-select: none;
-  `}
+  color: ${({ theme }) => theme.eui.euiColorMediumShade};
+  font-size: 32px;
+  padding: 2px;
+  user-select: none;
 `;
 
 const AndOrBadgeContainer = styled.div<{ hideBadge: boolean }>`
@@ -123,182 +112,269 @@ const getDataProviderValue = (dataProvider: DataProvidersAnd) =>
  * 2) temporarily disabling a data provider
  * 3) applying boolean negation to the data provider
  */
-export const Providers = React.memo<Props>(
-  ({
-    browserFields,
-    timelineId,
-    dataProviders,
-    onDataProviderEdited,
-    onDataProviderRemoved,
-    onToggleDataProviderEnabled,
-    onToggleDataProviderExcluded,
-    onToggleDataProviderType,
-  }) => {
-    // Transform the dataProviders into flattened groups, and append an empty group
-    const dataProviderGroups: DataProvidersAnd[][] = useMemo(
-      () => [...flattenIntoAndGroups(dataProviders), ...EMPTY_GROUP],
-      [dataProviders]
+export const Providers = React.memo<Props>(({ browserFields, timelineId, dataProviders }) => {
+  // Transform the dataProviders into flattened groups, and append an empty group
+  const dataProviderGroups: DataProvidersAnd[][] = useMemo(
+    () => [...flattenIntoAndGroups(dataProviders), ...EMPTY_GROUP],
+    [dataProviders]
+  );
+
+  const content = useMemo(
+    () =>
+      dataProviderGroups.map((group, groupIndex) => (
+        <DataProvidersGroup
+          key={`droppable-${groupIndex}`}
+          group={group}
+          groupIndex={groupIndex}
+          isLastGroup={groupIndex === dataProviderGroups.length - 1}
+          browserFields={browserFields}
+          timelineId={timelineId}
+          dataProviders={dataProviders}
+        />
+      )),
+    [browserFields, dataProviderGroups, dataProviders, timelineId]
+  );
+
+  return <div>{content}</div>;
+});
+
+Providers.displayName = 'Providers';
+
+interface DataProvidersGroupItem extends Omit<Props, 'dataProviders'> {
+  index: number;
+  dataProvider: DataProvidersAnd;
+  group: DataProvidersAnd[];
+  groupIndex: number;
+}
+
+export const DataProvidersGroupItem = React.memo<DataProvidersGroupItem>(
+  ({ browserFields, group, groupIndex, dataProvider, index, timelineId }) => {
+    const dispatch = useDispatch();
+    const draggableId = useMemo(
+      () =>
+        getTimelineProviderDraggableId({
+          dataProviderId: dataProvider.id,
+          groupIndex,
+          timelineId,
+        }),
+      [dataProvider.id, groupIndex, timelineId]
+    );
+
+    const handleDeleteProvider = useCallback(() => {
+      const payload = {
+        id: timelineId,
+        providerId: index > 0 ? group[0].id : dataProvider.id,
+        andProviderId: index > 0 ? dataProvider.id : undefined,
+      };
+
+      dispatch(timelineActions.removeProvider(payload));
+    }, [dataProvider.id, dispatch, group, index, timelineId]);
+
+    const handleToggleEnabledProvider = useCallback(() => {
+      const payload = {
+        id: timelineId,
+        providerId: index > 0 ? group[0].id : dataProvider.id,
+        enabled: !dataProvider.enabled,
+        andProviderId: index > 0 ? dataProvider.id : undefined,
+      };
+
+      dispatch(timelineActions.updateDataProviderEnabled(payload));
+    }, [dataProvider.enabled, dataProvider.id, dispatch, group, index, timelineId]);
+
+    const handleToggleExcludedProvider = useCallback(() => {
+      const payload = {
+        id: timelineId,
+        providerId: index > 0 ? group[0].id : dataProvider.id,
+        excluded: !dataProvider.excluded,
+        andProviderId: index > 0 ? dataProvider.id : undefined,
+      };
+
+      dispatch(timelineActions.updateDataProviderExcluded(payload));
+    }, [dataProvider.excluded, dataProvider.id, dispatch, group, index, timelineId]);
+
+    const handleToggleTypeProvider = useCallback(() => {
+      const payload = {
+        id: timelineId,
+        providerId: index > 0 ? group[0].id : dataProvider.id,
+        type:
+          dataProvider.type === DataProviderType.template
+            ? DataProviderType.default
+            : DataProviderType.template,
+        andProviderId: index > 0 ? dataProvider.id : undefined,
+      };
+
+      dispatch(timelineActions.updateDataProviderType(payload));
+    }, [dataProvider.id, dataProvider.type, dispatch, group, index, timelineId]);
+
+    const handleDataProviderEdited = useCallback(
+      ({ andProviderId, excluded, field, operator, providerId, value }) =>
+        dispatch(
+          timelineActions.dataProviderEdited({
+            andProviderId,
+            excluded,
+            field,
+            id: timelineId,
+            operator,
+            providerId,
+            value,
+          })
+        ),
+      [dispatch, timelineId]
+    );
+
+    const DraggableContent = useCallback(
+      (provided, snapshot) => (
+        <div
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={getItemStyle(provided.draggableProps.style)}
+          data-test-subj="providerContainer"
+        >
+          <EuiFlexGroup alignItems="center" gutterSize="none">
+            <EuiFlexItem grow={false}>
+              <ProviderItemBadge
+                andProviderId={index > 0 ? dataProvider.id : undefined}
+                browserFields={browserFields}
+                deleteProvider={handleDeleteProvider}
+                field={
+                  index > 0
+                    ? dataProvider.queryMatch.displayField ?? dataProvider.queryMatch.field
+                    : group[0].queryMatch.displayField ?? group[0].queryMatch.field
+                }
+                kqlQuery={index > 0 ? dataProvider.kqlQuery : group[0].kqlQuery}
+                isEnabled={index > 0 ? dataProvider.enabled : group[0].enabled}
+                isExcluded={index > 0 ? dataProvider.excluded : group[0].excluded}
+                onDataProviderEdited={handleDataProviderEdited}
+                operator={
+                  index > 0
+                    ? dataProvider.queryMatch.operator ?? IS_OPERATOR
+                    : group[0].queryMatch.operator ?? IS_OPERATOR
+                }
+                register={dataProvider}
+                providerId={index > 0 ? group[0].id : dataProvider.id}
+                timelineId={timelineId}
+                toggleEnabledProvider={handleToggleEnabledProvider}
+                toggleExcludedProvider={handleToggleExcludedProvider}
+                toggleTypeProvider={handleToggleTypeProvider}
+                val={getDataProviderValue(dataProvider)}
+                type={dataProvider.type}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {!snapshot.isDragging &&
+                (index < group.length - 1 ? (
+                  <AndOrBadge type="and" />
+                ) : (
+                  <LastAndOrBadgeInGroup>
+                    <AndOrBadge type="and" />
+                  </LastAndOrBadgeInGroup>
+                ))}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+      ),
+      [
+        browserFields,
+        dataProvider,
+        group,
+        handleDataProviderEdited,
+        handleDeleteProvider,
+        handleToggleEnabledProvider,
+        handleToggleExcludedProvider,
+        handleToggleTypeProvider,
+        index,
+        timelineId,
+      ]
     );
 
     return (
-      <div>
-        {dataProviderGroups.map((group, groupIndex) => (
-          <Fragment key={`droppable-${groupIndex}`}>
-            {groupIndex !== 0 && <EuiSpacer size="xs" />}
-
-            <EuiFlexGroup alignItems="center" gutterSize="none">
-              <OrFlexItem grow={false}>
-                <AndOrBadgeContainer hideBadge={groupIndex === 0}>
-                  <AndOrBadge type="or" />
-                </AndOrBadgeContainer>
-              </OrFlexItem>
-              <ParensContainer grow={false}>
-                <Parens>{'('}</Parens>
-              </ParensContainer>
-              <EuiFlexItem grow={false}>
-                <Droppable
-                  droppableId={getTimelineProviderDroppableId({ groupIndex, timelineId })}
-                  direction="horizontal"
-                >
-                  {(droppableProvided) => (
-                    <DroppableContainer
-                      className={
-                        groupIndex === dataProviderGroups.length - 1
-                          ? EMPTY_PROVIDERS_GROUP_CLASS_NAME
-                          : ''
-                      }
-                      ref={droppableProvided.innerRef}
-                      style={listStyle}
-                      {...droppableProvided.droppableProps}
-                    >
-                      {group.map((dataProvider, index) => (
-                        <Draggable
-                          disableInteractiveElementBlocking={true}
-                          draggableId={getTimelineProviderDraggableId({
-                            dataProviderId: dataProvider.id,
-                            groupIndex,
-                            timelineId,
-                          })}
-                          index={index}
-                          key={dataProvider.id}
-                        >
-                          {(provided, snapshot) => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              style={getItemStyle(provided.draggableProps.style)}
-                              data-test-subj="providerContainer"
-                            >
-                              <EuiFlexGroup alignItems="center" gutterSize="none">
-                                <EuiFlexItem grow={false}>
-                                  <ProviderItemBadge
-                                    andProviderId={index > 0 ? dataProvider.id : undefined}
-                                    browserFields={browserFields}
-                                    deleteProvider={() =>
-                                      index > 0
-                                        ? onDataProviderRemoved(group[0].id, dataProvider.id)
-                                        : onDataProviderRemoved(dataProvider.id)
-                                    }
-                                    field={
-                                      index > 0
-                                        ? dataProvider.queryMatch.displayField ??
-                                          dataProvider.queryMatch.field
-                                        : group[0].queryMatch.displayField ??
-                                          group[0].queryMatch.field
-                                    }
-                                    kqlQuery={index > 0 ? dataProvider.kqlQuery : group[0].kqlQuery}
-                                    isEnabled={index > 0 ? dataProvider.enabled : group[0].enabled}
-                                    isExcluded={
-                                      index > 0 ? dataProvider.excluded : group[0].excluded
-                                    }
-                                    onDataProviderEdited={onDataProviderEdited}
-                                    operator={
-                                      index > 0
-                                        ? dataProvider.queryMatch.operator ?? IS_OPERATOR
-                                        : group[0].queryMatch.operator ?? IS_OPERATOR
-                                    }
-                                    register={dataProvider}
-                                    providerId={index > 0 ? group[0].id : dataProvider.id}
-                                    timelineId={timelineId}
-                                    toggleEnabledProvider={() =>
-                                      index > 0
-                                        ? onToggleDataProviderEnabled({
-                                            providerId: group[0].id,
-                                            enabled: !dataProvider.enabled,
-                                            andProviderId: dataProvider.id,
-                                          })
-                                        : onToggleDataProviderEnabled({
-                                            providerId: dataProvider.id,
-                                            enabled: !dataProvider.enabled,
-                                          })
-                                    }
-                                    toggleExcludedProvider={() =>
-                                      index > 0
-                                        ? onToggleDataProviderExcluded({
-                                            providerId: group[0].id,
-                                            excluded: !dataProvider.excluded,
-                                            andProviderId: dataProvider.id,
-                                          })
-                                        : onToggleDataProviderExcluded({
-                                            providerId: dataProvider.id,
-                                            excluded: !dataProvider.excluded,
-                                          })
-                                    }
-                                    toggleTypeProvider={() =>
-                                      index > 0
-                                        ? onToggleDataProviderType({
-                                            providerId: group[0].id,
-                                            type:
-                                              dataProvider.type === DataProviderType.template
-                                                ? DataProviderType.default
-                                                : DataProviderType.template,
-                                            andProviderId: dataProvider.id,
-                                          })
-                                        : onToggleDataProviderType({
-                                            providerId: dataProvider.id,
-                                            type:
-                                              dataProvider.type === DataProviderType.template
-                                                ? DataProviderType.default
-                                                : DataProviderType.template,
-                                          })
-                                    }
-                                    val={getDataProviderValue(dataProvider)}
-                                    type={dataProvider.type}
-                                  />
-                                </EuiFlexItem>
-                                <EuiFlexItem grow={false}>
-                                  {!snapshot.isDragging &&
-                                    (index < group.length - 1 ? (
-                                      <AndOrBadge type="and" />
-                                    ) : (
-                                      <LastAndOrBadgeInGroup>
-                                        <AndOrBadge type="and" />
-                                      </LastAndOrBadgeInGroup>
-                                    ))}
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
-                            </div>
-                          )}
-                        </Draggable>
-                      ))}
-                      {droppableProvided.placeholder}
-                    </DroppableContainer>
-                  )}
-                </Droppable>
-              </EuiFlexItem>
-              <ParensContainer grow={false}>
-                <Parens>{')'}</Parens>
-              </ParensContainer>
-              {groupIndex === dataProviderGroups.length - 1 && (
-                <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
-              )}
-            </EuiFlexGroup>
-          </Fragment>
-        ))}
-      </div>
+      <Draggable
+        disableInteractiveElementBlocking={true}
+        draggableId={draggableId}
+        index={index}
+        key={dataProvider.id}
+      >
+        {DraggableContent}
+      </Draggable>
     );
   }
 );
 
-Providers.displayName = 'Providers';
+DataProvidersGroupItem.displayName = 'DataProvidersGroupItem';
+
+interface DataProvidersGroup extends Props {
+  group: DataProvidersAnd[];
+  groupIndex: number;
+  isLastGroup: boolean;
+}
+
+const DataProvidersGroup = React.memo<DataProvidersGroup>(
+  ({ browserFields, timelineId, group, groupIndex, isLastGroup }) => {
+    const droppableId = useMemo(() => getTimelineProviderDroppableId({ groupIndex, timelineId }), [
+      groupIndex,
+      timelineId,
+    ]);
+
+    const GroupDataProviders = useMemo(
+      () =>
+        group.map((dataProvider, index) => (
+          <DataProvidersGroupItem
+            key={dataProvider.id}
+            browserFields={browserFields}
+            dataProvider={dataProvider}
+            index={index}
+            timelineId={timelineId}
+            group={group}
+            groupIndex={groupIndex}
+          />
+        )),
+      [browserFields, group, groupIndex, timelineId]
+    );
+
+    const DroppableContent = useCallback(
+      (droppableProvided) => (
+        <DroppableContainer
+          className={isLastGroup ? EMPTY_PROVIDERS_GROUP_CLASS_NAME : ''}
+          ref={droppableProvided.innerRef}
+          style={listStyle}
+          {...droppableProvided.droppableProps}
+        >
+          {GroupDataProviders}
+          {droppableProvided.placeholder}
+        </DroppableContainer>
+      ),
+      [GroupDataProviders, isLastGroup]
+    );
+
+    return (
+      <>
+        {groupIndex !== 0 && <EuiSpacer size="xs" />}
+
+        <EuiFlexGroup alignItems="center" gutterSize="none">
+          <OrFlexItem grow={false}>
+            <AndOrBadgeContainer hideBadge={groupIndex === 0}>
+              <AndOrBadge type="or" />
+            </AndOrBadgeContainer>
+          </OrFlexItem>
+          <ParensContainer grow={false}>
+            <Parens>{'('}</Parens>
+          </ParensContainer>
+          <EuiFlexItem grow={false}>
+            <Droppable droppableId={droppableId} direction="horizontal">
+              {DroppableContent}
+            </Droppable>
+          </EuiFlexItem>
+          <ParensContainer grow={false}>
+            <Parens>{')'}</Parens>
+          </ParensContainer>
+          {isLastGroup && (
+            <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
+          )}
+        </EuiFlexGroup>
+      </>
+    );
+  }
+);
+
+DataProvidersGroup.displayName = 'DataProvidersGroup';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/events.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/events.ts
index f894ac4e73939..8ab3a71604bf1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/events.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/events.ts
@@ -7,33 +7,8 @@
 import { ColumnHeaderOptions } from '../../../timelines/store/timeline/model';
 import { ColumnId } from './body/column_id';
 import { SortDirection } from './body/sort';
-import { DataProvider, DataProviderType, QueryOperator } from './data_providers/data_provider';
+import { DataProvider, QueryOperator } from './data_providers/data_provider';
 
-/** Invoked when a user clicks the close button to remove a data provider */
-export type OnDataProviderRemoved = (providerId: string, andProviderId?: string) => void;
-
-/** Invoked when a user temporarily disables or re-enables a data provider */
-export type OnToggleDataProviderEnabled = (toggled: {
-  providerId: string;
-  enabled: boolean;
-  andProviderId?: string;
-}) => void;
-
-/** Invoked when a user toggles negation ("boolean NOT") of a data provider */
-export type OnToggleDataProviderExcluded = (excluded: {
-  providerId: string;
-  excluded: boolean;
-  andProviderId?: string;
-}) => void;
-
-/** Invoked when a user toggles type (can "default" or "template") of a data provider */
-export type OnToggleDataProviderType = (type: {
-  providerId: string;
-  type: DataProviderType;
-  andProviderId?: string;
-}) => void;
-
-/** Invoked when a user edits the properties of a data provider */
 export type OnDataProviderEdited = ({
   andProviderId,
   excluded,
@@ -54,9 +29,6 @@ export type OnDataProviderEdited = ({
   type: DataProvider['type'];
 }) => void;
 
-/** Invoked when a user change the kql query of our data provider */
-export type OnChangeDataProviderKqlQuery = (edit: { providerId: string; kqlQuery: string }) => void;
-
 /** Invoked when a user selects a new minimap time range */
 export type OnRangeSelected = (range: string) => void;
 
@@ -76,8 +48,6 @@ export type OnChangeItemsPerPage = (itemsPerPage: number) => void;
 /** Invoked when a user clicks to load more item */
 export type OnChangePage = (nextPage: number) => void;
 
-export type OnChangeDroppableAndProvider = (providerId: string) => void;
-
 /** Invoked when a user pins an event */
 export type OnPinEvent = (eventId: string) => void;
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
index f81934f9a1d91..5b14edf818fdc 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/__snapshots__/index.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`Footer Timeline Component rendering it renders the default timeline foo
         data-test-subj="paging-control"
         isLoading={false}
         onPageClick={[Function]}
-        totalPages={2}
+        totalPages={5}
       />
     </EuiFlexItem>
     <EuiFlexItem
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx
index f823b717e7f4c..8ce109409c5fd 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.test.tsx
@@ -15,8 +15,9 @@ describe('Footer Timeline Component', () => {
   const loadMore = jest.fn();
   const onChangeItemsPerPage = jest.fn();
   const updatedAt = 1546878704036;
-  const totalCount = 15546;
+  const serverSideEventCount = 15546;
   const itemsCount = 2;
+  const totalCount = 10;
 
   describe('rendering', () => {
     test('it renders the default timeline footer', () => {
@@ -33,8 +34,8 @@ describe('Footer Timeline Component', () => {
           itemsPerPageOptions={[1, 5, 10, 20]}
           onChangeItemsPerPage={onChangeItemsPerPage}
           onChangePage={loadMore}
-          serverSideEventCount={totalCount}
-          totalPages={2}
+          serverSideEventCount={serverSideEventCount}
+          totalCount={totalCount}
         />
       );
 
@@ -55,8 +56,8 @@ describe('Footer Timeline Component', () => {
           itemsPerPageOptions={[1, 5, 10, 20]}
           onChangeItemsPerPage={onChangeItemsPerPage}
           onChangePage={loadMore}
-          serverSideEventCount={totalCount}
-          totalPages={2}
+          serverSideEventCount={serverSideEventCount}
+          totalCount={totalCount}
         />
       );
 
@@ -78,8 +79,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
@@ -129,8 +130,8 @@ describe('Footer Timeline Component', () => {
           itemsPerPageOptions={[1, 5, 10, 20]}
           onChangeItemsPerPage={onChangeItemsPerPage}
           onChangePage={loadMore}
-          serverSideEventCount={totalCount}
-          totalPages={2}
+          serverSideEventCount={serverSideEventCount}
+          totalCount={totalCount}
         />
       );
 
@@ -152,8 +153,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
@@ -179,8 +180,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
@@ -204,8 +205,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
@@ -231,8 +232,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
@@ -256,8 +257,8 @@ describe('Footer Timeline Component', () => {
             itemsPerPageOptions={[1, 5, 10, 20]}
             onChangeItemsPerPage={onChangeItemsPerPage}
             onChangePage={loadMore}
-            serverSideEventCount={totalCount}
-            totalPages={2}
+            serverSideEventCount={serverSideEventCount}
+            totalCount={totalCount}
           />
         </TestProviders>
       );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
index 7174e9b2121e5..7c10168da3c62 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
@@ -174,30 +174,36 @@ export const EventsCount = React.memo(EventsCountComponent);
 
 EventsCount.displayName = 'EventsCount';
 
-export const PagingControlComponent = ({
-  activePage,
-  isLoading,
-  onPageClick,
-  totalPages,
-}: {
+interface PagingControlProps {
   activePage: number;
   isLoading: boolean;
   onPageClick: OnChangePage;
   totalPages: number;
-}) => (
-  <>
-    {isLoading ? (
-      `${i18n.LOADING}...`
-    ) : (
-      <EuiPagination
-        data-test-subj="timeline-pagination"
-        pageCount={totalPages}
-        activePage={activePage}
-        onPageClick={onPageClick}
-      />
-    )}
-  </>
-);
+}
+
+export const PagingControlComponent: React.FC<PagingControlProps> = ({
+  activePage,
+  isLoading,
+  onPageClick,
+  totalPages,
+}) => {
+  if (isLoading) {
+    return <>{`${i18n.LOADING}...`}</>;
+  }
+
+  if (!totalPages) {
+    return null;
+  }
+
+  return (
+    <EuiPagination
+      data-test-subj="timeline-pagination"
+      pageCount={totalPages}
+      activePage={activePage}
+      onPageClick={onPageClick}
+    />
+  );
+};
 
 PagingControlComponent.displayName = 'PagingControlComponent';
 
@@ -217,7 +223,7 @@ interface FooterProps {
   onChangeItemsPerPage: OnChangeItemsPerPage;
   onChangePage: OnChangePage;
   serverSideEventCount: number;
-  totalPages: number;
+  totalCount: number;
 }
 
 /** Renders a loading indicator and paging controls */
@@ -234,7 +240,7 @@ export const FooterComponent = ({
   onChangeItemsPerPage,
   onChangePage,
   serverSideEventCount,
-  totalPages,
+  totalCount,
 }: FooterProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [paginationLoading, setPaginationLoading] = useState(false);
@@ -259,6 +265,30 @@ export const FooterComponent = ({
   ]);
   const closePopover = useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
 
+  const rowItems = useMemo(
+    () =>
+      itemsPerPageOptions &&
+      itemsPerPageOptions.map((item) => (
+        <EuiContextMenuItem
+          key={item}
+          icon={itemsPerPage === item ? 'check' : 'empty'}
+          data-test-subj={`items-per-page-option-${item}`}
+          onClick={() => {
+            closePopover();
+            onChangeItemsPerPage(item);
+          }}
+        >
+          {`${item} ${i18n.ROWS}`}
+        </EuiContextMenuItem>
+      )),
+    [closePopover, itemsPerPage, itemsPerPageOptions, onChangeItemsPerPage]
+  );
+
+  const totalPages = useMemo(() => Math.ceil(totalCount / itemsPerPage), [
+    itemsPerPage,
+    totalCount,
+  ]);
+
   useEffect(() => {
     if (paginationLoading && !isLoading) {
       setPaginationLoading(false);
@@ -279,22 +309,6 @@ export const FooterComponent = ({
     );
   }
 
-  const rowItems =
-    itemsPerPageOptions &&
-    itemsPerPageOptions.map((item) => (
-      <EuiContextMenuItem
-        key={item}
-        icon={itemsPerPage === item ? 'check' : 'empty'}
-        data-test-subj={`items-per-page-option-${item}`}
-        onClick={() => {
-          closePopover();
-          onChangeItemsPerPage(item);
-        }}
-      >
-        {`${item} ${i18n.ROWS}`}
-      </EuiContextMenuItem>
-    ));
-
   return (
     <FooterContainer
       data-test-subj="timeline-footer"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap
index f94c30c5a102d..66758268fb39e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/__snapshots__/index.test.tsx.snap
@@ -138,11 +138,6 @@ exports[`Header rendering renders correctly against snapshot 1`] = `
         },
       ]
     }
-    onDataProviderEdited={[MockFunction]}
-    onDataProviderRemoved={[MockFunction]}
-    onToggleDataProviderEnabled={[MockFunction]}
-    onToggleDataProviderExcluded={[MockFunction]}
-    onToggleDataProviderType={[MockFunction]}
     timelineId="foo"
   />
   <Connect(StatefulSearchOrFilterComponent)
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
index e50a6ed1e45fe..22d28737e5d61 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/header/index.tsx
@@ -11,13 +11,6 @@ import deepEqual from 'fast-deep-equal';
 
 import { DataProviders } from '../data_providers';
 import { DataProvider } from '../data_providers/data_provider';
-import {
-  OnDataProviderEdited,
-  OnDataProviderRemoved,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-  OnToggleDataProviderType,
-} from '../events';
 import { StatefulSearchOrFilter } from '../search_or_filter';
 import { BrowserFields } from '../../../../common/containers/source';
 
@@ -33,11 +26,6 @@ interface Props {
   filterManager: FilterManager;
   graphEventId?: string;
   indexPattern: IIndexPattern;
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  onToggleDataProviderType: OnToggleDataProviderType;
   show: boolean;
   showCallOutUnauthorizedMsg: boolean;
   status: TimelineStatusLiteralWithNull;
@@ -50,11 +38,6 @@ const TimelineHeaderComponent: React.FC<Props> = ({
   dataProviders,
   filterManager,
   graphEventId,
-  onDataProviderEdited,
-  onDataProviderRemoved,
-  onToggleDataProviderEnabled,
-  onToggleDataProviderExcluded,
-  onToggleDataProviderType,
   show,
   showCallOutUnauthorizedMsg,
   status,
@@ -85,11 +68,6 @@ const TimelineHeaderComponent: React.FC<Props> = ({
           browserFields={browserFields}
           timelineId={timelineId}
           dataProviders={dataProviders}
-          onDataProviderEdited={onDataProviderEdited}
-          onDataProviderRemoved={onDataProviderRemoved}
-          onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-          onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-          onToggleDataProviderType={onToggleDataProviderType}
         />
 
         <StatefulSearchOrFilter
@@ -111,11 +89,6 @@ export const TimelineHeader = React.memo(
     deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
     prevProps.filterManager === nextProps.filterManager &&
     prevProps.graphEventId === nextProps.graphEventId &&
-    prevProps.onDataProviderEdited === nextProps.onDataProviderEdited &&
-    prevProps.onDataProviderRemoved === nextProps.onDataProviderRemoved &&
-    prevProps.onToggleDataProviderEnabled === nextProps.onToggleDataProviderEnabled &&
-    prevProps.onToggleDataProviderExcluded === nextProps.onToggleDataProviderExcluded &&
-    prevProps.onToggleDataProviderType === nextProps.onToggleDataProviderType &&
     prevProps.show === nextProps.show &&
     prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
     prevProps.status === nextProps.status &&
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
index ccdb0793bc03f..0c7b1e0cdecd5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -14,14 +14,7 @@ import { timelineActions, timelineSelectors } from '../../store/timeline';
 import { ColumnHeaderOptions, TimelineModel } from '../../../timelines/store/timeline/model';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 import { defaultHeaders } from './body/column_headers/default_headers';
-import {
-  OnChangeItemsPerPage,
-  OnDataProviderRemoved,
-  OnDataProviderEdited,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-  OnToggleDataProviderType,
-} from './events';
+import { OnChangeItemsPerPage } from './events';
 import { Timeline } from './timeline';
 import { useSourcererScope } from '../../../common/containers/sourcerer';
 import { SourcererScopeName } from '../../../common/store/sourcerer/model';
@@ -51,18 +44,13 @@ const StatefulTimelineComponent = React.memo<Props>(
     kqlMode,
     kqlQueryExpression,
     onClose,
-    onDataProviderEdited,
     removeColumn,
-    removeProvider,
     show,
     showCallOutUnauthorizedMsg,
     sort,
     start,
     status,
     timelineType,
-    updateDataProviderEnabled,
-    updateDataProviderExcluded,
-    updateDataProviderType,
     updateItemsPerPage,
     upsertColumn,
     usersViewing,
@@ -75,59 +63,6 @@ const StatefulTimelineComponent = React.memo<Props>(
       selectedPatterns,
     } = useSourcererScope(SourcererScopeName.timeline);
 
-    const onDataProviderRemoved: OnDataProviderRemoved = useCallback(
-      (providerId: string, andProviderId?: string) =>
-        removeProvider!({ id, providerId, andProviderId }),
-      [id, removeProvider]
-    );
-
-    const onToggleDataProviderEnabled: OnToggleDataProviderEnabled = useCallback(
-      ({ providerId, enabled, andProviderId }) =>
-        updateDataProviderEnabled!({
-          id,
-          enabled,
-          providerId,
-          andProviderId,
-        }),
-      [id, updateDataProviderEnabled]
-    );
-
-    const onToggleDataProviderExcluded: OnToggleDataProviderExcluded = useCallback(
-      ({ providerId, excluded, andProviderId }) =>
-        updateDataProviderExcluded!({
-          id,
-          excluded,
-          providerId,
-          andProviderId,
-        }),
-      [id, updateDataProviderExcluded]
-    );
-
-    const onToggleDataProviderType: OnToggleDataProviderType = useCallback(
-      ({ providerId, type, andProviderId }) =>
-        updateDataProviderType!({
-          id,
-          type,
-          providerId,
-          andProviderId,
-        }),
-      [id, updateDataProviderType]
-    );
-
-    const onDataProviderEditedLocal: OnDataProviderEdited = useCallback(
-      ({ andProviderId, excluded, field, operator, providerId, value }) =>
-        onDataProviderEdited!({
-          andProviderId,
-          excluded,
-          field,
-          id,
-          operator,
-          providerId,
-          value,
-        }),
-      [id, onDataProviderEdited]
-    );
-
     const onChangeItemsPerPage: OnChangeItemsPerPage = useCallback(
       (itemsChangedPerPage) => updateItemsPerPage!({ id, itemsPerPage: itemsChangedPerPage }),
       [id, updateItemsPerPage]
@@ -183,11 +118,6 @@ const StatefulTimelineComponent = React.memo<Props>(
         loadingSourcerer={loading}
         onChangeItemsPerPage={onChangeItemsPerPage}
         onClose={onClose}
-        onDataProviderEdited={onDataProviderEditedLocal}
-        onDataProviderRemoved={onDataProviderRemoved}
-        onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-        onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-        onToggleDataProviderType={onToggleDataProviderType}
         show={show!}
         showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
         sort={sort!}
@@ -287,14 +217,8 @@ const makeMapStateToProps = () => {
 const mapDispatchToProps = {
   addProvider: timelineActions.addProvider,
   createTimeline: timelineActions.createTimeline,
-  onDataProviderEdited: timelineActions.dataProviderEdited,
   removeColumn: timelineActions.removeColumn,
-  removeProvider: timelineActions.removeProvider,
   updateColumns: timelineActions.updateColumns,
-  updateDataProviderEnabled: timelineActions.updateDataProviderEnabled,
-  updateDataProviderExcluded: timelineActions.updateDataProviderExcluded,
-  updateDataProviderKqlQuery: timelineActions.updateDataProviderKqlQuery,
-  updateDataProviderType: timelineActions.updateDataProviderType,
   updateHighlightedDropAndProviderId: timelineActions.updateHighlightedDropAndProviderId,
   updateItemsPerPage: timelineActions.updateItemsPerPage,
   updateItemsPerPageOptions: timelineActions.updateItemsPerPageOptions,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
index 43ab8ab203e11..a28f4240d3a2f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.tsx
@@ -73,23 +73,31 @@ export const StarIcon = React.memo<{
   isFavorite: boolean;
   timelineId: string;
   updateIsFavorite: UpdateIsFavorite;
-}>(({ isFavorite, timelineId: id, updateIsFavorite }) => (
-  // TODO: 1 error is: Visible, non-interactive elements with click handlers must have at least one keyboard listener
-  // TODO: 2 error is: Elements with the 'button' interactive role must be focusable
-  // TODO: Investigate this error
-  // eslint-disable-next-line
-  <div role="button" onClick={() => updateIsFavorite({ id, isFavorite: !isFavorite })}>
-    {isFavorite ? (
-      <EuiToolTip data-test-subj="timeline-favorite-filled-star-tool-tip" content={i18n.FAVORITE}>
-        <StyledStar data-test-subj="timeline-favorite-filled-star" type="starFilled" size="l" />
-      </EuiToolTip>
-    ) : (
-      <EuiToolTip content={i18n.NOT_A_FAVORITE}>
-        <StyledStar data-test-subj="timeline-favorite-empty-star" type="starEmpty" size="l" />
-      </EuiToolTip>
-    )}
-  </div>
-));
+}>(({ isFavorite, timelineId: id, updateIsFavorite }) => {
+  const handleClick = useCallback(() => updateIsFavorite({ id, isFavorite: !isFavorite }), [
+    id,
+    isFavorite,
+    updateIsFavorite,
+  ]);
+
+  return (
+    // TODO: 1 error is: Visible, non-interactive elements with click handlers must have at least one keyboard listener
+    // TODO: 2 error is: Elements with the 'button' interactive role must be focusable
+    // TODO: Investigate this error
+    // eslint-disable-next-line
+  <div role="button" onClick={handleClick}>
+      {isFavorite ? (
+        <EuiToolTip data-test-subj="timeline-favorite-filled-star-tool-tip" content={i18n.FAVORITE}>
+          <StyledStar data-test-subj="timeline-favorite-filled-star" type="starFilled" size="l" />
+        </EuiToolTip>
+      ) : (
+        <EuiToolTip content={i18n.NOT_A_FAVORITE}>
+          <StyledStar data-test-subj="timeline-favorite-empty-star" type="starEmpty" size="l" />
+        </EuiToolTip>
+      )}
+    </div>
+  );
+});
 StarIcon.displayName = 'StarIcon';
 
 interface DescriptionProps {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
index bde1e7bf5829a..630a71693d182 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.test.tsx
@@ -19,11 +19,6 @@ import {
 import '../../../common/mock/match_media';
 import { TestProviders } from '../../../common/mock/test_providers';
 
-import {
-  DELETE_CLASS_NAME,
-  ENABLE_CLASS_NAME,
-  EXCLUDE_CLASS_NAME,
-} from './data_providers/provider_item_actions';
 import { TimelineComponent, Props as TimelineComponentProps } from './timeline';
 import { Sort } from './body/sort';
 import { mockDataProviders } from './data_providers/mock/mock_data_providers';
@@ -115,11 +110,6 @@ describe('Timeline', () => {
       loadingSourcerer: false,
       onChangeItemsPerPage: jest.fn(),
       onClose: jest.fn(),
-      onDataProviderEdited: jest.fn(),
-      onDataProviderRemoved: jest.fn(),
-      onToggleDataProviderEnabled: jest.fn(),
-      onToggleDataProviderExcluded: jest.fn(),
-      onToggleDataProviderType: jest.fn(),
       show: true,
       showCallOutUnauthorizedMsg: false,
       sort,
@@ -238,204 +228,4 @@ describe('Timeline', () => {
       });
     });
   });
-
-  describe('event wire up', () => {
-    describe('onDataProviderRemoved', () => {
-      test('it invokes the onDataProviderRemoved callback when the delete button on a provider is clicked', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} />
-          </TestProviders>
-        );
-
-        wrapper
-          .find('[data-test-subj="providerBadge"] [data-euiicon-type]')
-          .first()
-          .simulate('click');
-
-        expect((props.onDataProviderRemoved as jest.Mock).mock.calls[0][0]).toEqual(
-          'id-Provider 1'
-        );
-      });
-
-      test('it invokes the onDataProviderRemoved callback when you click on the option "Delete" in the provider menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} />
-          </TestProviders>
-        );
-        wrapper.find('button[data-test-subj="providerBadge"]').first().simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${DELETE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onDataProviderRemoved as jest.Mock).mock.calls[0][0]).toEqual(
-          'id-Provider 1'
-        );
-      });
-    });
-
-    describe('onToggleDataProviderEnabled', () => {
-      test('it invokes the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the provider menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} />
-          </TestProviders>
-        );
-
-        wrapper.find('button[data-test-subj="providerBadge"]').first().simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${ENABLE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onToggleDataProviderEnabled as jest.Mock).mock.calls[0][0]).toEqual({
-          providerId: 'id-Provider 1',
-          enabled: false,
-        });
-      });
-    });
-
-    describe('onToggleDataProviderExcluded', () => {
-      test('it invokes the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the provider menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} />
-          </TestProviders>
-        );
-
-        wrapper
-          .find('[data-test-subj="providerBadge"]')
-          .first()
-          .find('button')
-          .first()
-          .simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${EXCLUDE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onToggleDataProviderExcluded as jest.Mock).mock.calls[0][0]).toEqual({
-          providerId: 'id-Provider 1',
-          excluded: true,
-        });
-      });
-    });
-
-    describe('#ProviderWithAndProvider', () => {
-      const dataProviders = mockDataProviders.slice(0, 1);
-      dataProviders[0].and = mockDataProviders.slice(1, 3);
-
-      test('Rendering And Provider', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} dataProviders={dataProviders} />
-          </TestProviders>
-        );
-
-        const andProviderBadges = wrapper.find(
-          '[data-test-subj="providerBadge"] .euiBadge__content span.field-value'
-        );
-
-        const andProviderBadgesText = andProviderBadges.map((node) => node.text()).join(' ');
-        expect(andProviderBadges.length).toEqual(3);
-        expect(andProviderBadgesText).toEqual(
-          'name: "Provider 1" name: "Provider 2" name: "Provider 3"'
-        );
-      });
-
-      test('it invokes the onDataProviderRemoved callback when you click on the option "Delete" in the accordion menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} dataProviders={dataProviders} />
-          </TestProviders>
-        );
-
-        wrapper
-          .find('[data-test-subj="providerBadge"]')
-          .at(3)
-          .find('button')
-          .first()
-          .simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${DELETE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onDataProviderRemoved as jest.Mock).mock.calls[0]).toEqual([
-          'id-Provider 1',
-          'id-Provider 2',
-        ]);
-      });
-
-      test('it invokes the onToggleDataProviderEnabled callback when you click on the option "Temporary disable" in the accordion menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} dataProviders={dataProviders} />
-          </TestProviders>
-        );
-
-        wrapper
-          .find('[data-test-subj="providerBadge"]')
-          .at(3)
-          .find('button')
-          .first()
-          .simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${ENABLE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onToggleDataProviderEnabled as jest.Mock).mock.calls[0][0]).toEqual({
-          andProviderId: 'id-Provider 2',
-          enabled: false,
-          providerId: 'id-Provider 1',
-        });
-      });
-
-      test('it invokes the onToggleDataProviderExcluded callback when you click on the option "Exclude results" in the accordion menu', () => {
-        const wrapper = mount(
-          <TestProviders>
-            <TimelineComponent {...props} dataProviders={dataProviders} />
-          </TestProviders>
-        );
-
-        wrapper
-          .find('[data-test-subj="providerBadge"]')
-          .at(3)
-          .find('button')
-          .first()
-          .simulate('click');
-
-        wrapper.update();
-
-        wrapper
-          .find(`[data-test-subj="providerActions"] .${EXCLUDE_CLASS_NAME}`)
-          .first()
-          .simulate('click');
-
-        expect((props.onToggleDataProviderExcluded as jest.Mock).mock.calls[0][0]).toEqual({
-          andProviderId: 'id-Provider 2',
-          excluded: true,
-          providerId: 'id-Provider 1',
-        });
-      });
-    });
-  });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
index d1a25e6f3e1a4..1097d58b227a8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/timeline.tsx
@@ -19,14 +19,7 @@ import { defaultHeaders } from './body/column_headers/default_headers';
 import { Sort } from './body/sort';
 import { StatefulBody } from './body/stateful_body';
 import { DataProvider } from './data_providers/data_provider';
-import {
-  OnChangeItemsPerPage,
-  OnDataProviderRemoved,
-  OnDataProviderEdited,
-  OnToggleDataProviderEnabled,
-  OnToggleDataProviderExcluded,
-  OnToggleDataProviderType,
-} from './events';
+import { OnChangeItemsPerPage } from './events';
 import { TimelineKqlFetch } from './fetch_kql_timeline';
 import { Footer, footerHeight } from './footer';
 import { TimelineHeader } from './header';
@@ -113,11 +106,6 @@ export interface Props {
   loadingSourcerer: boolean;
   onChangeItemsPerPage: OnChangeItemsPerPage;
   onClose: () => void;
-  onDataProviderEdited: OnDataProviderEdited;
-  onDataProviderRemoved: OnDataProviderRemoved;
-  onToggleDataProviderEnabled: OnToggleDataProviderEnabled;
-  onToggleDataProviderExcluded: OnToggleDataProviderExcluded;
-  onToggleDataProviderType: OnToggleDataProviderType;
   show: boolean;
   showCallOutUnauthorizedMsg: boolean;
   sort: Sort;
@@ -149,11 +137,6 @@ export const TimelineComponent: React.FC<Props> = ({
   kqlQueryExpression,
   onChangeItemsPerPage,
   onClose,
-  onDataProviderEdited,
-  onDataProviderRemoved,
-  onToggleDataProviderEnabled,
-  onToggleDataProviderExcluded,
-  onToggleDataProviderType,
   show,
   showCallOutUnauthorizedMsg,
   start,
@@ -270,11 +253,6 @@ export const TimelineComponent: React.FC<Props> = ({
             dataProviders={dataProviders}
             filterManager={filterManager}
             graphEventId={graphEventId}
-            onDataProviderEdited={onDataProviderEdited}
-            onDataProviderRemoved={onDataProviderRemoved}
-            onToggleDataProviderEnabled={onToggleDataProviderEnabled}
-            onToggleDataProviderExcluded={onToggleDataProviderExcluded}
-            onToggleDataProviderType={onToggleDataProviderType}
             show={show}
             showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
             timelineId={id}
@@ -324,7 +302,7 @@ export const TimelineComponent: React.FC<Props> = ({
                   onChangeItemsPerPage={onChangeItemsPerPage}
                   onChangePage={loadPage}
                   serverSideEventCount={totalCount}
-                  totalPages={pageInfo.totalPages}
+                  totalCount={pageInfo.fakeTotalCount}
                 />
               </StyledEuiFlyoutFooter>
             )
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
index 54db52b985c31..53944fd29a687 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
@@ -15,11 +15,13 @@ import { inputsModel } from '../../common/store';
 import { useKibana } from '../../common/lib/kibana';
 import { createFilter } from '../../common/containers/helpers';
 import { DocValueFields } from '../../common/containers/query_template';
+import { generateTablePaginationOptions } from '../../common/components/paginated_table/helpers';
 import { timelineActions } from '../../timelines/store/timeline';
 import { detectionsTimelineIds, skipQueryForDetectionsPage } from './helpers';
 import { getInspectResponse } from '../../helpers';
 import {
   Direction,
+  PageInfoPaginated,
   TimelineEventsQueries,
   TimelineEventsAllStrategyResponse,
   TimelineEventsAllRequestOptions,
@@ -35,10 +37,7 @@ export interface TimelineArgs {
   id: string;
   inspect: InspectResponse;
   loadPage: LoadPage;
-  pageInfo: {
-    activePage: number;
-    totalPages: number;
-  };
+  pageInfo: PageInfoPaginated;
   refetch: inputsModel.Refetch;
   totalCount: number;
   updatedAt: number;
@@ -97,10 +96,7 @@ export const useTimelineEvents = ({
             from: startDate,
             to: endDate,
           },
-          pagination: {
-            activePage,
-            querySize: limit,
-          },
+          pagination: generateTablePaginationOptions(activePage, limit),
           sort,
           defaultIndex: indexNames,
           docValueFields: docValueFields ?? [],
@@ -134,7 +130,8 @@ export const useTimelineEvents = ({
     totalCount: -1,
     pageInfo: {
       activePage: 0,
-      totalPages: 0,
+      fakeTotalCount: 0,
+      showMorePagesIndicator: false,
     },
     events: [],
     loadPage: wrappedLoadPage,
@@ -218,10 +215,7 @@ export const useTimelineEvents = ({
         defaultIndex: indexNames,
         docValueFields: docValueFields ?? [],
         filterQuery: createFilter(filterQuery),
-        pagination: {
-          activePage,
-          querySize: limit,
-        },
+        pagination: generateTablePaginationOptions(activePage, limit),
         timerange: {
           interval: '12h',
           from: startDate,
diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
index 1f79b26394a69..1992b1f88f064 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
@@ -96,11 +96,6 @@ describe('epicLocalStorage', () => {
       loadingSourcerer: false,
       onChangeItemsPerPage: jest.fn(),
       onClose: jest.fn(),
-      onDataProviderEdited: jest.fn(),
-      onDataProviderRemoved: jest.fn(),
-      onToggleDataProviderEnabled: jest.fn(),
-      onToggleDataProviderExcluded: jest.fn(),
-      onToggleDataProviderType: jest.fn(),
       show: true,
       showCallOutUnauthorizedMsg: false,
       start: startDate,
diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts
index fc178df86362b..30d0796443ab5 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/helpers.ts
@@ -1209,17 +1209,20 @@ export const updateTimelinePerPageOptions = ({
 
 const removeAndProvider = (andProviderId: string, providerId: string, timeline: TimelineModel) => {
   const providerIndex = timeline.dataProviders.findIndex((p) => p.id === providerId);
-  const providerAndIndex = timeline.dataProviders[providerIndex].and.findIndex(
+  const providerAndIndex = timeline.dataProviders[providerIndex]?.and.findIndex(
     (p) => p.id === andProviderId
   );
+
   return [
     ...timeline.dataProviders.slice(0, providerIndex),
     {
       ...timeline.dataProviders[providerIndex],
-      and: [
-        ...timeline.dataProviders[providerIndex].and.slice(0, providerAndIndex),
-        ...timeline.dataProviders[providerIndex].and.slice(providerAndIndex + 1),
-      ],
+      and: timeline.dataProviders[providerIndex]?.and
+        ? [
+            ...timeline.dataProviders[providerIndex]?.and.slice(0, providerAndIndex),
+            ...timeline.dataProviders[providerIndex]?.and.slice(providerAndIndex + 1),
+          ]
+        : [],
     },
     ...timeline.dataProviders.slice(providerIndex + 1),
   ];
@@ -1229,7 +1232,7 @@ const removeProvider = (providerId: string, timeline: TimelineModel) => {
   const providerIndex = timeline.dataProviders.findIndex((p) => p.id === providerId);
   return [
     ...timeline.dataProviders.slice(0, providerIndex),
-    ...(timeline.dataProviders[providerIndex].and.length
+    ...(timeline.dataProviders[providerIndex]?.and.length
       ? [
           {
             ...timeline.dataProviders[providerIndex].and.slice(0, 1)[0],
diff --git a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/all/index.ts b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/all/index.ts
index 12729eb88a666..6b28fc2598d41 100644
--- a/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/all/index.ts
+++ b/x-pack/plugins/security_solution/server/search_strategy/timeline/factory/events/all/index.ts
@@ -42,17 +42,19 @@ export const timelineEventsAll: SecuritySolutionTimelineFactory<TimelineEventsQu
       ...fieldRequested,
       ...reduceFields(TIMELINE_EVENTS_FIELDS, eventFieldsMap),
     ]);
-    const { activePage, querySize } = options.pagination;
+    const { activePage, cursorStart, fakePossibleCount, querySize } = options.pagination;
 
     const totalCount = getOr(0, 'hits.total.value', response.rawResponse);
     const hits = response.rawResponse.hits.hits;
-    const edges: TimelineEdges[] = hits.map((hit) =>
+    const edges: TimelineEdges[] = hits.splice(cursorStart, querySize - cursorStart).map((hit) =>
       // @ts-expect-error
       formatTimelineData(options.fieldRequested, TIMELINE_EVENTS_FIELDS, hit, eventFieldsMap)
     );
     const inspect = {
       dsl: [inspectStringifyObject(buildTimelineEventsAllQuery(queryOptions))],
     };
+    const fakeTotalCount = fakePossibleCount <= totalCount ? fakePossibleCount : totalCount;
+    const showMorePagesIndicator = totalCount > fakeTotalCount;
 
     return {
       ...response,
@@ -61,7 +63,8 @@ export const timelineEventsAll: SecuritySolutionTimelineFactory<TimelineEventsQu
       totalCount,
       pageInfo: {
         activePage: activePage ?? 0,
-        totalPages: Math.ceil(totalCount / querySize),
+        fakeTotalCount,
+        showMorePagesIndicator,
       },
     };
   },