diff --git a/docs/management/field-formatters/url-formatter.asciidoc b/docs/management/field-formatters/url-formatter.asciidoc
index 2cbade4431202..41d4f75603dc6 100644
--- a/docs/management/field-formatters/url-formatter.asciidoc
+++ b/docs/management/field-formatters/url-formatter.asciidoc
@@ -4,6 +4,8 @@ The `Url` field formatter can take on the following types:
 * The *Image* type can be used to specify an image directory where a specified image is located.
 * The *Audio* type can be used to specify an audio directory where a specified audio file is located.
 
+For an *Image* type you can specify width and height attributes. These will be used to set the max width / max height of the image, while keeping the aspect ratio. Image will not be upscaled if it's smaller than the provided size parameters.
+
 You can customize either type of URL field formats with templates. A _URL template_ enables you to add specific values
 to a partial URL. Use the string `{{value}}` to add the contents of the field to a fixed URL.
 
diff --git a/docs/maps/connect-to-ems.asciidoc b/docs/maps/connect-to-ems.asciidoc
index c983fa2cfe4ba..37fbc6d78c8e4 100644
--- a/docs/maps/connect-to-ems.asciidoc
+++ b/docs/maps/connect-to-ems.asciidoc
@@ -13,11 +13,20 @@ EMS requests are made to the following domains:
 * vector.maps.elastic.co
 
 **Elastic Maps** makes requests directly from the browser to EMS.
-To proxy EMS requests through the Kibana server, set `map.proxyElasticMapsServiceInMaps` to `true` in your <<settings, kibana.yml>> file.
+
+[float]
+=== Connect to Elastic Maps Service from an internal network
+
+To connect to EMS when your Kibana server and browser are in an internal network:
+
+. Set `map.proxyElasticMapsServiceInMaps` to `true` in your <<settings, kibana.yml>> file to proxy EMS requests through the Kibana server.
+. Update your firewall rules to whitelist connections from your Kibana server to the EMS domains listed above.
+
+NOTE: Coordinate map  and region map visualizations do not support `map.proxyElasticMapsServiceInMaps` and will not proxy EMS requests through the Kibana server.
 
 
 [float]
-=== Disabling Elastic Maps Service
+=== Disable Elastic Maps Service
 
 You might experience EMS connection issues if your Kibana server or browser are on a private network or
 behind a firewall. If this happens, you can disable the EMS connection to avoid unnecessary EMS requests.
diff --git a/docs/visualize/most-frequent.asciidoc b/docs/visualize/most-frequent.asciidoc
index 7452f1c4c3d7e..e9085d18185ec 100644
--- a/docs/visualize/most-frequent.asciidoc
+++ b/docs/visualize/most-frequent.asciidoc
@@ -7,20 +7,19 @@ levels of {es} {ref}/search-aggregations-bucket.html[bucket] aggregations.
 
 The most frequently used visualizations include:
 
-* Line, Area and Bar charts
+* Line, area, and bar charts
 * Pie charts
-* Data table
-* Metric visualization
-* Goal and Gauge visualization
+* Data tables
+* Metric, goals, and gauges
 * Heat maps
-* Tag cloud
+* Tag clouds
 
 [float]
 === Configure your visualization
 
-You configure visualizations using the default editor, which is broken into *Metrics* and *Buckets*, and includes a default count
+You configure visualizations using the default editor, which is broken into metrics and buckets, and includes a default count
 metric. Each visualization supports different configurations for what the metrics and buckets
-represent. For example, a Bar chart allows you to add an X-axis:
+represent. For example, a bar chart allows you to add an X-axis:
 
 [role="screenshot"]
 image::images/add-bucket.png["",height=478]
diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
index 79acc189b6a29..e5a723a99eafd 100644
--- a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
+++ b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable.ts
@@ -313,7 +313,6 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
 
     div.setAttribute('data-test-subj', 'visualizationLoader');
     div.setAttribute('data-shared-item', '');
-    div.setAttribute('data-shared-item-container', '');
     div.setAttribute('data-rendering-count', '0');
     div.setAttribute('data-render-complete', 'false');
 
diff --git a/src/legacy/ui/public/vis/editors/default/default.html b/src/legacy/ui/public/vis/editors/default/default.html
index 2a759815f57f2..60fcbafdb88f5 100644
--- a/src/legacy/ui/public/vis/editors/default/default.html
+++ b/src/legacy/ui/public/vis/editors/default/default.html
@@ -11,6 +11,7 @@
 
   <div
     class="visEditor__canvas"
+    data-shared-items-container
   />
 
 </div>
diff --git a/test/functional/page_objects/common_page.ts b/test/functional/page_objects/common_page.ts
index 937f703308881..ed45b3fbe069b 100644
--- a/test/functional/page_objects/common_page.ts
+++ b/test/functional/page_objects/common_page.ts
@@ -288,7 +288,7 @@ export function CommonPageProvider({ getService, getPageObjects }: FtrProviderCo
     }
 
     async getSharedItemContainers() {
-      const cssSelector = '[data-shared-item-container]';
+      const cssSelector = '[data-shared-items-container]';
       return find.allByCssSelector(cssSelector);
     }
 
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.test.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.test.tsx
new file mode 100644
index 0000000000000..21a39e19657a1
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.test.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ServiceNodeMetrics } from '.';
+
+describe('ServiceNodeMetrics', () => {
+  describe('render', () => {
+    it('renders', () => {
+      expect(() => shallow(<ServiceNodeMetrics />)).not.toThrowError();
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
index 79874d6648d0f..3929c153ae419 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx
@@ -117,6 +117,22 @@ export function ServiceNodeMetrics() {
         </EuiCallOut>
       ) : (
         <EuiFlexGroup gutterSize="xl">
+          <EuiFlexItem grow={false}>
+            <EuiStat
+              titleSize="s"
+              description={i18n.translate(
+                'xpack.apm.serviceNodeMetrics.serviceName',
+                {
+                  defaultMessage: 'Service name'
+                }
+              )}
+              title={
+                <EuiToolTip content={serviceName}>
+                  <Truncate>{serviceName}</Truncate>
+                </EuiToolTip>
+              }
+            />
+          </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiStat
               titleSize="s"
diff --git a/x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx b/x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx
index 1916e84ef21d3..7a63406bb419a 100644
--- a/x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx
+++ b/x-pack/legacy/plugins/infra/public/pages/link_to/redirect_to_node_logs.test.tsx
@@ -34,11 +34,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct container filter', () => {
@@ -47,11 +47,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'CONTAINER_FIELD:%20CONTAINER_ID',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct pod filter', () => {
@@ -60,11 +60,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'POD_FIELD:%20POD_ID',kind:kuery)&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct position', () => {
@@ -75,11 +75,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct user-defined filter', () => {
@@ -92,11 +92,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'(HOST_FIELD:%20HOST_NAME)%20and%20(FILTER_FIELD:FILTER_VALUE)',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
+      />
+    `);
   });
 
   it('renders a redirect with the correct custom source id', () => {
@@ -107,11 +107,11 @@ describe('RedirectToNodeLogs component', () => {
     );
 
     expect(component).toMatchInlineSnapshot(`
-<Redirect
-  push={false}
-  to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
-/>
-`);
+      <Redirect
+        push={false}
+        to="/logs?logFilter=(expression:'HOST_FIELD:%20HOST_NAME',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
+      />
+    `);
   });
 });
 
diff --git a/x-pack/legacy/plugins/siem/common/constants.ts b/x-pack/legacy/plugins/siem/common/constants.ts
index 11b97738fcf52..0924b6c6eb5e6 100644
--- a/x-pack/legacy/plugins/siem/common/constants.ts
+++ b/x-pack/legacy/plugins/siem/common/constants.ts
@@ -51,3 +51,5 @@ export const DETECTION_ENGINE_INDEX_URL = `${DETECTION_ENGINE_URL}/index`;
  * Default signals index key for kibana.dev.yml
  */
 export const SIGNALS_INDEX_KEY = 'signalsIndex';
+export const DETECTION_ENGINE_SIGNALS_URL = `${DETECTION_ENGINE_URL}/signals`;
+export const DETECTION_ENGINE_SIGNALS_STATUS_URL = `${DETECTION_ENGINE_SIGNALS_URL}/status`;
diff --git a/x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx b/x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx
index 3548fb7c0e671..be449e3d422d9 100644
--- a/x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/and_or_badge/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiBadge } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import * as i18n from './translations';
@@ -39,7 +38,7 @@ export type AndOr = 'and' | 'or';
 
 /** Displays AND / OR in a round badge */
 // Ref: https://github.com/elastic/eui/issues/1655
-export const AndOrBadge = pure<{ type: AndOr }>(({ type }) => {
+export const AndOrBadge = React.memo<{ type: AndOr }>(({ type }) => {
   return (
     <RoundedBadge data-test-subj="and-or-badge" color="hollow">
       {type === 'and' ? i18n.AND : i18n.OR}
diff --git a/x-pack/legacy/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap
index 408bcac756f47..7702695520790 100644
--- a/x-pack/legacy/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/arrows/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`arrows ArrowBody renders correctly against snapshot 1`] = `
-<Component>
-  <ArrowBody
+.c0 {
+  background-color: #343741;
+  height: 3px;
+  width: 25px;
+}
+
+<ArrowBody
+  height={3}
+>
+  <span
+    className="c0"
     height={3}
   />
-</Component>
+</ArrowBody>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/arrows/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/arrows/index.test.tsx
index 8be0e7c267ec0..10d3c899562e8 100644
--- a/x-pack/legacy/plugins/siem/public/components/arrows/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/arrows/index.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 
@@ -15,12 +15,12 @@ import { ArrowBody, ArrowHead } from '.';
 describe('arrows', () => {
   describe('ArrowBody', () => {
     test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <TestProviders>
           <ArrowBody height={3} />
         </TestProviders>
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('ArrowBody'))).toMatchSnapshot();
     });
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/arrows/index.tsx b/x-pack/legacy/plugins/siem/public/components/arrows/index.tsx
index 6d5b464e0e886..dfc7645c564d2 100644
--- a/x-pack/legacy/plugins/siem/public/components/arrows/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/arrows/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiIcon } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 /** Renders the body (non-pointy part) of an arrow */
@@ -21,7 +20,7 @@ ArrowBody.displayName = 'ArrowBody';
 export type ArrowDirection = 'arrowLeft' | 'arrowRight';
 
 /** Renders the head of an arrow */
-export const ArrowHead = pure<{
+export const ArrowHead = React.memo<{
   direction: ArrowDirection;
 }>(({ direction }) => (
   <EuiIcon color="subdued" data-test-subj="arrow-icon" size="s" type={direction} />
diff --git a/x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx b/x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx
index 37ec256ccd8c0..f8db7d754aab1 100644
--- a/x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/certificate_fingerprint/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiText } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DraggableBadge } from '../draggables';
@@ -36,7 +35,7 @@ FingerprintLabel.displayName = 'FingerprintLabel';
  * 'tls.client_certificate.fingerprint.sha1'
  * 'tls.server_certificate.fingerprint.sha1'
  */
-export const CertificateFingerprint = pure<{
+export const CertificateFingerprint = React.memo<{
   eventId: string;
   certificateType: CertificateType;
   contextId: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
index 7218d7a497f19..99ad995e48852 100644
--- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-
 import {
   Chart,
   BarSeries,
@@ -63,6 +62,7 @@ export const BarChartBaseComponent = ({
     ...chartDefaultSettings,
     ...get('configs.settings', chartConfigs),
   };
+
   return chartConfigs.width && chartConfigs.height ? (
     <Chart>
       <Settings {...settings} />
@@ -116,6 +116,7 @@ export const BarChartComponent = ({
 }) => {
   const customHeight = get('customHeight', configs);
   const customWidth = get('customWidth', configs);
+
   return checkIfAnyValidSeriesExist(barChart) ? (
     <AutoSizer detectAnyWindowResize={false} content>
       {({ measureRef, content: { height, width } }) => (
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar.test.tsx.snap
index 03a04983f9f86..f082dc4023e7a 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar.test.tsx.snap
@@ -1,32 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UtilityBar it renders 1`] = `
-<Component>
-  <UtilityBar>
-    <UtilityBarSection>
-      <UtilityBarGroup>
-        <UtilityBarText>
-          Test text
-        </UtilityBarText>
-      </UtilityBarGroup>
-      <UtilityBarGroup>
-        <UtilityBarAction
-          iconType=""
-          popoverContent={[Function]}
-        >
-          Test action
-        </UtilityBarAction>
-      </UtilityBarGroup>
-    </UtilityBarSection>
-    <UtilityBarSection>
-      <UtilityBarGroup>
-        <UtilityBarAction
-          iconType="cross"
-        >
-          Test action
-        </UtilityBarAction>
-      </UtilityBarGroup>
-    </UtilityBarSection>
-  </UtilityBar>
-</Component>
+<UtilityBar>
+  <UtilityBarSection>
+    <UtilityBarGroup>
+      <UtilityBarText>
+        Test text
+      </UtilityBarText>
+    </UtilityBarGroup>
+    <UtilityBarGroup>
+      <UtilityBarAction
+        iconType=""
+        popoverContent={[Function]}
+      >
+        Test action
+      </UtilityBarAction>
+    </UtilityBarGroup>
+  </UtilityBarSection>
+  <UtilityBarSection>
+    <UtilityBarGroup>
+      <UtilityBarAction
+        iconType="cross"
+      >
+        Test action
+      </UtilityBarAction>
+    </UtilityBarGroup>
+  </UtilityBarSection>
+</UtilityBar>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
index 470b40cd1d960..eb20ac217b300 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_action.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UtilityBarAction it renders 1`] = `
-<Component>
-  <UtilityBarAction
-    iconType="alert"
-  >
-    Test action
-  </UtilityBarAction>
-</Component>
+<UtilityBarAction
+  iconType="alert"
+>
+  Test action
+</UtilityBarAction>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
index 62ff1b17dd55f..8ef7ee1cfe842 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UtilityBarGroup it renders 1`] = `
-<Component>
-  <UtilityBarGroup>
-    <UtilityBarText>
-      Test text
-    </UtilityBarText>
-  </UtilityBarGroup>
-</Component>
+<UtilityBarGroup>
+  <UtilityBarText>
+    Test text
+  </UtilityBarText>
+</UtilityBarGroup>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
index f81717c892755..2fe3b8ac5c7aa 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_section.test.tsx.snap
@@ -1,13 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UtilityBarSection it renders 1`] = `
-<Component>
-  <UtilityBarSection>
-    <UtilityBarGroup>
-      <UtilityBarText>
-        Test text
-      </UtilityBarText>
-    </UtilityBarGroup>
-  </UtilityBarSection>
-</Component>
+<UtilityBarSection>
+  <UtilityBarGroup>
+    <UtilityBarText>
+      Test text
+    </UtilityBarText>
+  </UtilityBarGroup>
+</UtilityBarSection>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
index 446b5556945d8..cf635ffa49c4c 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/__snapshots__/utility_bar_text.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UtilityBarText it renders 1`] = `
-<Component>
-  <UtilityBarText>
-    Test text
-  </UtilityBarText>
-</Component>
+<UtilityBarText>
+  Test text
+</UtilityBarText>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx
index 27688ec24530e..68522377bd847 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.test.tsx
@@ -47,7 +47,7 @@ describe('UtilityBar', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBar'))).toMatchSnapshot();
   });
 
   test('it applies border styles when border is true', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx
index f226e0e055391..524769361ea9d 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar.tsx
@@ -8,11 +8,12 @@ import React from 'react';
 
 import { Bar, BarProps } from './styles';
 
-export interface UtilityBarProps extends BarProps {
+interface UtilityBarProps extends BarProps {
   children: React.ReactNode;
 }
 
 export const UtilityBar = React.memo<UtilityBarProps>(({ border, children }) => (
   <Bar border={border}>{children}</Bar>
 ));
+
 UtilityBar.displayName = 'UtilityBar';
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx
index f71bdfda705d0..7921c1ef42200 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.test.tsx
@@ -22,7 +22,7 @@ describe('UtilityBarAction', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBarAction'))).toMatchSnapshot();
   });
 
   test('it renders a popover', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx
index 2ad48bc9b9c92..f695c33a37447 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx
@@ -37,6 +37,7 @@ const Popover = React.memo<UtilityBarActionProps>(
     );
   }
 );
+
 Popover.displayName = 'Popover';
 
 export interface UtilityBarActionProps extends LinkIconProps {
@@ -71,4 +72,5 @@ export const UtilityBarAction = React.memo<UtilityBarActionProps>(
     </BarAction>
   )
 );
+
 UtilityBarAction.displayName = 'UtilityBarAction';
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.test.tsx
index 84ad96c5a1e5e..294d27fa95b3d 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.test.tsx
@@ -24,6 +24,6 @@ describe('UtilityBarGroup', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBarGroup'))).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.tsx
index 1e23fd3498199..723035df672a9 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_group.tsx
@@ -15,4 +15,5 @@ export interface UtilityBarGroupProps {
 export const UtilityBarGroup = React.memo<UtilityBarGroupProps>(({ children }) => (
   <BarGroup>{children}</BarGroup>
 ));
+
 UtilityBarGroup.displayName = 'UtilityBarGroup';
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.test.tsx
index 2dfc1d3b8d193..e0e0acc3a71c9 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.test.tsx
@@ -26,6 +26,6 @@ describe('UtilityBarSection', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBarSection'))).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.tsx
index c457e6bc3dee0..42532c0355607 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_section.tsx
@@ -15,4 +15,5 @@ export interface UtilityBarSectionProps {
 export const UtilityBarSection = React.memo<UtilityBarSectionProps>(({ children }) => (
   <BarSection>{children}</BarSection>
 ));
+
 UtilityBarSection.displayName = 'UtilityBarSection';
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.test.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.test.tsx
index 0743e5cab02b4..29e1844bb2d4f 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.test.tsx
@@ -22,6 +22,6 @@ describe('UtilityBarText', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('UtilityBarText'))).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.tsx b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.tsx
index f8eb25f03d4ad..6195e008dbe27 100644
--- a/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_text.tsx
@@ -15,4 +15,5 @@ export interface UtilityBarTextProps {
 export const UtilityBarText = React.memo<UtilityBarTextProps>(({ children }) => (
   <BarText>{children}</BarText>
 ));
+
 UtilityBarText.displayName = 'UtilityBarText';
diff --git a/x-pack/legacy/plugins/siem/public/components/direction/index.tsx b/x-pack/legacy/plugins/siem/public/components/direction/index.tsx
index b5d6fcfc6cef7..9295e055f918d 100644
--- a/x-pack/legacy/plugins/siem/public/components/direction/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/direction/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { NetworkDirectionEcs } from '../../graphql/types';
 import { DraggableBadge } from '../draggables';
@@ -56,7 +55,7 @@ export const getDirectionIcon = (
 /**
  * Renders a badge containing the value of `network.direction`
  */
-export const DirectionBadge = pure<{
+export const DirectionBadge = React.memo<{
   contextId: string;
   direction?: string | null;
   eventId: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
index 22c7b62711795..666a8249c27d8 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
@@ -1,426 +1,419 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DragDropContextWrapper rendering it renders against the snapshot 1`] = `
-<Component>
-  <MockedProvider
-    addTypename={false}
-    mocks={Object {}}
-  >
-    <Connect(DragDropContextWrapperComponent)
-      browserFields={
-        Object {
-          "agent": Object {
-            "fields": Object {
-              "agent.ephemeral_id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                "example": "8a4f500f",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.ephemeral_id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.hostname": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.hostname",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                "example": "8a4f500d",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.name": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                "example": "foo",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.name",
-                "searchable": true,
-                "type": "string",
-              },
-            },
+<DragDropContextWrapper
+  browserFields={
+    Object {
+      "agent": Object {
+        "fields": Object {
+          "agent.ephemeral_id": Object {
+            "aggregatable": true,
+            "category": "agent",
+            "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+            "example": "8a4f500f",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "agent.ephemeral_id",
+            "searchable": true,
+            "type": "string",
           },
-          "auditd": Object {
-            "fields": Object {
-              "auditd.data.a0": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a0",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a1": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a1",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a2": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a2",
-                "searchable": true,
-                "type": "string",
-              },
-            },
+          "agent.hostname": Object {
+            "aggregatable": true,
+            "category": "agent",
+            "description": null,
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "agent.hostname",
+            "searchable": true,
+            "type": "string",
           },
-          "base": Object {
-            "fields": Object {
-              "@timestamp": Object {
-                "aggregatable": true,
-                "category": "base",
-                "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                "example": "2016-05-23T08:05:34.853Z",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "@timestamp",
-                "searchable": true,
-                "type": "date",
-              },
-            },
+          "agent.id": Object {
+            "aggregatable": true,
+            "category": "agent",
+            "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+            "example": "8a4f500d",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "agent.id",
+            "searchable": true,
+            "type": "string",
           },
-          "client": Object {
-            "fields": Object {
-              "client.address": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.bytes": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Bytes sent from the client to the server.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "client.domain": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Client domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.geo.country_iso_code": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Country ISO code.",
-                "example": "CA",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.geo.country_iso_code",
-                "searchable": true,
-                "type": "string",
-              },
-            },
+          "agent.name": Object {
+            "aggregatable": true,
+            "category": "agent",
+            "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+            "example": "foo",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "agent.name",
+            "searchable": true,
+            "type": "string",
           },
-          "cloud": Object {
-            "fields": Object {
-              "cloud.account.id": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                "example": "666777888999",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.account.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "cloud.availability_zone": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "Availability zone in which this host is running.",
-                "example": "us-east-1c",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.availability_zone",
-                "searchable": true,
-                "type": "string",
-              },
-            },
+        },
+      },
+      "auditd": Object {
+        "fields": Object {
+          "auditd.data.a0": Object {
+            "aggregatable": true,
+            "category": "auditd",
+            "description": null,
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+            ],
+            "name": "auditd.data.a0",
+            "searchable": true,
+            "type": "string",
           },
-          "container": Object {
-            "fields": Object {
-              "container.id": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Unique container id.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.name": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Name of the image the container was built on.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.name",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.tag": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Container image tag.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.tag",
-                "searchable": true,
-                "type": "string",
-              },
-            },
+          "auditd.data.a1": Object {
+            "aggregatable": true,
+            "category": "auditd",
+            "description": null,
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+            ],
+            "name": "auditd.data.a1",
+            "searchable": true,
+            "type": "string",
           },
-          "destination": Object {
-            "fields": Object {
-              "destination.address": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.bytes": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Bytes sent from the destination to the source.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "destination.domain": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Destination domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.ip": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "destination.port": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Port of the destination.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
+          "auditd.data.a2": Object {
+            "aggregatable": true,
+            "category": "auditd",
+            "description": null,
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+            ],
+            "name": "auditd.data.a2",
+            "searchable": true,
+            "type": "string",
           },
-          "event": Object {
-            "fields": Object {
-              "event.end": Object {
-                "aggregatable": true,
-                "category": "event",
-                "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat-*",
-                  "endgame-*",
-                  "filebeat-*",
-                  "packetbeat-*",
-                  "winlogbeat-*",
-                ],
-                "name": "event.end",
-                "searchable": true,
-                "type": "date",
-              },
-            },
+        },
+      },
+      "base": Object {
+        "fields": Object {
+          "@timestamp": Object {
+            "aggregatable": true,
+            "category": "base",
+            "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+            "example": "2016-05-23T08:05:34.853Z",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "@timestamp",
+            "searchable": true,
+            "type": "date",
           },
-          "source": Object {
-            "fields": Object {
-              "source.ip": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "source.port": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "Port of the source.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
+        },
+      },
+      "client": Object {
+        "fields": Object {
+          "client.address": Object {
+            "aggregatable": true,
+            "category": "client",
+            "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "client.address",
+            "searchable": true,
+            "type": "string",
           },
-        }
-      }
-    >
-      Drag drop context wrapper children
-    </Connect(DragDropContextWrapperComponent)>
-  </MockedProvider>
-</Component>
+          "client.bytes": Object {
+            "aggregatable": true,
+            "category": "client",
+            "description": "Bytes sent from the client to the server.",
+            "example": "184",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "client.bytes",
+            "searchable": true,
+            "type": "number",
+          },
+          "client.domain": Object {
+            "aggregatable": true,
+            "category": "client",
+            "description": "Client domain.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "client.domain",
+            "searchable": true,
+            "type": "string",
+          },
+          "client.geo.country_iso_code": Object {
+            "aggregatable": true,
+            "category": "client",
+            "description": "Country ISO code.",
+            "example": "CA",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "client.geo.country_iso_code",
+            "searchable": true,
+            "type": "string",
+          },
+        },
+      },
+      "cloud": Object {
+        "fields": Object {
+          "cloud.account.id": Object {
+            "aggregatable": true,
+            "category": "cloud",
+            "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+            "example": "666777888999",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "cloud.account.id",
+            "searchable": true,
+            "type": "string",
+          },
+          "cloud.availability_zone": Object {
+            "aggregatable": true,
+            "category": "cloud",
+            "description": "Availability zone in which this host is running.",
+            "example": "us-east-1c",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "cloud.availability_zone",
+            "searchable": true,
+            "type": "string",
+          },
+        },
+      },
+      "container": Object {
+        "fields": Object {
+          "container.id": Object {
+            "aggregatable": true,
+            "category": "container",
+            "description": "Unique container id.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "container.id",
+            "searchable": true,
+            "type": "string",
+          },
+          "container.image.name": Object {
+            "aggregatable": true,
+            "category": "container",
+            "description": "Name of the image the container was built on.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "container.image.name",
+            "searchable": true,
+            "type": "string",
+          },
+          "container.image.tag": Object {
+            "aggregatable": true,
+            "category": "container",
+            "description": "Container image tag.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "container.image.tag",
+            "searchable": true,
+            "type": "string",
+          },
+        },
+      },
+      "destination": Object {
+        "fields": Object {
+          "destination.address": Object {
+            "aggregatable": true,
+            "category": "destination",
+            "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "destination.address",
+            "searchable": true,
+            "type": "string",
+          },
+          "destination.bytes": Object {
+            "aggregatable": true,
+            "category": "destination",
+            "description": "Bytes sent from the destination to the source.",
+            "example": "184",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "destination.bytes",
+            "searchable": true,
+            "type": "number",
+          },
+          "destination.domain": Object {
+            "aggregatable": true,
+            "category": "destination",
+            "description": "Destination domain.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "destination.domain",
+            "searchable": true,
+            "type": "string",
+          },
+          "destination.ip": Object {
+            "aggregatable": true,
+            "category": "destination",
+            "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+            "example": "",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "destination.ip",
+            "searchable": true,
+            "type": "ip",
+          },
+          "destination.port": Object {
+            "aggregatable": true,
+            "category": "destination",
+            "description": "Port of the destination.",
+            "example": "",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "destination.port",
+            "searchable": true,
+            "type": "long",
+          },
+        },
+      },
+      "event": Object {
+        "fields": Object {
+          "event.end": Object {
+            "aggregatable": true,
+            "category": "event",
+            "description": "event.end contains the date when the event ended or when the activity was last observed.",
+            "example": null,
+            "format": "",
+            "indexes": Array [
+              "auditbeat-*",
+              "endgame-*",
+              "filebeat-*",
+              "packetbeat-*",
+              "winlogbeat-*",
+            ],
+            "name": "event.end",
+            "searchable": true,
+            "type": "date",
+          },
+        },
+      },
+      "source": Object {
+        "fields": Object {
+          "source.ip": Object {
+            "aggregatable": true,
+            "category": "source",
+            "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+            "example": "",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "source.ip",
+            "searchable": true,
+            "type": "ip",
+          },
+          "source.port": Object {
+            "aggregatable": true,
+            "category": "source",
+            "description": "Port of the source.",
+            "example": "",
+            "format": "",
+            "indexes": Array [
+              "auditbeat",
+              "filebeat",
+              "packetbeat",
+            ],
+            "name": "source.port",
+            "searchable": true,
+            "type": "long",
+          },
+        },
+      },
+    }
+  }
+>
+  Drag drop context wrapper children
+</DragDropContextWrapper>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
index a240d5122ac9c..aa8214938c2b0 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/draggable_wrapper.test.tsx.snap
@@ -1,443 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DraggableWrapper rendering it renders against the snapshot 1`] = `
-<Component>
-  <MockedProvider
-    addTypename={false}
-    mocks={Object {}}
-  >
-    <Connect(DragDropContextWrapperComponent)
-      browserFields={
-        Object {
-          "agent": Object {
-            "fields": Object {
-              "agent.ephemeral_id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                "example": "8a4f500f",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.ephemeral_id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.hostname": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.hostname",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                "example": "8a4f500d",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.name": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                "example": "foo",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.name",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "auditd": Object {
-            "fields": Object {
-              "auditd.data.a0": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a0",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a1": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a1",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a2": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a2",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "base": Object {
-            "fields": Object {
-              "@timestamp": Object {
-                "aggregatable": true,
-                "category": "base",
-                "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                "example": "2016-05-23T08:05:34.853Z",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "@timestamp",
-                "searchable": true,
-                "type": "date",
-              },
-            },
-          },
-          "client": Object {
-            "fields": Object {
-              "client.address": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.bytes": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Bytes sent from the client to the server.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "client.domain": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Client domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.geo.country_iso_code": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Country ISO code.",
-                "example": "CA",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.geo.country_iso_code",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "cloud": Object {
-            "fields": Object {
-              "cloud.account.id": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                "example": "666777888999",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.account.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "cloud.availability_zone": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "Availability zone in which this host is running.",
-                "example": "us-east-1c",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.availability_zone",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "container": Object {
-            "fields": Object {
-              "container.id": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Unique container id.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.name": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Name of the image the container was built on.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.name",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.tag": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Container image tag.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.tag",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "destination": Object {
-            "fields": Object {
-              "destination.address": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.bytes": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Bytes sent from the destination to the source.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "destination.domain": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Destination domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.ip": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "destination.port": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Port of the destination.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
-          },
-          "event": Object {
-            "fields": Object {
-              "event.end": Object {
-                "aggregatable": true,
-                "category": "event",
-                "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat-*",
-                  "endgame-*",
-                  "filebeat-*",
-                  "packetbeat-*",
-                  "winlogbeat-*",
-                ],
-                "name": "event.end",
-                "searchable": true,
-                "type": "date",
-              },
-            },
-          },
-          "source": Object {
-            "fields": Object {
-              "source.ip": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "source.port": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "Port of the source.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
-          },
-        }
-      }
-    >
-      <Connect(DraggableWrapperComponent)
-        dataProvider={
-          Object {
-            "and": Array [],
-            "enabled": true,
-            "excluded": false,
-            "id": "id-Provider 1",
-            "kqlQuery": "",
-            "name": "Provider 1",
-            "queryMatch": Object {
-              "field": "name",
-              "operator": ":",
-              "value": "Provider 1",
-            },
-          }
-        }
-        render={[Function]}
-      />
-    </Connect(DragDropContextWrapperComponent)>
-  </MockedProvider>
-</Component>
+<DraggableWrapper
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "id-Provider 1",
+      "kqlQuery": "",
+      "name": "Provider 1",
+      "queryMatch": Object {
+        "field": "name",
+        "operator": ":",
+        "value": "Provider 1",
+      },
+    }
+  }
+  render={[Function]}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
index 23a540f0ce3b3..7c6e321395fa5 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/__snapshots__/droppable_wrapper.test.tsx.snap
@@ -1,430 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DroppableWrapper rendering it renders against the snapshot 1`] = `
-<Component>
-  <MockedProvider
-    addTypename={false}
-    mocks={Object {}}
-  >
-    <Connect(DragDropContextWrapperComponent)
-      browserFields={
-        Object {
-          "agent": Object {
-            "fields": Object {
-              "agent.ephemeral_id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-                "example": "8a4f500f",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.ephemeral_id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.hostname": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.hostname",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.id": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-                "example": "8a4f500d",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "agent.name": Object {
-                "aggregatable": true,
-                "category": "agent",
-                "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-                "example": "foo",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "agent.name",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "auditd": Object {
-            "fields": Object {
-              "auditd.data.a0": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a0",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a1": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a1",
-                "searchable": true,
-                "type": "string",
-              },
-              "auditd.data.a2": Object {
-                "aggregatable": true,
-                "category": "auditd",
-                "description": null,
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                ],
-                "name": "auditd.data.a2",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "base": Object {
-            "fields": Object {
-              "@timestamp": Object {
-                "aggregatable": true,
-                "category": "base",
-                "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-                "example": "2016-05-23T08:05:34.853Z",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "@timestamp",
-                "searchable": true,
-                "type": "date",
-              },
-            },
-          },
-          "client": Object {
-            "fields": Object {
-              "client.address": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.bytes": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Bytes sent from the client to the server.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "client.domain": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Client domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "client.geo.country_iso_code": Object {
-                "aggregatable": true,
-                "category": "client",
-                "description": "Country ISO code.",
-                "example": "CA",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "client.geo.country_iso_code",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "cloud": Object {
-            "fields": Object {
-              "cloud.account.id": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-                "example": "666777888999",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.account.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "cloud.availability_zone": Object {
-                "aggregatable": true,
-                "category": "cloud",
-                "description": "Availability zone in which this host is running.",
-                "example": "us-east-1c",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "cloud.availability_zone",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "container": Object {
-            "fields": Object {
-              "container.id": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Unique container id.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.id",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.name": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Name of the image the container was built on.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.name",
-                "searchable": true,
-                "type": "string",
-              },
-              "container.image.tag": Object {
-                "aggregatable": true,
-                "category": "container",
-                "description": "Container image tag.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "container.image.tag",
-                "searchable": true,
-                "type": "string",
-              },
-            },
-          },
-          "destination": Object {
-            "fields": Object {
-              "destination.address": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.address",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.bytes": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Bytes sent from the destination to the source.",
-                "example": "184",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.bytes",
-                "searchable": true,
-                "type": "number",
-              },
-              "destination.domain": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Destination domain.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.domain",
-                "searchable": true,
-                "type": "string",
-              },
-              "destination.ip": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "destination.port": Object {
-                "aggregatable": true,
-                "category": "destination",
-                "description": "Port of the destination.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "destination.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
-          },
-          "event": Object {
-            "fields": Object {
-              "event.end": Object {
-                "aggregatable": true,
-                "category": "event",
-                "description": "event.end contains the date when the event ended or when the activity was last observed.",
-                "example": null,
-                "format": "",
-                "indexes": Array [
-                  "auditbeat-*",
-                  "endgame-*",
-                  "filebeat-*",
-                  "packetbeat-*",
-                  "winlogbeat-*",
-                ],
-                "name": "event.end",
-                "searchable": true,
-                "type": "date",
-              },
-            },
-          },
-          "source": Object {
-            "fields": Object {
-              "source.ip": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.ip",
-                "searchable": true,
-                "type": "ip",
-              },
-              "source.port": Object {
-                "aggregatable": true,
-                "category": "source",
-                "description": "Port of the source.",
-                "example": "",
-                "format": "",
-                "indexes": Array [
-                  "auditbeat",
-                  "filebeat",
-                  "packetbeat",
-                ],
-                "name": "source.port",
-                "searchable": true,
-                "type": "long",
-              },
-            },
-          },
-        }
-      }
-    >
-      <DroppableWrapper
-        droppableId="testing"
-      >
-        draggable wrapper content
-      </DroppableWrapper>
-    </Connect(DragDropContextWrapperComponent)>
-  </MockedProvider>
-</Component>
+<DroppableWrapper
+  droppableId="testing"
+>
+  draggable wrapper content
+</DroppableWrapper>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
index b8fba6fe2f6d8..1a8af9d99193a 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.test.tsx
@@ -28,7 +28,7 @@ describe('DragDropContextWrapper', () => {
           </MockedProvider>
         </TestProviders>
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DragDropContextWrapper'))).toMatchSnapshot();
     });
 
     test('it renders the children', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
index a3528158a0317..f9e6bfcf7c236 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/drag_drop_context_wrapper.tsx
@@ -114,6 +114,8 @@ const mapStateToProps = (state: State) => {
 
 export const DragDropContextWrapper = connect(mapStateToProps)(DragDropContextWrapperComponent);
 
+DragDropContextWrapper.displayName = 'DragDropContextWrapper';
+
 const onBeforeCapture = (before: BeforeCapture) => {
   const x =
     window.pageXOffset !== undefined
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
index d9b78836b450e..008ece5c7e69c 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -30,7 +30,7 @@ describe('DraggableWrapper', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DraggableWrapper'))).toMatchSnapshot();
     });
 
     test('it renders the children passed to the render prop', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
index c314785511201..809c46f7b53bb 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/draggable_wrapper.tsx
@@ -275,6 +275,8 @@ export const DraggableWrapper = connect(null, {
   unRegisterProvider: dragAndDropActions.unRegisterProvider,
 })(DraggableWrapperComponent);
 
+DraggableWrapper.displayName = 'DraggableWrapper';
+
 /**
  * Conditionally wraps children in an EuiPortal to ensure drag offsets are correct when dragging
  * from containers that have css transforms
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx
index 859b30d2164dd..39abbdd4d4e38 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.test.tsx
@@ -30,7 +30,7 @@ describe('DroppableWrapper', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DroppableWrapper'))).toMatchSnapshot();
     });
 
     test('it renders the children when a render prop is not provided', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
index 3f789a39832f1..2b013a665af16 100644
--- a/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/drag_and_drop/droppable_wrapper.tsx
@@ -7,7 +7,6 @@
 import { rgba } from 'polished';
 import * as React from 'react';
 import { Droppable } from 'react-beautiful-dnd';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 interface Props {
@@ -87,7 +86,7 @@ const ReactDndDropTarget = styled.div<{ isDraggingOver: boolean; height: string
 `;
 ReactDndDropTarget.displayName = 'ReactDndDropTarget';
 
-export const DroppableWrapper = pure<Props>(
+export const DroppableWrapper = React.memo<Props>(
   ({
     children = null,
     droppableId,
diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap
index 1e9e89ad66641..63ba13306ecd8 100644
--- a/x-pack/legacy/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/draggables/__snapshots__/index.test.tsx.snap
@@ -1,29 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`draggables rendering it renders the default Badge 1`] = `
-<Component
-  contextId="context-id"
-  eventId="event-id"
+<DefaultDraggable
   field="some-field"
-  iconType="number"
+  id="draggable-badge-default-draggable-context-id-event-id-some-field-some-value"
   queryValue="some-query-value"
   value="some-value"
 >
-  <span>
-    A child of this
-  </span>
-</Component>
+  <Badge
+    color="hollow"
+    iconType="number"
+  >
+    <span>
+      A child of this
+    </span>
+  </Badge>
+</DefaultDraggable>
 `;
 
 exports[`draggables rendering it renders the default DefaultDraggable 1`] = `
-<Component
-  field="some-field"
-  id="draggable-id"
-  queryValue="some-query-value"
-  value="some-value"
->
-  <span>
-    A child of this
-  </span>
-</Component>
+<DraggableWrapper
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "draggable-id",
+      "kqlQuery": "",
+      "name": "some-value",
+      "queryMatch": Object {
+        "field": "some-field",
+        "operator": ":",
+        "value": "some-query-value",
+      },
+    }
+  }
+  render={[Function]}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
index 5bff59494b9ad..90d8ad463b476 100644
--- a/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/draggables/field_badge/index.tsx
@@ -6,7 +6,6 @@
 
 import { rgba } from 'polished';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 const Field = styled.div`
@@ -28,11 +27,12 @@ Field.displayName = 'Field';
 // Passing the styles directly to the component because the width is
 // being calculated and is recommended by Styled Components for performance
 // https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
-export const DraggableFieldBadge = pure<{ fieldId: string; fieldWidth?: string }>(
+export const DraggableFieldBadge = React.memo<{ fieldId: string; fieldWidth?: string }>(
   ({ fieldId, fieldWidth }) => (
     <Field data-test-subj="field" style={{ width: fieldWidth }}>
       {fieldId}
     </Field>
   )
 );
+
 DraggableFieldBadge.displayName = 'DraggableFieldBadge';
diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/draggables/index.test.tsx
index fb49329ba1501..d3dcba9526bdd 100644
--- a/x-pack/legacy/plugins/siem/public/components/draggables/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/draggables/index.test.tsx
@@ -108,19 +108,15 @@ describe('draggables', () => {
     });
 
     test('it returns null if value is undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <DefaultDraggable id="draggable-id" field="some-field" value={undefined} />
-        </TestProviders>
+      const wrapper = shallow(
+        <DefaultDraggable id="draggable-id" field="some-field" value={undefined} />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
 
     test('it returns null if value is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <DefaultDraggable id="draggable-id" field="some-field" value={null} />
-        </TestProviders>
+      const wrapper = shallow(
+        <DefaultDraggable id="draggable-id" field="some-field" value={null} />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
@@ -218,31 +214,27 @@ describe('draggables', () => {
     });
 
     test('it returns null if value is undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <DraggableBadge
-            contextId="context-id"
-            eventId="event-id"
-            field="some-field"
-            iconType="number"
-            value={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <DraggableBadge
+          contextId="context-id"
+          eventId="event-id"
+          field="some-field"
+          iconType="number"
+          value={undefined}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
 
     test('it returns null if value is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <DraggableBadge
-            contextId="context-id"
-            eventId="event-id"
-            field="some-field"
-            value={null}
-            iconType="number"
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <DraggableBadge
+          contextId="context-id"
+          eventId="event-id"
+          field="some-field"
+          value={null}
+          iconType="number"
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/draggables/index.tsx b/x-pack/legacy/plugins/siem/public/components/draggables/index.tsx
index 2f91cdc43b797..5b219dad9c841 100644
--- a/x-pack/legacy/plugins/siem/public/components/draggables/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/draggables/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiBadge, EuiBadgeProps, EuiToolTip, IconType } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { Omit } from '../../../common/utility_types';
 import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
@@ -50,7 +49,7 @@ export const getDefaultWhenTooltipIsUnspecified = ({
 /**
  * Renders the content of the draggable, wrapped in a tooltip
  */
-const Content = pure<{
+const Content = React.memo<{
   children?: React.ReactNode;
   field: string;
   tooltipContent?: React.ReactNode;
@@ -83,7 +82,7 @@ Content.displayName = 'Content';
  * prevent a tooltip from being displayed, or pass arbitrary content
  * @param queryValue - defaults to `value`, this query overrides the `queryMatch.value` used by the `DataProvider` that represents the data
  */
-export const DefaultDraggable = pure<DefaultDraggableType>(
+export const DefaultDraggable = React.memo<DefaultDraggableType>(
   ({ id, field, value, name, children, tooltipContent, queryValue }) =>
     value != null ? (
       <DraggableWrapper
@@ -152,7 +151,7 @@ export type BadgeDraggableType = Omit<DefaultDraggableType, 'id'> & {
  * prevent a tooltip from being displayed, or pass arbitrary content
  * @param queryValue - defaults to `value`, this query overrides the `queryMatch.value` used by the `DataProvider` that represents the data
  */
-export const DraggableBadge = pure<BadgeDraggableType>(
+export const DraggableBadge = React.memo<BadgeDraggableType>(
   ({
     contextId,
     eventId,
diff --git a/x-pack/legacy/plugins/siem/public/components/duration/index.tsx b/x-pack/legacy/plugins/siem/public/components/duration/index.tsx
index 06446a152bea8..15e6246f1f1ad 100644
--- a/x-pack/legacy/plugins/siem/public/components/duration/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/duration/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DefaultDraggable } from '../draggables';
 import { FormattedDuration } from '../formatted_duration';
@@ -16,7 +15,7 @@ export const EVENT_DURATION_FIELD_NAME = 'event.duration';
  * Renders draggable text containing the value of a field representing a
  * duration of time, (e.g. `event.duration`)
  */
-export const Duration = pure<{
+export const Duration = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap
index f343316d88c46..b03670b2b1cd4 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable.test.tsx.snap
@@ -1,11 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Embeddable it renders 1`] = `
-<Component>
-  <Embeddable>
+<section
+  className="siemEmbeddable"
+>
+  <Panel
+    paddingSize="none"
+  >
     <p>
       Test content
     </p>
-  </Embeddable>
-</Component>
+  </Panel>
+</section>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
index e88693b292a5d..6d02ccb1c6eb9 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/__snapshots__/embeddable_header.test.tsx.snap
@@ -1,9 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EmbeddableHeader it renders 1`] = `
-<Component>
-  <EmbeddableHeader
-    title="Test title"
-  />
-</Component>
+<Header>
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="m"
+  >
+    <EuiFlexItem>
+      <EuiTitle
+        size="xxxs"
+      >
+        <h6
+          data-test-subj="header-embeddable-title"
+        >
+          Test title
+        </h6>
+      </EuiTitle>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Header>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.test.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.test.tsx
index 49f5306dc1b60..c0d70754e78bd 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable.test.tsx
@@ -9,7 +9,6 @@ import toJson from 'enzyme-to-json';
 import React from 'react';
 
 import '../../mock/ui_settings';
-import { TestProviders } from '../../mock';
 import { Embeddable } from './embeddable';
 
 jest.mock('../../lib/settings/use_kibana_ui_setting');
@@ -17,11 +16,9 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 describe('Embeddable', () => {
   test('it renders', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <Embeddable>
-          <p>{'Test content'}</p>
-        </Embeddable>
-      </TestProviders>
+      <Embeddable>
+        <p>{'Test content'}</p>
+      </Embeddable>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.test.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.test.tsx
index 4536da3ba7b97..6387de30aa265 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/embeddable_header.test.tsx
@@ -16,11 +16,7 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 
 describe('EmbeddableHeader', () => {
   test('it renders', () => {
-    const wrapper = shallow(
-      <TestProviders>
-        <EmbeddableHeader title="Test title" />
-      </TestProviders>
-    );
+    const wrapper = shallow(<EmbeddableHeader title="Test title" />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
index 2ef4d9df89a1b..9d39b6e59365f 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/__snapshots__/point_tool_tip_content.test.tsx.snap
@@ -1,18 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PointToolTipContent renders correctly against snapshot 1`] = `
-<Component>
-  <PointToolTipContentComponent
-    closeTooltip={[MockFunction]}
-    contextId="contextId"
-    featureProps={
-      Array [
-        Object {
-          "_propertyKey": "host.name",
-          "_rawValue": "testPropValue",
-        },
-      ]
-    }
-  />
-</Component>
+<PointToolTipContentComponent
+  closeTooltip={[MockFunction]}
+  contextId="contextId"
+  featureProps={
+    Array [
+      Object {
+        "_propertyKey": "host.name",
+        "_rawValue": "testPropValue",
+      },
+    ]
+  }
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
index 1733fb3aa7480..5e1eae1649b41 100644
--- a/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/embeddables/map_tool_tip/point_tool_tip_content.test.tsx
@@ -46,7 +46,7 @@ describe('PointToolTipContent', () => {
         />
       </TestProviders>
     );
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('PointToolTipContentComponent'))).toMatchSnapshot();
   });
 
   test('renders array filter correctly', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
index 7e1da6ae7ace3..9b6bfb1752a20 100644
--- a/x-pack/legacy/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<Component
-  actionPrimaryLabel="Do Something"
-  actionPrimaryUrl="my/url/from/nowwhere"
-  title="My Super Title"
+<EmptyPrompt
+  actions={
+    <ForwardRef>
+      <EuiFlexItem>
+        <EuiButton
+          fill={true}
+          href="my/url/from/nowwhere"
+        >
+          Do Something
+        </EuiButton>
+      </EuiFlexItem>
+    </ForwardRef>
+  }
+  title={
+    <h2>
+      My Super Title
+    </h2>
+  }
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx b/x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx
index 9c3dd462de153..ef2b76c9aad1c 100644
--- a/x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/empty_page/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
 import React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
@@ -29,7 +28,7 @@ interface EmptyPageProps {
   title: string;
 }
 
-export const EmptyPage = pure<EmptyPageProps>(
+export const EmptyPage = React.memo<EmptyPageProps>(
   ({
     actionPrimaryIcon,
     actionPrimaryLabel,
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap
index bfb10fc385c08..4cf7cbb43cdc7 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/event_details.test.tsx.snap
@@ -1,692 +1,1544 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EventDetails rendering should match snapshot 1`] = `
-<Component>
-  <EventDetails
-    browserFields={
+<Details
+  data-test-subj="eventDetails"
+>
+  <EuiTabbedContent
+    autoFocus="initial"
+    onTabClick={[Function]}
+    selectedTab={
       Object {
-        "agent": Object {
-          "fields": Object {
-            "agent.ephemeral_id": Object {
-              "aggregatable": true,
-              "category": "agent",
-              "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-              "example": "8a4f500f",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "agent.ephemeral_id",
-              "searchable": true,
-              "type": "string",
-            },
-            "agent.hostname": Object {
-              "aggregatable": true,
-              "category": "agent",
-              "description": null,
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "agent.hostname",
-              "searchable": true,
-              "type": "string",
-            },
-            "agent.id": Object {
-              "aggregatable": true,
-              "category": "agent",
-              "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-              "example": "8a4f500d",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "agent.id",
-              "searchable": true,
-              "type": "string",
-            },
-            "agent.name": Object {
-              "aggregatable": true,
-              "category": "agent",
-              "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-              "example": "foo",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "agent.name",
-              "searchable": true,
-              "type": "string",
-            },
-          },
-        },
-        "auditd": Object {
-          "fields": Object {
-            "auditd.data.a0": Object {
-              "aggregatable": true,
-              "category": "auditd",
-              "description": null,
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-              ],
-              "name": "auditd.data.a0",
-              "searchable": true,
-              "type": "string",
-            },
-            "auditd.data.a1": Object {
-              "aggregatable": true,
-              "category": "auditd",
-              "description": null,
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-              ],
-              "name": "auditd.data.a1",
-              "searchable": true,
-              "type": "string",
-            },
-            "auditd.data.a2": Object {
-              "aggregatable": true,
-              "category": "auditd",
-              "description": null,
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-              ],
-              "name": "auditd.data.a2",
-              "searchable": true,
-              "type": "string",
-            },
-          },
-        },
-        "base": Object {
-          "fields": Object {
-            "@timestamp": Object {
-              "aggregatable": true,
-              "category": "base",
-              "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-              "example": "2016-05-23T08:05:34.853Z",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "@timestamp",
-              "searchable": true,
-              "type": "date",
-            },
-          },
-        },
-        "client": Object {
-          "fields": Object {
-            "client.address": Object {
-              "aggregatable": true,
-              "category": "client",
-              "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "client.address",
-              "searchable": true,
-              "type": "string",
-            },
-            "client.bytes": Object {
-              "aggregatable": true,
-              "category": "client",
-              "description": "Bytes sent from the client to the server.",
-              "example": "184",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "client.bytes",
-              "searchable": true,
-              "type": "number",
-            },
-            "client.domain": Object {
-              "aggregatable": true,
-              "category": "client",
-              "description": "Client domain.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "client.domain",
-              "searchable": true,
-              "type": "string",
-            },
-            "client.geo.country_iso_code": Object {
-              "aggregatable": true,
-              "category": "client",
-              "description": "Country ISO code.",
-              "example": "CA",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "client.geo.country_iso_code",
-              "searchable": true,
-              "type": "string",
-            },
-          },
-        },
-        "cloud": Object {
-          "fields": Object {
-            "cloud.account.id": Object {
-              "aggregatable": true,
-              "category": "cloud",
-              "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-              "example": "666777888999",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "cloud.account.id",
-              "searchable": true,
-              "type": "string",
-            },
-            "cloud.availability_zone": Object {
-              "aggregatable": true,
-              "category": "cloud",
-              "description": "Availability zone in which this host is running.",
-              "example": "us-east-1c",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "cloud.availability_zone",
-              "searchable": true,
-              "type": "string",
-            },
-          },
-        },
-        "container": Object {
-          "fields": Object {
-            "container.id": Object {
-              "aggregatable": true,
-              "category": "container",
-              "description": "Unique container id.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "container.id",
-              "searchable": true,
-              "type": "string",
-            },
-            "container.image.name": Object {
-              "aggregatable": true,
-              "category": "container",
-              "description": "Name of the image the container was built on.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "container.image.name",
-              "searchable": true,
-              "type": "string",
-            },
-            "container.image.tag": Object {
-              "aggregatable": true,
-              "category": "container",
-              "description": "Container image tag.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "container.image.tag",
-              "searchable": true,
-              "type": "string",
-            },
-          },
-        },
-        "destination": Object {
-          "fields": Object {
-            "destination.address": Object {
-              "aggregatable": true,
-              "category": "destination",
-              "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "destination.address",
-              "searchable": true,
-              "type": "string",
-            },
-            "destination.bytes": Object {
-              "aggregatable": true,
-              "category": "destination",
-              "description": "Bytes sent from the destination to the source.",
-              "example": "184",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "destination.bytes",
-              "searchable": true,
-              "type": "number",
-            },
-            "destination.domain": Object {
-              "aggregatable": true,
-              "category": "destination",
-              "description": "Destination domain.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "destination.domain",
-              "searchable": true,
-              "type": "string",
-            },
-            "destination.ip": Object {
-              "aggregatable": true,
-              "category": "destination",
-              "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-              "example": "",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "destination.ip",
-              "searchable": true,
-              "type": "ip",
-            },
-            "destination.port": Object {
-              "aggregatable": true,
-              "category": "destination",
-              "description": "Port of the destination.",
-              "example": "",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "destination.port",
-              "searchable": true,
-              "type": "long",
-            },
-          },
-        },
-        "event": Object {
-          "fields": Object {
-            "event.end": Object {
-              "aggregatable": true,
-              "category": "event",
-              "description": "event.end contains the date when the event ended or when the activity was last observed.",
-              "example": null,
-              "format": "",
-              "indexes": Array [
-                "auditbeat-*",
-                "endgame-*",
-                "filebeat-*",
-                "packetbeat-*",
-                "winlogbeat-*",
-              ],
-              "name": "event.end",
-              "searchable": true,
-              "type": "date",
-            },
-          },
-        },
-        "source": Object {
-          "fields": Object {
-            "source.ip": Object {
-              "aggregatable": true,
-              "category": "source",
-              "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-              "example": "",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "source.ip",
-              "searchable": true,
-              "type": "ip",
-            },
-            "source.port": Object {
-              "aggregatable": true,
-              "category": "source",
-              "description": "Port of the source.",
-              "example": "",
-              "format": "",
-              "indexes": Array [
-                "auditbeat",
-                "filebeat",
-                "packetbeat",
-              ],
-              "name": "source.port",
-              "searchable": true,
-              "type": "long",
-            },
-          },
-        },
+        "content": <Memo(EventFieldsBrowser)
+          browserFields={
+            Object {
+              "agent": Object {
+                "fields": Object {
+                  "agent.ephemeral_id": Object {
+                    "aggregatable": true,
+                    "category": "agent",
+                    "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+                    "example": "8a4f500f",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "agent.ephemeral_id",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "agent.hostname": Object {
+                    "aggregatable": true,
+                    "category": "agent",
+                    "description": null,
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "agent.hostname",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "agent.id": Object {
+                    "aggregatable": true,
+                    "category": "agent",
+                    "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+                    "example": "8a4f500d",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "agent.id",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "agent.name": Object {
+                    "aggregatable": true,
+                    "category": "agent",
+                    "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+                    "example": "foo",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "agent.name",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                },
+              },
+              "auditd": Object {
+                "fields": Object {
+                  "auditd.data.a0": Object {
+                    "aggregatable": true,
+                    "category": "auditd",
+                    "description": null,
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                    ],
+                    "name": "auditd.data.a0",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "auditd.data.a1": Object {
+                    "aggregatable": true,
+                    "category": "auditd",
+                    "description": null,
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                    ],
+                    "name": "auditd.data.a1",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "auditd.data.a2": Object {
+                    "aggregatable": true,
+                    "category": "auditd",
+                    "description": null,
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                    ],
+                    "name": "auditd.data.a2",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                },
+              },
+              "base": Object {
+                "fields": Object {
+                  "@timestamp": Object {
+                    "aggregatable": true,
+                    "category": "base",
+                    "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+                    "example": "2016-05-23T08:05:34.853Z",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "@timestamp",
+                    "searchable": true,
+                    "type": "date",
+                  },
+                },
+              },
+              "client": Object {
+                "fields": Object {
+                  "client.address": Object {
+                    "aggregatable": true,
+                    "category": "client",
+                    "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "client.address",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "client.bytes": Object {
+                    "aggregatable": true,
+                    "category": "client",
+                    "description": "Bytes sent from the client to the server.",
+                    "example": "184",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "client.bytes",
+                    "searchable": true,
+                    "type": "number",
+                  },
+                  "client.domain": Object {
+                    "aggregatable": true,
+                    "category": "client",
+                    "description": "Client domain.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "client.domain",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "client.geo.country_iso_code": Object {
+                    "aggregatable": true,
+                    "category": "client",
+                    "description": "Country ISO code.",
+                    "example": "CA",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "client.geo.country_iso_code",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                },
+              },
+              "cloud": Object {
+                "fields": Object {
+                  "cloud.account.id": Object {
+                    "aggregatable": true,
+                    "category": "cloud",
+                    "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+                    "example": "666777888999",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "cloud.account.id",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "cloud.availability_zone": Object {
+                    "aggregatable": true,
+                    "category": "cloud",
+                    "description": "Availability zone in which this host is running.",
+                    "example": "us-east-1c",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "cloud.availability_zone",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                },
+              },
+              "container": Object {
+                "fields": Object {
+                  "container.id": Object {
+                    "aggregatable": true,
+                    "category": "container",
+                    "description": "Unique container id.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "container.id",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "container.image.name": Object {
+                    "aggregatable": true,
+                    "category": "container",
+                    "description": "Name of the image the container was built on.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "container.image.name",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "container.image.tag": Object {
+                    "aggregatable": true,
+                    "category": "container",
+                    "description": "Container image tag.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "container.image.tag",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                },
+              },
+              "destination": Object {
+                "fields": Object {
+                  "destination.address": Object {
+                    "aggregatable": true,
+                    "category": "destination",
+                    "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "destination.address",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "destination.bytes": Object {
+                    "aggregatable": true,
+                    "category": "destination",
+                    "description": "Bytes sent from the destination to the source.",
+                    "example": "184",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "destination.bytes",
+                    "searchable": true,
+                    "type": "number",
+                  },
+                  "destination.domain": Object {
+                    "aggregatable": true,
+                    "category": "destination",
+                    "description": "Destination domain.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "destination.domain",
+                    "searchable": true,
+                    "type": "string",
+                  },
+                  "destination.ip": Object {
+                    "aggregatable": true,
+                    "category": "destination",
+                    "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+                    "example": "",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "destination.ip",
+                    "searchable": true,
+                    "type": "ip",
+                  },
+                  "destination.port": Object {
+                    "aggregatable": true,
+                    "category": "destination",
+                    "description": "Port of the destination.",
+                    "example": "",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "destination.port",
+                    "searchable": true,
+                    "type": "long",
+                  },
+                },
+              },
+              "event": Object {
+                "fields": Object {
+                  "event.end": Object {
+                    "aggregatable": true,
+                    "category": "event",
+                    "description": "event.end contains the date when the event ended or when the activity was last observed.",
+                    "example": null,
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat-*",
+                      "endgame-*",
+                      "filebeat-*",
+                      "packetbeat-*",
+                      "winlogbeat-*",
+                    ],
+                    "name": "event.end",
+                    "searchable": true,
+                    "type": "date",
+                  },
+                },
+              },
+              "source": Object {
+                "fields": Object {
+                  "source.ip": Object {
+                    "aggregatable": true,
+                    "category": "source",
+                    "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+                    "example": "",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "source.ip",
+                    "searchable": true,
+                    "type": "ip",
+                  },
+                  "source.port": Object {
+                    "aggregatable": true,
+                    "category": "source",
+                    "description": "Port of the source.",
+                    "example": "",
+                    "format": "",
+                    "indexes": Array [
+                      "auditbeat",
+                      "filebeat",
+                      "packetbeat",
+                    ],
+                    "name": "source.port",
+                    "searchable": true,
+                    "type": "long",
+                  },
+                },
+              },
+            }
+          }
+          columnHeaders={
+            Array [
+              Object {
+                "aggregatable": true,
+                "category": "base",
+                "columnHeaderType": "not-filtered",
+                "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+                "example": "2016-05-23T08:05:34.853Z",
+                "id": "@timestamp",
+                "type": "date",
+                "width": 190,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "event",
+                "columnHeaderType": "not-filtered",
+                "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+                "example": "7",
+                "id": "event.severity",
+                "type": "long",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "event",
+                "columnHeaderType": "not-filtered",
+                "description": "Event category.
+This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
+                "example": "user-management",
+                "id": "event.category",
+                "type": "keyword",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "event",
+                "columnHeaderType": "not-filtered",
+                "description": "The action captured by the event.
+This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
+                "example": "user-password-change",
+                "id": "event.action",
+                "type": "keyword",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "host",
+                "columnHeaderType": "not-filtered",
+                "description": "Name of the host.
+It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
+                "example": "",
+                "id": "host.name",
+                "type": "keyword",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "source",
+                "columnHeaderType": "not-filtered",
+                "description": "IP address of the source.
+Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "id": "source.ip",
+                "type": "ip",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "destination",
+                "columnHeaderType": "not-filtered",
+                "description": "IP address of the destination.
+Can be one or multiple IPv4 or IPv6 addresses.",
+                "example": "",
+                "id": "destination.ip",
+                "type": "ip",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "destination",
+                "columnHeaderType": "not-filtered",
+                "description": "Bytes sent from the source to the destination",
+                "example": "123",
+                "format": "bytes",
+                "id": "destination.bytes",
+                "type": "number",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "user",
+                "columnHeaderType": "not-filtered",
+                "description": "Short name or login of the user.",
+                "example": "albert",
+                "id": "user.name",
+                "type": "keyword",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": true,
+                "category": "base",
+                "columnHeaderType": "not-filtered",
+                "description": "Each document has an _id that uniquely identifies it",
+                "example": "Y-6TfmcB0WOhS6qyMv3s",
+                "id": "_id",
+                "type": "keyword",
+                "width": 180,
+              },
+              Object {
+                "aggregatable": false,
+                "category": "base",
+                "columnHeaderType": "not-filtered",
+                "description": "For log events the message field contains the log message.
+In other use cases the message field can be used to concatenate different values which are then freely searchable. If multiple messages exist, they can be combined into one message.",
+                "example": "Hello World",
+                "id": "message",
+                "type": "text",
+                "width": 180,
+              },
+            ]
+          }
+          data={
+            Array [
+              Object {
+                "field": "_id",
+                "originalValue": "pEMaMmkBUV60JmNWmWVi",
+                "values": Array [
+                  "pEMaMmkBUV60JmNWmWVi",
+                ],
+              },
+              Object {
+                "field": "_index",
+                "originalValue": "filebeat-8.0.0-2019.02.19-000001",
+                "values": Array [
+                  "filebeat-8.0.0-2019.02.19-000001",
+                ],
+              },
+              Object {
+                "field": "_type",
+                "originalValue": "_doc",
+                "values": Array [
+                  "_doc",
+                ],
+              },
+              Object {
+                "field": "_score",
+                "originalValue": 1,
+                "values": Array [
+                  "1",
+                ],
+              },
+              Object {
+                "field": "@timestamp",
+                "originalValue": "2019-02-28T16:50:54.621Z",
+                "values": Array [
+                  "2019-02-28T16:50:54.621Z",
+                ],
+              },
+              Object {
+                "field": "agent.ephemeral_id",
+                "originalValue": "9d391ef2-a734-4787-8891-67031178c641",
+                "values": Array [
+                  "9d391ef2-a734-4787-8891-67031178c641",
+                ],
+              },
+              Object {
+                "field": "agent.hostname",
+                "originalValue": "siem-kibana",
+                "values": Array [
+                  "siem-kibana",
+                ],
+              },
+              Object {
+                "field": "agent.id",
+                "originalValue": "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                "values": Array [
+                  "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                ],
+              },
+              Object {
+                "field": "agent.type",
+                "originalValue": "filebeat",
+                "values": Array [
+                  "filebeat",
+                ],
+              },
+              Object {
+                "field": "agent.version",
+                "originalValue": "8.0.0",
+                "values": Array [
+                  "8.0.0",
+                ],
+              },
+              Object {
+                "field": "cloud.availability_zone",
+                "originalValue": "projects/189716325846/zones/us-east1-b",
+                "values": Array [
+                  "projects/189716325846/zones/us-east1-b",
+                ],
+              },
+              Object {
+                "field": "cloud.instance.id",
+                "originalValue": "5412578377715150143",
+                "values": Array [
+                  "5412578377715150143",
+                ],
+              },
+              Object {
+                "field": "cloud.instance.name",
+                "originalValue": "siem-kibana",
+                "values": Array [
+                  "siem-kibana",
+                ],
+              },
+              Object {
+                "field": "cloud.machine.type",
+                "originalValue": "projects/189716325846/machineTypes/n1-standard-1",
+                "values": Array [
+                  "projects/189716325846/machineTypes/n1-standard-1",
+                ],
+              },
+              Object {
+                "field": "cloud.project.id",
+                "originalValue": "elastic-beats",
+                "values": Array [
+                  "elastic-beats",
+                ],
+              },
+              Object {
+                "field": "cloud.provider",
+                "originalValue": "gce",
+                "values": Array [
+                  "gce",
+                ],
+              },
+              Object {
+                "field": "destination.bytes",
+                "originalValue": 584,
+                "values": Array [
+                  "584",
+                ],
+              },
+              Object {
+                "field": "destination.ip",
+                "originalValue": "10.47.8.200",
+                "values": Array [
+                  "10.47.8.200",
+                ],
+              },
+              Object {
+                "field": "destination.packets",
+                "originalValue": 4,
+                "values": Array [
+                  "4",
+                ],
+              },
+              Object {
+                "field": "destination.port",
+                "originalValue": 902,
+                "values": Array [
+                  "902",
+                ],
+              },
+            ]
+          }
+          eventId="Y-6TfmcB0WOhS6qyMv3s"
+          onUpdateColumns={[MockFunction]}
+          timelineId="test"
+          toggleColumn={[MockFunction]}
+        />,
+        "id": "table-view",
+        "name": "Table",
       }
     }
-    columnHeaders={
+    tabs={
       Array [
         Object {
-          "aggregatable": true,
-          "category": "base",
-          "columnHeaderType": "not-filtered",
-          "description": "Date/time when the event originated.
+          "content": <Memo(EventFieldsBrowser)
+            browserFields={
+              Object {
+                "agent": Object {
+                  "fields": Object {
+                    "agent.ephemeral_id": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
+                      "example": "8a4f500f",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.ephemeral_id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "agent.hostname": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.hostname",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "agent.id": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
+                      "example": "8a4f500d",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "agent.name": Object {
+                      "aggregatable": true,
+                      "category": "agent",
+                      "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
+                      "example": "foo",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "agent.name",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                  },
+                },
+                "auditd": Object {
+                  "fields": Object {
+                    "auditd.data.a0": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a0",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "auditd.data.a1": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a1",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "auditd.data.a2": Object {
+                      "aggregatable": true,
+                      "category": "auditd",
+                      "description": null,
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                      ],
+                      "name": "auditd.data.a2",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                  },
+                },
+                "base": Object {
+                  "fields": Object {
+                    "@timestamp": Object {
+                      "aggregatable": true,
+                      "category": "base",
+                      "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
+                      "example": "2016-05-23T08:05:34.853Z",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "@timestamp",
+                      "searchable": true,
+                      "type": "date",
+                    },
+                  },
+                },
+                "client": Object {
+                  "fields": Object {
+                    "client.address": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.address",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "client.bytes": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Bytes sent from the client to the server.",
+                      "example": "184",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.bytes",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                    "client.domain": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Client domain.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.domain",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "client.geo.country_iso_code": Object {
+                      "aggregatable": true,
+                      "category": "client",
+                      "description": "Country ISO code.",
+                      "example": "CA",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "client.geo.country_iso_code",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                  },
+                },
+                "cloud": Object {
+                  "fields": Object {
+                    "cloud.account.id": Object {
+                      "aggregatable": true,
+                      "category": "cloud",
+                      "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
+                      "example": "666777888999",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "cloud.account.id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "cloud.availability_zone": Object {
+                      "aggregatable": true,
+                      "category": "cloud",
+                      "description": "Availability zone in which this host is running.",
+                      "example": "us-east-1c",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "cloud.availability_zone",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                  },
+                },
+                "container": Object {
+                  "fields": Object {
+                    "container.id": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Unique container id.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.id",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "container.image.name": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Name of the image the container was built on.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.image.name",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "container.image.tag": Object {
+                      "aggregatable": true,
+                      "category": "container",
+                      "description": "Container image tag.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "container.image.tag",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                  },
+                },
+                "destination": Object {
+                  "fields": Object {
+                    "destination.address": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.address",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "destination.bytes": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Bytes sent from the destination to the source.",
+                      "example": "184",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.bytes",
+                      "searchable": true,
+                      "type": "number",
+                    },
+                    "destination.domain": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Destination domain.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.domain",
+                      "searchable": true,
+                      "type": "string",
+                    },
+                    "destination.ip": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.ip",
+                      "searchable": true,
+                      "type": "ip",
+                    },
+                    "destination.port": Object {
+                      "aggregatable": true,
+                      "category": "destination",
+                      "description": "Port of the destination.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "destination.port",
+                      "searchable": true,
+                      "type": "long",
+                    },
+                  },
+                },
+                "event": Object {
+                  "fields": Object {
+                    "event.end": Object {
+                      "aggregatable": true,
+                      "category": "event",
+                      "description": "event.end contains the date when the event ended or when the activity was last observed.",
+                      "example": null,
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat-*",
+                        "endgame-*",
+                        "filebeat-*",
+                        "packetbeat-*",
+                        "winlogbeat-*",
+                      ],
+                      "name": "event.end",
+                      "searchable": true,
+                      "type": "date",
+                    },
+                  },
+                },
+                "source": Object {
+                  "fields": Object {
+                    "source.ip": Object {
+                      "aggregatable": true,
+                      "category": "source",
+                      "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "source.ip",
+                      "searchable": true,
+                      "type": "ip",
+                    },
+                    "source.port": Object {
+                      "aggregatable": true,
+                      "category": "source",
+                      "description": "Port of the source.",
+                      "example": "",
+                      "format": "",
+                      "indexes": Array [
+                        "auditbeat",
+                        "filebeat",
+                        "packetbeat",
+                      ],
+                      "name": "source.port",
+                      "searchable": true,
+                      "type": "long",
+                    },
+                  },
+                },
+              }
+            }
+            columnHeaders={
+              Array [
+                Object {
+                  "aggregatable": true,
+                  "category": "base",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Date/time when the event originated.
 For log events this is the date/time when the event was generated, and not when it was read.
 Required field for all events.",
-          "example": "2016-05-23T08:05:34.853Z",
-          "id": "@timestamp",
-          "type": "date",
-          "width": 190,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "event",
-          "columnHeaderType": "not-filtered",
-          "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
-          "example": "7",
-          "id": "event.severity",
-          "type": "long",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "event",
-          "columnHeaderType": "not-filtered",
-          "description": "Event category.
+                  "example": "2016-05-23T08:05:34.853Z",
+                  "id": "@timestamp",
+                  "type": "date",
+                  "width": 190,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "event",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+                  "example": "7",
+                  "id": "event.severity",
+                  "type": "long",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "event",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Event category.
 This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
-          "example": "user-management",
-          "id": "event.category",
-          "type": "keyword",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "event",
-          "columnHeaderType": "not-filtered",
-          "description": "The action captured by the event.
+                  "example": "user-management",
+                  "id": "event.category",
+                  "type": "keyword",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "event",
+                  "columnHeaderType": "not-filtered",
+                  "description": "The action captured by the event.
 This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
-          "example": "user-password-change",
-          "id": "event.action",
-          "type": "keyword",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "host",
-          "columnHeaderType": "not-filtered",
-          "description": "Name of the host.
+                  "example": "user-password-change",
+                  "id": "event.action",
+                  "type": "keyword",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "host",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Name of the host.
 It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
-          "example": "",
-          "id": "host.name",
-          "type": "keyword",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "source",
-          "columnHeaderType": "not-filtered",
-          "description": "IP address of the source.
+                  "example": "",
+                  "id": "host.name",
+                  "type": "keyword",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "source",
+                  "columnHeaderType": "not-filtered",
+                  "description": "IP address of the source.
 Can be one or multiple IPv4 or IPv6 addresses.",
-          "example": "",
-          "id": "source.ip",
-          "type": "ip",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "destination",
-          "columnHeaderType": "not-filtered",
-          "description": "IP address of the destination.
+                  "example": "",
+                  "id": "source.ip",
+                  "type": "ip",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "destination",
+                  "columnHeaderType": "not-filtered",
+                  "description": "IP address of the destination.
 Can be one or multiple IPv4 or IPv6 addresses.",
-          "example": "",
-          "id": "destination.ip",
-          "type": "ip",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "destination",
-          "columnHeaderType": "not-filtered",
-          "description": "Bytes sent from the source to the destination",
-          "example": "123",
-          "format": "bytes",
-          "id": "destination.bytes",
-          "type": "number",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "user",
-          "columnHeaderType": "not-filtered",
-          "description": "Short name or login of the user.",
-          "example": "albert",
-          "id": "user.name",
-          "type": "keyword",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": true,
-          "category": "base",
-          "columnHeaderType": "not-filtered",
-          "description": "Each document has an _id that uniquely identifies it",
-          "example": "Y-6TfmcB0WOhS6qyMv3s",
-          "id": "_id",
-          "type": "keyword",
-          "width": 180,
-        },
-        Object {
-          "aggregatable": false,
-          "category": "base",
-          "columnHeaderType": "not-filtered",
-          "description": "For log events the message field contains the log message.
+                  "example": "",
+                  "id": "destination.ip",
+                  "type": "ip",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "destination",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Bytes sent from the source to the destination",
+                  "example": "123",
+                  "format": "bytes",
+                  "id": "destination.bytes",
+                  "type": "number",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "user",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Short name or login of the user.",
+                  "example": "albert",
+                  "id": "user.name",
+                  "type": "keyword",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": true,
+                  "category": "base",
+                  "columnHeaderType": "not-filtered",
+                  "description": "Each document has an _id that uniquely identifies it",
+                  "example": "Y-6TfmcB0WOhS6qyMv3s",
+                  "id": "_id",
+                  "type": "keyword",
+                  "width": 180,
+                },
+                Object {
+                  "aggregatable": false,
+                  "category": "base",
+                  "columnHeaderType": "not-filtered",
+                  "description": "For log events the message field contains the log message.
 In other use cases the message field can be used to concatenate different values which are then freely searchable. If multiple messages exist, they can be combined into one message.",
-          "example": "Hello World",
-          "id": "message",
-          "type": "text",
-          "width": 180,
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "field": "_id",
-          "originalValue": "pEMaMmkBUV60JmNWmWVi",
-          "values": Array [
-            "pEMaMmkBUV60JmNWmWVi",
-          ],
-        },
-        Object {
-          "field": "_index",
-          "originalValue": "filebeat-8.0.0-2019.02.19-000001",
-          "values": Array [
-            "filebeat-8.0.0-2019.02.19-000001",
-          ],
-        },
-        Object {
-          "field": "_type",
-          "originalValue": "_doc",
-          "values": Array [
-            "_doc",
-          ],
-        },
-        Object {
-          "field": "_score",
-          "originalValue": 1,
-          "values": Array [
-            "1",
-          ],
-        },
-        Object {
-          "field": "@timestamp",
-          "originalValue": "2019-02-28T16:50:54.621Z",
-          "values": Array [
-            "2019-02-28T16:50:54.621Z",
-          ],
-        },
-        Object {
-          "field": "agent.ephemeral_id",
-          "originalValue": "9d391ef2-a734-4787-8891-67031178c641",
-          "values": Array [
-            "9d391ef2-a734-4787-8891-67031178c641",
-          ],
-        },
-        Object {
-          "field": "agent.hostname",
-          "originalValue": "siem-kibana",
-          "values": Array [
-            "siem-kibana",
-          ],
-        },
-        Object {
-          "field": "agent.id",
-          "originalValue": "5de03d5f-52f3-482e-91d4-853c7de073c3",
-          "values": Array [
-            "5de03d5f-52f3-482e-91d4-853c7de073c3",
-          ],
-        },
-        Object {
-          "field": "agent.type",
-          "originalValue": "filebeat",
-          "values": Array [
-            "filebeat",
-          ],
-        },
-        Object {
-          "field": "agent.version",
-          "originalValue": "8.0.0",
-          "values": Array [
-            "8.0.0",
-          ],
-        },
-        Object {
-          "field": "cloud.availability_zone",
-          "originalValue": "projects/189716325846/zones/us-east1-b",
-          "values": Array [
-            "projects/189716325846/zones/us-east1-b",
-          ],
-        },
-        Object {
-          "field": "cloud.instance.id",
-          "originalValue": "5412578377715150143",
-          "values": Array [
-            "5412578377715150143",
-          ],
-        },
-        Object {
-          "field": "cloud.instance.name",
-          "originalValue": "siem-kibana",
-          "values": Array [
-            "siem-kibana",
-          ],
-        },
-        Object {
-          "field": "cloud.machine.type",
-          "originalValue": "projects/189716325846/machineTypes/n1-standard-1",
-          "values": Array [
-            "projects/189716325846/machineTypes/n1-standard-1",
-          ],
-        },
-        Object {
-          "field": "cloud.project.id",
-          "originalValue": "elastic-beats",
-          "values": Array [
-            "elastic-beats",
-          ],
-        },
-        Object {
-          "field": "cloud.provider",
-          "originalValue": "gce",
-          "values": Array [
-            "gce",
-          ],
-        },
-        Object {
-          "field": "destination.bytes",
-          "originalValue": 584,
-          "values": Array [
-            "584",
-          ],
-        },
-        Object {
-          "field": "destination.ip",
-          "originalValue": "10.47.8.200",
-          "values": Array [
-            "10.47.8.200",
-          ],
-        },
-        Object {
-          "field": "destination.packets",
-          "originalValue": 4,
-          "values": Array [
-            "4",
-          ],
+                  "example": "Hello World",
+                  "id": "message",
+                  "type": "text",
+                  "width": 180,
+                },
+              ]
+            }
+            data={
+              Array [
+                Object {
+                  "field": "_id",
+                  "originalValue": "pEMaMmkBUV60JmNWmWVi",
+                  "values": Array [
+                    "pEMaMmkBUV60JmNWmWVi",
+                  ],
+                },
+                Object {
+                  "field": "_index",
+                  "originalValue": "filebeat-8.0.0-2019.02.19-000001",
+                  "values": Array [
+                    "filebeat-8.0.0-2019.02.19-000001",
+                  ],
+                },
+                Object {
+                  "field": "_type",
+                  "originalValue": "_doc",
+                  "values": Array [
+                    "_doc",
+                  ],
+                },
+                Object {
+                  "field": "_score",
+                  "originalValue": 1,
+                  "values": Array [
+                    "1",
+                  ],
+                },
+                Object {
+                  "field": "@timestamp",
+                  "originalValue": "2019-02-28T16:50:54.621Z",
+                  "values": Array [
+                    "2019-02-28T16:50:54.621Z",
+                  ],
+                },
+                Object {
+                  "field": "agent.ephemeral_id",
+                  "originalValue": "9d391ef2-a734-4787-8891-67031178c641",
+                  "values": Array [
+                    "9d391ef2-a734-4787-8891-67031178c641",
+                  ],
+                },
+                Object {
+                  "field": "agent.hostname",
+                  "originalValue": "siem-kibana",
+                  "values": Array [
+                    "siem-kibana",
+                  ],
+                },
+                Object {
+                  "field": "agent.id",
+                  "originalValue": "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                  "values": Array [
+                    "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                  ],
+                },
+                Object {
+                  "field": "agent.type",
+                  "originalValue": "filebeat",
+                  "values": Array [
+                    "filebeat",
+                  ],
+                },
+                Object {
+                  "field": "agent.version",
+                  "originalValue": "8.0.0",
+                  "values": Array [
+                    "8.0.0",
+                  ],
+                },
+                Object {
+                  "field": "cloud.availability_zone",
+                  "originalValue": "projects/189716325846/zones/us-east1-b",
+                  "values": Array [
+                    "projects/189716325846/zones/us-east1-b",
+                  ],
+                },
+                Object {
+                  "field": "cloud.instance.id",
+                  "originalValue": "5412578377715150143",
+                  "values": Array [
+                    "5412578377715150143",
+                  ],
+                },
+                Object {
+                  "field": "cloud.instance.name",
+                  "originalValue": "siem-kibana",
+                  "values": Array [
+                    "siem-kibana",
+                  ],
+                },
+                Object {
+                  "field": "cloud.machine.type",
+                  "originalValue": "projects/189716325846/machineTypes/n1-standard-1",
+                  "values": Array [
+                    "projects/189716325846/machineTypes/n1-standard-1",
+                  ],
+                },
+                Object {
+                  "field": "cloud.project.id",
+                  "originalValue": "elastic-beats",
+                  "values": Array [
+                    "elastic-beats",
+                  ],
+                },
+                Object {
+                  "field": "cloud.provider",
+                  "originalValue": "gce",
+                  "values": Array [
+                    "gce",
+                  ],
+                },
+                Object {
+                  "field": "destination.bytes",
+                  "originalValue": 584,
+                  "values": Array [
+                    "584",
+                  ],
+                },
+                Object {
+                  "field": "destination.ip",
+                  "originalValue": "10.47.8.200",
+                  "values": Array [
+                    "10.47.8.200",
+                  ],
+                },
+                Object {
+                  "field": "destination.packets",
+                  "originalValue": 4,
+                  "values": Array [
+                    "4",
+                  ],
+                },
+                Object {
+                  "field": "destination.port",
+                  "originalValue": 902,
+                  "values": Array [
+                    "902",
+                  ],
+                },
+              ]
+            }
+            eventId="Y-6TfmcB0WOhS6qyMv3s"
+            onUpdateColumns={[MockFunction]}
+            timelineId="test"
+            toggleColumn={[MockFunction]}
+          />,
+          "id": "table-view",
+          "name": "Table",
         },
         Object {
-          "field": "destination.port",
-          "originalValue": 902,
-          "values": Array [
-            "902",
-          ],
+          "content": <Memo(JsonView)
+            data={
+              Array [
+                Object {
+                  "field": "_id",
+                  "originalValue": "pEMaMmkBUV60JmNWmWVi",
+                  "values": Array [
+                    "pEMaMmkBUV60JmNWmWVi",
+                  ],
+                },
+                Object {
+                  "field": "_index",
+                  "originalValue": "filebeat-8.0.0-2019.02.19-000001",
+                  "values": Array [
+                    "filebeat-8.0.0-2019.02.19-000001",
+                  ],
+                },
+                Object {
+                  "field": "_type",
+                  "originalValue": "_doc",
+                  "values": Array [
+                    "_doc",
+                  ],
+                },
+                Object {
+                  "field": "_score",
+                  "originalValue": 1,
+                  "values": Array [
+                    "1",
+                  ],
+                },
+                Object {
+                  "field": "@timestamp",
+                  "originalValue": "2019-02-28T16:50:54.621Z",
+                  "values": Array [
+                    "2019-02-28T16:50:54.621Z",
+                  ],
+                },
+                Object {
+                  "field": "agent.ephemeral_id",
+                  "originalValue": "9d391ef2-a734-4787-8891-67031178c641",
+                  "values": Array [
+                    "9d391ef2-a734-4787-8891-67031178c641",
+                  ],
+                },
+                Object {
+                  "field": "agent.hostname",
+                  "originalValue": "siem-kibana",
+                  "values": Array [
+                    "siem-kibana",
+                  ],
+                },
+                Object {
+                  "field": "agent.id",
+                  "originalValue": "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                  "values": Array [
+                    "5de03d5f-52f3-482e-91d4-853c7de073c3",
+                  ],
+                },
+                Object {
+                  "field": "agent.type",
+                  "originalValue": "filebeat",
+                  "values": Array [
+                    "filebeat",
+                  ],
+                },
+                Object {
+                  "field": "agent.version",
+                  "originalValue": "8.0.0",
+                  "values": Array [
+                    "8.0.0",
+                  ],
+                },
+                Object {
+                  "field": "cloud.availability_zone",
+                  "originalValue": "projects/189716325846/zones/us-east1-b",
+                  "values": Array [
+                    "projects/189716325846/zones/us-east1-b",
+                  ],
+                },
+                Object {
+                  "field": "cloud.instance.id",
+                  "originalValue": "5412578377715150143",
+                  "values": Array [
+                    "5412578377715150143",
+                  ],
+                },
+                Object {
+                  "field": "cloud.instance.name",
+                  "originalValue": "siem-kibana",
+                  "values": Array [
+                    "siem-kibana",
+                  ],
+                },
+                Object {
+                  "field": "cloud.machine.type",
+                  "originalValue": "projects/189716325846/machineTypes/n1-standard-1",
+                  "values": Array [
+                    "projects/189716325846/machineTypes/n1-standard-1",
+                  ],
+                },
+                Object {
+                  "field": "cloud.project.id",
+                  "originalValue": "elastic-beats",
+                  "values": Array [
+                    "elastic-beats",
+                  ],
+                },
+                Object {
+                  "field": "cloud.provider",
+                  "originalValue": "gce",
+                  "values": Array [
+                    "gce",
+                  ],
+                },
+                Object {
+                  "field": "destination.bytes",
+                  "originalValue": 584,
+                  "values": Array [
+                    "584",
+                  ],
+                },
+                Object {
+                  "field": "destination.ip",
+                  "originalValue": "10.47.8.200",
+                  "values": Array [
+                    "10.47.8.200",
+                  ],
+                },
+                Object {
+                  "field": "destination.packets",
+                  "originalValue": 4,
+                  "values": Array [
+                    "4",
+                  ],
+                },
+                Object {
+                  "field": "destination.port",
+                  "originalValue": 902,
+                  "values": Array [
+                    "902",
+                  ],
+                },
+              ]
+            }
+          />,
+          "id": "json-view",
+          "name": "JSON View",
         },
       ]
     }
-    id="Y-6TfmcB0WOhS6qyMv3s"
-    onUpdateColumns={[MockFunction]}
-    onViewSelected={[MockFunction]}
-    timelineId="test"
-    toggleColumn={[MockFunction]}
-    view="table-view"
   />
-</Component>
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap
index a788b60afd6b3..caa7853fd9ec0 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/__snapshots__/json_view.test.tsx.snap
@@ -1,150 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JSON View rendering should match snapshot 1`] = `
-<Component
-  data={
-    Array [
-      Object {
-        "field": "_id",
-        "originalValue": "pEMaMmkBUV60JmNWmWVi",
-        "values": Array [
-          "pEMaMmkBUV60JmNWmWVi",
-        ],
-      },
-      Object {
-        "field": "_index",
-        "originalValue": "filebeat-8.0.0-2019.02.19-000001",
-        "values": Array [
-          "filebeat-8.0.0-2019.02.19-000001",
-        ],
-      },
-      Object {
-        "field": "_type",
-        "originalValue": "_doc",
-        "values": Array [
-          "_doc",
-        ],
-      },
-      Object {
-        "field": "_score",
-        "originalValue": 1,
-        "values": Array [
-          "1",
-        ],
-      },
-      Object {
-        "field": "@timestamp",
-        "originalValue": "2019-02-28T16:50:54.621Z",
-        "values": Array [
-          "2019-02-28T16:50:54.621Z",
-        ],
-      },
-      Object {
-        "field": "agent.ephemeral_id",
-        "originalValue": "9d391ef2-a734-4787-8891-67031178c641",
-        "values": Array [
-          "9d391ef2-a734-4787-8891-67031178c641",
-        ],
-      },
-      Object {
-        "field": "agent.hostname",
-        "originalValue": "siem-kibana",
-        "values": Array [
-          "siem-kibana",
-        ],
-      },
-      Object {
-        "field": "agent.id",
-        "originalValue": "5de03d5f-52f3-482e-91d4-853c7de073c3",
-        "values": Array [
-          "5de03d5f-52f3-482e-91d4-853c7de073c3",
-        ],
-      },
-      Object {
-        "field": "agent.type",
-        "originalValue": "filebeat",
-        "values": Array [
-          "filebeat",
-        ],
-      },
-      Object {
-        "field": "agent.version",
-        "originalValue": "8.0.0",
-        "values": Array [
-          "8.0.0",
-        ],
-      },
-      Object {
-        "field": "cloud.availability_zone",
-        "originalValue": "projects/189716325846/zones/us-east1-b",
-        "values": Array [
-          "projects/189716325846/zones/us-east1-b",
-        ],
-      },
-      Object {
-        "field": "cloud.instance.id",
-        "originalValue": "5412578377715150143",
-        "values": Array [
-          "5412578377715150143",
-        ],
-      },
-      Object {
-        "field": "cloud.instance.name",
-        "originalValue": "siem-kibana",
-        "values": Array [
-          "siem-kibana",
-        ],
-      },
-      Object {
-        "field": "cloud.machine.type",
-        "originalValue": "projects/189716325846/machineTypes/n1-standard-1",
-        "values": Array [
-          "projects/189716325846/machineTypes/n1-standard-1",
-        ],
-      },
-      Object {
-        "field": "cloud.project.id",
-        "originalValue": "elastic-beats",
-        "values": Array [
-          "elastic-beats",
-        ],
-      },
-      Object {
-        "field": "cloud.provider",
-        "originalValue": "gce",
-        "values": Array [
-          "gce",
-        ],
-      },
-      Object {
-        "field": "destination.bytes",
-        "originalValue": 584,
-        "values": Array [
-          "584",
-        ],
-      },
-      Object {
-        "field": "destination.ip",
-        "originalValue": "10.47.8.200",
-        "values": Array [
-          "10.47.8.200",
-        ],
-      },
-      Object {
-        "field": "destination.packets",
-        "originalValue": 4,
-        "values": Array [
-          "4",
-        ],
-      },
-      Object {
-        "field": "destination.port",
-        "originalValue": 902,
-        "values": Array [
-          "902",
-        ],
-      },
-    ]
+<JsonEditor
+  data-test-subj="jsonView"
+>
+  <EuiCodeEditor
+    isReadOnly={true}
+    mode="javascript"
+    setOptions={
+      Object {
+        "fontSize": "12px",
+      }
+    }
+    value="{
+  \\"_id\\": \\"pEMaMmkBUV60JmNWmWVi\\",
+  \\"_index\\": \\"filebeat-8.0.0-2019.02.19-000001\\",
+  \\"_type\\": \\"_doc\\",
+  \\"_score\\": 1,
+  \\"@timestamp\\": \\"2019-02-28T16:50:54.621Z\\",
+  \\"agent\\": {
+    \\"ephemeral_id\\": \\"9d391ef2-a734-4787-8891-67031178c641\\",
+    \\"hostname\\": \\"siem-kibana\\",
+    \\"id\\": \\"5de03d5f-52f3-482e-91d4-853c7de073c3\\",
+    \\"type\\": \\"filebeat\\",
+    \\"version\\": \\"8.0.0\\"
+  },
+  \\"cloud\\": {
+    \\"availability_zone\\": \\"projects/189716325846/zones/us-east1-b\\",
+    \\"instance\\": {
+      \\"id\\": \\"5412578377715150143\\",
+      \\"name\\": \\"siem-kibana\\"
+    },
+    \\"machine\\": {
+      \\"type\\": \\"projects/189716325846/machineTypes/n1-standard-1\\"
+    },
+    \\"project\\": {
+      \\"id\\": \\"elastic-beats\\"
+    },
+    \\"provider\\": \\"gce\\"
+  },
+  \\"destination\\": {
+    \\"bytes\\": 584,
+    \\"ip\\": \\"10.47.8.200\\",
+    \\"packets\\": 4,
+    \\"port\\": 902
   }
-/>
+}"
+    width="100%"
+  />
+</JsonEditor>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.test.tsx
index fb1f9f0cd4e64..d8c0e46d8480b 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/event_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/event_details.test.tsx
@@ -21,19 +21,17 @@ describe('EventDetails', () => {
   describe('rendering', () => {
     test('should match snapshot', () => {
       const wrapper = shallow(
-        <TestProviders>
-          <EventDetails
-            browserFields={mockBrowserFields}
-            columnHeaders={defaultHeaders}
-            data={mockDetailItemData}
-            id={mockDetailItemDataId}
-            view="table-view"
-            onUpdateColumns={jest.fn()}
-            onViewSelected={jest.fn()}
-            timelineId="test"
-            toggleColumn={jest.fn()}
-          />
-        </TestProviders>
+        <EventDetails
+          browserFields={mockBrowserFields}
+          columnHeaders={defaultHeaders}
+          data={mockDetailItemData}
+          id={mockDetailItemDataId}
+          view="table-view"
+          onUpdateColumns={jest.fn()}
+          onViewSelected={jest.fn()}
+          timelineId="test"
+          toggleColumn={jest.fn()}
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/event_details/json_view.tsx b/x-pack/legacy/plugins/siem/public/components/event_details/json_view.tsx
index 05690a0d20d92..519f56adff2d2 100644
--- a/x-pack/legacy/plugins/siem/public/components/event_details/json_view.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/event_details/json_view.tsx
@@ -7,7 +7,6 @@
 import { EuiCodeEditor } from '@elastic/eui';
 import { set } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DetailItem } from '../../graphql/types';
@@ -23,7 +22,7 @@ const JsonEditor = styled.div`
 
 JsonEditor.displayName = 'JsonEditor';
 
-export const JsonView = pure<Props>(({ data }) => (
+export const JsonView = React.memo<Props>(({ data }) => (
   <JsonEditor data-test-subj="jsonView">
     <EuiCodeEditor
       isReadOnly
diff --git a/x-pack/legacy/plugins/siem/public/components/external_link_icon/index.tsx b/x-pack/legacy/plugins/siem/public/components/external_link_icon/index.tsx
index a54e0803d02ea..bba32e72abc37 100644
--- a/x-pack/legacy/plugins/siem/public/components/external_link_icon/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/external_link_icon/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiIcon } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 const LinkIcon = styled(EuiIcon)`
@@ -30,7 +29,7 @@ const iconType = 'popout';
  * Renders an icon that indicates following the hyperlink will navigate to
  * content external to the app
  */
-export const ExternalLinkIcon = pure<{
+export const ExternalLinkIcon = React.memo<{
   leftMargin?: boolean;
 }>(({ leftMargin = true }) =>
   leftMargin ? (
diff --git a/x-pack/legacy/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
index 6ae9268966480..2ff93b2ecada4 100644
--- a/x-pack/legacy/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/field_renderers/__snapshots__/field_renderers.test.tsx.snap
@@ -1,220 +1,126 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Field Renderers #autonomousSystemRenderer it renders correctly against snapshot 1`] = `
-<Component>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="none"
+<div
+  className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <DefaultDraggable
+      field="source.as.organization.name"
+      id="autonomous-system-renderer-default-draggable-ip-overview-source.as.organization.name"
+      value="Test Org"
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
   >
-    <EuiFlexItem
-      grow={false}
-    >
-      <DefaultDraggable
-        field="source.as.organization.name"
-        id="autonomous-system-renderer-default-draggable-ip-overview-source.as.organization.name"
-        value="Test Org"
-      />
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      /
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <DefaultDraggable
-        field="source.as.number"
-        id="autonomous-system-renderer-default-draggable-ip-overview-source.as.number"
-        value="12345"
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</Component>
+    /
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  >
+    <DefaultDraggable
+      field="source.as.number"
+      id="autonomous-system-renderer-default-draggable-ip-overview-source.as.number"
+      value="12345"
+    />
+  </EuiFlexItem>
+</div>
 `;
 
 exports[`Field Renderers #dateRenderer it renders correctly against snapshot 1`] = `
-<Component>
-  <FormattedRelativePreferenceDate
-    value="2019-02-07T17:19:41.636Z"
+<LocalizedDateTooltip
+  date={2019-02-07T17:19:41.636Z}
+>
+  <PreferenceFormattedDate
+    data-test-subj="preference-time"
+    value={2019-02-07T17:19:41.636Z}
   />
-</Component>
+</LocalizedDateTooltip>
 `;
 
 exports[`Field Renderers #hostIdRenderer it renders correctly against snapshot 1`] = `
-<Component>
-  <DefaultDraggable
-    field="host.name"
-    id="host-name-renderer-default-draggable-ip-overview-host-name"
-    value="raspberrypi"
-  >
-    <HostDetailsLink
-      hostName="raspberrypi"
-    >
-      raspberrypi
-    </HostDetailsLink>
-  </DefaultDraggable>
-</Component>
+<DraggableWrapper
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "host-name-renderer-default-draggable-ip-overview-host-name",
+      "kqlQuery": "",
+      "name": "raspberrypi",
+      "queryMatch": Object {
+        "field": "host.name",
+        "operator": ":",
+        "value": "raspberrypi",
+      },
+    }
+  }
+  render={[Function]}
+/>
 `;
 
 exports[`Field Renderers #hostNameRenderer it renders correctly against snapshot 1`] = `
-<Component>
-  <DefaultDraggable
-    field="host.name"
-    id="host-name-renderer-default-draggable-ip-overview-host-name"
-    value="raspberrypi"
-  >
-    <HostDetailsLink
-      hostName="raspberrypi"
-    >
-      raspberrypi
-    </HostDetailsLink>
-  </DefaultDraggable>
-</Component>
+<DraggableWrapper
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "host-name-renderer-default-draggable-ip-overview-host-name",
+      "kqlQuery": "",
+      "name": "raspberrypi",
+      "queryMatch": Object {
+        "field": "host.name",
+        "operator": ":",
+        "value": "raspberrypi",
+      },
+    }
+  }
+  render={[Function]}
+/>
 `;
 
 exports[`Field Renderers #locationRenderer it renders correctly against snapshot 1`] = `
-<Component>
-  <EuiFlexGroup
-    alignItems="center"
-    data-test-subj="location-field"
-    gutterSize="none"
+<div
+  className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+  data-test-subj="location-field"
+>
+  <EuiFlexItem
+    grow={false}
+  >
+    <DefaultDraggable
+      field="source.geo.city_name"
+      id="location-renderer-default-draggable-ip-overview-source.geo.city_name"
+      value={
+        Array [
+          "New York",
+        ]
+      }
+    />
+  </EuiFlexItem>
+  , 
+  <EuiFlexItem
+    grow={false}
   >
-    <EuiFlexItem
-      grow={false}
-    >
-      <DefaultDraggable
-        field="source.geo.city_name"
-        id="location-renderer-default-draggable-ip-overview-source.geo.city_name"
-        value={
-          Array [
-            "New York",
-          ]
-        }
-      />
-    </EuiFlexItem>
-    , 
-    <EuiFlexItem
-      grow={false}
-    >
-      <DefaultDraggable
-        field="source.geo.region_name"
-        id="location-renderer-default-draggable-ip-overview-source.geo.region_name"
-        value={
-          Array [
-            "New York",
-          ]
-        }
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</Component>
+    <DefaultDraggable
+      field="source.geo.region_name"
+      id="location-renderer-default-draggable-ip-overview-source.geo.region_name"
+      value={
+        Array [
+          "New York",
+        ]
+      }
+    />
+  </EuiFlexItem>
+</div>
 `;
 
 exports[`Field Renderers #reputationRenderer it renders correctly against snapshot 1`] = `
-<Component
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
+<DragDropContext
+  onDragEnd={[MockFunction]}
 >
   <VirusTotalLink
     link="10.10.10.10"
@@ -227,118 +133,14 @@ exports[`Field Renderers #reputationRenderer it renders correctly against snapsh
   >
     talosIntelligence.com
   </ReputationLink>
-</Component>
+</DragDropContext>
 `;
 
 exports[`Field Renderers #whoisRenderer it renders correctly against snapshot 1`] = `
-<Component
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
+<EuiLink
+  href="https://www.iana.org/whois?q=10.10.10.10"
+  target="_blank"
 >
-  <WhoIsLink
-    domain="10.10.10.10"
-  >
-    iana.org
-  </WhoIsLink>
-</Component>
+  iana.org
+</EuiLink>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.test.tsx b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.test.tsx
index 0fd63bc3f2bf2..2d69db82405ba 100644
--- a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.test.tsx
@@ -32,9 +32,7 @@ describe('Field Renderers', () => {
   describe('#locationRenderer', () => {
     test('it renders correctly against snapshot', () => {
       const wrapper = shallow(
-        <TestProviders>
-          {locationRenderer(['source.geo.city_name', 'source.geo.region_name'], mockData.complete)}
-        </TestProviders>
+        locationRenderer(['source.geo.city_name', 'source.geo.region_name'], mockData.complete)
       );
 
       expect(toJson(wrapper)).toMatchSnapshot();
@@ -59,9 +57,7 @@ describe('Field Renderers', () => {
 
   describe('#dateRenderer', () => {
     test('it renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>{dateRenderer(mockData.complete.source!.firstSeen)}</TestProviders>
-      );
+      const wrapper = shallow(dateRenderer(mockData.complete.source!.firstSeen));
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -78,9 +74,7 @@ describe('Field Renderers', () => {
 
     test('it renders correctly against snapshot', () => {
       const wrapper = shallow(
-        <TestProviders>
-          {autonomousSystemRenderer(mockData.complete.source!.autonomousSystem!, FlowTarget.source)}
-        </TestProviders>
+        autonomousSystemRenderer(mockData.complete.source!.autonomousSystem!, FlowTarget.source)
       );
 
       expect(toJson(wrapper)).toMatchSnapshot();
@@ -113,9 +107,7 @@ describe('Field Renderers', () => {
       ip: null,
     };
     test('it renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>{hostNameRenderer(mockData.complete.host, '10.10.10.10')}</TestProviders>
-      );
+      const wrapper = shallow(hostNameRenderer(mockData.complete.host, '10.10.10.10'));
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -158,9 +150,7 @@ describe('Field Renderers', () => {
       ip: ['10.10.10.10'],
     };
     test('it renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>{hostNameRenderer(mockData.complete.host, '10.10.10.10')}</TestProviders>
-      );
+      const wrapper = shallow(hostNameRenderer(mockData.complete.host, '10.10.10.10'));
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -194,9 +184,7 @@ describe('Field Renderers', () => {
 
   describe('#whoisRenderer', () => {
     test('it renders correctly against snapshot', () => {
-      const wrapper = shallowWithIntl(
-        <TestProviders>{whoisRenderer('10.10.10.10')}</TestProviders>
-      );
+      const wrapper = shallowWithIntl(whoisRenderer('10.10.10.10'));
 
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -208,7 +196,7 @@ describe('Field Renderers', () => {
         <TestProviders>{reputationRenderer('10.10.10.10')}</TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DragDropContext'))).toMatchSnapshot();
     });
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
index 5df961dfceeb5..80d68dfe1b731 100644
--- a/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/field_renderers/field_renderers.tsx
@@ -8,9 +8,8 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiText } from '
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getOr } from 'lodash/fp';
 import React, { Fragment, useState } from 'react';
-import { pure } from 'recompose';
-
 import styled from 'styled-components';
+
 import { AutonomousSystem, FlowTarget, HostEcsFields, IpOverviewData } from '../../graphql/types';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { DefaultDraggable } from '../draggables';
@@ -151,7 +150,7 @@ interface DefaultFieldRendererProps {
 
 // TODO: This causes breaks between elements until the ticket below is fixed
 // https://github.com/elastic/ingest-dev/issues/474
-export const DefaultFieldRenderer = pure<DefaultFieldRendererProps>(
+export const DefaultFieldRenderer = React.memo<DefaultFieldRendererProps>(
   ({
     attrName,
     displayCount = 1,
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx
index 8d4e3b3928492..7b8451db2212f 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/category.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiInMemoryTable } from '@elastic/eui';
-import { pure } from 'recompose';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -33,7 +32,7 @@ interface Props {
   width: number;
 }
 
-export const Category = pure<Props>(
+export const Category = React.memo<Props>(
   ({ categoryId, filteredBrowserFields, fieldItems, timelineId, width }) => (
     <>
       <CategoryTitle
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx
index a81f80334f1ac..49255abc83dd5 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/category_title.tsx
@@ -5,14 +5,11 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
-import { pure } from 'recompose';
 import * as React from 'react';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
-
 import { getFieldBrowserCategoryTitleClassName, getFieldCount } from './helpers';
-
 import { CountBadge } from '../page';
 
 const CountBadgeContainer = styled.div`
@@ -35,26 +32,28 @@ interface Props {
   timelineId: string;
 }
 
-export const CategoryTitle = pure<Props>(({ filteredBrowserFields, categoryId, timelineId }) => (
-  <EuiFlexGroup alignItems="center" data-test-subj="category-title-container" gutterSize="none">
-    <EuiFlexItem grow={false}>
-      <EuiTitle
-        className={getFieldBrowserCategoryTitleClassName({ categoryId, timelineId })}
-        data-test-subj="selected-category-title"
-        size="xxs"
-      >
-        <h5>{categoryId}</h5>
-      </EuiTitle>
-    </EuiFlexItem>
-
-    <EuiFlexItem grow={false}>
-      <CountBadgeContainer>
-        <CountBadge data-test-subj="selected-category-count-badge" color="hollow">
-          {getFieldCount(filteredBrowserFields[categoryId])}
-        </CountBadge>
-      </CountBadgeContainer>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-));
+export const CategoryTitle = React.memo<Props>(
+  ({ filteredBrowserFields, categoryId, timelineId }) => (
+    <EuiFlexGroup alignItems="center" data-test-subj="category-title-container" gutterSize="none">
+      <EuiFlexItem grow={false}>
+        <EuiTitle
+          className={getFieldBrowserCategoryTitleClassName({ categoryId, timelineId })}
+          data-test-subj="selected-category-title"
+          size="xxs"
+        >
+          <h5>{categoryId}</h5>
+        </EuiTitle>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <CountBadgeContainer>
+          <CountBadge data-test-subj="selected-category-count-badge" color="hollow">
+            {getFieldCount(filteredBrowserFields[categoryId])}
+          </CountBadge>
+        </CountBadgeContainer>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  )
+);
 
 CategoryTitle.displayName = 'CategoryTitle';
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx
index 4cc5537bec343..170cf324ca6d8 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/fields_pane.tsx
@@ -5,7 +5,6 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { pure } from 'recompose';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -59,7 +58,7 @@ type Props = Pick<FieldBrowserProps, 'onFieldSelected' | 'onUpdateColumns' | 'ti
    */
   toggleColumn: (column: ColumnHeader) => void;
 };
-export const FieldsPane = pure<Props>(
+export const FieldsPane = React.memo<Props>(
   ({
     columnHeaders,
     filteredBrowserFields,
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx
index ae9109bffe0db..8acb19970c268 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/header.tsx
@@ -13,7 +13,6 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../containers/source';
@@ -65,7 +64,7 @@ interface Props {
   timelineId: string;
 }
 
-const CountRow = pure<Pick<Props, 'filteredBrowserFields'>>(({ filteredBrowserFields }) => (
+const CountRow = React.memo<Pick<Props, 'filteredBrowserFields'>>(({ filteredBrowserFields }) => (
   <CountsFlexGroup
     alignItems="center"
     data-test-subj="counts-flex-group"
@@ -93,7 +92,7 @@ const CountRow = pure<Pick<Props, 'filteredBrowserFields'>>(({ filteredBrowserFi
 
 CountRow.displayName = 'CountRow';
 
-const TitleRow = pure<{
+const TitleRow = React.memo<{
   isEventViewer?: boolean;
   onOutsideClick: () => void;
   onUpdateColumns: OnUpdateColumns;
@@ -121,7 +120,7 @@ const TitleRow = pure<{
 
 TitleRow.displayName = 'TitleRow';
 
-export const Header = pure<Props>(
+export const Header = React.memo<Props>(
   ({
     isEventViewer,
     isSearching,
diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap
index 56432cb25c189..35fe74abff284 100644
--- a/x-pack/legacy/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/filters_global/__snapshots__/filters_global.test.tsx.snap
@@ -1,9 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rendering renders correctly 1`] = `
-<Component>
-  <p>
-    Additional filters here.
-  </p>
-</Component>
+<Sticky
+  bottomOffset={0}
+  disableCompensation={false}
+  disableHardwareAcceleration={false}
+  relative={false}
+  topOffset={-49}
+>
+  <Component />
+</Sticky>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.test.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.test.tsx
index adbd904c5c325..7f377a57c3e9b 100644
--- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.test.tsx
@@ -9,7 +9,7 @@ import toJson from 'enzyme-to-json';
 import React from 'react';
 
 import '../../mock/match_media';
-import { FiltersGlobal } from './index';
+import { FiltersGlobal } from './filters_global';
 
 describe('rendering', () => {
   test('renders correctly', () => {
@@ -18,6 +18,7 @@ describe('rendering', () => {
         <p>{'Additional filters here.'}</p>
       </FiltersGlobal>
     );
+
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
index bdda8497a8bcb..edf6f7f01ab2e 100644
--- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
@@ -7,7 +7,6 @@
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Sticky } from 'react-sticky';
-import { pure } from 'recompose';
 import styled, { css } from 'styled-components';
 
 import { gutterTimeline } from '../../lib/helpers';
@@ -42,7 +41,7 @@ export interface FiltersGlobalProps {
   children: React.ReactNode;
 }
 
-export const FiltersGlobal = pure<FiltersGlobalProps>(({ children }) => (
+export const FiltersGlobal = React.memo<FiltersGlobalProps>(({ children }) => (
   <Sticky disableCompensation={disableStickyMq.matches} topOffset={-offsetChrome}>
     {({ style, isSticky }) => (
       <Wrapper className="siemFiltersGlobal" isSticky={isSticky} style={style}>
diff --git a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
index 9553ec5b7654e..ee76657c8d27a 100644
--- a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_direction_select.test.tsx.snap
@@ -1,8 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select Flow Direction rendering it renders the basic group button for uni-direction and bi-direction 1`] = `
-<Component
-  onChangeDirection={[MockFunction]}
-  selectedDirection="uniDirectional"
-/>
+<EuiFilterGroup>
+  <EuiFilterButton
+    color="text"
+    data-test-subj="uniDirectional"
+    grow={true}
+    hasActiveFilters={true}
+    iconSide="right"
+    onClick={[Function]}
+    type="button"
+    withNext={true}
+  >
+    Unidirectional
+  </EuiFilterButton>
+  <EuiFilterButton
+    color="text"
+    data-test-subj="biDirectional"
+    grow={true}
+    hasActiveFilters={false}
+    iconSide="right"
+    onClick={[Function]}
+    type="button"
+  >
+    Bidirectional
+  </EuiFilterButton>
+</EuiFilterGroup>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
index 46053008ea09c..a9b48c8ee16be 100644
--- a/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/flow_controls/__snapshots__/flow_target_select.test.tsx.snap
@@ -1,11 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FlowTargetSelect Component rendering it renders the FlowTargetSelect 1`] = `
-<Component
-  id="TestFlowTargetId"
+<EuiSuperSelect
+  compressed={false}
+  fullWidth={false}
+  hasDividers={false}
+  isInvalid={false}
   isLoading={false}
-  selectedDirection="uniDirectional"
-  selectedTarget="source"
-  updateFlowTargetAction={[MockFunction]}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "directions": Array [
+          "uniDirectional",
+          "biDirectional",
+        ],
+        "id": "TestFlowTargetId-select-flow-target-source",
+        "inputDisplay": "Source",
+        "value": "source",
+      },
+      Object {
+        "directions": Array [
+          "uniDirectional",
+          "biDirectional",
+        ],
+        "id": "TestFlowTargetId-select-flow-target-destination",
+        "inputDisplay": "Destination",
+        "value": "destination",
+      },
+    ]
+  }
+  valueOfSelected="source"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx b/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx
index d5370c218a2de..2b826164063be 100644
--- a/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_direction_select.tsx
@@ -7,7 +7,6 @@
 import { EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
 import React from 'react';
 
-import { pure } from 'recompose';
 import { FlowDirection } from '../../graphql/types';
 
 import * as i18n from './translations';
@@ -17,7 +16,7 @@ interface Props {
   onChangeDirection: (value: FlowDirection) => void;
 }
 
-export const FlowDirectionSelect = pure<Props>(({ onChangeDirection, selectedDirection }) => (
+export const FlowDirectionSelect = React.memo<Props>(({ onChangeDirection, selectedDirection }) => (
   <EuiFilterGroup>
     <EuiFilterButton
       withNext
diff --git a/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx b/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx
index 9c9186f9a4c0e..b1c463fdc32f4 100644
--- a/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flow_controls/flow_target_select.tsx
@@ -6,7 +6,6 @@
 
 import { EuiSuperSelect } from '@elastic/eui';
 import React from 'react';
-import { pure } from 'recompose';
 import { ActionCreator } from 'typescript-fsa';
 
 import { FlowDirection, FlowTarget } from '../../graphql/types';
@@ -58,7 +57,7 @@ const onChangeTarget = (
 
 export type FlowTargetSelectProps = OwnProps;
 
-export const FlowTargetSelect = pure<FlowTargetSelectProps>(
+export const FlowTargetSelect = React.memo<FlowTargetSelectProps>(
   ({
     id,
     isLoading = false,
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap
index 3aa9fd1b962b5..abdc4f4681294 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/__snapshots__/index.test.tsx.snap
@@ -1,16 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Flyout rendering it renders correctly against snapshot 1`] = `
-<Component>
-  <Connect(FlyoutComponent)
-    flyoutHeight={980}
-    headerHeight={60}
-    timelineId="test"
-    usersViewing={
-      Array [
-        "elastic",
-      ]
-    }
-  />
-</Component>
+<Flyout
+  flyoutHeight={980}
+  headerHeight={60}
+  timelineId="test"
+  usersViewing={
+    Array [
+      "elastic",
+    ]
+  }
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx
index ddc3e4f15938a..86a8952a10efa 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/index.test.tsx
@@ -37,7 +37,7 @@ describe('Flyout', () => {
           />
         </TestProviders>
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('Flyout'))).toMatchSnapshot();
     });
 
     test('it renders the default flyout state as a button', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx
index aae8f67997156..2d347830d5b1b 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/index.tsx
@@ -124,3 +124,5 @@ const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
 export const Flyout = connect(mapStateToProps, {
   showTimeline: timelineActions.showTimeline,
 })(FlyoutComponent);
+
+Flyout.displayName = 'Flyout';
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap
index 31eaf4f56d7bc..efa682cd4d18e 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/__snapshots__/index.test.tsx.snap
@@ -1,22 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pane renders correctly against snapshot 1`] = `
-<Component>
-  <Connect(FlyoutPaneComponent)
-    flyoutHeight={980}
-    headerHeight={60}
-    onClose={[MockFunction]}
-    timelineId="test"
-    usersViewing={
-      Array [
-        "elastic",
-      ]
-    }
-    width={640}
-  >
-    <span>
-      I am a child of flyout
-    </span>
-  </Connect(FlyoutPaneComponent)>
-</Component>
+<Pane
+  flyoutHeight={980}
+  headerHeight={60}
+  onClose={[MockFunction]}
+  timelineId="test"
+  usersViewing={
+    Array [
+      "elastic",
+    ]
+  }
+  width={640}
+>
+  <span>
+    I am a child of flyout
+  </span>
+</Pane>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
index 65233e55901ff..acea2d1cce468 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
@@ -44,7 +44,7 @@ describe('Pane', () => {
         </Pane>
       </TestProviders>
     );
-    expect(toJson(EmptyComponent)).toMatchSnapshot();
+    expect(toJson(EmptyComponent.find('Pane'))).toMatchSnapshot();
   });
 
   test('it should NOT let the flyout expand to take up the full width of the element that contains it', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
index 4b5ceb25befa4..f2f0cf4f980f3 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
@@ -182,3 +182,5 @@ FlyoutPaneComponent.displayName = 'FlyoutPaneComponent';
 export const Pane = connect(null, {
   applyDeltaToWidth: timelineActions.applyDeltaToWidth,
 })(FlyoutPaneComponent);
+
+Pane.displayName = 'Pane';
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.test.tsx
index 71820c62dd528..a517820361f9f 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_bytes/index.test.tsx
@@ -21,6 +21,10 @@ jest.mock('../../lib/settings/use_kibana_ui_setting', () => ({
 describe('formatted_bytes', () => {
   describe('PreferenceFormattedBytes', () => {
     describe('rendering', () => {
+      beforeEach(() => {
+        mockUseKibanaUiSetting.mockClear();
+      });
+
       const bytes = '2806422';
 
       test('renders correctly against snapshot', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap
index 0f9cf1ba89f9c..d196a23bff5bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_date/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`formatted_date PreferenceFormattedDate rendering renders correctly against snapshot 1`] = `
-<Component
+<PreferenceFormattedDate
   value={2019-02-25T22:27:05.000Z}
-/>
+>
+  2019-02-25T22:27:05.000Z
+</PreferenceFormattedDate>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_date/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_date/index.test.tsx
index bb0b947f149f4..df361a06d3805 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_date/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_date/index.test.tsx
@@ -38,7 +38,8 @@ describe('formatted_date', () => {
           .format(config.dateFormat);
 
       test('renders correctly against snapshot', () => {
-        const wrapper = shallow(<PreferenceFormattedDate value={isoDate} />);
+        mockUseKibanaUiSetting.mockImplementation(() => [null]);
+        const wrapper = mount(<PreferenceFormattedDate value={isoDate} />);
         expect(toJson(wrapper)).toMatchSnapshot();
       });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx
index 32c064096fcf9..37bf3653f3b62 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_date/index.tsx
@@ -7,7 +7,6 @@
 import moment from 'moment-timezone';
 import * as React from 'react';
 import { FormattedRelative } from '@kbn/i18n/react';
-import { pure } from 'recompose';
 
 import {
   DEFAULT_DATE_FORMAT,
@@ -19,7 +18,7 @@ import { getOrEmptyTagFromValue } from '../empty_value';
 import { LocalizedDateTooltip } from '../localized_date_tooltip';
 import { getMaybeDate } from './maybe_date';
 
-export const PreferenceFormattedDate = pure<{ value: Date }>(({ value }) => {
+export const PreferenceFormattedDate = React.memo<{ value: Date }>(({ value }) => {
   const [dateFormat] = useKibanaUiSetting(DEFAULT_DATE_FORMAT);
   const [dateFormatTz] = useKibanaUiSetting(DEFAULT_DATE_FORMAT_TZ);
   const [timezone] = useKibanaUiSetting(DEFAULT_TIMEZONE_BROWSER);
@@ -43,7 +42,7 @@ PreferenceFormattedDate.displayName = 'PreferenceFormattedDate';
  * - a long representation of the date that includes the day of the week (e.g. Thursday, March 21, 2019 6:47pm)
  * - the raw date value (e.g. 2019-03-22T00:47:46Z)
  */
-export const FormattedDate = pure<{
+export const FormattedDate = React.memo<{
   fieldName: string;
   value?: string | number | null;
 }>(
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_duration/index.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_duration/index.tsx
index c97fc7bdc2428..8afbafe57af4a 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_duration/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_duration/index.tsx
@@ -5,12 +5,11 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { getFormattedDurationString } from './helpers';
 import { FormattedDurationTooltip } from './tooltip';
 
-export const FormattedDuration = pure<{
+export const FormattedDuration = React.memo<{
   maybeDurationNanoseconds: string | number | object | undefined | null;
   tooltipTitle?: string;
 }>(({ maybeDurationNanoseconds, tooltipTitle }) => (
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_duration/tooltip/index.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_duration/tooltip/index.tsx
index 08f4a412caf51..1372b3ef10920 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_duration/tooltip/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_duration/tooltip/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import { FormattedMessage } from '@kbn/i18n/react';
 import styled from 'styled-components';
 
@@ -18,7 +17,7 @@ const P = styled.p`
 
 P.displayName = 'P';
 
-export const FormattedDurationTooltipContent = pure<{
+export const FormattedDurationTooltipContent = React.memo<{
   maybeDurationNanoseconds: string | number | object | undefined | null;
   tooltipTitle?: string;
 }>(({ maybeDurationNanoseconds, tooltipTitle }) => (
@@ -35,7 +34,7 @@ export const FormattedDurationTooltipContent = pure<{
 
 FormattedDurationTooltipContent.displayName = 'FormattedDurationTooltipContent';
 
-export const FormattedDurationTooltip = pure<{
+export const FormattedDurationTooltip = React.memo<{
   children: JSX.Element;
   maybeDurationNanoseconds: string | number | object | undefined | null;
   tooltipTitle?: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx b/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
index 81f5cbfe2308b..8dcb558122d01 100644
--- a/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/formatted_ip/index.tsx
@@ -6,7 +6,6 @@
 
 import { isArray, isEmpty, isString, uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DragEffects, DraggableWrapper } from '../drag_and_drop/draggable_wrapper';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
@@ -60,7 +59,7 @@ const getDataProvider = ({
   and: [],
 });
 
-const NonDecoratedIp = pure<{
+const NonDecoratedIp = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
@@ -92,7 +91,7 @@ const NonDecoratedIp = pure<{
 
 NonDecoratedIp.displayName = 'NonDecoratedIp';
 
-const AddressLinks = pure<{
+const AddressLinks = React.memo<{
   addresses: string[];
   contextId: string;
   eventId: string;
@@ -128,7 +127,7 @@ const AddressLinks = pure<{
 
 AddressLinks.displayName = 'AddressLinks';
 
-export const FormattedIp = pure<{
+export const FormattedIp = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap
index 665a5c75f3684..849f3616524cc 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/header_global/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderGlobal it renders 1`] = `
-<Component>
-  <HeaderGlobal />
-</Component>
+<Wrapper
+  className="siemHeaderGlobal"
+>
+  <EuiFlexGroup
+    alignItems="center"
+    justifyContent="spaceBetween"
+    wrap={true}
+  >
+    <FlexItem>
+      <EuiFlexGroup
+        alignItems="center"
+        responsive={false}
+      >
+        <FlexItem
+          grow={false}
+        >
+          <EuiLink
+            href="#/link-to/overview"
+          >
+            <EuiIcon
+              aria-label="SIEM"
+              size="l"
+              type="securityAnalyticsApp"
+            />
+          </EuiLink>
+        </FlexItem>
+        <FlexItem
+          component="nav"
+        >
+          <SiemNavigation
+            display="condensed"
+            navTabs={
+              Object {
+                "detection-engine": Object {
+                  "disabled": false,
+                  "href": "#/link-to/detection-engine",
+                  "id": "detection-engine",
+                  "name": "Detection engine",
+                  "urlKey": "detection-engine",
+                },
+                "hosts": Object {
+                  "disabled": false,
+                  "href": "#/link-to/hosts",
+                  "id": "hosts",
+                  "name": "Hosts",
+                  "urlKey": "host",
+                },
+                "network": Object {
+                  "disabled": false,
+                  "href": "#/link-to/network",
+                  "id": "network",
+                  "name": "Network",
+                  "urlKey": "network",
+                },
+                "overview": Object {
+                  "disabled": false,
+                  "href": "#/link-to/overview",
+                  "id": "overview",
+                  "name": "Overview",
+                  "urlKey": "overview",
+                },
+                "timelines": Object {
+                  "disabled": false,
+                  "href": "#/link-to/timelines",
+                  "id": "timelines",
+                  "name": "Timelines",
+                  "urlKey": "timeline",
+                },
+              }
+            }
+          />
+        </FlexItem>
+      </EuiFlexGroup>
+    </FlexItem>
+    <FlexItem
+      grow={false}
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        responsive={false}
+        wrap={true}
+      >
+        <FlexItem
+          grow={false}
+        >
+          <MlPopover />
+        </FlexItem>
+        <FlexItem
+          grow={false}
+        >
+          <EuiButtonEmpty
+            data-test-subj="add-data"
+            href="kibana#home/tutorial_directory/siem"
+            iconType="plusInCircle"
+          >
+            Add data
+          </EuiButtonEmpty>
+        </FlexItem>
+      </EuiFlexGroup>
+    </FlexItem>
+  </EuiFlexGroup>
+</Wrapper>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_global/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_global/index.test.tsx
index ebd1da634ed1a..b3eb599af9407 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_global/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_global/index.test.tsx
@@ -8,7 +8,6 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 
-import { TestProviders } from '../../mock';
 import '../../mock/match_media';
 import '../../mock/ui_settings';
 import { HeaderGlobal } from './index';
@@ -23,11 +22,7 @@ jest.mock('../search_bar', () => ({
 
 describe('HeaderGlobal', () => {
   test('it renders', () => {
-    const wrapper = shallow(
-      <TestProviders>
-        <HeaderGlobal />
-      </TestProviders>
-    );
+    const wrapper = shallow(<HeaderGlobal />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap
index 0fe2890dc9f24..a91d8fce87dac 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/header_page/__snapshots__/index.test.tsx.snap
@@ -1,23 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderPage it renders 1`] = `
-<Component>
-  <HeaderPage
-    badgeOptions={
-      Object {
-        "beta": true,
-        "text": "Beta",
-        "tooltip": "Test tooltip",
-      }
-    }
-    border={true}
-    subtitle="Test subtitle"
-    subtitle2="Test subtitle 2"
-    title="Test title"
+<Header
+  border={true}
+>
+  <EuiFlexGroup
+    alignItems="center"
   >
-    <p>
-      Test supplement
-    </p>
-  </HeaderPage>
-</Component>
+    <FlexItem>
+      <EuiTitle
+        size="l"
+      >
+        <h1
+          data-test-subj="header-page-title"
+        >
+          Test title
+           
+          <EuiBetaBadge
+            label="Beta"
+            tooltipContent="Test tooltip"
+            tooltipPosition="bottom"
+          />
+        </h1>
+      </EuiTitle>
+      <Subtitle
+        data-test-subj="header-page-subtitle"
+        items="Test subtitle"
+      />
+      <Subtitle
+        data-test-subj="header-page-subtitle-2"
+        items="Test subtitle 2"
+      />
+    </FlexItem>
+    <FlexItem
+      data-test-subj="header-page-supplements"
+      grow={false}
+    >
+      <p>
+        Test supplement
+      </p>
+    </FlexItem>
+  </EuiFlexGroup>
+</Header>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
index 9c50a915b7ba8..c20f3c7185e66 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
@@ -18,17 +18,15 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 describe('HeaderPage', () => {
   test('it renders', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <HeaderPage
-          badgeOptions={{ beta: true, text: 'Beta', tooltip: 'Test tooltip' }}
-          border
-          subtitle="Test subtitle"
-          subtitle2="Test subtitle 2"
-          title="Test title"
-        >
-          <p>{'Test supplement'}</p>
-        </HeaderPage>
-      </TestProviders>
+      <HeaderPage
+        badgeOptions={{ beta: true, text: 'Beta', tooltip: 'Test tooltip' }}
+        border
+        subtitle="Test subtitle"
+        subtitle2="Test subtitle 2"
+        title="Test title"
+      >
+        <p>{'Test supplement'}</p>
+      </HeaderPage>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap
index ecd2b15a841f6..d4c3763f51460 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/header_section/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderSection it renders 1`] = `
-<Component>
-  <HeaderSection
-    title="Test title"
-  />
-</Component>
+<Header>
+  <EuiFlexGroup
+    alignItems="center"
+  >
+    <EuiFlexItem>
+      <EuiFlexGroup
+        alignItems="center"
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <EuiTitle>
+            <h2
+              data-test-subj="header-section-title"
+            >
+              Test title
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</Header>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
index 4a6da9c80968f..8606758c68d2c 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
@@ -17,11 +17,7 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 
 describe('HeaderSection', () => {
   test('it renders', () => {
-    const wrapper = shallow(
-      <TestProviders>
-        <HeaderSection title="Test title" />
-      </TestProviders>
-    );
+    const wrapper = shallow(<HeaderSection title="Test title" />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/help_menu/index.tsx b/x-pack/legacy/plugins/siem/public/components/help_menu/index.tsx
index 43fd8e653f3d8..d42ee08e86407 100644
--- a/x-pack/legacy/plugins/siem/public/components/help_menu/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/help_menu/index.tsx
@@ -4,12 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect } from 'react';
-import { pure } from 'recompose';
+import React, { useEffect } from 'react';
 import chrome from 'ui/chrome';
 import { i18n } from '@kbn/i18n';
 
-export const HelpMenu = pure<{}>(() => {
+export const HelpMenu = React.memo(() => {
   useEffect(() => {
     chrome.helpExtension.set({
       appName: i18n.translate('xpack.siem.chrome.help.appName', {
diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx
index 56bd86310acad..6908aba542e4c 100644
--- a/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.tsx
@@ -11,7 +11,6 @@ import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 import styled from 'styled-components';
 
-import { pure } from 'recompose';
 import { inputsModel, inputsSelectors, State } from '../../store';
 import { InputsModelId } from '../../store/inputs/constants';
 import { inputsActions } from '../../store/inputs';
@@ -58,7 +57,7 @@ interface InspectButtonDispatch {
 
 type InspectButtonProps = OwnProps & InspectButtonReducer & InspectButtonDispatch;
 
-const InspectButtonComponent = pure<InspectButtonProps>(
+const InspectButtonComponent = React.memo<InspectButtonProps>(
   ({
     compact = false,
     inputId = 'global',
diff --git a/x-pack/legacy/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap
index d75a0f054775a..0199742242e59 100644
--- a/x-pack/legacy/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ip/__snapshots__/index.test.tsx.snap
@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Port renders correctly against snapshot 1`] = `
-<Component
+<FormattedFieldValue
   contextId="test"
+  data-test-subj="formatted-ip"
   eventId="abcd"
   fieldName="destination.ip"
+  fieldType="ip"
   value="10.1.2.3"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/ip/index.tsx b/x-pack/legacy/plugins/siem/public/components/ip/index.tsx
index ceec48951a198..8c327989963b4 100644
--- a/x-pack/legacy/plugins/siem/public/components/ip/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ip/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { FormattedFieldValue } from '../timeline/body/renderers/formatted_field';
 
@@ -18,7 +17,7 @@ const IP_FIELD_TYPE = 'ip';
  * Renders text containing a draggable IP address (e.g. `source.ip`,
  * `destination.ip`) that contains a hyperlink
  */
-export const Ip = pure<{
+export const Ip = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/ja3_fingerprint/index.tsx b/x-pack/legacy/plugins/siem/public/components/ja3_fingerprint/index.tsx
index 3148efbb3050a..950ab252ad0bd 100644
--- a/x-pack/legacy/plugins/siem/public/components/ja3_fingerprint/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ja3_fingerprint/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DraggableBadge } from '../draggables';
@@ -27,7 +26,7 @@ Ja3FingerprintLabel.displayName = 'Ja3FingerprintLabel';
  * using TLS traffic to be identified, which is possible because SSL
  * negotiations happen in the clear
  */
-export const Ja3Fingerprint = pure<{
+export const Ja3Fingerprint = React.memo<{
   eventId: string;
   contextId: string;
   fieldName: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap
index 5902768383cb0..c5086c8cde285 100644
--- a/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/link_icon/__snapshots__/index.test.tsx.snap
@@ -1,14 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LinkIcon it renders 1`] = `
-<Component>
-  <LinkIcon
-    href="#"
-    iconSide="right"
-    iconSize="xxl"
-    iconType="alert"
+<Link
+  className="siemLinkIcon"
+  href="#"
+  iconSide="right"
+>
+  <EuiIcon
+    size="xxl"
+    type="alert"
+  />
+  <span
+    className="siemLinkIcon__label"
   >
     Test link
-  </LinkIcon>
-</Component>
+  </span>
+</Link>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
index 451db49028ee1..7f9133a0de7c0 100644
--- a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
@@ -17,11 +17,9 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 describe('LinkIcon', () => {
   test('it renders', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <LinkIcon href="#" iconSide="right" iconSize="xxl" iconType="alert">
-          {'Test link'}
-        </LinkIcon>
-      </TestProviders>
+      <LinkIcon href="#" iconSide="right" iconSize="xxl" iconType="alert">
+        {'Test link'}
+      </LinkIcon>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
index 0125b52e3ad33..5a7f6ef1274c9 100644
--- a/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/link_to/link_to.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
-import { pure } from 'recompose';
 
 import { SiemPageName } from '../../pages/home/types';
 import { HostsTableType } from '../../store/hosts/model';
@@ -26,7 +25,7 @@ interface LinkToPageProps {
   match: RouteMatch<{}>;
 }
 
-export const LinkToPage = pure<LinkToPageProps>(({ match }) => (
+export const LinkToPage = React.memo<LinkToPageProps>(({ match }) => (
   <Switch>
     <Route
       component={RedirectToOverviewPage}
diff --git a/x-pack/legacy/plugins/siem/public/components/links/index.tsx b/x-pack/legacy/plugins/siem/public/components/links/index.tsx
index e260e40c41ac5..9d8d01d2bb49a 100644
--- a/x-pack/legacy/plugins/siem/public/components/links/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/links/index.tsx
@@ -6,13 +6,12 @@
 
 import { EuiLink } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { encodeIpv6 } from '../../lib/helpers';
 import { getHostDetailsUrl, getIPDetailsUrl } from '../link_to';
 
 // Internal Links
-export const HostDetailsLink = pure<{ children?: React.ReactNode; hostName: string }>(
+export const HostDetailsLink = React.memo<{ children?: React.ReactNode; hostName: string }>(
   ({ children, hostName }) => (
     <EuiLink href={getHostDetailsUrl(encodeURIComponent(hostName))}>
       {children ? children : hostName}
@@ -22,7 +21,7 @@ export const HostDetailsLink = pure<{ children?: React.ReactNode; hostName: stri
 
 HostDetailsLink.displayName = 'HostDetailsLink';
 
-export const IPDetailsLink = pure<{ children?: React.ReactNode; ip: string }>(
+export const IPDetailsLink = React.memo<{ children?: React.ReactNode; ip: string }>(
   ({ children, ip }) => (
     <EuiLink href={`${getIPDetailsUrl(encodeURIComponent(encodeIpv6(ip)))}`}>
       {children ? children : ip}
@@ -33,7 +32,7 @@ export const IPDetailsLink = pure<{ children?: React.ReactNode; ip: string }>(
 IPDetailsLink.displayName = 'IPDetailsLink';
 
 // External Links
-export const GoogleLink = pure<{ children?: React.ReactNode; link: string }>(
+export const GoogleLink = React.memo<{ children?: React.ReactNode; link: string }>(
   ({ children, link }) => (
     <EuiLink href={`https://www.google.com/search?q=${encodeURIComponent(link)}`} target="_blank">
       {children ? children : link}
@@ -43,7 +42,7 @@ export const GoogleLink = pure<{ children?: React.ReactNode; link: string }>(
 
 GoogleLink.displayName = 'GoogleLink';
 
-export const PortOrServiceNameLink = pure<{
+export const PortOrServiceNameLink = React.memo<{
   children?: React.ReactNode;
   portOrServiceName: number | string;
 }>(({ children, portOrServiceName }) => (
@@ -60,21 +59,22 @@ export const PortOrServiceNameLink = pure<{
 
 PortOrServiceNameLink.displayName = 'PortOrServiceNameLink';
 
-export const Ja3FingerprintLink = pure<{ children?: React.ReactNode; ja3Fingerprint: string }>(
-  ({ children, ja3Fingerprint }) => (
-    <EuiLink
-      data-test-subj="ja3-fingerprint-link"
-      href={`https://sslbl.abuse.ch/ja3-fingerprints/${encodeURIComponent(ja3Fingerprint)}`}
-      target="_blank"
-    >
-      {children ? children : ja3Fingerprint}
-    </EuiLink>
-  )
-);
+export const Ja3FingerprintLink = React.memo<{
+  children?: React.ReactNode;
+  ja3Fingerprint: string;
+}>(({ children, ja3Fingerprint }) => (
+  <EuiLink
+    data-test-subj="ja3-fingerprint-link"
+    href={`https://sslbl.abuse.ch/ja3-fingerprints/${encodeURIComponent(ja3Fingerprint)}`}
+    target="_blank"
+  >
+    {children ? children : ja3Fingerprint}
+  </EuiLink>
+));
 
 Ja3FingerprintLink.displayName = 'Ja3FingerprintLink';
 
-export const CertificateFingerprintLink = pure<{
+export const CertificateFingerprintLink = React.memo<{
   children?: React.ReactNode;
   certificateFingerprint: string;
 }>(({ children, certificateFingerprint }) => (
@@ -91,7 +91,7 @@ export const CertificateFingerprintLink = pure<{
 
 CertificateFingerprintLink.displayName = 'CertificateFingerprintLink';
 
-export const ReputationLink = pure<{ children?: React.ReactNode; domain: string }>(
+export const ReputationLink = React.memo<{ children?: React.ReactNode; domain: string }>(
   ({ children, domain }) => (
     <EuiLink
       href={`https://www.talosintelligence.com/reputation_center/lookup?search=${encodeURIComponent(
@@ -106,7 +106,7 @@ export const ReputationLink = pure<{ children?: React.ReactNode; domain: string
 
 ReputationLink.displayName = 'ReputationLink';
 
-export const VirusTotalLink = pure<{ children?: React.ReactNode; link: string }>(
+export const VirusTotalLink = React.memo<{ children?: React.ReactNode; link: string }>(
   ({ children, link }) => (
     <EuiLink
       href={`https://www.virustotal.com/#/search/${encodeURIComponent(link)}`}
@@ -119,7 +119,7 @@ export const VirusTotalLink = pure<{ children?: React.ReactNode; link: string }>
 
 VirusTotalLink.displayName = 'VirusTotalLink';
 
-export const WhoIsLink = pure<{ children?: React.ReactNode; domain: string }>(
+export const WhoIsLink = React.memo<{ children?: React.ReactNode; domain: string }>(
   ({ children, domain }) => (
     <EuiLink href={`https://www.iana.org/whois?q=${encodeURIComponent(domain)}`} target="_blank">
       {children ? children : domain}
diff --git a/x-pack/legacy/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap
index 440193c9e0dfd..0885f15b1efba 100644
--- a/x-pack/legacy/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/loader/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rendering renders correctly 1`] = `
-<Component
+<Aside
   overlay={true}
   overlayBackground="#fff"
-  size="xl"
 >
-  Loading
-</Component>
+  <FlexGroup
+    overlay={
+      Object {
+        "overlay": true,
+      }
+    }
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiLoadingSpinner
+        size="xl"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiText
+        color="subdued"
+        size="s"
+      >
+        <p>
+          Loading
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+  </FlexGroup>
+</Aside>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
index 55628fe2e8d33..be2ce3dde951c 100644
--- a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
@@ -14,7 +14,6 @@ import {
 } from '@elastic/eui';
 import { rgba } from 'polished';
 import React from 'react';
-import { pure } from 'recompose';
 import styled, { css } from 'styled-components';
 
 const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
@@ -56,9 +55,10 @@ export interface LoaderProps {
   overlay?: boolean;
   overlayBackground?: string;
   size?: EuiLoadingSpinnerSize;
+  children?: React.ReactChild;
 }
 
-export const Loader = pure<LoaderProps>(({ children, overlay, overlayBackground, size }) => (
+export const Loader = React.memo<LoaderProps>(({ children, overlay, overlayBackground, size }) => (
   <Aside overlay={overlay} overlayBackground={overlayBackground}>
     <FlexGroup overlay={{ overlay }}>
       <EuiFlexItem grow={false}>
diff --git a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
index 42867c09b971b..1a3c2fefbf47f 100644
--- a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled, { createGlobalStyle } from 'styled-components';
 
 // SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
@@ -31,7 +30,7 @@ interface LoadingProps {
   position?: string;
 }
 
-export const LoadingPanel = pure<LoadingProps>(
+export const LoadingPanel = React.memo<LoadingProps>(
   ({
     height = 'auto',
     showBorder = true,
diff --git a/x-pack/legacy/plugins/siem/public/components/localized_date_tooltip/index.tsx b/x-pack/legacy/plugins/siem/public/components/localized_date_tooltip/index.tsx
index b362b79df96a0..82520ce2745c0 100644
--- a/x-pack/legacy/plugins/siem/public/components/localized_date_tooltip/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/localized_date_tooltip/index.tsx
@@ -8,9 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
 import moment from 'moment';
 import * as React from 'react';
-import { pure } from 'recompose';
 
-export const LocalizedDateTooltip = pure<{
+export const LocalizedDateTooltip = React.memo<{
   children: React.ReactNode;
   date: Date;
   fieldName?: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap
index 95ed8fc4334e0..4b02d23568d26 100644
--- a/x-pack/legacy/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/markdown/__snapshots__/index.test.tsx.snap
@@ -1,16 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Markdown markdown links it renders the expected content containing a link 1`] = `
-<Component
-  raw="A link to an external site [External Site](https://google.com)"
+<ReactMarkdown
+  astPlugins={Array []}
+  data-test-subj="markdown"
+  escapeHtml={true}
+  linkTarget="_blank"
+  plugins={Array []}
+  rawSourcePos={false}
+  renderers={
+    Object {
+      "link": [Function],
+      "root": [Function],
+      "table": [Function],
+      "tableCell": [Function],
+      "tableHead": [Function],
+      "tableRow": [Function],
+    }
+  }
+  skipHtml={false}
+  source="A link to an external site [External Site](https://google.com)"
+  sourcePos={false}
+  transformLinkUri={[Function]}
 />
 `;
 
 exports[`Markdown markdown tables it renders the expected table content 1`] = `
-<Component
-  raw="| we | support | markdown | tables |
+<ReactMarkdown
+  astPlugins={Array []}
+  data-test-subj="markdown"
+  escapeHtml={true}
+  linkTarget="_blank"
+  plugins={Array []}
+  rawSourcePos={false}
+  renderers={
+    Object {
+      "link": [Function],
+      "root": [Function],
+      "table": [Function],
+      "tableCell": [Function],
+      "tableHead": [Function],
+      "tableRow": [Function],
+    }
+  }
+  skipHtml={false}
+  source="| we | support | markdown | tables |
 |---------|---------|------------|--------|
 | because | tables  | are        | pretty |
 | useful  | for     | formatting | data   |"
+  sourcePos={false}
+  transformLinkUri={[Function]}
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx b/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx
index 23867f47181a7..16e065ae721c9 100644
--- a/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/markdown/index.tsx
@@ -7,7 +7,6 @@
 import { EuiLink, EuiTableRow, EuiTableRowCell, EuiText, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 const TableHeader = styled.thead`
@@ -25,49 +24,51 @@ const REL_NOFOLLOW = 'nofollow';
 /** prevents the browser from sending the current address as referrer via the Referer HTTP header */
 const REL_NOREFERRER = 'noreferrer';
 
-export const Markdown = pure<{ raw?: string; size?: 'xs' | 's' | 'm' }>(({ raw, size = 's' }) => {
-  const markdownRenderers = {
-    root: ({ children }: { children: React.ReactNode[] }) => (
-      <EuiText data-test-subj="markdown-root" grow={true} size={size}>
-        {children}
-      </EuiText>
-    ),
-    table: ({ children }: { children: React.ReactNode[] }) => (
-      <table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
-        {children}
-      </table>
-    ),
-    tableHead: ({ children }: { children: React.ReactNode[] }) => (
-      <TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
-    ),
-    tableRow: ({ children }: { children: React.ReactNode[] }) => (
-      <EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
-    ),
-    tableCell: ({ children }: { children: React.ReactNode[] }) => (
-      <EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
-    ),
-    link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
-      <EuiToolTip content={href}>
-        <EuiLink
-          href={href}
-          data-test-subj="markdown-link"
-          rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
-          target="_blank"
-        >
+export const Markdown = React.memo<{ raw?: string; size?: 'xs' | 's' | 'm' }>(
+  ({ raw, size = 's' }) => {
+    const markdownRenderers = {
+      root: ({ children }: { children: React.ReactNode[] }) => (
+        <EuiText data-test-subj="markdown-root" grow={true} size={size}>
           {children}
-        </EuiLink>
-      </EuiToolTip>
-    ),
-  };
+        </EuiText>
+      ),
+      table: ({ children }: { children: React.ReactNode[] }) => (
+        <table data-test-subj="markdown-table" className="euiTable euiTable--responsive">
+          {children}
+        </table>
+      ),
+      tableHead: ({ children }: { children: React.ReactNode[] }) => (
+        <TableHeader data-test-subj="markdown-table-header">{children}</TableHeader>
+      ),
+      tableRow: ({ children }: { children: React.ReactNode[] }) => (
+        <EuiTableRow data-test-subj="markdown-table-row">{children}</EuiTableRow>
+      ),
+      tableCell: ({ children }: { children: React.ReactNode[] }) => (
+        <EuiTableRowCell data-test-subj="markdown-table-cell">{children}</EuiTableRowCell>
+      ),
+      link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
+        <EuiToolTip content={href}>
+          <EuiLink
+            href={href}
+            data-test-subj="markdown-link"
+            rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}
+            target="_blank"
+          >
+            {children}
+          </EuiLink>
+        </EuiToolTip>
+      ),
+    };
 
-  return (
-    <ReactMarkdown
-      data-test-subj="markdown"
-      linkTarget="_blank"
-      renderers={markdownRenderers}
-      source={raw}
-    />
-  );
-});
+    return (
+      <ReactMarkdown
+        data-test-subj="markdown"
+        linkTarget="_blank"
+        renderers={markdownRenderers}
+        source={raw}
+      />
+    );
+  }
+);
 
 Markdown.displayName = 'Markdown';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap
index 9101c8f06b1fb..44c1e717afaa0 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml/__snapshots__/entity_draggable.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`entity_draggable renders correctly against snapshot 1`] = `
-<Connect(DraggableWrapperComponent)
+<DraggableWrapper
   dataProvider={
     Object {
       "and": Array [],
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 9813456e41638..1cf35aac19043 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
                 <EuiFlexItem
                   grow={false}
                 >
-                  <PreferenceFormattedDate
+                  <Memo(PreferenceFormattedDate)
                     value={2019-06-16T06:00:00.000Z}
                   />
                 </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
index 20623ddfc4352..123fa72b1cfff 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/draggable_score.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`draggable_score renders correctly against snapshot 1`] = `
-<Connect(DraggableWrapperComponent)
+<DraggableWrapper
   dataProvider={
     Object {
       "and": Array [],
@@ -23,7 +23,7 @@ exports[`draggable_score renders correctly against snapshot 1`] = `
 `;
 
 exports[`draggable_score renders correctly against snapshot when the index is not included 1`] = `
-<Connect(DraggableWrapperComponent)
+<DraggableWrapper
   dataProvider={
     Object {
       "and": Array [],
diff --git a/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx b/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
index 748187a01fc8e..d623f5f389ce5 100644
--- a/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/navigation/index.tsx
@@ -77,3 +77,5 @@ export const SiemNavigation = React.memo<SiemNavigationProps>(props => {
   };
   return <SiemNavigationRedux {...stateNavReduxProps} />;
 });
+
+SiemNavigation.displayName = 'SiemNavigation';
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap
index 87ae9deea4350..1a56de1c2c6a2 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/__snapshots__/index.test.tsx.snap
@@ -1,273 +1,189 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Netflow renders correctly against snapshot 1`] = `
-<Component
-  intl={
-    Object {
-      "defaultFormats": Object {},
-      "defaultLocale": "en",
-      "formatDate": [Function],
-      "formatHTMLMessage": [Function],
-      "formatMessage": [Function],
-      "formatNumber": [Function],
-      "formatPlural": [Function],
-      "formatRelative": [Function],
-      "formatTime": [Function],
-      "formats": Object {
-        "date": Object {
-          "full": Object {
-            "day": "numeric",
-            "month": "long",
-            "weekday": "long",
-            "year": "numeric",
-          },
-          "long": Object {
-            "day": "numeric",
-            "month": "long",
-            "year": "numeric",
-          },
-          "medium": Object {
-            "day": "numeric",
-            "month": "short",
-            "year": "numeric",
-          },
-          "short": Object {
-            "day": "numeric",
-            "month": "numeric",
-            "year": "2-digit",
-          },
-        },
-        "number": Object {
-          "currency": Object {
-            "style": "currency",
-          },
-          "percent": Object {
-            "style": "percent",
-          },
-        },
-        "relative": Object {
-          "days": Object {
-            "units": "day",
-          },
-          "hours": Object {
-            "units": "hour",
-          },
-          "minutes": Object {
-            "units": "minute",
-          },
-          "months": Object {
-            "units": "month",
-          },
-          "seconds": Object {
-            "units": "second",
-          },
-          "years": Object {
-            "units": "year",
-          },
-        },
-        "time": Object {
-          "full": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "long": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-            "timeZoneName": "short",
-          },
-          "medium": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-            "second": "numeric",
-          },
-          "short": Object {
-            "hour": "numeric",
-            "minute": "numeric",
-          },
-        },
-      },
-      "formatters": Object {
-        "getDateTimeFormat": [Function],
-        "getMessageFormat": [Function],
-        "getNumberFormat": [Function],
-        "getPluralFormat": [Function],
-        "getRelativeFormat": [Function],
-      },
-      "locale": "en",
-      "messages": Object {},
-      "now": [Function],
-      "onError": [Function],
-      "textComponent": Symbol(react.fragment),
-      "timeZone": null,
-    }
-  }
+<EuiFlexGroup
+  alignItems="center"
+  data-test-subj="netflow-rows"
+  direction="column"
+  gutterSize="none"
+  justifyContent="center"
+  wrap={true}
 >
-  <Netflow
-    contextId="test"
-    destinationBytes={
-      Array [
-        40,
-      ]
-    }
-    destinationGeoCityName={
-      Array [
-        "New York",
-      ]
-    }
-    destinationGeoContinentName={
-      Array [
-        "North America",
-      ]
-    }
-    destinationGeoCountryIsoCode={
-      Array [
-        "US",
-      ]
-    }
-    destinationGeoCountryName={
-      Array [
-        "United States",
-      ]
-    }
-    destinationGeoRegionName={
-      Array [
-        "New York",
-      ]
-    }
-    destinationIp={
-      Array [
-        "10.1.2.3",
-      ]
-    }
-    destinationPackets={
-      Array [
-        1,
-      ]
-    }
-    destinationPort={
-      Array [
-        80,
-      ]
-    }
-    eventDuration={
-      Array [
-        1000000,
-      ]
-    }
-    eventEnd={
-      Array [
-        "2018-11-12T19:03:25.936Z",
-      ]
-    }
-    eventId="abcd"
-    eventStart={
-      Array [
-        "2018-11-12T19:03:25.836Z",
-      ]
-    }
-    networkBytes={
-      Array [
-        100,
-      ]
-    }
-    networkCommunityId={
-      Array [
-        "we.live.in.a",
-      ]
-    }
-    networkDirection={
-      Array [
-        "outgoing",
-      ]
-    }
-    networkPackets={
-      Array [
-        3,
-      ]
-    }
-    networkProtocol={
-      Array [
-        "http",
-      ]
-    }
-    processName={
-      Array [
-        "rat",
-      ]
-    }
-    sourceBytes={
-      Array [
-        60,
-      ]
-    }
-    sourceGeoCityName={
-      Array [
-        "Atlanta",
-      ]
-    }
-    sourceGeoContinentName={
-      Array [
-        "North America",
-      ]
-    }
-    sourceGeoCountryIsoCode={
-      Array [
-        "US",
-      ]
-    }
-    sourceGeoCountryName={
-      Array [
-        "United States",
-      ]
-    }
-    sourceGeoRegionName={
-      Array [
-        "Georgia",
-      ]
-    }
-    sourceIp={
-      Array [
-        "192.168.1.2",
-      ]
-    }
-    sourcePackets={
-      Array [
-        2,
-      ]
-    }
-    sourcePort={
-      Array [
-        9987,
-      ]
-    }
-    tlsClientCertificateFingerprintSha1={
-      Array [
-        "tls.client_certificate.fingerprint.sha1-value",
-      ]
-    }
-    tlsFingerprintsJa3Hash={
-      Array [
-        "tls.fingerprints.ja3.hash-value",
-      ]
-    }
-    tlsServerCertificateFingerprintSha1={
-      Array [
-        "tls.server_certificate.fingerprint.sha1-value",
-      ]
-    }
-    transport={
-      Array [
-        "tcp",
-      ]
-    }
-    userName={
-      Array [
-        "first.last",
-      ]
-    }
-  />
-</Component>
+  <EuiFlexItem
+    grow={false}
+  >
+    <NetflowColumns
+      contextId="test"
+      destinationBytes={
+        Array [
+          40,
+        ]
+      }
+      destinationGeoCityName={
+        Array [
+          "New York",
+        ]
+      }
+      destinationGeoContinentName={
+        Array [
+          "North America",
+        ]
+      }
+      destinationGeoCountryIsoCode={
+        Array [
+          "US",
+        ]
+      }
+      destinationGeoCountryName={
+        Array [
+          "United States",
+        ]
+      }
+      destinationGeoRegionName={
+        Array [
+          "New York",
+        ]
+      }
+      destinationIp={
+        Array [
+          "10.1.2.3",
+        ]
+      }
+      destinationPackets={
+        Array [
+          1,
+        ]
+      }
+      destinationPort={
+        Array [
+          80,
+        ]
+      }
+      eventDuration={
+        Array [
+          1000000,
+        ]
+      }
+      eventEnd={
+        Array [
+          "2018-11-12T19:03:25.936Z",
+        ]
+      }
+      eventId="abcd"
+      eventStart={
+        Array [
+          "2018-11-12T19:03:25.836Z",
+        ]
+      }
+      networkBytes={
+        Array [
+          100,
+        ]
+      }
+      networkCommunityId={
+        Array [
+          "we.live.in.a",
+        ]
+      }
+      networkDirection={
+        Array [
+          "outgoing",
+        ]
+      }
+      networkPackets={
+        Array [
+          3,
+        ]
+      }
+      networkProtocol={
+        Array [
+          "http",
+        ]
+      }
+      processName={
+        Array [
+          "rat",
+        ]
+      }
+      sourceBytes={
+        Array [
+          60,
+        ]
+      }
+      sourceGeoCityName={
+        Array [
+          "Atlanta",
+        ]
+      }
+      sourceGeoContinentName={
+        Array [
+          "North America",
+        ]
+      }
+      sourceGeoCountryIsoCode={
+        Array [
+          "US",
+        ]
+      }
+      sourceGeoCountryName={
+        Array [
+          "United States",
+        ]
+      }
+      sourceGeoRegionName={
+        Array [
+          "Georgia",
+        ]
+      }
+      sourceIp={
+        Array [
+          "192.168.1.2",
+        ]
+      }
+      sourcePackets={
+        Array [
+          2,
+        ]
+      }
+      sourcePort={
+        Array [
+          9987,
+        ]
+      }
+      transport={
+        Array [
+          "tcp",
+        ]
+      }
+      userName={
+        Array [
+          "first.last",
+        ]
+      }
+    />
+  </EuiFlexItem>
+  <EuiFlexItem
+    grow={false}
+  >
+    <Fingerprints
+      contextId="test"
+      eventId="abcd"
+      tlsClientCertificateFingerprintSha1={
+        Array [
+          "tls.client_certificate.fingerprint.sha1-value",
+        ]
+      }
+      tlsFingerprintsJa3Hash={
+        Array [
+          "tls.fingerprints.ja3.hash-value",
+        ]
+      }
+      tlsServerCertificateFingerprintSha1={
+        Array [
+          "tls.server_certificate.fingerprint.sha1-value",
+        ]
+      }
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/fingerprints/index.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/fingerprints/index.tsx
index f7f3707f0ec21..6b29068f3cd2d 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/fingerprints/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/fingerprints/index.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import {
   CertificateFingerprint,
@@ -20,7 +19,7 @@ import { JA3_HASH_FIELD_NAME, Ja3Fingerprint } from '../../ja3_fingerprint';
  * Renders rows of draggable badges containing ja3 and certificate fingerprints
  * (i.e. sha1 hashes)
  */
-export const Fingerprints = pure<{
+export const Fingerprints = React.memo<{
   contextId: string;
   eventId: string;
   tlsClientCertificateFingerprintSha1?: string[] | null;
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/index.test.tsx
index f6827e3516c63..2c5152535a370 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/index.test.tsx
@@ -7,7 +7,8 @@
 import toJson from 'enzyme-to-json';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 import { asArrayIfExists } from '../../lib/helpers';
 import { getMockNetflowData } from '../../mock';
@@ -121,7 +122,7 @@ const getNetflowInstance = () => (
 
 describe('Netflow', () => {
   test('renders correctly against snapshot', () => {
-    const wrapper = shallowWithIntl(<TestProviders>{getNetflowInstance()}</TestProviders>);
+    const wrapper = shallow(getNetflowInstance());
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/index.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/index.tsx
index 47b9202048b12..26e6986c386be 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { Fingerprints } from './fingerprints';
 import { NetflowColumns } from './netflow_columns';
@@ -21,7 +20,7 @@ import { NetflowProps } from './types';
  * - `event.category` is `network_traffic`
  * - rendering data from `Zeek` and `Suricata`
  */
-export const Netflow = pure<NetflowProps>(
+export const Netflow = React.memo<NetflowProps>(
   ({
     contextId,
     destinationBytes,
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx
index 8e8cdc27ced41..f006ec0f003c1 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/duration_event_start_end.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DefaultDraggable } from '../../draggables';
@@ -32,7 +31,7 @@ TimeIcon.displayName = 'TimeIcon';
  * - `event.start`
  * - `event.end`
  */
-export const DurationEventStartEnd = pure<{
+export const DurationEventStartEnd = React.memo<{
   contextId: string;
   eventDuration?: string[] | null;
   eventId: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/index.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/index.tsx
index ec5c07ff3d0ce..0dc4a2271e207 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { SourceDestination } from '../../source_destination';
@@ -32,7 +31,7 @@ EuiFlexItemMarginRight.displayName = 'EuiFlexItemMarginRight';
  * This component will allow columns to wrap if constraints on width prevent all
  * the columns from fitting on a single horizontal row
  */
-export const NetflowColumns = pure<NetflowColumnsProps>(
+export const NetflowColumns = React.memo<NetflowColumnsProps>(
   ({
     contextId,
     destinationBytes,
diff --git a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx
index 1bafcbb5ded19..adac7dede1f85 100644
--- a/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/netflow/netflow_columns/user_process.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../draggables';
 
@@ -19,7 +18,7 @@ export const USER_NAME_FIELD_NAME = 'user.name';
  * - `user.name`
  * - `process.name`
  */
-export const UserProcess = pure<{
+export const UserProcess = React.memo<{
   contextId: string;
   eventId: string;
   processName?: string[] | null;
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap
index cee4077c5d368..718e7ce1d27a5 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/index.test.tsx.snap
@@ -1,12 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AddNote renders correctly 1`] = `
-<Component
-  associateNote={[MockFunction]}
-  getNewNoteId={[MockFunction]}
-  newNote="The contents of a new note"
-  onCancelAddNote={[MockFunction]}
-  updateNewNote={[MockFunction]}
-  updateNote={[MockFunction]}
-/>
+<AddNotesContainer
+  alignItems="flexEnd"
+  direction="column"
+  gutterSize="none"
+>
+  <NewNote
+    note="The contents of a new note"
+    noteInputHeight={200}
+    updateNewNote={[MockFunction]}
+  />
+  <EuiFlexItem
+    grow={true}
+  >
+    <MarkdownHint
+      show={true}
+    />
+  </EuiFlexItem>
+  <ButtonsContainer
+    gutterSize="none"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <CancelButton
+        onCancelAddNote={[MockFunction]}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiButton
+        data-test-subj="add-note"
+        fill={true}
+        isDisabled={false}
+        onClick={[Function]}
+      >
+        Add Note
+      </EuiButton>
+    </EuiFlexItem>
+  </ButtonsContainer>
+</AddNotesContainer>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
index de42109faf0b4..b4e6bce163057 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/__snapshots__/new_note.test.tsx.snap
@@ -1,9 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NewNote renders correctly 1`] = `
-<Component
-  note="The contents of a new note"
-  noteInputHeight={200}
-  updateNewNote={[MockFunction]}
+<NewNoteTabs
+  data-test-subj="new-note-tabs"
+  initialSelectedTab={
+    Object {
+      "content": <ForwardRef(Styled(EuiTextArea))
+        aria-label="Note"
+        autoFocus={true}
+        data-test-subj="add-a-note"
+        fullWidth={true}
+        height={200}
+        onChange={[Function]}
+        placeholder="Add a Note"
+        spellCheck={true}
+        value="The contents of a new note"
+      />,
+      "id": "note",
+      "name": "Note",
+    }
+  }
+  tabs={
+    Array [
+      Object {
+        "content": <ForwardRef(Styled(EuiTextArea))
+          aria-label="Note"
+          autoFocus={true}
+          data-test-subj="add-a-note"
+          fullWidth={true}
+          height={200}
+          onChange={[Function]}
+          placeholder="Add a Note"
+          spellCheck={true}
+          value="The contents of a new note"
+        />,
+        "id": "note",
+        "name": "Note",
+      },
+      Object {
+        "content": <ForwardRef(Styled(EuiPanel))
+          data-test-subj="markdown-container"
+          height={200}
+          paddingSize="s"
+        >
+          <Memo(Markdown)
+            raw="The contents of a new note"
+          />
+        </ForwardRef(Styled(EuiPanel))>,
+        "id": "preview",
+        "name": "Preview (Markdown)",
+      },
+    ]
+  }
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.tsx b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.tsx
index 0b12394f98526..6e13538cf9bea 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { MarkdownHint } from '../../markdown/markdown_hint';
@@ -34,7 +33,7 @@ const ButtonsContainer = styled(EuiFlexGroup)`
 
 ButtonsContainer.displayName = 'ButtonsContainer';
 
-export const CancelButton = pure<{ onCancelAddNote: () => void }>(({ onCancelAddNote }) => (
+export const CancelButton = React.memo<{ onCancelAddNote: () => void }>(({ onCancelAddNote }) => (
   <EuiButtonEmpty data-test-subj="cancel" onClick={onCancelAddNote}>
     {i18n.CANCEL}
   </EuiButtonEmpty>
@@ -43,7 +42,7 @@ export const CancelButton = pure<{ onCancelAddNote: () => void }>(({ onCancelAdd
 CancelButton.displayName = 'CancelButton';
 
 /** Displays an input for entering a new note, with an adjacent "Add" button */
-export const AddNote = pure<{
+export const AddNote = React.memo<{
   associateNote: AssociateNote;
   getNewNoteId: GetNewNoteId;
   newNote: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/new_note.tsx b/x-pack/legacy/plugins/siem/public/components/notes/add_note/new_note.tsx
index e5e734c2041a3..64cbdf1c678c5 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/new_note.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/new_note.tsx
@@ -6,7 +6,6 @@
 
 import { EuiPanel, EuiTabbedContent, EuiTextArea } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Markdown } from '../../markdown';
@@ -36,7 +35,7 @@ TextArea.displayName = 'TextArea';
 TextArea.displayName = 'TextArea';
 
 /** An input for entering a new note  */
-export const NewNote = pure<{
+export const NewNote = React.memo<{
   noteInputHeight: number;
   note: string;
   updateNewNote: UpdateInternalNewNote;
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx b/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx
index 91ce947d727b8..e25f57f329bb2 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/columns.tsx
@@ -5,12 +5,11 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { NoteCard } from './note_card';
 import * as i18n from './translations';
 
-const Column = pure<{ text: string }>(({ text }) => <span>{text}</span>);
+const Column = React.memo<{ text: string }>(({ text }) => <span>{text}</span>);
 Column.displayName = 'Column';
 
 interface Item {
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/notes/helpers.tsx
index f220fc1c7f790..51e433f0717d6 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/helpers.tsx
@@ -7,7 +7,6 @@
 import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import moment from 'moment';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Note } from '../../lib/note';
@@ -55,7 +54,7 @@ const TitleText = styled.h3`
 TitleText.displayName = 'TitleText';
 
 /** Displays a count of the existing notes */
-export const NotesCount = pure<{
+export const NotesCount = React.memo<{
   noteIds: string[];
 }>(({ noteIds }) => (
   <EuiFlexGroup alignItems="center" gutterSize="none">
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/index.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_card/index.tsx
index 4fd6e4805745e..88e59ddd1419b 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiPanel } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { NoteCardBody } from './note_card_body';
@@ -18,7 +17,7 @@ const NoteCardContainer = styled(EuiPanel)`
 
 NoteCardContainer.displayName = 'NoteCardContainer';
 
-export const NoteCard = pure<{ created: Date; rawNote: string; user: string }>(
+export const NoteCard = React.memo<{ created: Date; rawNote: string; user: string }>(
   ({ created, rawNote, user }) => (
     <NoteCardContainer data-test-subj="note-card" hasShadow={false} paddingSize="none">
       <NoteCardHeader created={created} user={user} />
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_body.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_body.tsx
index f40e5559dcd5e..94ea0a6ee3129 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_body.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_body.tsx
@@ -6,7 +6,6 @@
 
 import { EuiPanel, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { WithCopyToClipboard } from '../../../lib/clipboard/with_copy_to_clipboard';
@@ -34,7 +33,7 @@ const HoverActionsContainer = styled(EuiPanel)`
 
 HoverActionsContainer.displayName = 'HoverActionsContainer';
 
-export const NoteCardBody = pure<{ rawNote: string }>(({ rawNote }) => (
+export const NoteCardBody = React.memo<{ rawNote: string }>(({ rawNote }) => (
   <BodyContainer data-test-subj="note-card-body" hasShadow={false} paddingSize="s">
     <WithHoverActions
       hoverContent={
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_header.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_header.tsx
index a3ac81bf884ec..a227b5af38e85 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_header.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_card_header.tsx
@@ -6,7 +6,6 @@
 
 import { EuiAvatar, EuiPanel } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import * as i18n from '../translations';
@@ -38,7 +37,7 @@ const User = styled.span`
   margin: 5px;
 `;
 
-export const NoteCardHeader = pure<{ created: Date; user: string }>(({ created, user }) => (
+export const NoteCardHeader = React.memo<{ created: Date; user: string }>(({ created, user }) => (
   <EuiPanel data-test-subj="note-card-header" hasShadow={false} paddingSize="s">
     <HeaderContainer>
       <Avatar data-test-subj="avatar" size="s" name={user} />
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_created.tsx b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_created.tsx
index 2190fdcf05b53..c94f4021e1a4a 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_created.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/note_created.tsx
@@ -6,7 +6,6 @@
 
 import { FormattedRelative } from '@kbn/i18n/react';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { LocalizedDateTooltip } from '../../localized_date_tooltip';
@@ -17,7 +16,7 @@ const NoteCreatedContainer = styled.span`
 
 NoteCreatedContainer.displayName = 'NoteCreatedContainer';
 
-export const NoteCreated = pure<{ created: Date }>(({ created }) => (
+export const NoteCreated = React.memo<{ created: Date }>(({ created }) => (
   <NoteCreatedContainer data-test-subj="note-created">
     <LocalizedDateTooltip date={created}>
       <FormattedRelative value={created} />
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
index e9e438a8c5e2e..1163fbba1572a 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/delete_timeline_modal/delete_timeline_modal.tsx
@@ -6,7 +6,6 @@
 
 import { EuiConfirmModal, EUI_MODAL_CONFIRM_BUTTON } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { pure } from 'recompose';
 import * as React from 'react';
 
 import * as i18n from '../translations';
@@ -22,7 +21,7 @@ export const DELETE_TIMELINE_MODAL_WIDTH = 600; // px
 /**
  * Renders a modal that confirms deletion of a timeline
  */
-export const DeleteTimelineModal = pure<Props>(({ title, closeModal, onDelete }) => (
+export const DeleteTimelineModal = React.memo<Props>(({ title, closeModal, onDelete }) => (
   <EuiConfirmModal
     title={
       <FormattedMessage
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
index f5207fc6a35fd..0f5aafe661d0e 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/index.test.tsx
@@ -422,7 +422,6 @@ describe('StatefulOpenTimeline', () => {
       ).toEqual({
         '10849df0-7b44-11e9-a608-ab3d811609': (
           <NotePreviews
-            isModal={false}
             notes={
               mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes != null
                 ? mockOpenTimelineQueryResults[0].result.data!.getAllTimeline.timeline[0].notes.map(
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
index 757ca598aa1ce..70bf7d2cbeb52 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.test.tsx
@@ -38,7 +38,7 @@ describe('NotePreviews', () => {
 
     const wrapper = mountWithIntl(
       <ThemeProvider theme={theme}>
-        <NotePreviews isModal={false} notes={hasNotes[0].notes} />
+        <NotePreviews notes={hasNotes[0].notes} />
       </ThemeProvider>
     );
 
@@ -52,7 +52,7 @@ describe('NotePreviews', () => {
 
     const wrapper = mountWithIntl(
       <ThemeProvider theme={theme}>
-        <NotePreviews isModal={true} notes={hasNotes[0].notes} />
+        <NotePreviews notes={hasNotes[0].notes} />
       </ThemeProvider>
     );
 
@@ -62,19 +62,19 @@ describe('NotePreviews', () => {
   });
 
   test('it does NOT render the preview container if notes is undefined', () => {
-    const wrapper = mountWithIntl(<NotePreviews isModal={false} />);
+    const wrapper = mountWithIntl(<NotePreviews />);
 
     expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toBe(false);
   });
 
   test('it does NOT render the preview container if notes is null', () => {
-    const wrapper = mountWithIntl(<NotePreviews isModal={false} notes={null} />);
+    const wrapper = mountWithIntl(<NotePreviews notes={null} />);
 
     expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toBe(false);
   });
 
   test('it does NOT render the preview container if notes is empty', () => {
-    const wrapper = mountWithIntl(<NotePreviews isModal={false} notes={[]} />);
+    const wrapper = mountWithIntl(<NotePreviews notes={[]} />);
 
     expect(wrapper.find('[data-test-subj="note-previews-container"]').exists()).toBe(false);
   });
@@ -103,7 +103,7 @@ describe('NotePreviews', () => {
 
     const wrapper = mountWithIntl(
       <ThemeProvider theme={theme}>
-        <NotePreviews isModal={false} notes={nonUniqueNotes} />
+        <NotePreviews notes={nonUniqueNotes} />
       </ThemeProvider>
     );
 
@@ -139,7 +139,7 @@ describe('NotePreviews', () => {
 
     const wrapper = mountWithIntl(
       <ThemeProvider theme={theme}>
-        <NotePreviews isModal={false} notes={nonUniqueNotes} />
+        <NotePreviews notes={nonUniqueNotes} />
       </ThemeProvider>
     );
 
@@ -174,7 +174,7 @@ describe('NotePreviews', () => {
 
     const wrapper = mountWithIntl(
       <ThemeProvider theme={theme}>
-        <NotePreviews isModal={false} notes={nonUniqueNotes} />
+        <NotePreviews notes={nonUniqueNotes} />
       </ThemeProvider>
     );
 
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.tsx
index f286939116987..2c35d5d8254cd 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/index.tsx
@@ -6,7 +6,6 @@
 
 import { uniqBy } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { NotePreview } from './note_preview';
@@ -22,10 +21,9 @@ NotePreviewsContainer.displayName = 'NotePreviewsContainer';
 /**
  * Renders a preview of a note in the All / Open Timelines table
  */
-export const NotePreviews = pure<{
+export const NotePreviews = React.memo<{
   notes?: TimelineResultNote[] | null;
-  isModal: boolean;
-}>(({ notes, isModal }) => {
+}>(({ notes }) => {
   if (notes == null || notes.length === 0) {
     return null;
   }
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx
index 55f46a6a2d80d..126a14f1f8e32 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/note_previews/note_preview.tsx
@@ -7,7 +7,6 @@
 import { EuiAvatar, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { getEmptyValue, defaultToEmptyTag } from '../../empty_value';
@@ -33,7 +32,7 @@ NotePreviewHeader.displayName = 'NotePreviewHeader';
 /**
  * Renders a preview of a note in the All / Open Timelines table
  */
-export const NotePreview = pure<Pick<TimelineResultNote, 'note' | 'updated' | 'updatedBy'>>(
+export const NotePreview = React.memo<Pick<TimelineResultNote, 'note' | 'updated' | 'updatedBy'>>(
   ({ note, updated, updatedBy }) => (
     <NotePreviewGroup>
       <EuiFlexGroup gutterSize="m" responsive={false}>
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx
index 30b6b17403767..3b4057c69a696 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline.tsx
@@ -6,7 +6,6 @@
 
 import { EuiPanel } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
 import { OpenTimelineProps } from './types';
@@ -14,7 +13,7 @@ import { SearchRow } from './search_row';
 import { TimelinesTable } from './timelines_table';
 import { TitleRow } from './title_row';
 
-export const OpenTimeline = pure<OpenTimelineProps>(
+export const OpenTimeline = React.memo<OpenTimelineProps>(
   ({
     deleteTimelines,
     defaultPageSize,
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
index 45e9c00ac6786..b097d2e0d01eb 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/open_timeline_modal/open_timeline_modal_body.tsx
@@ -6,7 +6,6 @@
 
 import { EuiModalBody, EuiModalHeader } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { OpenTimelineProps } from '../types';
@@ -20,7 +19,7 @@ export const HeaderContainer = styled.div`
 
 HeaderContainer.displayName = 'HeaderContainer';
 
-export const OpenTimelineModalBody = pure<OpenTimelineProps>(
+export const OpenTimelineModalBody = React.memo<OpenTimelineProps>(
   ({
     deleteTimelines,
     defaultPageSize,
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/search_row/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/search_row/index.tsx
index de14a012d55a2..fa16c8cfb7035 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/search_row/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/search_row/index.tsx
@@ -15,7 +15,6 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import * as i18n from '../translations';
@@ -43,7 +42,7 @@ type Props = Pick<
 /**
  * Renders the row containing the search input and Only Favorites filter
  */
-export const SearchRow = pure<Props>(
+export const SearchRow = React.memo<Props>(
   ({ onlyFavorites, onQueryChange, onToggleOnlyFavorites, query, totalSearchResultsCount }) => (
     <SearchRowContainer>
       <SearchRowFlexGroup gutterSize="s">
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
index 0ae6c2205a820..ae68019c2fe69 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.test.tsx
@@ -225,9 +225,7 @@ describe('#getCommonColumns', () => {
       const hasNotes: OpenTimelineResult[] = [{ ...mockResults[0] }];
 
       const itemIdToExpandedNotesRowMap = {
-        [mockResults[0].savedObjectId!]: (
-          <NotePreviews isModal={false} notes={mockResults[0].notes} />
-        ),
+        [mockResults[0].savedObjectId!]: <NotePreviews notes={mockResults[0].notes} />,
       };
 
       const wrapper = mountWithIntl(
@@ -296,7 +294,7 @@ describe('#getCommonColumns', () => {
 
       expect(onToggleShowNotes).toBeCalledWith({
         abc: <div />,
-        'saved-timeline-11': <NotePreviews isModal={false} notes={hasNotes[0].notes} />,
+        'saved-timeline-11': <NotePreviews notes={hasNotes[0].notes} />,
       });
     });
 
@@ -307,7 +305,7 @@ describe('#getCommonColumns', () => {
       // the saved object id exists in the map yet, so the row is expanded:
       const itemIdToExpandedNotesRowMap = {
         abc: <div />,
-        'saved-timeline-11': <NotePreviews isModal={false} notes={hasNotes[0].notes} />,
+        'saved-timeline-11': <NotePreviews notes={hasNotes[0].notes} />,
       };
 
       const wrapper = mountWithIntl(
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
index 8eeb29794f5a6..e4ab42bb37c55 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/common_columns.tsx
@@ -43,9 +43,7 @@ export const getCommonColumns = ({
               ? onToggleShowNotes(omit(savedObjectId, itemIdToExpandedNotesRowMap))
               : onToggleShowNotes({
                   ...itemIdToExpandedNotesRowMap,
-                  [savedObjectId]: (
-                    <NotePreviews notes={notes} isModal={!showExtendedColumnsAndActions} />
-                  ),
+                  [savedObjectId]: <NotePreviews notes={notes} />,
                 })
           }
           aria-label={itemIdToExpandedNotesRowMap[savedObjectId] ? i18n.COLLAPSE : i18n.EXPAND}
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
index 278668eb1d8b4..b2a8353b640d5 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiBasicTable } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import * as i18n from '../translations';
@@ -93,7 +92,7 @@ export interface TimelinesTableProps {
  * Renders a table that displays metadata about timelines, (i.e. name,
  * description, etc.)
  */
-export const TimelinesTable = pure<TimelinesTableProps>(
+export const TimelinesTable = React.memo<TimelinesTableProps>(
   ({
     deleteTimelines,
     defaultPageSize,
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.tsx
index 78281a27bb360..2e82c4979f41d 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/title_row/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import * as i18n from '../translations';
 import { OpenTimelineProps } from '../types';
@@ -21,7 +20,7 @@ type Props = Pick<OpenTimelineProps, 'onAddTimelinesToFavorites' | 'onDeleteSele
  * Renders the row containing the tile (e.g. Open Timelines / All timelines)
  * and action buttons (i.e. Favorite Selected and Delete Selected)
  */
-export const TitleRow = pure<Props>(
+export const TitleRow = React.memo<Props>(
   ({ onAddTimelinesToFavorites, onDeleteSelected, selectedTimelinesCount, title }) => (
     <HeaderSection title={title}>
       {(onAddTimelinesToFavorites || onDeleteSelected) && (
diff --git a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
index 13f444f33547c..42ef4e5404faa 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/__snapshots__/index.test.tsx.snap
@@ -1,43 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AddFilterToGlobalSearchBar Component Rendering 1`] = `
-<Component
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(observable): [Function],
-    }
+<WithHoverActions
+  hoverContent={
+    <ForwardRef(Styled(EuiPanel))
+      data-test-subj="hover-actions-container"
+      paddingSize="none"
+    >
+      <EuiToolTip
+        content="Filter for value"
+        delay="regular"
+        position="top"
+      >
+        <EuiIcon
+          data-test-subj="add-to-filter"
+          onClick={[Function]}
+          type="filter"
+        />
+      </EuiToolTip>
+    </ForwardRef(Styled(EuiPanel))>
   }
->
-  <AddFilterToGlobalSearchBar
-    filter={
-      Object {
-        "meta": Object {
-          "alias": null,
-          "disabled": false,
-          "key": "host.name",
-          "negate": false,
-          "params": Object {
-            "query": "siem-kibana",
-          },
-          "type": "phrase",
-          "value": "siem-kibana",
-        },
-        "query": Object {
-          "match": Object {
-            "host.name": Object {
-              "query": "siem-kibana",
-              "type": "phrase",
-            },
-          },
-        },
-      }
-    }
-  >
-    siem-kibana
-  </AddFilterToGlobalSearchBar>
-</Component>
+  render={[Function]}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx
index ed614d79174f0..70e75cb54671a 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/add_filter_to_global_search_bar/index.test.tsx
@@ -36,33 +36,31 @@ describe('AddFilterToGlobalSearchBar Component', () => {
 
   test('Rendering', async () => {
     const wrapper = shallow(
-      <TestProviders store={store}>
-        <AddFilterToGlobalSearchBar
-          filter={{
-            meta: {
-              alias: null,
-              negate: false,
-              disabled: false,
-              type: 'phrase',
-              key: 'host.name',
-              value: 'siem-kibana',
-              params: {
-                query: 'siem-kibana',
-              },
+      <AddFilterToGlobalSearchBar
+        filter={{
+          meta: {
+            alias: null,
+            negate: false,
+            disabled: false,
+            type: 'phrase',
+            key: 'host.name',
+            value: 'siem-kibana',
+            params: {
+              query: 'siem-kibana',
             },
-            query: {
-              match: {
-                'host.name': {
-                  query: 'siem-kibana',
-                  type: 'phrase',
-                },
+          },
+          query: {
+            match: {
+              'host.name': {
+                query: 'siem-kibana',
+                type: 'phrase',
               },
             },
-          }}
-        >
-          <>{'siem-kibana'}</>
-        </AddFilterToGlobalSearchBar>
-      </TestProviders>
+          },
+        }}
+      >
+        <>{'siem-kibana'}</>
+      </AddFilterToGlobalSearchBar>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/__snapshots__/index.test.tsx.snap
index caf4334cacf57..d2579f427debe 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HistogramSignals it renders 1`] = `
-<Component>
-  <HistogramSignals />
-</Component>
-`;
+exports[`HistogramSignals it renders 1`] = `<HistogramSignals />`;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/index.test.tsx
index 2412d05f3f47d..c0d0feca5d53c 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/detection_engine/histogram_signals/index.test.tsx
@@ -22,6 +22,6 @@ describe('HistogramSignals', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('HistogramSignals'))).toMatchSnapshot();
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
index c0d11deec94ed..7efcde5b89c67 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_table/index.tsx
@@ -7,7 +7,6 @@
 import { has } from 'lodash/fp';
 import React from 'react';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 import { ActionCreator } from 'typescript-fsa';
 
 import { hostsActions } from '../../../../store/hosts';
@@ -84,7 +83,7 @@ const rowItems: ItemsPerRow[] = [
   },
 ];
 
-const AuthenticationTableComponent = pure<AuthenticationTableProps>(
+const AuthenticationTableComponent = React.memo<AuthenticationTableProps>(
   ({
     activePage,
     data,
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx
index 553615e950b8d..70dff5eda5939 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/first_last_seen_host/index.tsx
@@ -5,10 +5,8 @@
  */
 
 import { EuiIcon, EuiLoadingSpinner, EuiText, EuiToolTip } from '@elastic/eui';
-
 import React from 'react';
 import { ApolloConsumer } from 'react-apollo';
-import { pure } from 'recompose';
 
 import { useFirstLastSeenHostQuery } from '../../../../containers/hosts/first_last_seen';
 import { getEmptyTagValue } from '../../../empty_value';
@@ -19,7 +17,7 @@ export enum FirstLastSeenHostType {
   LAST_SEEN = 'last-seen',
 }
 
-export const FirstLastSeenHost = pure<{ hostname: string; type: FirstLastSeenHostType }>(
+export const FirstLastSeenHost = React.memo<{ hostname: string; type: FirstLastSeenHostType }>(
   ({ hostname, type }) => {
     return (
       <ApolloConsumer>
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap
index 964416e254ec3..e5a4df59ac7e4 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/__snapshots__/index.test.tsx.snap
@@ -1,204 +1,202 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Host Summary Component rendering it renders the default Host Summary 1`] = `
-<Component>
-  <HostOverview
-    anomaliesData={
-      Object {
-        "anomalies": Array [
-          Object {
-            "detectorIndex": 0,
-            "entityName": "process.name",
-            "entityValue": "du",
+<HostOverview
+  anomaliesData={
+    Object {
+      "anomalies": Array [
+        Object {
+          "detectorIndex": 0,
+          "entityName": "process.name",
+          "entityValue": "du",
+          "influencers": Array [
+            Object {
+              "host.name": "zeek-iowa",
+            },
+            Object {
+              "process.name": "du",
+            },
+            Object {
+              "user.name": "root",
+            },
+          ],
+          "jobId": "job-1",
+          "rowId": "1561157194802_0",
+          "severity": 16.193669439507826,
+          "source": Object {
+            "actual": Array [
+              1,
+            ],
+            "bucket_span": 900,
+            "by_field_name": "process.name",
+            "by_field_value": "du",
+            "detector_index": 0,
+            "function": "rare",
+            "function_description": "rare",
             "influencers": Array [
               Object {
-                "host.name": "zeek-iowa",
+                "influencer_field_name": "user.name",
+                "influencer_field_values": Array [
+                  "root",
+                ],
               },
               Object {
-                "process.name": "du",
+                "influencer_field_name": "process.name",
+                "influencer_field_values": Array [
+                  "du",
+                ],
               },
               Object {
-                "user.name": "root",
+                "influencer_field_name": "host.name",
+                "influencer_field_values": Array [
+                  "zeek-iowa",
+                ],
               },
             ],
-            "jobId": "job-1",
-            "rowId": "1561157194802_0",
-            "severity": 16.193669439507826,
-            "source": Object {
-              "actual": Array [
-                1,
-              ],
-              "bucket_span": 900,
-              "by_field_name": "process.name",
-              "by_field_value": "du",
-              "detector_index": 0,
-              "function": "rare",
-              "function_description": "rare",
-              "influencers": Array [
-                Object {
-                  "influencer_field_name": "user.name",
-                  "influencer_field_values": Array [
-                    "root",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "process.name",
-                  "influencer_field_values": Array [
-                    "du",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "host.name",
-                  "influencer_field_values": Array [
-                    "zeek-iowa",
-                  ],
-                },
-              ],
-              "initial_record_score": 16.193669439507826,
-              "is_interim": false,
-              "job_id": "job-1",
-              "multi_bucket_impact": 0,
-              "partition_field_name": "host.name",
-              "partition_field_value": "zeek-iowa",
-              "probability": 0.024041164411288146,
-              "record_score": 16.193669439507826,
-              "result_type": "record",
-              "timestamp": 1560664800000,
-              "typical": Array [
-                0.024041164411288146,
-              ],
-            },
-            "time": 1560664800000,
+            "initial_record_score": 16.193669439507826,
+            "is_interim": false,
+            "job_id": "job-1",
+            "multi_bucket_impact": 0,
+            "partition_field_name": "host.name",
+            "partition_field_value": "zeek-iowa",
+            "probability": 0.024041164411288146,
+            "record_score": 16.193669439507826,
+            "result_type": "record",
+            "timestamp": 1560664800000,
+            "typical": Array [
+              0.024041164411288146,
+            ],
           },
-          Object {
-            "detectorIndex": 0,
-            "entityName": "process.name",
-            "entityValue": "ls",
+          "time": 1560664800000,
+        },
+        Object {
+          "detectorIndex": 0,
+          "entityName": "process.name",
+          "entityValue": "ls",
+          "influencers": Array [
+            Object {
+              "host.name": "zeek-iowa",
+            },
+            Object {
+              "process.name": "ls",
+            },
+            Object {
+              "user.name": "root",
+            },
+          ],
+          "jobId": "job-2",
+          "rowId": "1561157194802_1",
+          "severity": 16.193669439507826,
+          "source": Object {
+            "actual": Array [
+              1,
+            ],
+            "bucket_span": 900,
+            "by_field_name": "process.name",
+            "by_field_value": "ls",
+            "detector_index": 0,
+            "function": "rare",
+            "function_description": "rare",
             "influencers": Array [
               Object {
-                "host.name": "zeek-iowa",
+                "influencer_field_name": "user.name",
+                "influencer_field_values": Array [
+                  "root",
+                ],
               },
               Object {
-                "process.name": "ls",
+                "influencer_field_name": "process.name",
+                "influencer_field_values": Array [
+                  "ls",
+                ],
               },
               Object {
-                "user.name": "root",
+                "influencer_field_name": "host.name",
+                "influencer_field_values": Array [
+                  "zeek-iowa",
+                ],
               },
             ],
-            "jobId": "job-2",
-            "rowId": "1561157194802_1",
-            "severity": 16.193669439507826,
-            "source": Object {
-              "actual": Array [
-                1,
-              ],
-              "bucket_span": 900,
-              "by_field_name": "process.name",
-              "by_field_value": "ls",
-              "detector_index": 0,
-              "function": "rare",
-              "function_description": "rare",
-              "influencers": Array [
-                Object {
-                  "influencer_field_name": "user.name",
-                  "influencer_field_values": Array [
-                    "root",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "process.name",
-                  "influencer_field_values": Array [
-                    "ls",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "host.name",
-                  "influencer_field_values": Array [
-                    "zeek-iowa",
-                  ],
-                },
-              ],
-              "initial_record_score": 16.193669439507826,
-              "is_interim": false,
-              "job_id": "job-2",
-              "multi_bucket_impact": 0,
-              "partition_field_name": "host.name",
-              "partition_field_value": "zeek-iowa",
-              "probability": 0.024041164411288146,
-              "record_score": 16.193669439507826,
-              "result_type": "record",
-              "timestamp": 1560664800000,
-              "typical": Array [
-                0.024041164411288146,
-              ],
-            },
-            "time": 1560664800000,
-          },
-        ],
-        "interval": "day",
-      }
-    }
-    data={
-      Object {
-        "_id": "yneHlmgBjVl2VqDlAjPR",
-        "cloud": Object {
-          "instance": Object {
-            "id": Array [
-              "423232333829362673777",
-            ],
-          },
-          "machine": Object {
-            "type": Array [
-              "custom-4-16384",
+            "initial_record_score": 16.193669439507826,
+            "is_interim": false,
+            "job_id": "job-2",
+            "multi_bucket_impact": 0,
+            "partition_field_name": "host.name",
+            "partition_field_value": "zeek-iowa",
+            "probability": 0.024041164411288146,
+            "record_score": 16.193669439507826,
+            "result_type": "record",
+            "timestamp": 1560664800000,
+            "typical": Array [
+              0.024041164411288146,
             ],
           },
-          "provider": Array [
-            "gce",
-          ],
-          "region": Array [
-            "us-east-1",
-          ],
+          "time": 1560664800000,
         },
-        "host": Object {
-          "architecture": Array [
-            "x86_64",
-          ],
+      ],
+      "interval": "day",
+    }
+  }
+  data={
+    Object {
+      "_id": "yneHlmgBjVl2VqDlAjPR",
+      "cloud": Object {
+        "instance": Object {
           "id": Array [
-            "aa7ca589f1b8220002f2fc61c64cfbf1",
+            "423232333829362673777",
           ],
-          "ip": Array [
-            "10.142.0.7",
-            "fe80::4001:aff:fe8e:7",
+        },
+        "machine": Object {
+          "type": Array [
+            "custom-4-16384",
           ],
-          "mac": Array [
-            "42:01:0a:8e:00:07",
+        },
+        "provider": Array [
+          "gce",
+        ],
+        "region": Array [
+          "us-east-1",
+        ],
+      },
+      "host": Object {
+        "architecture": Array [
+          "x86_64",
+        ],
+        "id": Array [
+          "aa7ca589f1b8220002f2fc61c64cfbf1",
+        ],
+        "ip": Array [
+          "10.142.0.7",
+          "fe80::4001:aff:fe8e:7",
+        ],
+        "mac": Array [
+          "42:01:0a:8e:00:07",
+        ],
+        "name": Array [
+          "siem-kibana",
+        ],
+        "os": Object {
+          "family": Array [
+            "debian",
           ],
           "name": Array [
-            "siem-kibana",
+            "Debian GNU/Linux",
+          ],
+          "platform": Array [
+            "debian",
+          ],
+          "version": Array [
+            "9 (stretch)",
           ],
-          "os": Object {
-            "family": Array [
-              "debian",
-            ],
-            "name": Array [
-              "Debian GNU/Linux",
-            ],
-            "platform": Array [
-              "debian",
-            ],
-            "version": Array [
-              "9 (stretch)",
-            ],
-          },
         },
-      }
+      },
     }
-    endDate={1560837600000}
-    id="hostOverview"
-    isLoadingAnomaliesData={false}
-    loading={false}
-    narrowDateRange={[MockFunction]}
-    startDate={1560578400000}
-  />
-</Component>
+  }
+  endDate={1560837600000}
+  id="hostOverview"
+  isLoadingAnomaliesData={false}
+  loading={false}
+  narrowDateRange={[MockFunction]}
+  startDate={1560578400000}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx
index 2cdac754198af..830665f827301 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/host_overview/index.test.tsx
@@ -31,7 +31,7 @@ describe('Host Summary Component', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('HostOverview'))).toMatchSnapshot();
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap
index 4c84aa15fd4c2..3143e680913b2 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/__snapshots__/index.test.tsx.snap
@@ -1,181 +1,169 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Hosts Table rendering it renders the default Hosts table 1`] = `
-<Component
-  store={
-    Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(observable): [Function],
-    }
-  }
->
-  <Connect(HostsTableComponent)
-    data={
-      Array [
-        Object {
-          "cursor": Object {
-            "value": "98966fa2013c396155c460d35c0902be",
-          },
-          "node": Object {
-            "_id": "cPsuhGcB0WOhS6qyTKC0",
-            "host": Object {
+<HostsTable
+  data={
+    Array [
+      Object {
+        "cursor": Object {
+          "value": "98966fa2013c396155c460d35c0902be",
+        },
+        "node": Object {
+          "_id": "cPsuhGcB0WOhS6qyTKC0",
+          "host": Object {
+            "name": Array [
+              "elrond.elstc.co",
+            ],
+            "os": Object {
               "name": Array [
-                "elrond.elstc.co",
+                "Ubuntu",
+              ],
+              "version": Array [
+                "18.04.1 LTS (Bionic Beaver)",
               ],
-              "os": Object {
-                "name": Array [
-                  "Ubuntu",
-                ],
-                "version": Array [
-                  "18.04.1 LTS (Bionic Beaver)",
-                ],
-              },
             },
           },
         },
-        Object {
-          "cursor": Object {
-            "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
-          },
-          "node": Object {
-            "_id": "KwQDiWcB0WOhS6qyXmrW",
-            "cloud": Object {
-              "instance": Object {
-                "id": Array [
-                  "423232333829362673777",
-                ],
-              },
-              "machine": Object {
-                "type": Array [
-                  "custom-4-16384",
-                ],
-              },
-              "provider": Array [
-                "gce",
+      },
+      Object {
+        "cursor": Object {
+          "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+        },
+        "node": Object {
+          "_id": "KwQDiWcB0WOhS6qyXmrW",
+          "cloud": Object {
+            "instance": Object {
+              "id": Array [
+                "423232333829362673777",
               ],
-              "region": Array [
-                "us-east-1",
+            },
+            "machine": Object {
+              "type": Array [
+                "custom-4-16384",
               ],
             },
-            "host": Object {
+            "provider": Array [
+              "gce",
+            ],
+            "region": Array [
+              "us-east-1",
+            ],
+          },
+          "host": Object {
+            "name": Array [
+              "siem-kibana",
+            ],
+            "os": Object {
               "name": Array [
-                "siem-kibana",
+                "Debian GNU/Linux",
+              ],
+              "version": Array [
+                "9 (stretch)",
               ],
-              "os": Object {
-                "name": Array [
-                  "Debian GNU/Linux",
-                ],
-                "version": Array [
-                  "9 (stretch)",
-                ],
-              },
             },
           },
         },
-      ]
-    }
-    fakeTotalCount={50}
-    id="hostsQuery"
-    indexPattern={
-      Object {
-        "fields": Array [
-          Object {
-            "aggregatable": true,
-            "name": "@timestamp",
-            "searchable": true,
-            "type": "date",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "@version",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.ephemeral_id",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.hostname",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.id",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test1",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test2",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test3",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test4",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test5",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test6",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test7",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "agent.test8",
-            "searchable": true,
-            "type": "string",
-          },
-          Object {
-            "aggregatable": true,
-            "name": "host.name",
-            "searchable": true,
-            "type": "string",
-          },
-        ],
-        "title": "filebeat-*,auditbeat-*,packetbeat-*",
-      }
+      },
+    ]
+  }
+  fakeTotalCount={50}
+  id="hostsQuery"
+  indexPattern={
+    Object {
+      "fields": Array [
+        Object {
+          "aggregatable": true,
+          "name": "@timestamp",
+          "searchable": true,
+          "type": "date",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "@version",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.ephemeral_id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.hostname",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.id",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test1",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test2",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test3",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test4",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test5",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test6",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test7",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "agent.test8",
+          "searchable": true,
+          "type": "string",
+        },
+        Object {
+          "aggregatable": true,
+          "name": "host.name",
+          "searchable": true,
+          "type": "string",
+        },
+      ],
+      "title": "filebeat-*,auditbeat-*,packetbeat-*",
     }
-    isInspect={false}
-    loadPage={[MockFunction]}
-    loading={false}
-    showMorePagesIndicator={true}
-    totalCount={4}
-    type="page"
-  />
-</Component>
+  }
+  isInspect={false}
+  loadPage={[MockFunction]}
+  loading={false}
+  showMorePagesIndicator={true}
+  totalCount={4}
+  type="page"
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
index cdeaba0f067f5..c9fdce94f780a 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.test.tsx
@@ -67,7 +67,7 @@ describe('Hosts Table', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('HostsTable'))).toMatchSnapshot();
     });
 
     describe('Sorting on Table', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
index 62788abec1487..faf1832bc4848 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/hosts_table/index.tsx
@@ -214,3 +214,5 @@ export const HostsTable = connect(makeMapStateToProps, {
   updateTableActivePage: hostsActions.updateTableActivePage,
   updateTableLimit: hostsActions.updateTableLimit,
 })(HostsTableComponent);
+
+HostsTable.displayName = 'HostsTable';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap
index 6af65d4cf5306..a93c4062e8808 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/__snapshots__/index.test.tsx.snap
@@ -1,214 +1,212 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Uncommon Process Table Component rendering it renders the default Uncommon process table 1`] = `
-<Component>
-  <Connect(UncommonProcessTableComponent)
-    data={
-      Array [
-        Object {
-          "cursor": Object {
-            "value": "98966fa2013c396155c460d35c0902be",
+<UncommonProcessTable
+  data={
+    Array [
+      Object {
+        "cursor": Object {
+          "value": "98966fa2013c396155c460d35c0902be",
+        },
+        "node": Object {
+          "_id": "cPsuhGcB0WOhS6qyTKC0",
+          "hosts": Array [],
+          "instances": 93,
+          "process": Object {
+            "name": Array [
+              "elrond.elstc.co",
+            ],
+            "title": Array [
+              "Hello World",
+            ],
           },
-          "node": Object {
-            "_id": "cPsuhGcB0WOhS6qyTKC0",
-            "hosts": Array [],
-            "instances": 93,
-            "process": Object {
-              "name": Array [
-                "elrond.elstc.co",
-              ],
-              "title": Array [
-                "Hello World",
-              ],
-            },
-            "user": Object {
+          "user": Object {
+            "id": Array [
+              "0",
+            ],
+            "name": Array [
+              "root",
+            ],
+          },
+        },
+      },
+      Object {
+        "cursor": Object {
+          "value": "98966fa2013c396155c460d35c0902be",
+        },
+        "node": Object {
+          "_id": "cPsuhGcB0WOhS6qyTKC0",
+          "hosts": Array [
+            Object {
               "id": Array [
-                "0",
+                "host-id-1",
               ],
               "name": Array [
-                "root",
+                "hello-world",
               ],
             },
+          ],
+          "instances": 93,
+          "process": Object {
+            "name": Array [
+              "elrond.elstc.co",
+            ],
+            "title": Array [
+              "Hello World",
+            ],
           },
-        },
-        Object {
-          "cursor": Object {
-            "value": "98966fa2013c396155c460d35c0902be",
+          "user": Object {
+            "id": Array [
+              "0",
+            ],
+            "name": Array [
+              "root",
+            ],
           },
-          "node": Object {
-            "_id": "cPsuhGcB0WOhS6qyTKC0",
-            "hosts": Array [
-              Object {
-                "id": Array [
-                  "host-id-1",
-                ],
-                "name": Array [
-                  "hello-world",
-                ],
-              },
-            ],
-            "instances": 93,
-            "process": Object {
-              "name": Array [
-                "elrond.elstc.co",
+        },
+      },
+      Object {
+        "cursor": Object {
+          "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+        },
+        "node": Object {
+          "_id": "KwQDiWcB0WOhS6qyXmrW",
+          "hosts": Array [
+            Object {
+              "id": Array [
+                "host-id-1",
               ],
-              "title": Array [
-                "Hello World",
+              "name": Array [
+                "hello-world",
               ],
             },
-            "user": Object {
+            Object {
               "id": Array [
-                "0",
+                "host-id-2",
               ],
               "name": Array [
-                "root",
+                "hello-world-2",
               ],
             },
+          ],
+          "instances": 97,
+          "process": Object {
+            "name": Array [
+              "siem-kibana",
+            ],
+            "title": Array [
+              "Hello World",
+            ],
           },
-        },
-        Object {
-          "cursor": Object {
-            "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+          "user": Object {
+            "id": Array [
+              "1",
+            ],
+            "name": Array [
+              "Evan",
+            ],
           },
-          "node": Object {
-            "_id": "KwQDiWcB0WOhS6qyXmrW",
-            "hosts": Array [
-              Object {
-                "id": Array [
-                  "host-id-1",
-                ],
-                "name": Array [
-                  "hello-world",
-                ],
-              },
-              Object {
-                "id": Array [
-                  "host-id-2",
-                ],
-                "name": Array [
-                  "hello-world-2",
-                ],
-              },
-            ],
-            "instances": 97,
-            "process": Object {
-              "name": Array [
-                "siem-kibana",
-              ],
-              "title": Array [
-                "Hello World",
-              ],
-            },
-            "user": Object {
-              "id": Array [
-                "1",
-              ],
-              "name": Array [
-                "Evan",
+        },
+      },
+      Object {
+        "cursor": Object {
+          "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+        },
+        "node": Object {
+          "_id": "KwQDiWcB0WOhS6qyXmrW",
+          "hosts": Array [
+            Object {
+              "ip": Array [
+                "127.0.0.1",
               ],
             },
+          ],
+          "instances": 97,
+          "process": Object {
+            "name": Array [
+              "siem-kibana",
+            ],
+            "title": Array [
+              "Hello World",
+            ],
           },
-        },
-        Object {
-          "cursor": Object {
-            "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+          "user": Object {
+            "id": Array [
+              "1",
+            ],
+            "name": Array [
+              "Evan",
+            ],
           },
-          "node": Object {
-            "_id": "KwQDiWcB0WOhS6qyXmrW",
-            "hosts": Array [
-              Object {
-                "ip": Array [
-                  "127.0.0.1",
-                ],
-              },
-            ],
-            "instances": 97,
-            "process": Object {
-              "name": Array [
-                "siem-kibana",
-              ],
-              "title": Array [
-                "Hello World",
+        },
+      },
+      Object {
+        "cursor": Object {
+          "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+        },
+        "node": Object {
+          "_id": "KwQDiWcB0WOhS6qyXmrW",
+          "hosts": Array [
+            Object {
+              "ip": Array [
+                "127.0.0.1",
               ],
             },
-            "user": Object {
+            Object {
               "id": Array [
-                "1",
+                "host-id-1",
               ],
               "name": Array [
-                "Evan",
+                "hello-world",
               ],
             },
-          },
-        },
-        Object {
-          "cursor": Object {
-            "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
-          },
-          "node": Object {
-            "_id": "KwQDiWcB0WOhS6qyXmrW",
-            "hosts": Array [
-              Object {
-                "ip": Array [
-                  "127.0.0.1",
-                ],
-              },
-              Object {
-                "id": Array [
-                  "host-id-1",
-                ],
-                "name": Array [
-                  "hello-world",
-                ],
-              },
-              Object {
-                "ip": Array [
-                  "127.0.0.1",
-                ],
-              },
-              Object {
-                "id": Array [
-                  "host-id-2",
-                ],
-                "name": Array [
-                  "hello-world-2",
-                ],
-              },
-              Object {
-                "ip": Array [
-                  "127.0.0.1",
-                ],
-              },
-            ],
-            "instances": 97,
-            "process": Object {
-              "name": Array [
-                "siem-kibana",
-              ],
-              "title": Array [
-                "Hello World",
+            Object {
+              "ip": Array [
+                "127.0.0.1",
               ],
             },
-            "user": Object {
+            Object {
               "id": Array [
-                "1",
+                "host-id-2",
               ],
               "name": Array [
-                "Evan",
+                "hello-world-2",
               ],
             },
+            Object {
+              "ip": Array [
+                "127.0.0.1",
+              ],
+            },
+          ],
+          "instances": 97,
+          "process": Object {
+            "name": Array [
+              "siem-kibana",
+            ],
+            "title": Array [
+              "Hello World",
+            ],
+          },
+          "user": Object {
+            "id": Array [
+              "1",
+            ],
+            "name": Array [
+              "Evan",
+            ],
           },
         },
-      ]
-    }
-    fakeTotalCount={50}
-    id="uncommonProcess"
-    isInspect={false}
-    loadPage={[MockFunction]}
-    loading={false}
-    showMorePagesIndicator={true}
-    totalCount={5}
-    type="page"
-  />
-</Component>
+      },
+    ]
+  }
+  fakeTotalCount={50}
+  id="uncommonProcess"
+  isInspect={false}
+  loadPage={[MockFunction]}
+  loading={false}
+  showMorePagesIndicator={true}
+  totalCount={5}
+  type="page"
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
index 2fe3843f71d85..10d9eb618c766 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.test.tsx
@@ -43,7 +43,7 @@ describe('Uncommon Process Table Component', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('UncommonProcessTable'))).toMatchSnapshot();
     });
 
     test('it has a double dash (empty value) without any hosts at all', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
index 00eec3fe3a754..a4fd4d636b35e 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/hosts/uncommon_process_table/index.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 import { ActionCreator } from 'typescript-fsa';
 
 import { hostsActions } from '../../../../store/actions';
@@ -82,7 +81,7 @@ export const getArgs = (args: string[] | null | undefined): string | null => {
   }
 };
 
-const UncommonProcessTableComponent = pure<UncommonProcessTableProps>(
+const UncommonProcessTableComponent = React.memo<UncommonProcessTableProps>(
   ({
     activePage,
     data,
@@ -144,6 +143,8 @@ export const UncommonProcessTable = connect(makeMapStateToProps, {
   updateTableLimit: hostsActions.updateTableLimit,
 })(UncommonProcessTableComponent);
 
+UncommonProcessTable.displayName = 'UncommonProcessTable';
+
 const getUncommonColumns = (): UncommonProcessTableColumns => [
   {
     name: i18n.NAME,
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx
index b5e07809f2e12..956271b416ee8 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/flow_target_select_connected/index.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 import { ActionCreator } from 'typescript-fsa';
 
@@ -37,7 +36,7 @@ export interface FlowTargetSelectDispatchProps {
 
 type FlowTargetSelectProps = FlowTargetSelectReduxProps & FlowTargetSelectDispatchProps;
 
-const FlowTargetSelectComponent = pure<FlowTargetSelectProps>(
+const FlowTargetSelectComponent = React.memo<FlowTargetSelectProps>(
   ({ flowTarget, updateIpDetailsFlowTarget }) => (
     <SelectTypeItem grow={false} data-test-subj={`${IpOverviewId}-select-flow-target`}>
       <FlowTargetSelect
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap
index dae82a387eac0..fe34c584bafb7 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/__snapshots__/index.test.tsx.snap
@@ -1,163 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IP Overview Component rendering it renders the default IP Overview 1`] = `
-<Component
-  store={
+<IpOverview
+  anomaliesData={
     Object {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(observable): [Function],
-    }
-  }
->
-  <IpOverview
-    anomaliesData={
-      Object {
-        "anomalies": Array [
-          Object {
-            "detectorIndex": 0,
-            "entityName": "process.name",
-            "entityValue": "du",
+      "anomalies": Array [
+        Object {
+          "detectorIndex": 0,
+          "entityName": "process.name",
+          "entityValue": "du",
+          "influencers": Array [
+            Object {
+              "host.name": "zeek-iowa",
+            },
+            Object {
+              "process.name": "du",
+            },
+            Object {
+              "user.name": "root",
+            },
+          ],
+          "jobId": "job-1",
+          "rowId": "1561157194802_0",
+          "severity": 16.193669439507826,
+          "source": Object {
+            "actual": Array [
+              1,
+            ],
+            "bucket_span": 900,
+            "by_field_name": "process.name",
+            "by_field_value": "du",
+            "detector_index": 0,
+            "function": "rare",
+            "function_description": "rare",
             "influencers": Array [
               Object {
-                "host.name": "zeek-iowa",
+                "influencer_field_name": "user.name",
+                "influencer_field_values": Array [
+                  "root",
+                ],
               },
               Object {
-                "process.name": "du",
+                "influencer_field_name": "process.name",
+                "influencer_field_values": Array [
+                  "du",
+                ],
               },
               Object {
-                "user.name": "root",
+                "influencer_field_name": "host.name",
+                "influencer_field_values": Array [
+                  "zeek-iowa",
+                ],
               },
             ],
-            "jobId": "job-1",
-            "rowId": "1561157194802_0",
-            "severity": 16.193669439507826,
-            "source": Object {
-              "actual": Array [
-                1,
-              ],
-              "bucket_span": 900,
-              "by_field_name": "process.name",
-              "by_field_value": "du",
-              "detector_index": 0,
-              "function": "rare",
-              "function_description": "rare",
-              "influencers": Array [
-                Object {
-                  "influencer_field_name": "user.name",
-                  "influencer_field_values": Array [
-                    "root",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "process.name",
-                  "influencer_field_values": Array [
-                    "du",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "host.name",
-                  "influencer_field_values": Array [
-                    "zeek-iowa",
-                  ],
-                },
-              ],
-              "initial_record_score": 16.193669439507826,
-              "is_interim": false,
-              "job_id": "job-1",
-              "multi_bucket_impact": 0,
-              "partition_field_name": "host.name",
-              "partition_field_value": "zeek-iowa",
-              "probability": 0.024041164411288146,
-              "record_score": 16.193669439507826,
-              "result_type": "record",
-              "timestamp": 1560664800000,
-              "typical": Array [
-                0.024041164411288146,
-              ],
-            },
-            "time": 1560664800000,
+            "initial_record_score": 16.193669439507826,
+            "is_interim": false,
+            "job_id": "job-1",
+            "multi_bucket_impact": 0,
+            "partition_field_name": "host.name",
+            "partition_field_value": "zeek-iowa",
+            "probability": 0.024041164411288146,
+            "record_score": 16.193669439507826,
+            "result_type": "record",
+            "timestamp": 1560664800000,
+            "typical": Array [
+              0.024041164411288146,
+            ],
           },
-          Object {
-            "detectorIndex": 0,
-            "entityName": "process.name",
-            "entityValue": "ls",
+          "time": 1560664800000,
+        },
+        Object {
+          "detectorIndex": 0,
+          "entityName": "process.name",
+          "entityValue": "ls",
+          "influencers": Array [
+            Object {
+              "host.name": "zeek-iowa",
+            },
+            Object {
+              "process.name": "ls",
+            },
+            Object {
+              "user.name": "root",
+            },
+          ],
+          "jobId": "job-2",
+          "rowId": "1561157194802_1",
+          "severity": 16.193669439507826,
+          "source": Object {
+            "actual": Array [
+              1,
+            ],
+            "bucket_span": 900,
+            "by_field_name": "process.name",
+            "by_field_value": "ls",
+            "detector_index": 0,
+            "function": "rare",
+            "function_description": "rare",
             "influencers": Array [
               Object {
-                "host.name": "zeek-iowa",
+                "influencer_field_name": "user.name",
+                "influencer_field_values": Array [
+                  "root",
+                ],
               },
               Object {
-                "process.name": "ls",
+                "influencer_field_name": "process.name",
+                "influencer_field_values": Array [
+                  "ls",
+                ],
               },
               Object {
-                "user.name": "root",
+                "influencer_field_name": "host.name",
+                "influencer_field_values": Array [
+                  "zeek-iowa",
+                ],
               },
             ],
-            "jobId": "job-2",
-            "rowId": "1561157194802_1",
-            "severity": 16.193669439507826,
-            "source": Object {
-              "actual": Array [
-                1,
-              ],
-              "bucket_span": 900,
-              "by_field_name": "process.name",
-              "by_field_value": "ls",
-              "detector_index": 0,
-              "function": "rare",
-              "function_description": "rare",
-              "influencers": Array [
-                Object {
-                  "influencer_field_name": "user.name",
-                  "influencer_field_values": Array [
-                    "root",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "process.name",
-                  "influencer_field_values": Array [
-                    "ls",
-                  ],
-                },
-                Object {
-                  "influencer_field_name": "host.name",
-                  "influencer_field_values": Array [
-                    "zeek-iowa",
-                  ],
-                },
-              ],
-              "initial_record_score": 16.193669439507826,
-              "is_interim": false,
-              "job_id": "job-2",
-              "multi_bucket_impact": 0,
-              "partition_field_name": "host.name",
-              "partition_field_value": "zeek-iowa",
-              "probability": 0.024041164411288146,
-              "record_score": 16.193669439507826,
-              "result_type": "record",
-              "timestamp": 1560664800000,
-              "typical": Array [
-                0.024041164411288146,
-              ],
-            },
-            "time": 1560664800000,
+            "initial_record_score": 16.193669439507826,
+            "is_interim": false,
+            "job_id": "job-2",
+            "multi_bucket_impact": 0,
+            "partition_field_name": "host.name",
+            "partition_field_value": "zeek-iowa",
+            "probability": 0.024041164411288146,
+            "record_score": 16.193669439507826,
+            "result_type": "record",
+            "timestamp": 1560664800000,
+            "typical": Array [
+              0.024041164411288146,
+            ],
           },
-        ],
-        "interval": "day",
-      }
+          "time": 1560664800000,
+        },
+      ],
+      "interval": "day",
     }
-    endDate={1560837600000}
-    flowTarget="source"
-    id="ipOverview"
-    ip="10.10.10.10"
-    isLoadingAnomaliesData={false}
-    loading={false}
-    narrowDateRange={[MockFunction]}
-    startDate={1560578400000}
-    type="details"
-    updateFlowTargetAction={[MockFunction]}
-  />
-</Component>
+  }
+  endDate={1560837600000}
+  flowTarget="source"
+  id="ipOverview"
+  ip="10.10.10.10"
+  isLoadingAnomaliesData={false}
+  loading={false}
+  narrowDateRange={[MockFunction]}
+  startDate={1560578400000}
+  type="details"
+  updateFlowTargetAction={[MockFunction]}
+/>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
index b414e6dcb690a..6c2edd764855c 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.test.tsx
@@ -52,7 +52,7 @@ describe('IP Overview Component', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('IpOverview'))).toMatchSnapshot();
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx
index b71d786e643eb..70b4d03362438 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/ip_overview/index.tsx
@@ -8,7 +8,6 @@ import { EuiFlexItem } from '@elastic/eui';
 import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
 import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { useContext, useState } from 'react';
-import { pure } from 'recompose';
 
 import { DEFAULT_DARK_MODE } from '../../../../../common/constants';
 import { DescriptionList } from '../../../../../common/utility_types';
@@ -59,7 +58,7 @@ const getDescriptionList = (descriptionList: DescriptionList[], key: number) =>
   );
 };
 
-export const IpOverview = pure<IpOverviewProps>(
+export const IpOverview = React.memo<IpOverviewProps>(
   ({
     id,
     ip,
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
index 904df318d0817..44bcda218226c 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/__snapshots__/is_ptr_included.test.tsx.snap
@@ -1,8 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NetworkTopNFlow Select direction rendering it renders the basic switch to include PTR in table 1`] = `
-<Component
-  isPtrIncluded={true}
+<EuiSwitch
+  checked={true}
+  label="Include PTR records"
+  name="switch-ptr-included"
   onChange={[MockFunction]}
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx
index a9025017f2590..e9c02c245be95 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.tsx
@@ -6,7 +6,6 @@
 
 import { EuiSwitch } from '@elastic/eui';
 import React from 'react';
-import { pure } from 'recompose';
 
 import * as i18n from './translations';
 
@@ -15,7 +14,7 @@ interface Props {
   onChange: () => void;
 }
 
-export const IsPtrIncluded = pure<Props>(({ isPtrIncluded, onChange }) => (
+export const IsPtrIncluded = React.memo<Props>(({ isPtrIncluded, onChange }) => (
   <EuiSwitch
     name="switch-ptr-included"
     label={i18n.INCLUDE_PTR_RECORDS}
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx
index ebabde44c61e9..077a2d9aebe52 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host/index.tsx
@@ -7,7 +7,6 @@
 import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState } from 'react';
-import { pure } from 'recompose';
 
 import { HeaderSection } from '../../../header_section';
 import { manageQuery } from '../../../page/manage_query';
@@ -37,7 +36,7 @@ export interface OwnProps {
 
 const OverviewHostStatsManage = manageQuery(OverviewHostStats);
 type OverviewHostProps = OwnProps;
-export const OverviewHost = pure<OverviewHostProps>(({ endDate, startDate, setQuery }) => {
+export const OverviewHost = React.memo<OverviewHostProps>(({ endDate, startDate, setQuery }) => {
   const [isHover, setIsHover] = useState(false);
   return (
     <EuiFlexItem>
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap
index 4c765cfb7fa13..142a9a03b7844 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/__snapshots__/index.test.tsx.snap
@@ -1,26 +1,233 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Overview Host Stat Data rendering it renders the default OverviewHostStats 1`] = `
-<Component
-  data={
-    Object {
-      "auditbeatAuditd": 73847,
-      "auditbeatFIM": 107307,
-      "auditbeatLogin": 60015,
-      "auditbeatPackage": 2003,
-      "auditbeatProcess": 1200,
-      "auditbeatUser": 1979,
-      "endgameDns": 39123,
-      "endgameFile": 39456,
-      "endgameImageLoad": 39789,
-      "endgameNetwork": 39101112,
-      "endgameProcess": 39131415,
-      "endgameRegistry": 39161718,
-      "endgameSecurity": 39202122,
-      "filebeatSystemModule": 568,
-      "winlogbeat": 296999,
-    }
-  }
-  loading={false}
-/>
+<EuiDescriptionList
+  type="column"
+>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat Audit"
+      id="xpack.siem.overview.auditBeatAuditTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatAuditd"
+  >
+    <StatValue
+      isLoading={false}
+      value="73,847"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat File Integrity Module"
+      id="xpack.siem.overview.auditBeatFimTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatFIM"
+  >
+    <StatValue
+      isLoading={false}
+      value="107,307"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat Login"
+      id="xpack.siem.overview.auditBeatLoginTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatLogin"
+  >
+    <StatValue
+      isLoading={false}
+      value="60,015"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat Package"
+      id="xpack.siem.overview.auditBeatPackageTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatPackage"
+  >
+    <StatValue
+      isLoading={false}
+      value="2,003"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat Process"
+      id="xpack.siem.overview.auditBeatProcessTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatProcess"
+  >
+    <StatValue
+      isLoading={false}
+      value="1,200"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat User"
+      id="xpack.siem.overview.auditBeatUserTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-auditbeatUser"
+  >
+    <StatValue
+      isLoading={false}
+      value="1,979"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame DNS"
+      id="xpack.siem.overview.endgameDnsTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameDns"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,123"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame File"
+      id="xpack.siem.overview.endgameFileTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameFile"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,456"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame Image Load"
+      id="xpack.siem.overview.endgameImageLoadTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameImageLoad"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,789"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame Network"
+      id="xpack.siem.overview.endgameNetworkTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameNetwork"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,101,112"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame Process"
+      id="xpack.siem.overview.endgameProcessTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameProcess"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,131,415"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame Registry"
+      id="xpack.siem.overview.endgameRegistryTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameRegistry"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,161,718"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Endgame Security"
+      id="xpack.siem.overview.endgameSecurityTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-endgameSecurity"
+  >
+    <StatValue
+      isLoading={false}
+      value="39,202,122"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat System Module"
+      id="xpack.siem.overview.filebeatSystemModuleTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-filebeatSystemModule"
+  >
+    <StatValue
+      isLoading={false}
+      value="568"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Winlogbeat"
+      id="xpack.siem.overview.winlogbeatTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="host-stat-winlogbeat"
+  >
+    <StatValue
+      isLoading={false}
+      value="296,999"
+    />
+  </DescriptionListDescription>
+</EuiDescriptionList>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx
index 7d7b2791cf892..aa2c6d61451bc 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_host_stats/index.tsx
@@ -14,7 +14,6 @@ import numeral from '@elastic/numeral';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { has } from 'lodash/fp';
 import React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { OverviewHostData } from '../../../../graphql/types';
@@ -221,7 +220,7 @@ export const DescriptionListDescription = styled(EuiDescriptionListDescription)`
 
 DescriptionListDescription.displayName = 'DescriptionListDescription';
 
-const StatValue = pure<{ isLoading: boolean; value: React.ReactNode | null | undefined }>(
+const StatValue = React.memo<{ isLoading: boolean; value: React.ReactNode | null | undefined }>(
   ({ isLoading, value }) => (
     <>{isLoading ? <EuiLoadingSpinner size="m" /> : value != null ? value : getEmptyTagValue()}</>
   )
@@ -229,7 +228,7 @@ const StatValue = pure<{ isLoading: boolean; value: React.ReactNode | null | und
 
 StatValue.displayName = 'StatValue';
 
-export const OverviewHostStats = pure<OverviewHostProps>(({ data, loading }) => (
+export const OverviewHostStats = React.memo<OverviewHostProps>(({ data, loading }) => (
   <EuiDescriptionList type="column">
     {overviewHostStats(data).map((item, index) => (
       <React.Fragment key={index}>
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx
index b6f1a9cdf26e4..b84f2b61a0ce8 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network/index.tsx
@@ -7,7 +7,6 @@
 import { EuiButton, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState } from 'react';
-import { pure } from 'recompose';
 
 import { HeaderSection } from '../../../header_section';
 import { manageQuery } from '../../../page/manage_query';
@@ -37,7 +36,7 @@ export interface OwnProps {
 
 const OverviewNetworkStatsManage = manageQuery(OverviewNetworkStats);
 
-export const OverviewNetwork = pure<OwnProps>(({ endDate, startDate, setQuery }) => {
+export const OverviewNetwork = React.memo<OwnProps>(({ endDate, startDate, setQuery }) => {
   const [isHover, setIsHover] = useState(false);
   return (
     <EuiFlexItem>
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap
index 565d9f6b84397..9db61c474e220 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/__snapshots__/index.test.tsx.snap
@@ -1,20 +1,143 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Overview Network Stat Data rendering it renders the default OverviewNetworkStats 1`] = `
-<Component
-  data={
-    Object {
-      "auditbeatSocket": 12,
-      "filebeatCisco": 999,
-      "filebeatNetflow": 7777,
-      "filebeatPanw": 66,
-      "filebeatSuricata": 60015,
-      "filebeatZeek": 2003,
-      "packetbeatDNS": 10277307,
-      "packetbeatFlow": 16,
-      "packetbeatTLS": 3400000,
-    }
-  }
-  loading={false}
-/>
+<EuiDescriptionList
+  type="column"
+>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Auditbeat Socket"
+      id="xpack.siem.overview.auditBeatSocketTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-auditbeatSocket"
+  >
+    <StatValue
+      isLoading={false}
+      value="12"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat Cisco"
+      id="xpack.siem.overview.filebeatCiscoTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-filebeatCisco"
+  >
+    <StatValue
+      isLoading={false}
+      value="999"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat Netflow"
+      id="xpack.siem.overview.filebeatNetflowTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-filebeatNetflow"
+  >
+    <StatValue
+      isLoading={false}
+      value="7,777"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat Palo Alto Networks"
+      id="xpack.siem.overview.filebeatPanwTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-filebeatPanw"
+  >
+    <StatValue
+      isLoading={false}
+      value="66"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat Suricata"
+      id="xpack.siem.overview.fileBeatSuricataTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-filebeatSuricata"
+  >
+    <StatValue
+      isLoading={false}
+      value="60,015"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Filebeat Zeek"
+      id="xpack.siem.overview.fileBeatZeekTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-filebeatZeek"
+  >
+    <StatValue
+      isLoading={false}
+      value="2,003"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Packetbeat DNS"
+      id="xpack.siem.overview.packetBeatDnsTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-packetbeatDNS"
+  >
+    <StatValue
+      isLoading={false}
+      value="10,277,307"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Packetbeat Flow"
+      id="xpack.siem.overview.packetBeatFlowTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-packetbeatFlow"
+  >
+    <StatValue
+      isLoading={false}
+      value="16"
+    />
+  </DescriptionListDescription>
+  <EuiDescriptionListTitle>
+    <FormattedMessage
+      defaultMessage="Packetbeat TLS"
+      id="xpack.siem.overview.packetbeatTLSTitle"
+      values={Object {}}
+    />
+  </EuiDescriptionListTitle>
+  <DescriptionListDescription
+    data-test-subj="network-stat-packetbeatTLS"
+  >
+    <StatValue
+      isLoading={false}
+      value="3,400,000"
+    />
+  </DescriptionListDescription>
+</EuiDescriptionList>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx
index 8f592c7bbba60..81d374bc0286b 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/overview/overview_network_stats/index.tsx
@@ -14,7 +14,6 @@ import numeral from '@elastic/numeral';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { has } from 'lodash/fp';
 import React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { OverviewNetworkData } from '../../../../graphql/types';
@@ -148,7 +147,7 @@ export const DescriptionListDescription = styled(EuiDescriptionListDescription)`
 
 DescriptionListDescription.displayName = 'DescriptionListDescription';
 
-const StatValue = pure<{ isLoading: boolean; value: React.ReactNode | null | undefined }>(
+const StatValue = React.memo<{ isLoading: boolean; value: React.ReactNode | null | undefined }>(
   ({ isLoading, value }) => (
     <>{isLoading ? <EuiLoadingSpinner size="m" /> : value != null ? value : getEmptyTagValue()}</>
   )
@@ -156,7 +155,7 @@ const StatValue = pure<{ isLoading: boolean; value: React.ReactNode | null | und
 
 StatValue.displayName = 'StatValue';
 
-export const OverviewNetworkStats = pure<OverviewNetworkProps>(({ data, loading }) => (
+export const OverviewNetworkStats = React.memo<OverviewNetworkProps>(({ data, loading }) => (
   <EuiDescriptionList type="column">
     {overviewNetworkStats(data).map((item, index) => (
       <React.Fragment key={index}>
diff --git a/x-pack/legacy/plugins/siem/public/components/pin/index.tsx b/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
index 897195af0aa46..8aec3a60cbc37 100644
--- a/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/pin/index.tsx
@@ -7,7 +7,6 @@
 import { EuiButtonIcon, IconSize } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import * as i18n from '../../components/timeline/body/translations';
 
@@ -22,15 +21,17 @@ interface Props {
   pinned: boolean;
 }
 
-export const Pin = pure<Props>(({ allowUnpinning, iconSize = 'm', onClick = noop, pinned }) => (
-  <EuiButtonIcon
-    aria-label={pinned ? i18n.PINNED : i18n.UNPINNED}
-    data-test-subj="pin"
-    iconSize={iconSize}
-    iconType={getPinIcon(pinned)}
-    isDisabled={allowUnpinning ? false : true}
-    onClick={onClick}
-  />
-));
+export const Pin = React.memo<Props>(
+  ({ allowUnpinning, iconSize = 'm', onClick = noop, pinned }) => (
+    <EuiButtonIcon
+      aria-label={pinned ? i18n.PINNED : i18n.UNPINNED}
+      data-test-subj="pin"
+      iconSize={iconSize}
+      iconType={getPinIcon(pinned)}
+      isDisabled={allowUnpinning ? false : true}
+      onClick={onClick}
+    />
+  )
+);
 
 Pin.displayName = 'Pin';
diff --git a/x-pack/legacy/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap
index 194a55b37b0a8..ecdaee0ab2d93 100644
--- a/x-pack/legacy/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/port/__snapshots__/index.test.tsx.snap
@@ -1,12 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Port renders correctly against snapshot 1`] = `
-<Component>
-  <Port
-    contextId="test"
-    eventId="abcd"
-    fieldName="destination.port"
-    value="443"
+<DefaultDraggable
+  data-test-subj="port"
+  field="destination.port"
+  id="port-default-draggable-test-abcd-destination.port-443"
+  tooltipContent="destination.port"
+  value="443"
+>
+  <PortOrServiceNameLink
+    portOrServiceName="443"
   />
-</Component>
+  <ExternalLinkIcon />
+</DefaultDraggable>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/port/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/port/index.test.tsx
index 1c181ca1a01b3..3e4db72cf55a1 100644
--- a/x-pack/legacy/plugins/siem/public/components/port/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/port/index.test.tsx
@@ -16,9 +16,7 @@ import { Port } from '.';
 describe('Port', () => {
   test('renders correctly against snapshot', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
-      </TestProviders>
+      <Port contextId="test" eventId="abcd" fieldName="destination.port" value="443" />
     );
     expect(toJson(wrapper)).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/port/index.tsx b/x-pack/legacy/plugins/siem/public/components/port/index.tsx
index 1ee1881d55295..a8961a92f24cf 100644
--- a/x-pack/legacy/plugins/siem/public/components/port/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/port/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DefaultDraggable } from '../draggables';
 import { getEmptyValue } from '../empty_value';
@@ -26,7 +25,7 @@ export const PORT_NAMES = [
   URL_PORT_FIELD_NAME,
 ];
 
-export const Port = pure<{
+export const Port = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap
index c62712e6cfe59..e1fc1becd0188 100644
--- a/x-pack/legacy/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/progress_inline/__snapshots__/index.test.tsx.snap
@@ -1,13 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressInline it renders 1`] = `
-<Component>
-  <ProgressInline
-    current={50}
-    max={100}
-    unit="tests"
+<Wrapper
+  className="siemProgressInline"
+>
+  <dt
+    className="siemProgressInline__title"
   >
     Test progress
-  </ProgressInline>
-</Component>
+  </dt>
+  <dd
+    className="siemProgressInline__bar"
+  >
+    <EuiProgress
+      color="secondary"
+      max={100}
+      value={50}
+    />
+  </dd>
+  <dd
+    className="siemProgressInline__ratio"
+  >
+    50
+    /
+    100
+     
+    tests
+  </dd>
+</Wrapper>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/progress_inline/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/progress_inline/index.test.tsx
index 269bcebdae01a..d99a4201c4c72 100644
--- a/x-pack/legacy/plugins/siem/public/components/progress_inline/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/progress_inline/index.test.tsx
@@ -8,7 +8,6 @@ import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import React from 'react';
 
-import { TestProviders } from '../../mock';
 import '../../mock/ui_settings';
 import { ProgressInline } from './index';
 
@@ -17,11 +16,9 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 describe('ProgressInline', () => {
   test('it renders', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <ProgressInline current={50} max={100} unit="tests">
-          {'Test progress'}
-        </ProgressInline>
-      </TestProviders>
+      <ProgressInline current={50} max={100} unit="tests">
+        {'Test progress'}
+      </ProgressInline>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
index 6ae630f363b58..38027f80e6684 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
@@ -1,17 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Resizeable it renders 1`] = `
-<Component>
-  <Resizeable
-    handle={
-      <ForwardRef(styled.div)
-        data-test-subj="test-resize-handle"
-      />
-    }
+<Fragment>
+  <ResizeHandleContainer
+    data-test-subj="resize-handle-container"
     height="100%"
-    id="test"
-    onResize={[MockFunction]}
-    render={[Function]}
-  />
-</Component>
+  >
+    <CommonResizeHandle
+      data-test-subj="test-resize-handle"
+    />
+  </ResizeHandleContainer>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
index f84276f99315d..f1580b59362bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
@@ -98,15 +98,13 @@ describe('Resizeable', () => {
 
   test('it renders', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <Resizeable
-          handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
-          height="100%"
-          id="test"
-          onResize={jest.fn()}
-          render={() => <></>}
-        />
-      </TestProviders>
+      <Resizeable
+        handle={<CommonResizeHandle data-test-subj="test-resize-handle" />}
+        height="100%"
+        id="test"
+        onResize={jest.fn()}
+        render={() => <></>}
+      />
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
index 526758b097a56..5e0d15f3bfbc3 100644
--- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SkeletonRow it renders 1`] = `
-<Component>
-  <SkeletonRow />
-</Component>
+<Row>
+  <Cell
+    key="0"
+  />
+  <Cell
+    key="1"
+  />
+  <Cell
+    key="2"
+  />
+  <Cell
+    key="3"
+  />
+</Row>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
index fc1c6e00edc03..de463f8e29f91 100644
--- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
@@ -13,11 +13,7 @@ import { SkeletonRow } from './index';
 
 describe('SkeletonRow', () => {
   test('it renders', () => {
-    const wrapper = shallow(
-      <TestProviders>
-        <SkeletonRow />
-      </TestProviders>
-    );
+    const wrapper = shallow(<SkeletonRow />);
     expect(toJson(wrapper)).toMatchSnapshot();
   });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/geo_fields.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/geo_fields.tsx
index 9f28ea98e3cb4..edf3dc08c7282 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/geo_fields.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/geo_fields.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { get, uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DefaultDraggable } from '../draggables';
@@ -69,7 +68,7 @@ const GeoFlexItem = styled(EuiFlexItem)`
 
 GeoFlexItem.displayName = 'GeoFlexItem';
 
-const GeoFieldValues = pure<{
+const GeoFieldValues = React.memo<{
   contextId: string;
   eventId: string;
   fieldName: string;
@@ -113,7 +112,7 @@ GeoFieldValues.displayName = 'GeoFieldValues';
  * - `source|destination.geo.region_iso_code`
  * - `source|destination.geo.city_name`
  */
-export const GeoFields = pure<GeoFieldsProps>(props => {
+export const GeoFields = React.memo<GeoFieldsProps>(props => {
   const { contextId, eventId, type } = props;
 
   const propNameToFieldName = getGeoFieldPropNameToFieldNameMap(type);
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/index.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/index.tsx
index 5b62189a4a0e6..0333181c3521c 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Network } from './network';
@@ -23,7 +22,7 @@ EuiFlexItemMarginTop.displayName = 'EuiFlexItemMarginTop';
  * Renders a visualization of network traffic between a source and a destination
  * This component is used by the Netflow row renderer
  */
-export const SourceDestination = pure<SourceDestinationProps>(
+export const SourceDestination = React.memo<SourceDestinationProps>(
   ({
     contextId,
     destinationBytes,
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/ip_with_port.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/ip_with_port.tsx
index a148ddb53ea0b..4ec317737e72d 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/ip_with_port.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/ip_with_port.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Ip } from '../ip';
@@ -22,7 +21,7 @@ IpPortSeparator.displayName = 'IpPortSeparator';
  * Renders a separator (i.e. `:`) and a draggable, hyperlinked port when
  * a port is specified
  */
-const PortWithSeparator = pure<{
+const PortWithSeparator = React.memo<{
   contextId: string;
   eventId: string;
   port?: string | null;
@@ -52,35 +51,33 @@ PortWithSeparator.displayName = 'PortWithSeparator';
  * Renders a draggable, hyperlinked IP address, and if provided, an associated
  * draggable, hyperlinked port (with a separator between the IP address and port)
  */
-export const IpWithPort = pure<{
+export const IpWithPort = React.memo<{
   contextId: string;
   eventId: string;
   ip?: string | null;
   ipFieldName: string;
   port?: string | null;
   portFieldName: string;
-}>(({ contextId, eventId, ip, ipFieldName, port, portFieldName }) => {
-  return (
-    <EuiFlexGroup gutterSize="none">
-      <EuiFlexItem grow={false}>
-        <Ip
-          contextId={contextId}
-          data-test-subj="ip"
-          eventId={eventId}
-          fieldName={ipFieldName}
-          value={ip}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <PortWithSeparator
-          contextId={contextId}
-          eventId={eventId}
-          port={port}
-          portFieldName={portFieldName}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-});
+}>(({ contextId, eventId, ip, ipFieldName, port, portFieldName }) => (
+  <EuiFlexGroup gutterSize="none">
+    <EuiFlexItem grow={false}>
+      <Ip
+        contextId={contextId}
+        data-test-subj="ip"
+        eventId={eventId}
+        fieldName={ipFieldName}
+        value={ip}
+      />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <PortWithSeparator
+        contextId={contextId}
+        eventId={eventId}
+        port={port}
+        portFieldName={portFieldName}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+));
 
 IpWithPort.displayName = 'IpWithPort';
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/network.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/network.tsx
index c525a325a56c6..cfacbb077856c 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/network.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/network.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DirectionBadge } from '../direction';
@@ -39,7 +38,7 @@ Stats.displayName = 'Stats';
  * Renders a row of draggable badges containing fields from the
  * `Network` category of fields
  */
-export const Network = pure<{
+export const Network = React.memo<{
   bytes?: string[] | null;
   communityId?: string[] | null;
   contextId: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_arrows.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_arrows.tsx
index 184aba506e75a..0675212591a66 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_arrows.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_arrows.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { ArrowBody, ArrowHead } from '../arrows';
@@ -49,7 +48,7 @@ Data.displayName = 'Data';
 /**
  * Visualizes the communication from a source as an arrow with draggable badges
  */
-const SourceArrow = pure<{
+const SourceArrow = React.memo<{
   contextId: string;
   eventId: string;
   sourceBytes: string | undefined;
@@ -123,7 +122,7 @@ SourceArrow.displayName = 'SourceArrow';
  * Visualizes the communication from a destination as an arrow with draggable
  * badges
  */
-const DestinationArrow = pure<{
+const DestinationArrow = React.memo<{
   contextId: string;
   eventId: string;
   destinationBytes: string | undefined;
@@ -199,7 +198,7 @@ DestinationArrow.displayName = 'DestinationArrow';
  * Visualizes the communication between a source and a destination using arrows
  * that grow in thickness based on the percentage of bytes transferred, and stats badges
  */
-export const SourceDestinationArrows = pure<{
+export const SourceDestinationArrows = React.memo<{
   contextId: string;
   destinationBytes?: string[] | null;
   destinationPackets?: string[] | null;
diff --git a/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx b/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx
index 4a484420a4b5f..53dade22351bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/source_destination/source_destination_with_arrows.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { SourceDestinationArrows } from './source_destination_arrows';
 import { SourceDestinationIp } from './source_destination_ip';
@@ -19,7 +18,7 @@ import { SourceDestinationWithArrowsProps } from './types';
  * `SourceDestinationIp` ) for details on how the source and destination
  * are visually represented.
  */
-export const SourceDestinationWithArrows = pure<SourceDestinationWithArrowsProps>(
+export const SourceDestinationWithArrows = React.memo<SourceDestinationWithArrowsProps>(
   ({
     contextId,
     destinationBytes,
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
index 952d92f532c83..4e14942b7f0db 100644
--- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
@@ -100,80 +100,66 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
                             show={false}
                             title="KPI HOSTS"
                           >
-                            <Component
-                              id=""
-                              inspect={null}
-                              inspectIndex={0}
-                              isInspected={false}
-                              loading={false}
-                              queryId="statItems"
-                              refetch={null}
-                              selectedInspectIndex={0}
-                              setIsInspected={[Function]}
-                              show={false}
-                              title="KPI HOSTS"
+                            <InspectContainer
+                              data-test-subj="transparent-inspect-container"
+                              showInspect={false}
                             >
-                              <InspectContainer
+                              <div
+                                className="sc-AykKF cUIXEb"
                                 data-test-subj="transparent-inspect-container"
-                                showInspect={false}
                               >
-                                <div
-                                  className="sc-AykKF cUIXEb"
-                                  data-test-subj="transparent-inspect-container"
+                                <EuiButtonIcon
+                                  aria-label="Inspect"
+                                  data-test-subj="inspect-icon-button"
+                                  iconSize="m"
+                                  iconType="inspect"
+                                  onClick={[Function]}
+                                  title="Inspect"
                                 >
-                                  <EuiButtonIcon
+                                  <button
                                     aria-label="Inspect"
+                                    className="euiButtonIcon euiButtonIcon--primary"
                                     data-test-subj="inspect-icon-button"
-                                    iconSize="m"
-                                    iconType="inspect"
                                     onClick={[Function]}
                                     title="Inspect"
+                                    type="button"
                                   >
-                                    <button
-                                      aria-label="Inspect"
-                                      className="euiButtonIcon euiButtonIcon--primary"
-                                      data-test-subj="inspect-icon-button"
-                                      onClick={[Function]}
-                                      title="Inspect"
-                                      type="button"
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      size="m"
+                                      type="inspect"
                                     >
-                                      <EuiIcon
+                                      <EuiIconEmpty
                                         aria-hidden="true"
-                                        className="euiButtonIcon__icon"
-                                        size="m"
-                                        type="inspect"
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        style={null}
                                       >
-                                        <EuiIconEmpty
+                                        <svg
                                           aria-hidden="true"
                                           className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
                                           focusable="false"
+                                          height={16}
                                           style={null}
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-                                            focusable="false"
-                                            height={16}
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                    </button>
-                                  </EuiButtonIcon>
-                                  <ModalInspectQuery
-                                    closeModal={[Function]}
-                                    data-test-subj="inspect-modal"
-                                    isShowing={false}
-                                    request={null}
-                                    response={null}
-                                    title="KPI HOSTS"
-                                  />
-                                </div>
-                              </InspectContainer>
-                            </Component>
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                                <ModalInspectQuery
+                                  closeModal={[Function]}
+                                  data-test-subj="inspect-modal"
+                                  isShowing={false}
+                                  request={null}
+                                  response={null}
+                                  title="KPI HOSTS"
+                                />
+                              </div>
+                            </InspectContainer>
                           </InspectButtonComponent>
                         </Connect(InspectButtonComponent)>
                       </div>
@@ -354,80 +340,66 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
                             show={false}
                             title="KPI HOSTS"
                           >
-                            <Component
-                              id=""
-                              inspect={null}
-                              inspectIndex={0}
-                              isInspected={false}
-                              loading={false}
-                              queryId="statItems"
-                              refetch={null}
-                              selectedInspectIndex={0}
-                              setIsInspected={[Function]}
-                              show={false}
-                              title="KPI HOSTS"
+                            <InspectContainer
+                              data-test-subj="transparent-inspect-container"
+                              showInspect={false}
                             >
-                              <InspectContainer
+                              <div
+                                className="sc-AykKF cUIXEb"
                                 data-test-subj="transparent-inspect-container"
-                                showInspect={false}
                               >
-                                <div
-                                  className="sc-AykKF cUIXEb"
-                                  data-test-subj="transparent-inspect-container"
+                                <EuiButtonIcon
+                                  aria-label="Inspect"
+                                  data-test-subj="inspect-icon-button"
+                                  iconSize="m"
+                                  iconType="inspect"
+                                  onClick={[Function]}
+                                  title="Inspect"
                                 >
-                                  <EuiButtonIcon
+                                  <button
                                     aria-label="Inspect"
+                                    className="euiButtonIcon euiButtonIcon--primary"
                                     data-test-subj="inspect-icon-button"
-                                    iconSize="m"
-                                    iconType="inspect"
                                     onClick={[Function]}
                                     title="Inspect"
+                                    type="button"
                                   >
-                                    <button
-                                      aria-label="Inspect"
-                                      className="euiButtonIcon euiButtonIcon--primary"
-                                      data-test-subj="inspect-icon-button"
-                                      onClick={[Function]}
-                                      title="Inspect"
-                                      type="button"
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      size="m"
+                                      type="inspect"
                                     >
-                                      <EuiIcon
+                                      <EuiIconEmpty
                                         aria-hidden="true"
-                                        className="euiButtonIcon__icon"
-                                        size="m"
-                                        type="inspect"
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        style={null}
                                       >
-                                        <EuiIconEmpty
+                                        <svg
                                           aria-hidden="true"
                                           className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
                                           focusable="false"
+                                          height={16}
                                           style={null}
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-                                            focusable="false"
-                                            height={16}
-                                            style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          />
-                                        </EuiIconEmpty>
-                                      </EuiIcon>
-                                    </button>
-                                  </EuiButtonIcon>
-                                  <ModalInspectQuery
-                                    closeModal={[Function]}
-                                    data-test-subj="inspect-modal"
-                                    isShowing={false}
-                                    request={null}
-                                    response={null}
-                                    title="KPI HOSTS"
-                                  />
-                                </div>
-                              </InspectContainer>
-                            </Component>
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                                <ModalInspectQuery
+                                  closeModal={[Function]}
+                                  data-test-subj="inspect-modal"
+                                  isShowing={false}
+                                  request={null}
+                                  response={null}
+                                  title="KPI HOSTS"
+                                />
+                              </div>
+                            </InspectContainer>
                           </InspectButtonComponent>
                         </Connect(InspectButtonComponent)>
                       </div>
@@ -678,80 +650,66 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                           show={false}
                           title="KPI UNIQUE_PRIVATE_IPS"
                         >
-                          <Component
-                            id=""
-                            inspect={null}
-                            inspectIndex={0}
-                            isInspected={false}
-                            loading={false}
-                            queryId="statItems"
-                            refetch={null}
-                            selectedInspectIndex={0}
-                            setIsInspected={[Function]}
-                            show={false}
-                            title="KPI UNIQUE_PRIVATE_IPS"
+                          <InspectContainer
+                            data-test-subj="transparent-inspect-container"
+                            showInspect={false}
                           >
-                            <InspectContainer
+                            <div
+                              className="sc-AykKF gGhbbL"
                               data-test-subj="transparent-inspect-container"
-                              showInspect={false}
                             >
-                              <div
-                                className="sc-AykKF gGhbbL"
-                                data-test-subj="transparent-inspect-container"
+                              <EuiButtonIcon
+                                aria-label="Inspect"
+                                data-test-subj="inspect-icon-button"
+                                iconSize="m"
+                                iconType="inspect"
+                                onClick={[Function]}
+                                title="Inspect"
                               >
-                                <EuiButtonIcon
+                                <button
                                   aria-label="Inspect"
+                                  className="euiButtonIcon euiButtonIcon--primary"
                                   data-test-subj="inspect-icon-button"
-                                  iconSize="m"
-                                  iconType="inspect"
                                   onClick={[Function]}
                                   title="Inspect"
+                                  type="button"
                                 >
-                                  <button
-                                    aria-label="Inspect"
-                                    className="euiButtonIcon euiButtonIcon--primary"
-                                    data-test-subj="inspect-icon-button"
-                                    onClick={[Function]}
-                                    title="Inspect"
-                                    type="button"
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    size="m"
+                                    type="inspect"
                                   >
-                                    <EuiIcon
+                                    <EuiIconEmpty
                                       aria-hidden="true"
-                                      className="euiButtonIcon__icon"
-                                      size="m"
-                                      type="inspect"
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+                                      focusable="false"
+                                      style={null}
                                     >
-                                      <EuiIconEmpty
+                                      <svg
                                         aria-hidden="true"
                                         className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
                                         focusable="false"
+                                        height={16}
                                         style={null}
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-                                          focusable="false"
-                                          height={16}
-                                          style={null}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        />
-                                      </EuiIconEmpty>
-                                    </EuiIcon>
-                                  </button>
-                                </EuiButtonIcon>
-                                <ModalInspectQuery
-                                  closeModal={[Function]}
-                                  data-test-subj="inspect-modal"
-                                  isShowing={false}
-                                  request={null}
-                                  response={null}
-                                  title="KPI UNIQUE_PRIVATE_IPS"
-                                />
-                              </div>
-                            </InspectContainer>
-                          </Component>
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                              <ModalInspectQuery
+                                closeModal={[Function]}
+                                data-test-subj="inspect-modal"
+                                isShowing={false}
+                                request={null}
+                                response={null}
+                                title="KPI UNIQUE_PRIVATE_IPS"
+                              />
+                            </div>
+                          </InspectContainer>
                         </InspectButtonComponent>
                       </Connect(InspectButtonComponent)>
                     </div>
diff --git a/x-pack/legacy/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap
index 2522d4d1de084..1c6ff628df1e6 100644
--- a/x-pack/legacy/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/subtitle/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Subtitle it renders 1`] = `
-<Component>
-  <Subtitle
-    items="Test subtitle"
-  />
-</Component>
+<Wrapper
+  className="siemSubtitle"
+>
+  <SubtitleItem>
+    Test subtitle
+  </SubtitleItem>
+</Wrapper>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/subtitle/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/subtitle/index.test.tsx
index 77506f8a466a5..b54f3133de472 100644
--- a/x-pack/legacy/plugins/siem/public/components/subtitle/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/subtitle/index.test.tsx
@@ -16,11 +16,7 @@ jest.mock('../../lib/settings/use_kibana_ui_setting');
 
 describe('Subtitle', () => {
   test('it renders', () => {
-    const wrapper = shallow(
-      <TestProviders>
-        <Subtitle items="Test subtitle" />
-      </TestProviders>
-    );
+    const wrapper = shallow(<Subtitle items="Test subtitle" />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
diff --git a/x-pack/legacy/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap
index 1e6c5eb89352b..82f447a55ec07 100644
--- a/x-pack/legacy/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/tables/__snapshots__/helpers.test.tsx.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table Helpers #getRowItemDraggable it returns correctly against snapshot 1`] = `
-<Component>
-  <Connect(DraggableWrapperComponent)
-    dataProvider={
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "idPrefix-attrName-item1",
-        "kqlQuery": "",
-        "name": "item1",
-        "queryMatch": Object {
-          "displayValue": "item1",
-          "field": "attrName",
-          "operator": ":",
-          "value": "item1",
-        },
-      }
+<DraggableWrapper
+  dataProvider={
+    Object {
+      "and": Array [],
+      "enabled": true,
+      "excluded": false,
+      "id": "idPrefix-attrName-item1",
+      "kqlQuery": "",
+      "name": "item1",
+      "queryMatch": Object {
+        "displayValue": "item1",
+        "field": "attrName",
+        "operator": ":",
+        "value": "item1",
+      },
     }
-    key="idPrefix-attrName-item1"
-    render={[Function]}
-  />
-</Component>
+  }
+  key="idPrefix-attrName-item1"
+  render={[Function]}
+/>
 `;
 
 exports[`Table Helpers #getRowItemDraggables it returns correctly against snapshot 1`] = `
-<Component>
-  <Connect(DraggableWrapperComponent)
+<DragDropContext
+  onDragEnd={[MockFunction]}
+>
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
@@ -49,7 +49,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
   />
   ,
   <Spacer />
-  <Connect(DraggableWrapperComponent)
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
@@ -71,7 +71,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
   />
   ,
   <Spacer />
-  <Connect(DraggableWrapperComponent)
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
@@ -92,7 +92,7 @@ exports[`Table Helpers #getRowItemDraggables it returns correctly against snapsh
     render={[Function]}
   />
    
-</Component>
+</DragDropContext>
 `;
 
 exports[`Table Helpers #getRowItemOverflow it returns correctly against snapshot 1`] = `
diff --git a/x-pack/legacy/plugins/siem/public/components/tables/helpers.test.tsx b/x-pack/legacy/plugins/siem/public/components/tables/helpers.test.tsx
index eb06fe8a01d79..9d9087d34a765 100644
--- a/x-pack/legacy/plugins/siem/public/components/tables/helpers.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/tables/helpers.test.tsx
@@ -27,7 +27,7 @@ describe('Table Helpers', () => {
         idPrefix: 'idPrefix',
       });
       const wrapper = shallow(<TestProviders>{rowItem}</TestProviders>);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DraggableWrapper'))).toMatchSnapshot();
     });
 
     test('it returns empty value when rowItem is undefined', () => {
@@ -38,7 +38,7 @@ describe('Table Helpers', () => {
         displayCount: 0,
       });
       const wrapper = mount(<TestProviders>{rowItem}</TestProviders>);
-      expect(wrapper.text()).toBe(getEmptyValue());
+      expect(wrapper.find('DragDropContext').text()).toBe(getEmptyValue());
     });
 
     test('it returns empty string value when rowItem is empty', () => {
@@ -95,7 +95,7 @@ describe('Table Helpers', () => {
         idPrefix: 'idPrefix',
       });
       const wrapper = shallow(<TestProviders>{rowItems}</TestProviders>);
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('DragDropContext'))).toMatchSnapshot();
     });
 
     test('it returns empty value when rowItems is undefined', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/auto_save_warning/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/auto_save_warning/index.tsx
index d16e446a879a6..6c793126efa72 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/auto_save_warning/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/auto_save_warning/index.tsx
@@ -11,7 +11,6 @@ import {
   EuiGlobalToastListToast as Toast,
 } from '@elastic/eui';
 import { getOr } from 'lodash/fp';
-import { pure } from 'recompose';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
@@ -47,7 +46,7 @@ interface DispatchProps {
 
 type OwnProps = ReduxProps & DispatchProps;
 
-const AutoSaveWarningMsgComponent = pure<OwnProps>(
+const AutoSaveWarningMsgComponent = React.memo<OwnProps>(
   ({
     newTimelineModel,
     setTimelineRangeDatePicker,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
index 03c8fd1951725..b57b343d614a8 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/actions/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiButtonIcon } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { OnColumnRemoved } from '../../../events';
 import { EventsHeadingExtra, EventsLoading } from '../../../styles';
@@ -23,7 +22,7 @@ interface Props {
 
 /** Given a `header`, returns the `SortDirection` applicable to it */
 
-export const CloseButton = pure<{
+export const CloseButton = React.memo<{
   columnId: string;
   onColumnRemoved: OnColumnRemoved;
 }>(({ columnId, onColumnRemoved }) => (
@@ -40,6 +39,7 @@ export const CloseButton = pure<{
     }}
   />
 ));
+
 CloseButton.displayName = 'CloseButton';
 
 export const Actions = React.memo<Props>(({ header, onColumnRemoved, sort }) => {
@@ -58,4 +58,5 @@ export const Actions = React.memo<Props>(({ header, onColumnRemoved, sort }) =>
     </>
   );
 });
+
 Actions.displayName = 'Actions';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx
index 1298760cff73a..057f751f451ac 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/helpers.tsx
@@ -6,7 +6,6 @@
 
 import { EuiText } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Pin } from '../../../../pin';
@@ -47,7 +46,7 @@ export interface EventsSelectOption {
   dropdownDisplay: JSX.Element | string;
 }
 
-export const DropdownDisplay = pure<{ text: string }>(({ text }) => (
+export const DropdownDisplay = React.memo<{ text: string }>(({ text }) => (
   <EuiText size="s" color="subdued">
     {text}
   </EuiText>
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx
index 4f414af74a914..634db2dc52676 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx
@@ -7,7 +7,6 @@
 import { EuiCheckbox, EuiSuperSelect } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled, { createGlobalStyle } from 'styled-components';
 
 import { getEventsSelectOptions } from './helpers';
@@ -50,7 +49,7 @@ interface Props {
   timelineId: string;
 }
 
-export const EventsSelect = pure<Props>(({ checkState, timelineId }) => {
+export const EventsSelect = React.memo<Props>(({ checkState, timelineId }) => {
   return (
     <div data-test-subj="events-select">
       <EuiSuperSelect
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
index b49d26b604f34..ed15a5f635e9f 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/__snapshots__/index.test.tsx.snap
@@ -1,13 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filter renders correctly against snapshot 1`] = `
-<Component
-  header={
-    Object {
-      "columnHeaderType": "text-filter",
-      "id": "@timestamp",
-      "width": 190,
-    }
-  }
+<TextFilter
+  columnId="@timestamp"
+  minWidth={190}
+  onFilterChange={[Function]}
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx
index 53d94716ba3f3..c56322cc69e0c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/filter/index.tsx
@@ -6,7 +6,6 @@
 
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { OnFilterChange } from '../../../events';
 import { ColumnHeader } from '../column_header';
@@ -18,7 +17,7 @@ interface Props {
 }
 
 /** Renders a header's filter, based on the `columnHeaderType` */
-export const Filter = pure<Props>(({ header, onFilterChange = noop }) => {
+export const Filter = React.memo<Props>(({ header, onFilterChange = noop }) => {
   switch (header.columnHeaderType) {
     case 'text-filter':
       return (
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
index a7c1f67196451..945a9a7aee698 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/__snapshots__/index.test.tsx.snap
@@ -1,20 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderToolTipContent it renders the expected table content 1`] = `
-<Component
-  header={
-    Object {
-      "aggregatable": true,
-      "category": "base",
-      "columnHeaderType": "not-filtered",
-      "description": "Date/time when the event originated.
+<Fragment>
+  <P>
+    <ToolTipTableMetadata
+      data-test-subj="category"
+    >
+      Category
+      :
+    </ToolTipTableMetadata>
+    <ToolTipTableValue
+      data-test-subj="category-value"
+    >
+      base
+    </ToolTipTableValue>
+  </P>
+  <P>
+    <ToolTipTableMetadata
+      data-test-subj="field"
+    >
+      Field
+      :
+    </ToolTipTableMetadata>
+    <ToolTipTableValue
+      data-test-subj="field-value"
+    >
+      @timestamp
+    </ToolTipTableValue>
+  </P>
+  <P>
+    <ToolTipTableMetadata
+      data-test-subj="type"
+    >
+      Type
+      :
+    </ToolTipTableMetadata>
+    <ToolTipTableValue>
+      <IconType
+        data-test-subj="type-icon"
+        type="clock"
+      />
+      <span
+        data-test-subj="type-value"
+      >
+        date
+      </span>
+    </ToolTipTableValue>
+  </P>
+  <P>
+    <ToolTipTableMetadata
+      data-test-subj="description"
+    >
+      Description
+      :
+    </ToolTipTableMetadata>
+    <ToolTipTableValue
+      data-test-subj="description-value"
+    >
+      Date/time when the event originated.
 For log events this is the date/time when the event was generated, and not when it was read.
-Required field for all events.",
-      "example": "2016-05-23T08:05:34.853Z",
-      "id": "@timestamp",
-      "type": "date",
-      "width": 190,
-    }
-  }
-/>
+Required field for all events.
+    </ToolTipTableValue>
+  </P>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
index 4b56b9589f19e..a63ec2bf840a6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/header_tooltip_content/index.tsx
@@ -7,7 +7,6 @@
 import { EuiIcon } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { getIconFromType } from '../../../../event_details/helpers';
@@ -36,7 +35,7 @@ const ToolTipTableValue = styled.span`
 `;
 ToolTipTableValue.displayName = 'ToolTipTableValue';
 
-export const HeaderToolTipContent = pure<{ header: ColumnHeader }>(({ header }) => (
+export const HeaderToolTipContent = React.memo<{ header: ColumnHeader }>(({ header }) => (
   <>
     {!isEmpty(header.category) && (
       <P>
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx
index ae6f8757f98a9..c221829f92d04 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/range_picker/index.tsx
@@ -6,7 +6,6 @@
 
 import { EuiSelect } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { OnRangeSelected } from '../../../events';
@@ -29,7 +28,7 @@ const SelectContainer = styled.div`
 SelectContainer.displayName = 'SelectContainer';
 
 /** Renders a time range picker for the MiniMap (e.g. 1 Day, 1 Week...) */
-export const RangePicker = pure<Props>(({ selected, onRangeSelected }) => {
+export const RangePicker = React.memo<Props>(({ selected, onRangeSelected }) => {
   const onChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
     onRangeSelected(event.target.value);
   };
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
index 698572d05e30a..fc4bd7bbd6148 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/__snapshots__/index.test.tsx.snap
@@ -1,8 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextFilter rendering renders correctly against snapshot 1`] = `
-<Component
-  columnId="foo"
-  minWidth={100}
+<FieldText
+  data-test-subj="textFilter"
+  minwidth="100px"
+  onChange={[Function]}
+  placeholder="Filter"
+  value=""
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx
index 995e5d8f58df3..09672eb9a38fe 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/text_filter/index.tsx
@@ -7,7 +7,6 @@
 import { EuiFieldText } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { OnFilterChange } from '../../../events';
@@ -30,7 +29,7 @@ const FieldText = styled(EuiFieldText)<{ minwidth: string }>`
 FieldText.displayName = 'FieldText';
 
 /** Renders a text-based column filter */
-export const TextFilter = pure<Props>(
+export const TextFilter = React.memo<Props>(
   ({
     columnId,
     minWidth,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
index 366cd5d1766db..d370a24cc1d4d 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/__snapshots__/index.test.tsx.snap
@@ -1,124 +1,240 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Columns it renders the expected columns 1`] = `
-<Component>
-  <DataDrivenColumns
-    _id="1"
-    columnHeaders={
-      Array [
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "message",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "event.category",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "event.action",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "host.name",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "source.ip",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "destination.ip",
-          "width": 180,
-        },
-        Object {
-          "columnHeaderType": "not-filtered",
-          "id": "user.name",
-          "width": 180,
-        },
-      ]
+<EventsTdGroupData
+  data-test-subj="data-driven-columns"
+>
+  <EventsTd
+    key="message"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
     }
-    columnRenderers={
-      Array [
-        Object {
-          "isInstance": [Function],
-          "renderColumn": [Function],
-        },
-        Object {
-          "isInstance": [Function],
-          "renderColumn": [Function],
-        },
-        Object {
-          "isInstance": [Function],
-          "renderColumn": [Function],
-        },
-      ]
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": true,
+            "id": "empty-column-renderer-draggable-wrapper-test-message-1-message",
+            "kqlQuery": "",
+            "name": "message: ",
+            "queryMatch": Object {
+              "displayValue": "—",
+              "field": "message",
+              "operator": ":*",
+              "value": "",
+            },
+          }
+        }
+        key="empty-column-renderer-draggable-wrapper-test-message-1-message"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="event.category"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
     }
-    data={
-      Array [
-        Object {
-          "field": "@timestamp",
-          "value": Array [
-            "2018-11-05T19:03:25.937Z",
-          ],
-        },
-        Object {
-          "field": "event.severity",
-          "value": Array [
-            "3",
-          ],
-        },
-        Object {
-          "field": "event.category",
-          "value": Array [
-            "Access",
-          ],
-        },
-        Object {
-          "field": "event.action",
-          "value": Array [
-            "Action",
-          ],
-        },
-        Object {
-          "field": "host.name",
-          "value": Array [
-            "apache",
-          ],
-        },
-        Object {
-          "field": "source.ip",
-          "value": Array [
-            "192.168.0.1",
-          ],
-        },
-        Object {
-          "field": "destination.ip",
-          "value": Array [
-            "192.168.0.3",
-          ],
-        },
-        Object {
-          "field": "destination.bytes",
-          "value": Array [
-            "123456",
-          ],
-        },
-        Object {
-          "field": "user.name",
-          "value": Array [
-            "john.dee",
-          ],
-        },
-      ]
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-event_category-1-event_category-Access",
+            "kqlQuery": "",
+            "name": "event.category: Access",
+            "queryMatch": Object {
+              "field": "event.category",
+              "operator": ":",
+              "value": "Access",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-event.category-1-event.category-Access"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="event.action"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
     }
-    onColumnResized={[MockFunction]}
-    timelineId="test"
-  />
-</Component>
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-event_action-1-event_action-Action",
+            "kqlQuery": "",
+            "name": "event.action: Action",
+            "queryMatch": Object {
+              "field": "event.action",
+              "operator": ":",
+              "value": "Action",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-event.action-1-event.action-Action"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="host.name"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
+    }
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-host_name-1-host_name-apache",
+            "kqlQuery": "",
+            "name": "host.name: apache",
+            "queryMatch": Object {
+              "field": "host.name",
+              "operator": ":",
+              "value": "apache",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-host.name-1-host.name-apache"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="source.ip"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
+    }
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-source_ip-1-source_ip-192_168_0_1",
+            "kqlQuery": "",
+            "name": "source.ip: 192.168.0.1",
+            "queryMatch": Object {
+              "field": "source.ip",
+              "operator": ":",
+              "value": "192.168.0.1",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-source.ip-1-source.ip-192.168.0.1"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="destination.ip"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
+    }
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-destination_ip-1-destination_ip-192_168_0_3",
+            "kqlQuery": "",
+            "name": "destination.ip: 192.168.0.3",
+            "queryMatch": Object {
+              "field": "destination.ip",
+              "operator": ":",
+              "value": "192.168.0.3",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-destination.ip-1-destination.ip-192.168.0.3"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+  <EventsTd
+    key="user.name"
+    style={
+      Object {
+        "flexBasis": "180px",
+      }
+    }
+  >
+    <EventsTdContent
+      data-test-subj="cell-container"
+    >
+      <DraggableWrapper
+        dataProvider={
+          Object {
+            "and": Array [],
+            "enabled": true,
+            "excluded": false,
+            "id": "plain-column-renderer-data-provider-test-user_name-1-user_name-john_dee",
+            "kqlQuery": "",
+            "name": "user.name: john.dee",
+            "queryMatch": Object {
+              "field": "user.name",
+              "operator": ":",
+              "value": "john.dee",
+            },
+          }
+        }
+        key="plain-column-renderer-draggable-wrapper-test-user.name-1-user.name-john.dee"
+        render={[Function]}
+        truncate={true}
+      />
+    </EventsTdContent>
+  </EventsTd>
+</EventsTdGroupData>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx
index 3ca17f4ca1ac6..f5b33296561c7 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/data_driven_columns/index.test.tsx
@@ -8,7 +8,7 @@ import toJson from 'enzyme-to-json';
 
 import * as React from 'react';
 
-import { mockTimelineData, TestProviders } from '../../../../mock';
+import { mockTimelineData } from '../../../../mock';
 import { defaultHeaders } from '../column_headers/default_headers';
 import { columnRenderers } from '../renderers';
 
@@ -19,16 +19,14 @@ describe('Columns', () => {
 
   test('it renders the expected columns', () => {
     const wrapper = shallow(
-      <TestProviders>
-        <DataDrivenColumns
-          _id={mockTimelineData[0]._id}
-          columnHeaders={headersSansTimestamp}
-          columnRenderers={columnRenderers}
-          data={mockTimelineData[0].data}
-          onColumnResized={jest.fn()}
-          timelineId="test"
-        />
-      </TestProviders>
+      <DataDrivenColumns
+        _id={mockTimelineData[0]._id}
+        columnHeaders={headersSansTimestamp}
+        columnRenderers={columnRenderers}
+        data={mockTimelineData[0].data}
+        onColumnResized={jest.fn()}
+        timelineId="test"
+      />
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
index 194ef98920bc2..92816d499b029 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/empty_column_renderer.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`empty_column_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Connect(DraggableWrapperComponent)
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
index 2d92fd846f9a6..1fe02f6f35d06 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/formatted_field.test.tsx.snap
@@ -1,11 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Events renders correctly against snapshot 1`] = `
-<Component
-  contextId="test"
-  eventId="1"
+<FormattedDate
   fieldName="timestamp"
-  fieldType="date"
   value="2018-11-05T19:03:25.937Z"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
index 03254490a2ce5..b867e0a788449 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/get_column_renderer.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`get_column_renderer renders correctly against snapshot 1`] = `
 <span>
-  <Connect(DraggableWrapperComponent)
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
index 8ee8cb3aa904d..b2532cc871736 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/host_working_dir.test.tsx.snap
@@ -1,10 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HostWorkingDir renders correctly against snapshot 1`] = `
-<Component
-  contextId="test"
-  eventId="1"
-  hostName="[hostname-123]"
-  workingDirectory="[working-directory-123]"
-/>
+<Fragment>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="test"
+      eventId="1"
+      field="host.name"
+      value="[hostname-123]"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    in
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="test"
+      eventId="1"
+      field="process.working_directory"
+      iconType="folderOpen"
+      value="[working-directory-123]"
+    />
+  </TokensFlexItem>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
index 2271514b20faa..e2eaf1d872b26 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/plain_column_renderer.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`plain_column_renderer rendering renders correctly against snapshot 1`] = `
 <span>
-  <Connect(DraggableWrapperComponent)
+  <DraggableWrapper
     dataProvider={
       Object {
         "and": Array [],
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
index 0e1634821fb92..494a2b2b7732b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/process_draggable.test.tsx.snap
@@ -1,13 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProcessDraggable rendering it renders against shallow snapshot 1`] = `
-<Component
-  contextId="context-123"
-  endgamePid={456}
-  endgameProcessName="endgame-process-name-123"
-  eventId="event-123"
-  processExecutable="process-executable-1"
-  processName="process-name-1"
-  processPid={123}
-/>
+<div>
+  <DraggableBadge
+    contextId="context-123"
+    eventId="event-123"
+    field="process.name"
+    iconType="console"
+    value="process-name-1"
+  />
+  <DraggableBadge
+    contextId="context-123"
+    eventId="event-123"
+    field="process.pid"
+    queryValue="123"
+    value="(123)"
+  />
+</div>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
index 595dfd486281c..d01bb85f565dc 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/__snapshots__/user_host_working_dir.test.tsx.snap
@@ -1,12 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserHostWorkingDir rendering it renders against shallow snapshot 1`] = `
-<Component
-  contextId="context-123"
-  eventId="event-123"
-  hostName="[hostName-123]"
-  userDomain="[userDomain-123]"
-  userName="[userName-123]"
-  workingDirectory="[working-directory-123]"
-/>
+<Fragment>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="context-123"
+      eventId="event-123"
+      field="user.name"
+      iconType="user"
+      value="[userName-123]"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    data-test-subj="user-host-working-dir-domain-separator-text"
+    grow={false}
+  >
+    \\
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="context-123"
+      eventId="event-123"
+      field="user.domain"
+      value="[userDomain-123]"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    @
+  </TokensFlexItem>
+  <HostWorkingDir
+    contextId="context-123"
+    eventId="event-123"
+    hostName="[hostName-123]"
+    workingDirectory="[working-directory-123]"
+  />
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
index f777029f2b48d..cf953ccef8f8e 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_details.test.tsx.snap
@@ -1,114 +1,130 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GenericDetails rendering it renders the default AuditAcquiredCredsDetails 1`] = `
-<Component
-  browserFields={Object {}}
-  contextId="contextid-123"
-  data={
-    Object {
-      "_id": "22",
-      "auditd": Object {
-        "data": Object {
-          "acct": Array [
-            "alice",
-          ],
-          "op": Array [
-            "PAM:setcred",
-          ],
-          "terminal": Array [
-            "ssh",
-          ],
-        },
-        "result": Array [
-          "success",
-        ],
-        "session": Array [
-          "340",
-        ],
-        "summary": Object {
-          "actor": Object {
-            "primary": Array [
+<Details>
+  <AuditdGenericLine
+    args={null}
+    contextId="contextid-123"
+    hostName="suricata-bangalore"
+    id="22"
+    primary="alice"
+    processExecutable="/usr/sbin/sshd"
+    processPid={21202}
+    result="success"
+    secondary="alice"
+    session="340"
+    text="generic-text-123"
+    userName="root"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <NetflowRenderer
+    data={
+      Object {
+        "_id": "22",
+        "auditd": Object {
+          "data": Object {
+            "acct": Array [
               "alice",
             ],
-            "secondary": Array [
-              "alice",
+            "op": Array [
+              "PAM:setcred",
             ],
-          },
-          "how": Array [
-            "/usr/sbin/sshd",
-          ],
-          "message_type": null,
-          "object": Object {
-            "primary": Array [
+            "terminal": Array [
               "ssh",
             ],
-            "secondary": Array [
-              "8.42.77.171",
-            ],
-            "type": Array [
-              "user-session",
+          },
+          "result": Array [
+            "success",
+          ],
+          "session": Array [
+            "340",
+          ],
+          "summary": Object {
+            "actor": Object {
+              "primary": Array [
+                "alice",
+              ],
+              "secondary": Array [
+                "alice",
+              ],
+            },
+            "how": Array [
+              "/usr/sbin/sshd",
             ],
+            "message_type": null,
+            "object": Object {
+              "primary": Array [
+                "ssh",
+              ],
+              "secondary": Array [
+                "8.42.77.171",
+              ],
+              "type": Array [
+                "user-session",
+              ],
+            },
+            "sequence": null,
           },
-          "sequence": null,
         },
-      },
-      "destination": null,
-      "event": Object {
-        "action": Array [
-          "disposed-credentials",
-        ],
-        "category": Array [
-          "user-login",
-        ],
-        "dataset": null,
-        "id": null,
-        "module": Array [
-          "auditd",
-        ],
-        "severity": null,
-      },
-      "geo": null,
-      "host": Object {
-        "id": Array [
-          "0a63559c1acf4c419d979c4b4d8b83ff",
-        ],
-        "ip": Array [
-          "139.59.11.147",
-          "10.47.0.5",
-          "fe80::ec0b:1bff:fe29:80bd",
-        ],
-        "name": Array [
-          "suricata-bangalore",
-        ],
-      },
-      "http": null,
-      "network": null,
-      "process": Object {
-        "args": null,
-        "executable": Array [
-          "/usr/sbin/sshd",
-        ],
-        "name": null,
-        "pid": Array [
-          21202,
-        ],
-        "ppid": null,
-        "title": null,
-        "working_directory": null,
-      },
-      "source": null,
-      "suricata": null,
-      "timestamp": "2019-03-13T03:35:21.614Z",
-      "url": null,
-      "user": Object {
-        "name": Array [
-          "root",
-        ],
-      },
-      "zeek": null,
+        "destination": null,
+        "event": Object {
+          "action": Array [
+            "disposed-credentials",
+          ],
+          "category": Array [
+            "user-login",
+          ],
+          "dataset": null,
+          "id": null,
+          "module": Array [
+            "auditd",
+          ],
+          "severity": null,
+        },
+        "geo": null,
+        "host": Object {
+          "id": Array [
+            "0a63559c1acf4c419d979c4b4d8b83ff",
+          ],
+          "ip": Array [
+            "139.59.11.147",
+            "10.47.0.5",
+            "fe80::ec0b:1bff:fe29:80bd",
+          ],
+          "name": Array [
+            "suricata-bangalore",
+          ],
+        },
+        "http": null,
+        "network": null,
+        "process": Object {
+          "args": null,
+          "executable": Array [
+            "/usr/sbin/sshd",
+          ],
+          "name": null,
+          "pid": Array [
+            21202,
+          ],
+          "ppid": null,
+          "title": null,
+          "working_directory": null,
+        },
+        "source": null,
+        "suricata": null,
+        "timestamp": "2019-03-13T03:35:21.614Z",
+        "url": null,
+        "user": Object {
+          "name": Array [
+            "root",
+          ],
+        },
+        "zeek": null,
+      }
     }
-  }
-  text="generic-text-123"
-  timelineId="test"
-/>
+    timelineId="test"
+  />
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
index f18bfcc612ea8..8e806fadb7bf8 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/generic_file_details.test.tsx.snap
@@ -1,10 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`GenericFileDetails rendering it renders the default GenericFileDetails 1`] = `
-<Component>
-  <AuditdGenericFileDetails
-    browserFields={Object {}}
+<Details>
+  <AuditdGenericFileLine
+    args={null}
     contextId="contextid-123"
+    fileIcon="document"
+    filePath="/proc/15990/attr/current"
+    hostName="zeek-london"
+    id="28"
+    primary="unset"
+    processExecutable="/lib/systemd/systemd-journald"
+    processName="systemd-journal"
+    processPid={27244}
+    processTitle="/lib/systemd/systemd-journald"
+    result="success"
+    secondary="root"
+    session="unset"
+    text="generic-text-123"
+    userName="root"
+    workingDirectory="/"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <NetflowRenderer
     data={
       Object {
         "_id": "28",
@@ -137,9 +157,7 @@ exports[`GenericFileDetails rendering it renders the default GenericFileDetails
         "zeek": null,
       }
     }
-    fileIcon="document"
-    text="generic-text-123"
     timelineId="test"
   />
-</Component>
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
index 037ec582ca1a0..bf73f545ce3d5 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/__snapshots__/primary_secondary_user_info.test.tsx.snap
@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UserPrimarySecondary rendering it renders the default PrimarySecondaryUserInfo 1`] = `
-<Component
+<PrimarySecondary
   contextId="context-123"
   eventId="event-123"
   primary="primary-1"
   secondary="secondary-1"
-  userName="user-name-1"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx
index 90698cc3bf5c9..585a6527423f0 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.test.tsx
@@ -49,16 +49,14 @@ describe('GenericDetails', () => {
     });
 
     test('it returns null for text if the data contains no auditd data', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuditdGenericDetails
-            contextId="contextid-123"
-            text="generic-text-123"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[0].ecs}
-            timelineId="test"
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuditdGenericDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={mockBrowserFields}
+          data={mockTimelineData[0].ecs}
+          timelineId="test"
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx
index 127d88a2a2c6d..b60d89c857421 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_details.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
@@ -38,7 +37,7 @@ interface Props {
   session: string | null | undefined;
 }
 
-export const AuditdGenericLine = pure<Props>(
+export const AuditdGenericLine = React.memo<Props>(
   ({
     id,
     contextId,
@@ -112,7 +111,7 @@ interface GenericDetailsProps {
   timelineId: string;
 }
 
-export const AuditdGenericDetails = pure<GenericDetailsProps>(
+export const AuditdGenericDetails = React.memo<GenericDetailsProps>(
   ({ data, contextId, text, timelineId }) => {
     const id = data._id;
     const session: string | null | undefined = get('auditd.session[0]', data);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
index 7630202293f8f..63050d3e7dc9e 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.test.tsx
@@ -20,16 +20,14 @@ describe('GenericFileDetails', () => {
       // I cannot and do not want to use BrowserFields for the mocks for the snapshot tests as they are too heavy
       const browserFields: BrowserFields = {};
       const wrapper = shallow(
-        <TestProviders>
-          <AuditdGenericFileDetails
-            contextId="contextid-123"
-            text="generic-text-123"
-            browserFields={browserFields}
-            data={mockTimelineData[27].ecs}
-            fileIcon="document"
-            timelineId="test"
-          />
-        </TestProviders>
+        <AuditdGenericFileDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={browserFields}
+          data={mockTimelineData[27].ecs}
+          fileIcon="document"
+          timelineId="test"
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
@@ -53,17 +51,15 @@ describe('GenericFileDetails', () => {
     });
 
     test('it returns null for text if the data contains no auditd data', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuditdGenericFileDetails
-            contextId="contextid-123"
-            text="generic-text-123"
-            browserFields={mockBrowserFields}
-            data={mockTimelineData[0].ecs}
-            fileIcon="document"
-            timelineId="test"
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuditdGenericFileDetails
+          contextId="contextid-123"
+          text="generic-text-123"
+          browserFields={mockBrowserFields}
+          data={mockTimelineData[0].ecs}
+          fileIcon="document"
+          timelineId="test"
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx
index 076c605ecb89f..be84696033d69 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/generic_file_details.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiSpacer, IconType } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
@@ -40,7 +39,7 @@ interface Props {
   session: string | null | undefined;
 }
 
-export const AuditdGenericFileLine = pure<Props>(
+export const AuditdGenericFileLine = React.memo<Props>(
   ({
     id,
     contextId,
@@ -131,7 +130,7 @@ interface GenericDetailsProps {
   timelineId: string;
 }
 
-export const AuditdGenericFileDetails = pure<GenericDetailsProps>(
+export const AuditdGenericFileDetails = React.memo<GenericDetailsProps>(
   ({ data, contextId, text, fileIcon = 'document', timelineId }) => {
     const id = data._id;
     const session: string | null | undefined = get('auditd.session[0]', data);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
index a895f68db1d5a..bd350a599bb47 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/primary_secondary_user_info.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../../draggables';
 
@@ -23,7 +22,7 @@ interface Props {
   secondary: string | null | undefined;
 }
 
-export const PrimarySecondary = pure<Props>(({ contextId, eventId, primary, secondary }) => {
+export const PrimarySecondary = React.memo<Props>(({ contextId, eventId, primary, secondary }) => {
   if (nilOrUnSet(primary) && nilOrUnSet(secondary)) {
     return null;
   } else if (!nilOrUnSet(primary) && nilOrUnSet(secondary)) {
@@ -95,7 +94,7 @@ interface PrimarySecondaryUserInfoProps {
   secondary: string | null | undefined;
 }
 
-export const PrimarySecondaryUserInfo = pure<PrimarySecondaryUserInfoProps>(
+export const PrimarySecondaryUserInfo = React.memo<PrimarySecondaryUserInfoProps>(
   ({ contextId, eventId, userName, primary, secondary }) => {
     if (nilOrUnSet(userName) && nilOrUnSet(primary) && nilOrUnSet(secondary)) {
       return null;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
index 6d11709cdb63e..3c825e6c931be 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/auditd/session_user_host_working_dir.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../../draggables';
 
@@ -25,7 +24,7 @@ interface Props {
   session: string | null | undefined;
 }
 
-export const SessionUserHostWorkingDir = pure<Props>(
+export const SessionUserHostWorkingDir = React.memo<Props>(
   ({ eventId, contextId, hostName, userName, primary, secondary, workingDirectory, session }) => (
     <>
       <TokensFlexItem grow={false} component="span">
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
index aaa252fd651f8..7529c0623ef47 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { isNumber, isString } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { Bytes, BYTES_FORMAT } from '../../../bytes';
 import { Duration, EVENT_DURATION_FIELD_NAME } from '../../../duration';
@@ -24,7 +23,7 @@ import {
   MESSAGE_FIELD_NAME,
 } from './constants';
 
-export const FormattedFieldValue = pure<{
+export const FormattedFieldValue = React.memo<{
   contextId: string;
   eventId: string;
   fieldFormat?: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx
index 9b25d246f7780..0bdecfecd6c59 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/host_working_dir.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../draggables';
 
@@ -19,8 +18,8 @@ interface Props {
   workingDirectory: string | null | undefined;
 }
 
-export const HostWorkingDir = pure<Props>(({ contextId, eventId, hostName, workingDirectory }) => {
-  return (
+export const HostWorkingDir = React.memo<Props>(
+  ({ contextId, eventId, hostName, workingDirectory }) => (
     <>
       <TokensFlexItem grow={false} component="span">
         <DraggableBadge
@@ -45,7 +44,7 @@ export const HostWorkingDir = pure<Props>(({ contextId, eventId, hostName, worki
         />
       </TokensFlexItem>
     </>
-  );
-});
+  )
+);
 
 HostWorkingDir.displayName = 'HostWorkingDir';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow.tsx
index 6bdb3463949d6..0904c836c2f30 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/netflow.tsx
@@ -6,7 +6,6 @@
 
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { Ecs } from '../../../../graphql/types';
 import { asArrayIfExists } from '../../../../lib/helpers';
@@ -51,7 +50,12 @@ import {
   NETWORK_TRANSPORT_FIELD_NAME,
 } from '../../../source_destination/field_names';
 
-export const NetflowRenderer = pure<{ data: Ecs; timelineId: string }>(({ data, timelineId }) => (
+interface NetflowRendererProps {
+  data: Ecs;
+  timelineId: string;
+}
+
+export const NetflowRenderer = React.memo<NetflowRendererProps>(({ data, timelineId }) => (
   <Netflow
     contextId={`netflow-renderer-${timelineId}-${data._id}`}
     destinationBytes={asArrayIfExists(get(DESTINATION_BYTES_FIELD_NAME, data))}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx
index 27b41fa6d5d76..b087351107c77 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.test.tsx
@@ -30,35 +30,31 @@ describe('ProcessDraggable', () => {
     });
 
     test('it returns null if everything is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <ProcessDraggable
-            contextId="context-123"
-            endgamePid={null}
-            endgameProcessName={null}
-            eventId="event-123"
-            processExecutable={null}
-            processName={null}
-            processPid={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <ProcessDraggable
+          contextId="context-123"
+          endgamePid={null}
+          endgameProcessName={null}
+          eventId="event-123"
+          processExecutable={null}
+          processName={null}
+          processPid={null}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
 
     test('it returns null if everything is undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <ProcessDraggable
-            contextId="context-123"
-            endgamePid={undefined}
-            endgameProcessName={undefined}
-            eventId="event-123"
-            processExecutable={undefined}
-            processName={undefined}
-            processPid={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <ProcessDraggable
+          contextId="context-123"
+          endgamePid={undefined}
+          endgameProcessName={undefined}
+          eventId="event-123"
+          processExecutable={undefined}
+          processName={undefined}
+          processPid={undefined}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx
index 440feca8f3e56..29d6c0e7d59c2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/process_draggable.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../draggables';
 
@@ -22,7 +21,7 @@ interface Props {
   processName: string | undefined | null;
 }
 
-export const ProcessDraggable = pure<Props>(
+export const ProcessDraggable = React.memo<Props>(
   ({
     contextId,
     endgamePid,
@@ -94,7 +93,7 @@ export const ProcessDraggable = pure<Props>(
 
 ProcessDraggable.displayName = 'ProcessDraggable';
 
-export const ProcessDraggableWithNonExistentProcess = pure<Props>(
+export const ProcessDraggableWithNonExistentProcess = React.memo<Props>(
   ({
     contextId,
     endgamePid,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
index 53fa32038855e..e79b1e254fea3 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_details.test.tsx.snap
@@ -1,499 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SuricataDetails rendering it renders the default SuricataDetails 1`] = `
-<Component
-  browserFields={
-    Object {
-      "agent": Object {
-        "fields": Object {
-          "agent.ephemeral_id": Object {
-            "aggregatable": true,
-            "category": "agent",
-            "description": "Ephemeral identifier of this agent (if one exists). This id normally changes across restarts, but \`agent.id\` does not.",
-            "example": "8a4f500f",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "agent.ephemeral_id",
-            "searchable": true,
-            "type": "string",
-          },
-          "agent.hostname": Object {
-            "aggregatable": true,
-            "category": "agent",
-            "description": null,
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "agent.hostname",
-            "searchable": true,
-            "type": "string",
-          },
-          "agent.id": Object {
-            "aggregatable": true,
-            "category": "agent",
-            "description": "Unique identifier of this agent (if one exists). Example: For Beats this would be beat.id.",
-            "example": "8a4f500d",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "agent.id",
-            "searchable": true,
-            "type": "string",
-          },
-          "agent.name": Object {
-            "aggregatable": true,
-            "category": "agent",
-            "description": "Name of the agent. This is a name that can be given to an agent. This can be helpful if for example two Filebeat instances are running on the same host but a human readable separation is needed on which Filebeat instance data is coming from. If no name is given, the name is often left empty.",
-            "example": "foo",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "agent.name",
-            "searchable": true,
-            "type": "string",
-          },
-        },
-      },
-      "auditd": Object {
-        "fields": Object {
-          "auditd.data.a0": Object {
-            "aggregatable": true,
-            "category": "auditd",
-            "description": null,
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-            ],
-            "name": "auditd.data.a0",
-            "searchable": true,
-            "type": "string",
-          },
-          "auditd.data.a1": Object {
-            "aggregatable": true,
-            "category": "auditd",
-            "description": null,
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-            ],
-            "name": "auditd.data.a1",
-            "searchable": true,
-            "type": "string",
-          },
-          "auditd.data.a2": Object {
-            "aggregatable": true,
-            "category": "auditd",
-            "description": null,
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-            ],
-            "name": "auditd.data.a2",
-            "searchable": true,
-            "type": "string",
-          },
-        },
-      },
-      "base": Object {
-        "fields": Object {
-          "@timestamp": Object {
-            "aggregatable": true,
-            "category": "base",
-            "description": "Date/time when the event originated. For log events this is the date/time when the event was generated, and not when it was read. Required field for all events.",
-            "example": "2016-05-23T08:05:34.853Z",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "@timestamp",
-            "searchable": true,
-            "type": "date",
-          },
-        },
-      },
-      "client": Object {
-        "fields": Object {
-          "client.address": Object {
-            "aggregatable": true,
-            "category": "client",
-            "description": "Some event client addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "client.address",
-            "searchable": true,
-            "type": "string",
-          },
-          "client.bytes": Object {
-            "aggregatable": true,
-            "category": "client",
-            "description": "Bytes sent from the client to the server.",
-            "example": "184",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "client.bytes",
-            "searchable": true,
-            "type": "number",
-          },
-          "client.domain": Object {
-            "aggregatable": true,
-            "category": "client",
-            "description": "Client domain.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "client.domain",
-            "searchable": true,
-            "type": "string",
-          },
-          "client.geo.country_iso_code": Object {
-            "aggregatable": true,
-            "category": "client",
-            "description": "Country ISO code.",
-            "example": "CA",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "client.geo.country_iso_code",
-            "searchable": true,
-            "type": "string",
-          },
+<Details>
+  <SuricataSignature
+    contextId="suricata-signature-test-4"
+    id="4"
+    signature="ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)"
+    signatureId={4}
+  />
+  <SuricataRefs
+    signatureId={4}
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <NetflowRenderer
+    data={
+      Object {
+        "_id": "4",
+        "destination": Object {
+          "ip": Array [
+            "192.168.0.3",
+          ],
+          "port": Array [
+            6343,
+          ],
         },
-      },
-      "cloud": Object {
-        "fields": Object {
-          "cloud.account.id": Object {
-            "aggregatable": true,
-            "category": "cloud",
-            "description": "The cloud account or organization id used to identify different entities in a multi-tenant environment. Examples: AWS account id, Google Cloud ORG Id, or other unique identifier.",
-            "example": "666777888999",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "cloud.account.id",
-            "searchable": true,
-            "type": "string",
-          },
-          "cloud.availability_zone": Object {
-            "aggregatable": true,
-            "category": "cloud",
-            "description": "Availability zone in which this host is running.",
-            "example": "us-east-1c",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "cloud.availability_zone",
-            "searchable": true,
-            "type": "string",
-          },
+        "event": Object {
+          "category": Array [
+            "Attempted Administrator Privilege Gain",
+          ],
+          "id": Array [
+            "4",
+          ],
+          "module": Array [
+            "suricata",
+          ],
+          "severity": Array [
+            1,
+          ],
+          "type": Array [
+            "Alert",
+          ],
         },
-      },
-      "container": Object {
-        "fields": Object {
-          "container.id": Object {
-            "aggregatable": true,
-            "category": "container",
-            "description": "Unique container id.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "container.id",
-            "searchable": true,
-            "type": "string",
-          },
-          "container.image.name": Object {
-            "aggregatable": true,
-            "category": "container",
-            "description": "Name of the image the container was built on.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "container.image.name",
-            "searchable": true,
-            "type": "string",
-          },
-          "container.image.tag": Object {
-            "aggregatable": true,
-            "category": "container",
-            "description": "Container image tag.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "container.image.tag",
-            "searchable": true,
-            "type": "string",
-          },
+        "geo": Object {
+          "country_iso_code": Array [
+            "xx",
+          ],
+          "region_name": Array [
+            "xx",
+          ],
         },
-      },
-      "destination": Object {
-        "fields": Object {
-          "destination.address": Object {
-            "aggregatable": true,
-            "category": "destination",
-            "description": "Some event destination addresses are defined ambiguously. The event will sometimes list an IP, a domain or a unix socket.  You should always store the raw address in the \`.address\` field. Then it should be duplicated to \`.ip\` or \`.domain\`, depending on which one it is.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "destination.address",
-            "searchable": true,
-            "type": "string",
-          },
-          "destination.bytes": Object {
-            "aggregatable": true,
-            "category": "destination",
-            "description": "Bytes sent from the destination to the source.",
-            "example": "184",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "destination.bytes",
-            "searchable": true,
-            "type": "number",
-          },
-          "destination.domain": Object {
-            "aggregatable": true,
-            "category": "destination",
-            "description": "Destination domain.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "destination.domain",
-            "searchable": true,
-            "type": "string",
-          },
-          "destination.ip": Object {
-            "aggregatable": true,
-            "category": "destination",
-            "description": "IP address of the destination. Can be one or multiple IPv4 or IPv6 addresses.",
-            "example": "",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "destination.ip",
-            "searchable": true,
-            "type": "ip",
-          },
-          "destination.port": Object {
-            "aggregatable": true,
-            "category": "destination",
-            "description": "Port of the destination.",
-            "example": "",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
-            ],
-            "name": "destination.port",
-            "searchable": true,
-            "type": "long",
-          },
+        "host": Object {
+          "ip": Array [
+            "192.168.0.1",
+          ],
+          "name": Array [
+            "suricata",
+          ],
         },
-      },
-      "event": Object {
-        "fields": Object {
-          "event.end": Object {
-            "aggregatable": true,
-            "category": "event",
-            "description": "event.end contains the date when the event ended or when the activity was last observed.",
-            "example": null,
-            "format": "",
-            "indexes": Array [
-              "auditbeat-*",
-              "endgame-*",
-              "filebeat-*",
-              "packetbeat-*",
-              "winlogbeat-*",
-            ],
-            "name": "event.end",
-            "searchable": true,
-            "type": "date",
-          },
+        "source": Object {
+          "ip": Array [
+            "192.168.0.3",
+          ],
+          "port": Array [
+            53,
+          ],
         },
-      },
-      "source": Object {
-        "fields": Object {
-          "source.ip": Object {
-            "aggregatable": true,
-            "category": "source",
-            "description": "IP address of the source. Can be one or multiple IPv4 or IPv6 addresses.",
-            "example": "",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
+        "suricata": Object {
+          "eve": Object {
+            "alert": Object {
+              "signature": Array [
+                "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
+              ],
+              "signature_id": Array [
+                4,
+              ],
+            },
+            "flow_id": Array [
+              4,
             ],
-            "name": "source.ip",
-            "searchable": true,
-            "type": "ip",
-          },
-          "source.port": Object {
-            "aggregatable": true,
-            "category": "source",
-            "description": "Port of the source.",
-            "example": "",
-            "format": "",
-            "indexes": Array [
-              "auditbeat",
-              "filebeat",
-              "packetbeat",
+            "proto": Array [
+              "",
             ],
-            "name": "source.port",
-            "searchable": true,
-            "type": "long",
           },
         },
-      },
-    }
-  }
-  data={
-    Object {
-      "_id": "4",
-      "destination": Object {
-        "ip": Array [
-          "192.168.0.3",
-        ],
-        "port": Array [
-          6343,
-        ],
-      },
-      "event": Object {
-        "category": Array [
-          "Attempted Administrator Privilege Gain",
-        ],
-        "id": Array [
-          "4",
-        ],
-        "module": Array [
-          "suricata",
-        ],
-        "severity": Array [
-          1,
-        ],
-        "type": Array [
-          "Alert",
-        ],
-      },
-      "geo": Object {
-        "country_iso_code": Array [
-          "xx",
-        ],
-        "region_name": Array [
-          "xx",
-        ],
-      },
-      "host": Object {
-        "ip": Array [
-          "192.168.0.1",
-        ],
-        "name": Array [
-          "suricata",
-        ],
-      },
-      "source": Object {
-        "ip": Array [
-          "192.168.0.3",
-        ],
-        "port": Array [
-          53,
-        ],
-      },
-      "suricata": Object {
-        "eve": Object {
-          "alert": Object {
-            "signature": Array [
-              "ET EXPLOIT NETGEAR WNR2000v5 hidden_lang_avi Stack Overflow (CVE-2016-10174)",
-            ],
-            "signature_id": Array [
-              4,
-            ],
-          },
-          "flow_id": Array [
-            4,
+        "timestamp": "2018-11-08T19:03:25.937Z",
+        "user": Object {
+          "id": Array [
+            "4",
           ],
-          "proto": Array [
-            "",
+          "name": Array [
+            "jenny.jones",
           ],
         },
-      },
-      "timestamp": "2018-11-08T19:03:25.937Z",
-      "user": Object {
-        "id": Array [
-          "4",
-        ],
-        "name": Array [
-          "jenny.jones",
-        ],
-      },
+      }
     }
-  }
-  timelineId="test"
-/>
+    timelineId="test"
+  />
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
index 0177dfd941b36..1691eafc4afaf 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/__snapshots__/suricata_signature.test.tsx.snap
@@ -1,10 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SuricataSignature rendering it renders the default SuricataSignature 1`] = `
-<Component
-  contextId="test"
-  id="doc-id-123"
-  signature="ET SCAN ATTACK Hello"
-  signatureId={123}
-/>
+<EuiFlexGroup
+  gutterSize="none"
+  justifyContent="center"
+  wrap={true}
+>
+  <DraggableSignatureId
+    id="draggable-signature-id-test-doc-id-123"
+    signatureId={123}
+  />
+  <Tokens
+    tokens={
+      Array [
+        "ET",
+        "SCAN",
+        "ATTACK",
+      ]
+    }
+  />
+  <LinkFlexItem
+    grow={false}
+  >
+    <DefaultDraggable
+      data-test-subj="draggable-signature-link"
+      field="suricata.eve.alert.signature"
+      id="suricata-signature-default-draggable-test-doc-id-123-suricata.eve.alert.signature"
+      name="nodejs"
+      value="ET SCAN ATTACK Hello"
+    >
+      <div>
+        <GoogleLink
+          link="ET SCAN ATTACK Hello"
+        >
+          Hello
+        </GoogleLink>
+        <ExternalLinkIcon />
+      </div>
+    </DefaultDraggable>
+  </LinkFlexItem>
+</EuiFlexGroup>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx
index ff84c6e03748e..20b64661b6a00 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.test.tsx
@@ -43,14 +43,12 @@ describe('SuricataDetails', () => {
     });
 
     test('it returns null for text if the data contains no suricata data', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <SuricataDetails
-            data={mockTimelineData[0].ecs}
-            browserFields={mockBrowserFields}
-            timelineId="test"
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <SuricataDetails
+          data={mockTimelineData[0].ecs}
+          browserFields={mockBrowserFields}
+          timelineId="test"
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx
index 442e5ae7631e1..35733e5e0b31b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_details.tsx
@@ -7,7 +7,6 @@
 import { EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../../../../containers/source';
@@ -23,13 +22,14 @@ const Details = styled.div`
 
 Details.displayName = 'Details';
 
-export const SuricataDetails = pure<{
+export const SuricataDetails = React.memo<{
   browserFields: BrowserFields;
   data: Ecs;
   timelineId: string;
 }>(({ data, timelineId }) => {
   const signature: string | null | undefined = get('suricata.eve.alert.signature[0]', data);
   const signatureId: number | null | undefined = get('suricata.eve.alert.signature_id[0]', data);
+
   if (signatureId != null && signature != null) {
     return (
       <Details>
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx
index 4b1375b33b086..6fe6523180e58 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_refs.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { ExternalLinkIcon } from '../../../../external_link_icon';
@@ -18,7 +17,7 @@ const LinkEuiFlexItem = styled(EuiFlexItem)`
 
 LinkEuiFlexItem.displayName = 'LinkEuiFlexItem';
 
-export const SuricataRefs = pure<{ signatureId: number }>(({ signatureId }) => {
+export const SuricataRefs = React.memo<{ signatureId: number }>(({ signatureId }) => {
   const links = getLinksFromSignature(signatureId);
   return (
     <EuiFlexGroup gutterSize="none" justifyContent="center" wrap>
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
index 512d02b364b2a..2278ed135e5e2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.test.tsx
@@ -34,8 +34,8 @@ describe('SuricataSignature', () => {
 
   describe('Tokens', () => {
     test('should render empty if tokens are empty', () => {
-      const wrapper = mountWithIntl(<Tokens tokens={[]} />);
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      const wrapper = shallow(<Tokens tokens={[]} />);
+      expect(wrapper.children().length).toEqual(0);
     });
 
     test('should render a single if it is present', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
index b7aac4a0da020..b85bef4d5ac36 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx
@@ -6,7 +6,6 @@
 
 import { EuiBadge, EuiBadgeProps, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { DragEffects, DraggableWrapper } from '../../../../drag_and_drop/draggable_wrapper';
@@ -43,7 +42,7 @@ const LinkFlexItem = styled(EuiFlexItem)`
 
 LinkFlexItem.displayName = 'LinkFlexItem';
 
-export const Tokens = pure<{ tokens: string[] }>(({ tokens }) => (
+export const Tokens = React.memo<{ tokens: string[] }>(({ tokens }) => (
   <>
     {tokens.map(token => (
       <TokensFlexItem key={token} grow={false}>
@@ -57,7 +56,7 @@ export const Tokens = pure<{ tokens: string[] }>(({ tokens }) => (
 
 Tokens.displayName = 'Tokens';
 
-export const DraggableSignatureId = pure<{ id: string; signatureId: number }>(
+export const DraggableSignatureId = React.memo<{ id: string; signatureId: number }>(
   ({ id, signatureId }) => (
     <SignatureFlexItem grow={false}>
       <DraggableWrapper
@@ -97,7 +96,7 @@ export const DraggableSignatureId = pure<{ id: string; signatureId: number }>(
 
 DraggableSignatureId.displayName = 'DraggableSignatureId';
 
-export const SuricataSignature = pure<{
+export const SuricataSignature = React.memo<{
   contextId: string;
   id: string;
   signature: string;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
index b7668fe27eca8..bb0671693978b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/auth_ssh.test.tsx.snap
@@ -1,12 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AuthSsh rendering it renders against shallow snapshot 1`] = `
-<Component>
-  <AuthSsh
-    contextId="[context-123]"
-    eventId="[event-123]"
-    sshMethod="[ssh-method]"
-    sshSignature="[ssh-signature]"
-  />
-</Component>
+<Fragment>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="[context-123]"
+      eventId="[event-123]"
+      field="system.audit.package.name"
+      iconType="document"
+      value="[ssh-signature]"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="[context-123]"
+      eventId="[event-123]"
+      field="system.audit.package.version"
+      iconType="document"
+      value="[ssh-method]"
+    />
+  </TokensFlexItem>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
index 180d1814b4c6e..177a3531e5d7b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_details.test.tsx.snap
@@ -1,94 +1,106 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SystemGenericDetails rendering it renders the default SystemGenericDetails 1`] = `
-<Component
-  browserFields={Object {}}
-  contextId="[contextid-123]"
-  data={
-    Object {
-      "_id": "29",
-      "auditd": null,
-      "destination": null,
-      "event": Object {
-        "action": Array [
-          "user_login",
-        ],
-        "category": null,
-        "created": null,
-        "dataset": Array [
-          "login",
-        ],
-        "duration": null,
-        "end": null,
-        "hash": null,
-        "id": null,
-        "kind": Array [
-          "event",
-        ],
-        "module": Array [
-          "system",
-        ],
-        "original": null,
-        "outcome": Array [
-          "failure",
-        ],
-        "risk_score": null,
-        "risk_score_norm": null,
-        "severity": null,
-        "start": null,
-        "timezone": null,
-        "type": null,
-      },
-      "file": null,
-      "geo": null,
-      "host": Object {
-        "id": Array [
-          "7c21f5ed03b04d0299569d221fe18bbc",
-        ],
-        "ip": Array [
-          "46.101.3.136",
-          "10.16.0.5",
-          "fe80::4066:42ff:fe19:b3b9",
-        ],
-        "name": Array [
-          "zeek-london",
-        ],
-      },
-      "http": null,
-      "network": null,
-      "process": Object {
-        "args": null,
-        "executable": null,
-        "name": null,
-        "pid": Array [
-          6278,
-        ],
-        "ppid": null,
-        "title": null,
-        "working_directory": null,
-      },
-      "source": Object {
-        "bytes": null,
+<Details>
+  <SystemGenericLine
+    contextId="[contextid-123]"
+    hostName="zeek-london"
+    id="29"
+    message={null}
+    outcome="failure"
+    processPid={6278}
+    text="[generic-text-123]"
+    userName="Braden"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <NetflowRenderer
+    data={
+      Object {
+        "_id": "29",
+        "auditd": null,
+        "destination": null,
+        "event": Object {
+          "action": Array [
+            "user_login",
+          ],
+          "category": null,
+          "created": null,
+          "dataset": Array [
+            "login",
+          ],
+          "duration": null,
+          "end": null,
+          "hash": null,
+          "id": null,
+          "kind": Array [
+            "event",
+          ],
+          "module": Array [
+            "system",
+          ],
+          "original": null,
+          "outcome": Array [
+            "failure",
+          ],
+          "risk_score": null,
+          "risk_score_norm": null,
+          "severity": null,
+          "start": null,
+          "timezone": null,
+          "type": null,
+        },
+        "file": null,
         "geo": null,
-        "ip": Array [
-          "128.199.212.120",
-        ],
-        "packets": null,
-        "port": null,
-      },
-      "suricata": null,
-      "system": null,
-      "tls": null,
-      "url": null,
-      "user": Object {
-        "name": Array [
-          "Braden",
-        ],
-      },
-      "zeek": null,
+        "host": Object {
+          "id": Array [
+            "7c21f5ed03b04d0299569d221fe18bbc",
+          ],
+          "ip": Array [
+            "46.101.3.136",
+            "10.16.0.5",
+            "fe80::4066:42ff:fe19:b3b9",
+          ],
+          "name": Array [
+            "zeek-london",
+          ],
+        },
+        "http": null,
+        "network": null,
+        "process": Object {
+          "args": null,
+          "executable": null,
+          "name": null,
+          "pid": Array [
+            6278,
+          ],
+          "ppid": null,
+          "title": null,
+          "working_directory": null,
+        },
+        "source": Object {
+          "bytes": null,
+          "geo": null,
+          "ip": Array [
+            "128.199.212.120",
+          ],
+          "packets": null,
+          "port": null,
+        },
+        "suricata": null,
+        "system": null,
+        "tls": null,
+        "url": null,
+        "user": Object {
+          "name": Array [
+            "Braden",
+          ],
+        },
+        "zeek": null,
+      }
     }
-  }
-  text="[generic-text-123]"
-  timelineId="test"
-/>
+    timelineId="test"
+  />
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
index cf61a61982e7b..19b7f8b6f77c6 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/generic_file_details.test.tsx.snap
@@ -1,10 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SystemGenericFileDetails rendering it renders the default SystemGenericDetails 1`] = `
-<Component>
-  <SystemGenericFileDetails
-    browserFields={Object {}}
+<Details>
+  <SystemGenericFileLine
+    args={null}
     contextId="[contextid-123]"
+    eventAction="process_started"
+    hostName="zeek-london"
+    id="30"
+    message={null}
+    outcome="failure"
+    processPid={6278}
+    showMessage={true}
+    text="[generic-text-123]"
+    userName="Evan"
+  />
+  <EuiSpacer
+    size="s"
+  />
+  <NetflowRenderer
     data={
       Object {
         "_id": "30",
@@ -89,8 +103,7 @@ exports[`SystemGenericFileDetails rendering it renders the default SystemGeneric
         "zeek": null,
       }
     }
-    text="[generic-text-123]"
     timelineId="test"
   />
-</Component>
+</Details>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
index 0bd651df1d35d..a80bc3da8395c 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/__snapshots__/package.test.tsx.snap
@@ -1,11 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Package rendering it renders against shallow snapshot 1`] = `
-<Component
-  contextId="[context-123]"
-  eventId="[event-123]"
-  packageName="package-name-123"
-  packageSummary="package-summary-123"
-  packageVersion="package-version-123"
-/>
+<Fragment>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="[context-123]"
+      eventId="[event-123]"
+      field="system.audit.package.name"
+      iconType="document"
+      value="package-name-123"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="[context-123]"
+      eventId="[event-123]"
+      field="system.audit.package.version"
+      iconType="document"
+      value="package-version-123"
+    />
+  </TokensFlexItem>
+  <TokensFlexItem
+    component="span"
+    grow={false}
+  >
+    <DraggableBadge
+      contextId="[context-123]"
+      eventId="[event-123]"
+      field="system.audit.package.summary"
+      value="package-summary-123"
+    />
+  </TokensFlexItem>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx
index c12cdeb694cd3..e42a91b7d7972 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.test.tsx
@@ -7,109 +7,93 @@
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
-import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
-import { TestProviders } from '../../../../../mock';
 import { AuthSsh } from './auth_ssh';
 
 describe('AuthSsh', () => {
   describe('rendering', () => {
     test('it renders against shallow snapshot', () => {
       const wrapper = shallow(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature="[ssh-signature]"
-            sshMethod="[ssh-method]"
-          />
-        </TestProviders>
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature="[ssh-signature]"
+          sshMethod="[ssh-method]"
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
 
     test('it returns null if sshSignature and sshMethod are both null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature={null}
-            sshMethod={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature={null}
+          sshMethod={null}
+        />
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(wrapper.children().length).toEqual(0);
     });
 
     test('it returns null if sshSignature and sshMethod are both undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature={undefined}
-            sshMethod={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature={undefined}
+          sshMethod={undefined}
+        />
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(wrapper.children().length).toEqual(0);
     });
 
     test('it returns null if sshSignature is null and sshMethod is undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature={null}
-            sshMethod={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature={null}
+          sshMethod={undefined}
+        />
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(wrapper.children().length).toEqual(0);
     });
 
     test('it returns null if sshSignature is undefined and sshMethod is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature={undefined}
-            sshMethod={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature={undefined}
+          sshMethod={null}
+        />
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(wrapper.children().length).toEqual(0);
     });
 
     test('it returns sshSignature if sshMethod is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature="[sshSignature-1]"
-            sshMethod={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature="[sshSignature-1]"
+          sshMethod={null}
+        />
       );
-      expect(wrapper.text()).toEqual('[sshSignature-1]');
+      expect(wrapper.find('DraggableBadge').prop('value')).toEqual('[sshSignature-1]');
     });
 
     test('it returns sshMethod if sshSignature is null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <AuthSsh
-            contextId="[context-123]"
-            eventId="[event-123]"
-            sshSignature={null}
-            sshMethod="[sshMethod-1]"
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <AuthSsh
+          contextId="[context-123]"
+          eventId="[event-123]"
+          sshSignature={null}
+          sshMethod="[sshMethod-1]"
+        />
       );
-      expect(wrapper.text()).toEqual('[sshMethod-1]');
+      expect(wrapper.find('DraggableBadge').prop('value')).toEqual('[sshMethod-1]');
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx
index 0c637c0ee7193..60eab8381e98d 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/auth_ssh.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../../draggables';
 import { TokensFlexItem } from '../helpers';
@@ -17,7 +16,7 @@ interface Props {
   sshMethod: string | null | undefined;
 }
 
-export const AuthSsh = pure<Props>(({ contextId, eventId, sshSignature, sshMethod }) => (
+export const AuthSsh = React.memo<Props>(({ contextId, eventId, sshSignature, sshMethod }) => (
   <>
     {sshSignature != null && (
       <TokensFlexItem grow={false} component="span">
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx
index 764a93a7294f4..e3627d0ec918a 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_details.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
@@ -43,7 +42,7 @@ interface Props {
   workingDirectory: string | null | undefined;
 }
 
-export const SystemGenericLine = pure<Props>(
+export const SystemGenericLine = React.memo<Props>(
   ({
     contextId,
     hostName,
@@ -141,7 +140,7 @@ interface GenericDetailsProps {
   timelineId: string;
 }
 
-export const SystemGenericDetails = pure<GenericDetailsProps>(
+export const SystemGenericDetails = React.memo<GenericDetailsProps>(
   ({ data, contextId, text, timelineId }) => {
     const id = data._id;
     const message: string | null = data.message != null ? data.message[0] : null;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx
index 308f80429d57e..b5d141b4aa2d4 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.test.tsx
@@ -20,15 +20,13 @@ describe('SystemGenericFileDetails', () => {
       // I cannot and do not want to use BrowserFields for the mocks for the snapshot tests as they are too heavy
       const browserFields: BrowserFields = {};
       const wrapper = shallow(
-        <TestProviders>
-          <SystemGenericFileDetails
-            contextId="[contextid-123]"
-            text="[generic-text-123]"
-            browserFields={browserFields}
-            data={mockTimelineData[29].ecs}
-            timelineId="test"
-          />
-        </TestProviders>
+        <SystemGenericFileDetails
+          contextId="[contextid-123]"
+          text="[generic-text-123]"
+          browserFields={browserFields}
+          data={mockTimelineData[29].ecs}
+          timelineId="test"
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx
index 0e75e8de6f9b2..401c1c522ca60 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/generic_file_details.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiSpacer } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { BrowserFields } from '../../../../../containers/source';
 import { Ecs } from '../../../../../graphql/types';
@@ -64,7 +63,7 @@ interface Props {
   workingDirectory: string | null | undefined;
 }
 
-export const SystemGenericFileLine = pure<Props>(
+export const SystemGenericFileLine = React.memo<Props>(
   ({
     args,
     contextId,
@@ -216,7 +215,7 @@ interface GenericDetailsProps {
   timelineId: string;
 }
 
-export const SystemGenericFileDetails = pure<GenericDetailsProps>(
+export const SystemGenericFileDetails = React.memo<GenericDetailsProps>(
   ({ data, contextId, showMessage = true, text, timelineId }) => {
     const id = data._id;
     const message: string | null = data.message != null ? data.message[0] : null;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx
index b88d5ad0bab92..a1121f5f43847 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.test.tsx
@@ -28,31 +28,27 @@ describe('Package', () => {
     });
 
     test('it returns null if all of the package information is null ', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <Package
-            contextId="[context-123]"
-            eventId="[event-123]"
-            packageName={null}
-            packageSummary={null}
-            packageVersion={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <Package
+          contextId="[context-123]"
+          eventId="[event-123]"
+          packageName={null}
+          packageSummary={null}
+          packageVersion={null}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
 
     test('it returns null if all of the package information is undefined ', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <Package
-            contextId="[context-123]"
-            eventId="[event-123]"
-            packageName={undefined}
-            packageSummary={undefined}
-            packageVersion={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <Package
+          contextId="[context-123]"
+          eventId="[event-123]"
+          packageName={undefined}
+          packageSummary={undefined}
+          packageVersion={undefined}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.tsx
index dbcd8de7292f0..d87639d2b8d6e 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/system/package.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../../draggables';
 import { TokensFlexItem } from '../helpers';
@@ -18,7 +17,7 @@ interface Props {
   packageVersion: string | null | undefined;
 }
 
-export const Package = pure<Props>(
+export const Package = React.memo<Props>(
   ({ contextId, eventId, packageName, packageSummary, packageVersion }) => {
     if (packageName != null || packageSummary != null || packageVersion != null) {
       return (
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx
index 2ea8c6931f00b..93a4b105ce56e 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.test.tsx
@@ -29,33 +29,29 @@ describe('UserHostWorkingDir', () => {
     });
 
     test('it returns null if userDomain, userName, hostName, and workingDirectory are all null', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <UserHostWorkingDir
-            contextId="context-123"
-            eventId="event-123"
-            userDomain={null}
-            userName={null}
-            hostName={null}
-            workingDirectory={null}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <UserHostWorkingDir
+          contextId="context-123"
+          eventId="event-123"
+          userDomain={null}
+          userName={null}
+          hostName={null}
+          workingDirectory={null}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
 
     test('it returns null if userDomain, userName, hostName, and workingDirectory are all undefined', () => {
-      const wrapper = mountWithIntl(
-        <TestProviders>
-          <UserHostWorkingDir
-            contextId="context-123"
-            eventId="event-123"
-            userDomain={undefined}
-            userName={undefined}
-            hostName={undefined}
-            workingDirectory={undefined}
-          />
-        </TestProviders>
+      const wrapper = shallow(
+        <UserHostWorkingDir
+          contextId="context-123"
+          eventId="event-123"
+          userDomain={undefined}
+          userName={undefined}
+          hostName={undefined}
+          workingDirectory={undefined}
+        />
       );
       expect(wrapper.isEmptyRender()).toBeTruthy();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx
index f9ee78aaa5bde..281cfd39bd9d2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/user_host_working_dir.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { DraggableBadge } from '../../../draggables';
 import { TokensFlexItem } from './helpers';
@@ -23,7 +22,7 @@ interface Props {
   workingDirectory: string | null | undefined;
 }
 
-export const UserHostWorkingDir = pure<Props>(
+export const UserHostWorkingDir = React.memo<Props>(
   ({
     contextId,
     eventId,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
index b9b7598b206ad..6fc9145187a36 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_details.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ZeekDetails rendering it renders the default ZeekDetails 1`] = `
-<Component
+<ZeekDetails
   browserFields={
     Object {
       "agent": Object {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
index cf7d0a459ce67..f1daca4e23a33 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/__snapshots__/zeek_signature.test.tsx.snap
@@ -1,97 +1,91 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ZeekSignature rendering it renders the default Zeek 1`] = `
-<Component
-  data={
-    Object {
-      "_id": "14",
-      "destination": Object {
-        "ip": Array [
-          "207.154.238.205",
-        ],
-        "port": Array [
-          11568,
-        ],
-      },
-      "event": Object {
-        "action": null,
-        "category": null,
-        "dataset": Array [
-          "zeek.connection",
-        ],
-        "id": null,
-        "module": Array [
-          "zeek",
-        ],
-        "severity": null,
-      },
-      "geo": Object {
-        "country_iso_code": Array [
-          "US",
-        ],
-        "region_name": Array [
-          "New York",
-        ],
-      },
-      "host": Object {
-        "id": Array [
-          "37c81253e0fc4c46839c19b981be5177",
-        ],
-        "ip": Array [
-          "207.154.238.205",
-          "10.19.0.5",
-          "fe80::d82b:9aff:fe0d:1e12",
-        ],
-        "name": Array [
-          "zeek-franfurt",
-        ],
-      },
-      "http": null,
-      "network": Object {
-        "transport": Array [
-          "tcp",
-        ],
-      },
-      "source": Object {
-        "ip": Array [
-          "185.176.26.101",
-        ],
-        "port": Array [
-          44059,
-        ],
-      },
-      "suricata": null,
-      "timestamp": "2019-03-07T05:06:51.000Z",
-      "url": null,
-      "zeek": Object {
-        "connection": Object {
-          "history": Array [
-            "Sr",
-          ],
-          "local_orig": Array [
-            false,
-          ],
-          "local_resp": Array [
-            false,
-          ],
-          "missed_bytes": Array [
-            0,
-          ],
-          "state": Array [
-            "REJ",
-          ],
-        },
-        "dns": null,
-        "files": null,
-        "http": null,
-        "notice": null,
-        "session_id": Array [
-          "C8DRTq362Fios6hw16",
-        ],
-        "ssl": null,
-      },
-    }
-  }
-  timelineId="test"
-/>
+<Fragment>
+  <EuiFlexGroup
+    gutterSize="none"
+    justifyContent="center"
+    wrap={true}
+  >
+    <DraggableZeekElement
+      field="zeek.session_id"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      value="C8DRTq362Fios6hw16"
+    />
+    <DraggableZeekElement
+      field="event.dataset"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      stringRenderer={[Function]}
+      value="zeek.connection"
+    />
+    <DraggableZeekElement
+      field="zeek.files.sha1"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      stringRenderer={[Function]}
+    />
+    <DraggableZeekElement
+      field="zeek.files.md5"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      stringRenderer={[Function]}
+    />
+    <DraggableZeekElement
+      field="zeek.notice.dropped"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      stringRenderer={[Function]}
+      value={null}
+    />
+    <DraggableZeekElement
+      field="zeek.ssl.version"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="zeek.ssl.cipher"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="zeek.connection.state"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      value="REJ"
+    />
+    <DraggableZeekElement
+      field="http.request.method"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="zeek.connection.history"
+      id="zeek-signature-draggable-zeek-element-test-14"
+      value="Sr"
+    />
+    <DraggableZeekElement
+      field="zeek.notice.note"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="zeek.dns.query"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="zeek.dns.qclass_name"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+    <DraggableZeekElement
+      field="http.response.status_code"
+      id="zeek-signature-draggable-zeek-element-test-14"
+    />
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="none"
+    justifyContent="center"
+  >
+    <Link
+      link="REJ Connection attempt rejected"
+      value="Connection attempt rejected"
+    />
+    <Link />
+    <Link />
+    <Link />
+    <Link />
+    <TotalVirusLinkSha />
+  </EuiFlexGroup>
+</Fragment>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx
index 7e97208e06d29..d2d593dcd0138 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.test.tsx
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
@@ -16,14 +15,16 @@ import { ZeekDetails } from './zeek_details';
 describe('ZeekDetails', () => {
   describe('rendering', () => {
     test('it renders the default ZeekDetails', () => {
-      const wrapper = shallow(
-        <ZeekDetails
-          data={mockTimelineData[2].ecs}
-          browserFields={mockBrowserFields}
-          timelineId="test"
-        />
+      const wrapper = mountWithIntl(
+        <TestProviders>
+          <ZeekDetails
+            data={mockTimelineData[2].ecs}
+            browserFields={mockBrowserFields}
+            timelineId="test"
+          />
+        </TestProviders>
       );
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('ZeekDetails'))).toMatchSnapshot();
     });
 
     test('it returns zeek.connection if the data does contain zeek.connection data', () => {
@@ -126,7 +127,12 @@ describe('ZeekDetails', () => {
           />
         </TestProviders>
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(
+        wrapper
+          .find('ZeekDetails')
+          .children()
+          .exists()
+      ).toBeFalsy();
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx
index ab518dc5ff77a..1a31e560d7810 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_details.tsx
@@ -6,7 +6,6 @@
 
 import { EuiSpacer } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../../../../containers/source';
@@ -21,15 +20,20 @@ const Details = styled.div`
 
 Details.displayName = 'Details';
 
-export const ZeekDetails = pure<{ browserFields: BrowserFields; data: Ecs; timelineId: string }>(
-  ({ data, timelineId }) =>
-    data.zeek != null ? (
-      <Details>
-        <ZeekSignature data={data} timelineId={timelineId} />
-        <EuiSpacer size="s" />
-        <NetflowRenderer data={data} timelineId={timelineId} />
-      </Details>
-    ) : null
+interface ZeekDetailsProps {
+  browserFields: BrowserFields;
+  data: Ecs;
+  timelineId: string;
+}
+
+export const ZeekDetails = React.memo<ZeekDetailsProps>(({ data, timelineId }) =>
+  data.zeek != null ? (
+    <Details>
+      <ZeekSignature data={data} timelineId={timelineId} />
+      <EuiSpacer size="s" />
+      <NetflowRenderer data={data} timelineId={timelineId} />
+    </Details>
+  ) : null
 );
 
 ZeekDetails.displayName = 'ZeekDetails';
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
index 16ff537540ea3..e442f884a8e4b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.test.tsx
@@ -71,7 +71,12 @@ describe('ZeekSignature', () => {
   describe('#TotalVirusLinkSha', () => {
     test('should return null if value is null', () => {
       const wrapper = mountWithIntl(<TotalVirusLinkSha value={null} />);
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(
+        wrapper
+          .find('TotalVirusLinkSha')
+          .children()
+          .exists()
+      ).toBeFalsy();
     });
 
     test('should render value', () => {
@@ -88,7 +93,12 @@ describe('ZeekSignature', () => {
   describe('#Link', () => {
     test('should return null if value is null', () => {
       const wrapper = mountWithIntl(<Link value={null} />);
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(
+        wrapper
+          .find('Link')
+          .children()
+          .exists()
+      ).toBeFalsy();
     });
 
     test('should render value', () => {
@@ -111,7 +121,12 @@ describe('ZeekSignature', () => {
           <DraggableZeekElement id="id-123" field="zeek.notice" value={null} />
         </TestProviders>
       );
-      expect(wrapper.isEmptyRender()).toBeTruthy();
+      expect(
+        wrapper
+          .find('DraggableZeekElement')
+          .children()
+          .exists()
+      ).toBeFalsy();
     });
 
     test('it renders the default ZeekSignature', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
index 8a63c08bc9e5d..6a6ae4e4e7da5 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx
@@ -7,7 +7,6 @@
 import { EuiBadge, EuiBadgeProps, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { get } from 'lodash/fp';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Ecs } from '../../../../../graphql/types';
@@ -64,7 +63,7 @@ export const md5StringRenderer: StringRenderer = (value: string) => `md5: ${valu
 export const sha1StringRenderer: StringRenderer = (value: string) =>
   `sha1: ${value.substr(0, 7)}...`;
 
-export const DraggableZeekElement = pure<{
+export const DraggableZeekElement = React.memo<{
   id: string;
   field: string;
   value: string | null | undefined;
@@ -108,37 +107,44 @@ export const DraggableZeekElement = pure<{
 
 DraggableZeekElement.displayName = 'DraggableZeekElement';
 
-export const Link = pure<{ value: string | null | undefined; link?: string | null }>(
-  ({ value, link }) => {
-    if (value != null) {
-      if (link != null) {
-        return (
-          <LinkFlexItem grow={false}>
-            <div>
-              <GoogleLink link={link}>{value}</GoogleLink>
-              <ExternalLinkIcon />
-            </div>
-          </LinkFlexItem>
-        );
-      } else {
-        return (
-          <LinkFlexItem grow={false}>
-            <div>
-              <GoogleLink link={value} />
-              <ExternalLinkIcon />
-            </div>
-          </LinkFlexItem>
-        );
-      }
+interface LinkProps {
+  value: string | null | undefined;
+  link?: string | null;
+}
+
+export const Link = React.memo<LinkProps>(({ value, link }) => {
+  if (value != null) {
+    if (link != null) {
+      return (
+        <LinkFlexItem grow={false}>
+          <div>
+            <GoogleLink link={link}>{value}</GoogleLink>
+            <ExternalLinkIcon />
+          </div>
+        </LinkFlexItem>
+      );
     } else {
-      return null;
+      return (
+        <LinkFlexItem grow={false}>
+          <div>
+            <GoogleLink link={value} />
+            <ExternalLinkIcon />
+          </div>
+        </LinkFlexItem>
+      );
     }
+  } else {
+    return null;
   }
-);
+});
 
 Link.displayName = 'Link';
 
-export const TotalVirusLinkSha = pure<{ value: string | null | undefined }>(({ value }) =>
+interface TotalVirusLinkShaProps {
+  value: string | null | undefined;
+}
+
+export const TotalVirusLinkSha = React.memo<TotalVirusLinkShaProps>(({ value }) =>
   value != null ? (
     <LinkFlexItem grow={false}>
       <div>
@@ -188,7 +194,12 @@ export const extractStateValue = (state: string | null | undefined): string | nu
 export const constructDroppedValue = (dropped: boolean | null | undefined): string | null =>
   dropped != null ? String(dropped) : null;
 
-export const ZeekSignature = pure<{ data: Ecs; timelineId: string }>(({ data, timelineId }) => {
+interface ZeekSignatureProps {
+  data: Ecs;
+  timelineId: string;
+}
+
+export const ZeekSignature = React.memo<ZeekSignatureProps>(({ data, timelineId }) => {
   const id = `zeek-signature-draggable-zeek-element-${timelineId}-${data._id}`;
   const sessionId: string | null | undefined = get('zeek.session_id[0]', data);
   const dataSet: string | null | undefined = get('event.dataset[0]', data);
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
index 9d96afc811178..5674c18010f67 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/__snapshots__/sort_indicator.test.tsx.snap
@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SortIndicator rendering renders correctly against snapshot 1`] = `
-<Component
-  sortDirection="desc"
+<EuiIcon
+  data-test-subj="sortIndicator"
+  type="sortDown"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx
index d9b642c5188ec..fc77bbd725704 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/sort/sort_indicator.tsx
@@ -6,7 +6,6 @@
 
 import { EuiIcon } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 
 import { Direction } from '../../../../graphql/types';
 
@@ -38,7 +37,7 @@ interface Props {
 }
 
 /** Renders a sort indicator */
-export const SortIndicator = pure<Props>(({ sortDirection }) => (
+export const SortIndicator = React.memo<Props>(({ sortDirection }) => (
   <EuiIcon data-test-subj="sortIndicator" type={getDirection(sortDirection) || 'empty'} />
 ));
 
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
index edaf5e0459b49..24b034d893d6b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/data_providers.test.tsx.snap
@@ -1,149 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DataProviders rendering renders correctly against snapshot 1`] = `
-<Component
-  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",
-        },
-      },
-    ]
-  }
-  id="foo"
-  onChangeDataProviderKqlQuery={[MockFunction]}
-  onChangeDroppableAndProvider={[MockFunction]}
-  onDataProviderEdited={[MockFunction]}
-  onDataProviderRemoved={[MockFunction]}
-  onToggleDataProviderEnabled={[MockFunction]}
-  onToggleDataProviderExcluded={[MockFunction]}
-  show={true}
-/>
+<styled.div
+  className="drop-target-data-providers-container"
+>
+  <DropTargetDataProviders
+    className="drop-target-data-providers"
+    data-test-subj="dataProviders"
+  >
+    <ContextConsumer>
+      <Component />
+    </ContextConsumer>
+  </DropTargetDataProviders>
+</styled.div>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
index 1100e1307a7f1..5b4405b8d3bc7 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/empty.test.tsx.snap
@@ -1,7 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Empty rendering renders correctly against snapshot 1`] = `
-<Component>
-  <Empty />
-</Component>
+<EmptyContainer
+  className="timeline-drop-area-empty"
+  data-test-subj="empty"
+  showSmallMsg={false}
+>
+  <NoWrap>
+    <Text
+      color="subdued"
+      size="s"
+    >
+      Drop anything
+    </Text>
+    <HighlightedBackground>
+      <BadgeHighlighted>
+        highlighted
+      </BadgeHighlighted>
+    </HighlightedBackground>
+  </NoWrap>
+  <NoWrap>
+    <Text
+      color="subdued"
+      size="s"
+    >
+      here to build an
+    </Text>
+    <AndOrBadge
+      type="or"
+    />
+    <Text
+      color="subdued"
+      size="s"
+    >
+      query
+    </Text>
+  </NoWrap>
+</EmptyContainer>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
index 4bd97dfee5d40..16094c585911b 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/provider.test.tsx.snap
@@ -1,21 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Provider rendering renders correctly against snapshot 1`] = `
-<Component
-  dataProvider={
-    Object {
-      "and": Array [],
-      "enabled": true,
-      "excluded": false,
-      "id": "id-Provider 1",
-      "kqlQuery": "",
-      "name": "Provider 1",
-      "queryMatch": Object {
-        "field": "name",
-        "operator": ":",
-        "value": "Provider 1",
-      },
-    }
-  }
+<ProviderItemBadge
+  deleteProvider={[Function]}
+  field="name"
+  isEnabled={true}
+  isExcluded={false}
+  kqlQuery=""
+  operator=":"
+  providerId="id-Provider 1"
+  toggleEnabledProvider={[Function]}
+  toggleExcludedProvider={[Function]}
+  val="Provider 1"
 />
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
index 313538306655f..b344381f99d4f 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
@@ -1,152 +1,514 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Providers rendering renders correctly against snapshot 1`] = `
-<Component
-  droppableId="unitTest"
+<PanelProviders
+  className="timeline-drop-area"
+  data-test-subj="providers"
 >
-  <Providers
-    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",
-          },
-        },
-      ]
-    }
-    id="foo"
-    onChangeDataProviderKqlQuery={[MockFunction]}
-    onChangeDroppableAndProvider={[MockFunction]}
-    onDataProviderEdited={[MockFunction]}
-    onDataProviderRemoved={[MockFunction]}
-    onToggleDataProviderEnabled={[MockFunction]}
-    onToggleDataProviderExcluded={[MockFunction]}
+  <Empty
+    showSmallMsg={true}
   />
-</Component>
+  <PanelProvidersGroupContainer
+    alignItems="flexStart"
+    className="provider-items-container"
+    direction="column"
+    gutterSize="none"
+  >
+    <EuiFlexItem
+      grow={true}
+    >
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 1"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 1"
+            index={0}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 1",
+                "kqlQuery": "",
+                "name": "Provider 1",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 1",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 2"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 2"
+            index={1}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 2",
+                "kqlQuery": "",
+                "name": "Provider 2",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 2",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 3"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 3"
+            index={2}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 3",
+                "kqlQuery": "",
+                "name": "Provider 3",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 3",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 4"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 4"
+            index={3}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 4",
+                "kqlQuery": "",
+                "name": "Provider 4",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 4",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 5"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 5"
+            index={4}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 5",
+                "kqlQuery": "",
+                "name": "Provider 5",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 5",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 6"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 6"
+            index={5}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 6",
+                "kqlQuery": "",
+                "name": "Provider 6",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 6",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 7"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 7"
+            index={6}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 7",
+                "kqlQuery": "",
+                "name": "Provider 7",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 7",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 8"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 8"
+            index={7}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 8",
+                "kqlQuery": "",
+                "name": "Provider 8",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 8",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 9"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 9"
+            index={8}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 9",
+                "kqlQuery": "",
+                "name": "Provider 9",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 9",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+      <PanelProviderGroupContainer
+        alignItems="center"
+        direction="row"
+        gutterSize="none"
+        justifyContent="flexStart"
+        key="id-Provider 10"
+      >
+        <PanelProviderItemContainer
+          className="provider-item-filter-container"
+          grow={false}
+        >
+          <PublicDraggable
+            draggableId="draggableId.timeline.foo.dataProvider.id-Provider 10"
+            index={9}
+          >
+            <Component />
+          </PublicDraggable>
+        </PanelProviderItemContainer>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ProviderItemAndDragDrop
+            browserFields={Object {}}
+            dataProvider={
+              Object {
+                "and": Array [],
+                "enabled": true,
+                "excluded": false,
+                "id": "id-Provider 10",
+                "kqlQuery": "",
+                "name": "Provider 10",
+                "queryMatch": Object {
+                  "field": "name",
+                  "operator": ":",
+                  "value": "Provider 10",
+                },
+              }
+            }
+            onChangeDataProviderKqlQuery={[MockFunction]}
+            onChangeDroppableAndProvider={[MockFunction]}
+            onDataProviderEdited={[MockFunction]}
+            onDataProviderRemoved={[MockFunction]}
+            onToggleDataProviderEnabled={[MockFunction]}
+            onToggleDataProviderExcluded={[MockFunction]}
+            timelineId="foo"
+          />
+        </EuiFlexItem>
+      </PanelProviderGroupContainer>
+    </EuiFlexItem>
+  </PanelProvidersGroupContainer>
+  <TimelineEuiFormHelpText>
+    <span>
+      Drop here
+       
+      to build an
+       
+      OR
+       
+      query
+    </span>
+  </TimelineEuiFormHelpText>
+</PanelProviders>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.test.tsx
index 9c5b8fb30fd61..c249e263d1205 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.test.tsx
@@ -14,11 +14,7 @@ import { TestProviders } from '../../../mock/test_providers';
 describe('Empty', () => {
   describe('rendering', () => {
     test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>
-          <Empty />
-        </TestProviders>
-      );
+      const wrapper = shallow(<Empty />);
       expect(toJson(wrapper)).toMatchSnapshot();
     });
 
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.tsx
index 3ef7240ee0375..87d45f6d3db17 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/empty.tsx
@@ -6,7 +6,6 @@
 
 import { EuiBadge, EuiBadgeProps, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { AndOrBadge } from '../../and_or_badge';
@@ -88,7 +87,7 @@ interface Props {
 /**
  * Prompts the user to drop anything with a facet count into the data providers section.
  */
-export const Empty = pure<Props>(({ showSmallMsg = false }) => (
+export const Empty = React.memo<Props>(({ showSmallMsg = false }) => (
   <EmptyContainer
     className="timeline-drop-area-empty"
     data-test-subj="empty"
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
index 57c6d9abad0e8..cce6dfc140375 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/index.tsx
@@ -6,7 +6,6 @@
 
 import { rgba } from 'polished';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { BrowserFields } from '../../../containers/source';
@@ -91,7 +90,7 @@ const getDroppableId = (id: string): string => `${droppableTimelineProvidersPref
  * the user to drop anything with a facet count into
  * the data pro section.
  */
-export const DataProviders = pure<Props>(
+export const DataProviders = React.memo<Props>(
   ({
     browserFields,
     id,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider.tsx
index 7b573b19e2fd4..8fd164eb8a3e2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider.tsx
@@ -6,7 +6,6 @@
 
 import { noop } from 'lodash/fp';
 import React from 'react';
-import { pure } from 'recompose';
 
 import { DataProvider, IS_OPERATOR } from './data_provider';
 import { ProviderItemBadge } from './provider_item_badge';
@@ -15,7 +14,7 @@ interface OwnProps {
   dataProvider: DataProvider;
 }
 
-export const Provider = pure<OwnProps>(({ dataProvider }) => (
+export const Provider = React.memo<OwnProps>(({ dataProvider }) => (
   <ProviderItemBadge
     deleteProvider={noop}
     field={dataProvider.queryMatch.displayField || dataProvider.queryMatch.field}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx
index 59d15bc43e10c..a9eff1e868006 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx
@@ -8,7 +8,6 @@ import { EuiBadge } from '@elastic/eui';
 import classNames from 'classnames';
 import { isString } from 'lodash/fp';
 import React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { getEmptyString } from '../../empty_value';
@@ -58,7 +57,7 @@ interface ProviderBadgeProps {
   operator: QueryOperator;
 }
 
-export const ProviderBadge = pure<ProviderBadgeProps>(
+export const ProviderBadge = React.memo<ProviderBadgeProps>(
   ({ deleteProvider, field, isEnabled, isExcluded, operator, providerId, togglePopover, val }) => {
     const deleteFilter: React.MouseEventHandler<HTMLButtonElement> = (
       event: React.MouseEvent<HTMLButtonElement>
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
index 0d3874943d2ed..17457b900f3a9 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx
@@ -7,7 +7,6 @@
 import { EuiBadge, EuiBadgeProps, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { rgba } from 'polished';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { AndOrBadge } from '../../and_or_badge';
@@ -78,7 +77,7 @@ interface ProviderItemDropProps {
   timelineId: string;
 }
 
-export const ProviderItemAndDragDrop = pure<ProviderItemDropProps>(
+export const ProviderItemAndDragDrop = React.memo<ProviderItemDropProps>(
   ({
     browserFields,
     dataProvider,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
index 8a99ed7417a63..d6e092550473d 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.test.tsx
@@ -21,19 +21,17 @@ describe('Providers', () => {
   describe('rendering', () => {
     test('renders correctly against snapshot', () => {
       const wrapper = shallow(
-        <DroppableWrapper droppableId="unitTest">
-          <Providers
-            browserFields={{}}
-            dataProviders={mockDataProviders}
-            id="foo"
-            onChangeDataProviderKqlQuery={jest.fn()}
-            onChangeDroppableAndProvider={jest.fn()}
-            onDataProviderEdited={jest.fn()}
-            onDataProviderRemoved={jest.fn()}
-            onToggleDataProviderEnabled={jest.fn()}
-            onToggleDataProviderExcluded={jest.fn()}
-          />
-        </DroppableWrapper>
+        <Providers
+          browserFields={{}}
+          dataProviders={mockDataProviders}
+          id="foo"
+          onChangeDataProviderKqlQuery={jest.fn()}
+          onChangeDroppableAndProvider={jest.fn()}
+          onDataProviderEdited={jest.fn()}
+          onDataProviderRemoved={jest.fn()}
+          onToggleDataProviderEnabled={jest.fn()}
+          onToggleDataProviderExcluded={jest.fn()}
+        />
       );
       expect(toJson(wrapper)).toMatchSnapshot();
     });
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.tsx
index 5a8654509fa88..4d095485ef69d 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/data_providers/providers.tsx
@@ -7,7 +7,6 @@
 import { EuiFlexGroup, EuiFlexItem, EuiFormHelpText } from '@elastic/eui';
 import * as React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import {
@@ -112,7 +111,7 @@ export const getDraggableId = ({ id, dataProviderId }: GetDraggableIdParams): st
  * 2) temporarily disabling a data provider
  * 3) applying boolean negation to the data provider
  */
-export const Providers = pure<Props>(
+export const Providers = React.memo<Props>(
   ({
     browserFields,
     id,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
index 5cef75ed39514..978386e611808 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
@@ -78,24 +78,6 @@ ServerSideEventCount.displayName = 'ServerSideEventCount';
 /** The height of the footer, exported for use in height calculations */
 export const footerHeight = 40; // px
 
-interface FooterProps {
-  compact: boolean;
-  getUpdatedAt: () => number;
-  hasNextPage: boolean;
-  height: number;
-  isEventViewer?: boolean;
-  isLive: boolean;
-  isLoading: boolean;
-  itemsCount: number;
-  itemsPerPage: number;
-  itemsPerPageOptions: number[];
-  nextCursor: string;
-  onChangeItemsPerPage: OnChangeItemsPerPage;
-  onLoadMore: OnLoadMore;
-  serverSideEventCount: number;
-  tieBreaker: string;
-}
-
 /** Displays the server-side count of events */
 export const EventsCountComponent = ({
   closePopover,
@@ -190,6 +172,24 @@ export const PagingControl = React.memo(PagingControlComponent);
 
 PagingControl.displayName = 'PagingControl';
 
+interface FooterProps {
+  compact: boolean;
+  getUpdatedAt: () => number;
+  hasNextPage: boolean;
+  height: number;
+  isEventViewer?: boolean;
+  isLive: boolean;
+  isLoading: boolean;
+  itemsCount: number;
+  itemsPerPage: number;
+  itemsPerPageOptions: number[];
+  nextCursor: string;
+  onChangeItemsPerPage: OnChangeItemsPerPage;
+  onLoadMore: OnLoadMore;
+  serverSideEventCount: number;
+  tieBreaker: string;
+}
+
 /** Renders a loading indicator and paging controls */
 export const FooterComponent = ({
   compact,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
index a17e5a6da6331..06ece50690c09 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/last_updated.tsx
@@ -7,7 +7,6 @@
 import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n/react';
 import React, { useEffect, useState } from 'react';
-import { pure } from 'recompose';
 
 import * as i18n from './translations';
 
@@ -16,7 +15,7 @@ interface LastUpdatedAtProps {
   updatedAt: number;
 }
 
-export const Updated = pure<{ date: number; prefix: string; updatedAt: number }>(
+export const Updated = React.memo<{ date: number; prefix: string; updatedAt: number }>(
   ({ date, prefix, updatedAt }) => (
     <>
       {prefix}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
index c60410bbd2863..0e222f470f0d7 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/properties/helpers.tsx
@@ -19,7 +19,6 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import uuid from 'uuid';
 
 import { Note } from '../../../lib/note';
@@ -47,7 +46,7 @@ type UpdateIsFavorite = ({ id, isFavorite }: { id: string; isFavorite: boolean }
 type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
 type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
 
-export const StarIcon = pure<{
+export const StarIcon = React.memo<{
   isFavorite: boolean;
   timelineId: string;
   updateIsFavorite: UpdateIsFavorite;
@@ -70,61 +69,73 @@ export const StarIcon = pure<{
 ));
 StarIcon.displayName = 'StarIcon';
 
-export const Description = pure<{
+interface DescriptionProps {
   description: string;
   timelineId: string;
   updateDescription: UpdateDescription;
-}>(({ description, timelineId, updateDescription }) => (
-  <EuiToolTip data-test-subj="timeline-description-tool-tip" content={i18n.DESCRIPTION_TOOL_TIP}>
-    <DescriptionContainer data-test-subj="description-container">
-      <EuiFieldText
-        aria-label={i18n.TIMELINE_DESCRIPTION}
-        data-test-subj="timeline-description"
-        fullWidth={true}
-        onChange={e => updateDescription({ id: timelineId, description: e.target.value })}
-        placeholder={i18n.DESCRIPTION}
-        spellCheck={true}
-        value={description}
-      />
-    </DescriptionContainer>
-  </EuiToolTip>
-));
-Description.displayName = 'Description';
+}
 
-export const Name = pure<{ timelineId: string; title: string; updateTitle: UpdateTitle }>(
-  ({ timelineId, title, updateTitle }) => (
-    <EuiToolTip data-test-subj="timeline-title-tool-tip" content={i18n.TITLE}>
-      <NameField
-        aria-label={i18n.TIMELINE_TITLE}
-        data-test-subj="timeline-title"
-        onChange={e => updateTitle({ id: timelineId, title: e.target.value })}
-        placeholder={i18n.UNTITLED_TIMELINE}
-        spellCheck={true}
-        value={title}
-      />
+export const Description = React.memo<DescriptionProps>(
+  ({ description, timelineId, updateDescription }) => (
+    <EuiToolTip data-test-subj="timeline-description-tool-tip" content={i18n.DESCRIPTION_TOOL_TIP}>
+      <DescriptionContainer data-test-subj="description-container">
+        <EuiFieldText
+          aria-label={i18n.TIMELINE_DESCRIPTION}
+          data-test-subj="timeline-description"
+          fullWidth={true}
+          onChange={e => updateDescription({ id: timelineId, description: e.target.value })}
+          placeholder={i18n.DESCRIPTION}
+          spellCheck={true}
+          value={description}
+        />
+      </DescriptionContainer>
     </EuiToolTip>
   )
 );
+Description.displayName = 'Description';
+
+interface NameProps {
+  timelineId: string;
+  title: string;
+  updateTitle: UpdateTitle;
+}
+
+export const Name = React.memo<NameProps>(({ timelineId, title, updateTitle }) => (
+  <EuiToolTip data-test-subj="timeline-title-tool-tip" content={i18n.TITLE}>
+    <NameField
+      aria-label={i18n.TIMELINE_TITLE}
+      data-test-subj="timeline-title"
+      onChange={e => updateTitle({ id: timelineId, title: e.target.value })}
+      placeholder={i18n.UNTITLED_TIMELINE}
+      spellCheck={true}
+      value={title}
+    />
+  </EuiToolTip>
+));
 Name.displayName = 'Name';
 
-export const NewTimeline = pure<{
+interface NewTimelineProps {
   createTimeline: CreateTimeline;
   onClosePopover: () => void;
   timelineId: string;
-}>(({ createTimeline, onClosePopover, timelineId }) => (
-  <EuiButtonEmpty
-    data-test-subj="timeline-new"
-    color="text"
-    iconSide="left"
-    iconType="plusInCircle"
-    onClick={() => {
-      createTimeline({ id: timelineId, show: true });
-      onClosePopover();
-    }}
-  >
-    {i18n.NEW_TIMELINE}
-  </EuiButtonEmpty>
-));
+}
+
+export const NewTimeline = React.memo<NewTimelineProps>(
+  ({ createTimeline, onClosePopover, timelineId }) => (
+    <EuiButtonEmpty
+      data-test-subj="timeline-new"
+      color="text"
+      iconSide="left"
+      iconType="plusInCircle"
+      onClick={() => {
+        createTimeline({ id: timelineId, show: true });
+        onClosePopover();
+      }}
+    >
+      {i18n.NEW_TIMELINE}
+    </EuiButtonEmpty>
+  )
+);
 NewTimeline.displayName = 'NewTimeline';
 
 interface NotesButtonProps {
@@ -142,47 +153,54 @@ interface NotesButtonProps {
 
 const getNewNoteId = (): string => uuid.v4();
 
-const LargeNotesButton = pure<{ noteIds: string[]; text?: string; toggleShowNotes: () => void }>(
-  ({ noteIds, text, toggleShowNotes }) => (
-    <EuiButton
-      data-test-subj="timeline-notes-button-large"
-      onClick={() => toggleShowNotes()}
-      size="m"
-    >
-      <EuiFlexGroup alignItems="center" gutterSize="none" justifyContent="center">
-        <EuiFlexItem grow={false}>
-          <EuiIcon color="subdued" size="m" type="editorComment" />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {text && text.length ? <LabelText>{text}</LabelText> : null}
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <NotesCountBadge data-test-subj="timeline-notes-count" color="hollow">
-            {noteIds.length}
-          </NotesCountBadge>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiButton>
-  )
-);
+interface LargeNotesButtonProps {
+  noteIds: string[];
+  text?: string;
+  toggleShowNotes: () => void;
+}
+
+const LargeNotesButton = React.memo<LargeNotesButtonProps>(({ noteIds, text, toggleShowNotes }) => (
+  <EuiButton
+    data-test-subj="timeline-notes-button-large"
+    onClick={() => toggleShowNotes()}
+    size="m"
+  >
+    <EuiFlexGroup alignItems="center" gutterSize="none" justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiIcon color="subdued" size="m" type="editorComment" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        {text && text.length ? <LabelText>{text}</LabelText> : null}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <NotesCountBadge data-test-subj="timeline-notes-count" color="hollow">
+          {noteIds.length}
+        </NotesCountBadge>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiButton>
+));
 LargeNotesButton.displayName = 'LargeNotesButton';
 
-const SmallNotesButton = pure<{ noteIds: string[]; toggleShowNotes: () => void }>(
-  ({ noteIds, toggleShowNotes }) => (
-    <EuiButtonIcon
-      aria-label={i18n.NOTES}
-      data-test-subj="timeline-notes-button-small"
-      iconType="editorComment"
-      onClick={() => toggleShowNotes()}
-    />
-  )
-);
+interface SmallNotesButtonProps {
+  noteIds: string[];
+  toggleShowNotes: () => void;
+}
+
+const SmallNotesButton = React.memo<SmallNotesButtonProps>(({ noteIds, toggleShowNotes }) => (
+  <EuiButtonIcon
+    aria-label={i18n.NOTES}
+    data-test-subj="timeline-notes-button-small"
+    iconType="editorComment"
+    onClick={() => toggleShowNotes()}
+  />
+));
 SmallNotesButton.displayName = 'SmallNotesButton';
 
 /**
  * The internal implementation of the `NotesButton`
  */
-const NotesButtonComponent = pure<NotesButtonProps>(
+const NotesButtonComponent = React.memo<NotesButtonProps>(
   ({
     animate = true,
     associateNote,
@@ -220,7 +238,7 @@ const NotesButtonComponent = pure<NotesButtonProps>(
 );
 NotesButtonComponent.displayName = 'NotesButtonComponent';
 
-export const NotesButton = pure<NotesButtonProps>(
+export const NotesButton = React.memo<NotesButtonProps>(
   ({
     animate = true,
     associateNote,
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
index 373d9a50d245b..b645202ab4c54 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx
@@ -6,7 +6,6 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled, { createGlobalStyle } from 'styled-components';
 
 import { esFilters, IIndexPattern } from '../../../../../../../../src/plugins/data/public';
@@ -84,7 +83,7 @@ const ModeFlexItem = styled(EuiFlexItem)`
 
 ModeFlexItem.displayName = 'ModeFlexItem';
 
-export const SearchOrFilter = pure<Props>(
+export const SearchOrFilter = React.memo<Props>(
   ({
     applyKqlFilterQuery,
     browserFields,
diff --git a/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx b/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
index 1db521d76d522..07ea165fcbb5c 100644
--- a/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/with_hover_actions/index.tsx
@@ -5,7 +5,6 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 interface Props {
@@ -36,11 +35,13 @@ const HoverActionsPanelContainer = styled.div`
 
 HoverActionsPanelContainer.displayName = 'HoverActionsPanelContainer';
 
-const HoverActionsPanel = pure<{ children: JSX.Element; show: boolean }>(({ children, show }) => (
-  <HoverActionsPanelContainer data-test-subj="hover-actions-panel-container">
-    {show ? children : null}
-  </HoverActionsPanelContainer>
-));
+const HoverActionsPanel = React.memo<{ children: JSX.Element; show: boolean }>(
+  ({ children, show }) => (
+    <HoverActionsPanelContainer data-test-subj="hover-actions-panel-container">
+      {show ? children : null}
+    </HoverActionsPanelContainer>
+  )
+);
 
 HoverActionsPanel.displayName = 'HoverActionsPanel';
 
diff --git a/x-pack/legacy/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap
index e5311bfb050a3..1eef27bcc0a87 100644
--- a/x-pack/legacy/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/wrapper_page/__snapshots__/index.test.tsx.snap
@@ -1,47 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WrapperPage it renders 1`] = `
-<Component>
-  <WrapperPage>
-    <p>
-      Test page
-    </p>
-  </WrapperPage>
-</Component>
+<WrapperPage>
+  <p>
+    Test page
+  </p>
+</WrapperPage>
 `;
 
 exports[`WrapperPage restrict width custom max width when restrictWidth is number 1`] = `
-<Component>
-  <WrapperPage
-    restrictWidth={600}
-  >
-    <p>
-      Test page
-    </p>
-  </WrapperPage>
-</Component>
+<WrapperPage
+  restrictWidth={600}
+>
+  <p>
+    Test page
+  </p>
+</WrapperPage>
 `;
 
 exports[`WrapperPage restrict width custom max width when restrictWidth is string 1`] = `
-<Component>
-  <WrapperPage
-    restrictWidth="600px"
-  >
-    <p>
-      Test page
-    </p>
-  </WrapperPage>
-</Component>
+<WrapperPage
+  restrictWidth="600px"
+>
+  <p>
+    Test page
+  </p>
+</WrapperPage>
 `;
 
 exports[`WrapperPage restrict width default max width when restrictWidth is true 1`] = `
-<Component>
-  <WrapperPage
-    restrictWidth={true}
-  >
-    <p>
-      Test page
-    </p>
-  </WrapperPage>
-</Component>
+<WrapperPage
+  restrictWidth={true}
+>
+  <p>
+    Test page
+  </p>
+</WrapperPage>
 `;
diff --git a/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.test.tsx
index 95e80e8b9e5de..3ea243fe5cfe7 100644
--- a/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.test.tsx
@@ -24,7 +24,7 @@ describe('WrapperPage', () => {
       </TestProviders>
     );
 
-    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(toJson(wrapper.find('WrapperPage'))).toMatchSnapshot();
   });
 
   describe('restrict width', () => {
@@ -37,7 +37,7 @@ describe('WrapperPage', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('WrapperPage'))).toMatchSnapshot();
     });
 
     test('custom max width when restrictWidth is number', () => {
@@ -49,7 +49,7 @@ describe('WrapperPage', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('WrapperPage'))).toMatchSnapshot();
     });
 
     test('custom max width when restrictWidth is string', () => {
@@ -61,7 +61,7 @@ describe('WrapperPage', () => {
         </TestProviders>
       );
 
-      expect(toJson(wrapper)).toMatchSnapshot();
+      expect(toJson(wrapper.find('WrapperPage'))).toMatchSnapshot();
     });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.tsx b/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.tsx
index 309693427459e..d777c8d6c9eab 100644
--- a/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/wrapper_page/index.tsx
@@ -27,9 +27,10 @@ const Wrapper = styled.div`
     }
   `}
 `;
+
 Wrapper.displayName = 'Wrapper';
 
-export interface WrapperPageProps {
+interface WrapperPageProps {
   children: React.ReactNode;
   className?: string;
   restrictWidth?: boolean | number | string;
@@ -60,4 +61,5 @@ export const WrapperPage = React.memo<WrapperPageProps>(
     );
   }
 );
+
 WrapperPage.displayName = 'WrapperPage';
diff --git a/x-pack/legacy/plugins/siem/public/containers/ip_overview/index.tsx b/x-pack/legacy/plugins/siem/public/containers/ip_overview/index.tsx
index d2494f34ad087..003032493fca2 100644
--- a/x-pack/legacy/plugins/siem/public/containers/ip_overview/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/ip_overview/index.tsx
@@ -8,7 +8,6 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 
 import chrome from 'ui/chrome';
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
@@ -39,7 +38,7 @@ export interface IpOverviewProps extends QueryTemplateProps {
   ip: string;
 }
 
-const IpOverviewComponentQuery = pure<IpOverviewProps & IpOverviewReduxProps>(
+const IpOverviewComponentQuery = React.memo<IpOverviewProps & IpOverviewReduxProps>(
   ({ id = ID, isInspected, children, filterQuery, skip, sourceId, ip }) => (
     <Query<GetIpOverviewQuery.Query, GetIpOverviewQuery.Variables>
       query={ipOverviewQuery}
diff --git a/x-pack/legacy/plugins/siem/public/containers/kpi_host_details/index.tsx b/x-pack/legacy/plugins/siem/public/containers/kpi_host_details/index.tsx
index 0d87c0ab9a1c2..20ed7fa991d15 100644
--- a/x-pack/legacy/plugins/siem/public/containers/kpi_host_details/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/kpi_host_details/index.tsx
@@ -8,7 +8,6 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 import chrome from 'ui/chrome';
 
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
@@ -37,7 +36,7 @@ export interface KpiHostDetailsReducer {
   isInspected: boolean;
 }
 
-const KpiHostDetailsComponentQuery = pure<QueryKpiHostDetailsProps & KpiHostDetailsReducer>(
+const KpiHostDetailsComponentQuery = React.memo<QueryKpiHostDetailsProps & KpiHostDetailsReducer>(
   ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
     <Query<GetKpiHostDetailsQuery.Query, GetKpiHostDetailsQuery.Variables>
       query={kpiHostDetailsQuery}
diff --git a/x-pack/legacy/plugins/siem/public/containers/kpi_hosts/index.tsx b/x-pack/legacy/plugins/siem/public/containers/kpi_hosts/index.tsx
index 77575f0137af0..f8aa8aa38e8e1 100644
--- a/x-pack/legacy/plugins/siem/public/containers/kpi_hosts/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/kpi_hosts/index.tsx
@@ -8,9 +8,8 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-
 import chrome from 'ui/chrome';
-import { pure } from 'recompose';
+
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
 import { GetKpiHostsQuery, KpiHostsData } from '../../graphql/types';
 import { inputsModel, inputsSelectors, State } from '../../store';
@@ -37,7 +36,7 @@ export interface KpiHostsProps extends QueryTemplateProps {
   children: (args: KpiHostsArgs) => React.ReactNode;
 }
 
-const KpiHostsComponentQuery = pure<KpiHostsProps & KpiHostsReducer>(
+const KpiHostsComponentQuery = React.memo<KpiHostsProps & KpiHostsReducer>(
   ({ id = ID, children, endDate, filterQuery, isInspected, skip, sourceId, startDate }) => (
     <Query<GetKpiHostsQuery.Query, GetKpiHostsQuery.Variables>
       query={kpiHostsQuery}
diff --git a/x-pack/legacy/plugins/siem/public/containers/kpi_network/index.tsx b/x-pack/legacy/plugins/siem/public/containers/kpi_network/index.tsx
index e48ea19ba11ef..269c3593d4d73 100644
--- a/x-pack/legacy/plugins/siem/public/containers/kpi_network/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/kpi_network/index.tsx
@@ -8,9 +8,8 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
-
 import chrome from 'ui/chrome';
+
 import { DEFAULT_INDEX_KEY } from '../../../common/constants';
 import { GetKpiNetworkQuery, KpiNetworkData } from '../../graphql/types';
 import { inputsModel, inputsSelectors, State } from '../../store';
@@ -37,7 +36,7 @@ export interface KpiNetworkProps extends QueryTemplateProps {
   children: (args: KpiNetworkArgs) => React.ReactNode;
 }
 
-const KpiNetworkComponentQuery = pure<KpiNetworkProps & KpiNetworkReducer>(
+const KpiNetworkComponentQuery = React.memo<KpiNetworkProps & KpiNetworkReducer>(
   ({ id = ID, children, filterQuery, isInspected, skip, sourceId, startDate, endDate }) => (
     <Query<GetKpiNetworkQuery.Query, GetKpiNetworkQuery.Variables>
       query={kpiNetworkQuery}
diff --git a/x-pack/legacy/plugins/siem/public/containers/overview/overview_host/index.tsx b/x-pack/legacy/plugins/siem/public/containers/overview/overview_host/index.tsx
index 4659d063ca1fd..6ef0ee7b33589 100644
--- a/x-pack/legacy/plugins/siem/public/containers/overview/overview_host/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/overview/overview_host/index.tsx
@@ -8,9 +8,8 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
-
 import chrome from 'ui/chrome';
+
 import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
 import { GetOverviewHostQuery, OverviewHostData } from '../../../graphql/types';
 import { inputsModel, inputsSelectors } from '../../../store/inputs';
@@ -41,7 +40,7 @@ export interface OverviewHostProps extends QueryTemplateProps {
   startDate: number;
 }
 
-const OverviewHostComponentQuery = pure<OverviewHostProps & OverviewHostReducer>(
+const OverviewHostComponentQuery = React.memo<OverviewHostProps & OverviewHostReducer>(
   ({ id = ID, children, filterQuery, isInspected, sourceId, startDate, endDate }) => (
     <Query<GetOverviewHostQuery.Query, GetOverviewHostQuery.Variables>
       query={overviewHostQuery}
diff --git a/x-pack/legacy/plugins/siem/public/containers/overview/overview_network/index.tsx b/x-pack/legacy/plugins/siem/public/containers/overview/overview_network/index.tsx
index a292bd788b9eb..677d96c10eee2 100644
--- a/x-pack/legacy/plugins/siem/public/containers/overview/overview_network/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/overview/overview_network/index.tsx
@@ -8,7 +8,6 @@ import { getOr } from 'lodash/fp';
 import React from 'react';
 import { Query } from 'react-apollo';
 import { connect } from 'react-redux';
-import { pure } from 'recompose';
 
 import chrome from 'ui/chrome';
 import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
@@ -41,37 +40,37 @@ export interface OverviewNetworkProps extends QueryTemplateProps {
   startDate: number;
 }
 
-export const OverviewNetworkComponentQuery = pure<OverviewNetworkProps & OverviewNetworkReducer>(
-  ({ id = ID, children, filterQuery, isInspected, sourceId, startDate, endDate }) => (
-    <Query<GetOverviewNetworkQuery.Query, GetOverviewNetworkQuery.Variables>
-      query={overviewNetworkQuery}
-      fetchPolicy={getDefaultFetchPolicy()}
-      notifyOnNetworkStatusChange
-      variables={{
-        sourceId,
-        timerange: {
-          interval: '12h',
-          from: startDate,
-          to: endDate,
-        },
-        filterQuery: createFilter(filterQuery),
-        defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
-        inspect: isInspected,
-      }}
-    >
-      {({ data, loading, refetch }) => {
-        const overviewNetwork = getOr({}, `source.OverviewNetwork`, data);
-        return children({
-          id,
-          inspect: getOr(null, 'source.OverviewNetwork.inspect', data),
-          overviewNetwork,
-          loading,
-          refetch,
-        });
-      }}
-    </Query>
-  )
-);
+export const OverviewNetworkComponentQuery = React.memo<
+  OverviewNetworkProps & OverviewNetworkReducer
+>(({ id = ID, children, filterQuery, isInspected, sourceId, startDate, endDate }) => (
+  <Query<GetOverviewNetworkQuery.Query, GetOverviewNetworkQuery.Variables>
+    query={overviewNetworkQuery}
+    fetchPolicy={getDefaultFetchPolicy()}
+    notifyOnNetworkStatusChange
+    variables={{
+      sourceId,
+      timerange: {
+        interval: '12h',
+        from: startDate,
+        to: endDate,
+      },
+      filterQuery: createFilter(filterQuery),
+      defaultIndex: chrome.getUiSettingsClient().get(DEFAULT_INDEX_KEY),
+      inspect: isInspected,
+    }}
+  >
+    {({ data, loading, refetch }) => {
+      const overviewNetwork = getOr({}, `source.OverviewNetwork`, data);
+      return children({
+        id,
+        inspect: getOr(null, 'source.OverviewNetwork.inspect', data),
+        overviewNetwork,
+        loading,
+        refetch,
+      });
+    }}
+  </Query>
+));
 
 OverviewNetworkComponentQuery.displayName = 'OverviewNetworkComponentQuery';
 
diff --git a/x-pack/legacy/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx b/x-pack/legacy/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx
index 894f1fcdea373..c392c2511551f 100644
--- a/x-pack/legacy/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx
+++ b/x-pack/legacy/plugins/siem/public/lib/clipboard/with_copy_to_clipboard.tsx
@@ -5,7 +5,6 @@
  */
 
 import * as React from 'react';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { Clipboard } from './clipboard';
@@ -23,7 +22,7 @@ WithCopyToClipboardContainer.displayName = 'WithCopyToClipboardContainer';
  * Renders `children` with an adjacent icon that when clicked, copies `text` to
  * the clipboard and displays a confirmation toast
  */
-export const WithCopyToClipboard = pure<{ text: string; titleSummary?: string }>(
+export const WithCopyToClipboard = React.memo<{ text: string; titleSummary?: string }>(
   ({ text, titleSummary, children }) => (
     <WithCopyToClipboardContainer>
       <>{children}</>
diff --git a/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx b/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx
index e573afaafc2d2..d4c06d998c5a2 100644
--- a/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx
+++ b/x-pack/legacy/plugins/siem/public/mock/test_providers.tsx
@@ -13,7 +13,6 @@ import * as React from 'react';
 import { ApolloProvider } from 'react-apollo';
 import { DragDropContext, DropResult, ResponderProvided } from 'react-beautiful-dnd';
 import { Provider as ReduxStoreProvider } from 'react-redux';
-import { pure } from 'recompose';
 import { Store } from 'redux';
 import { BehaviorSubject } from 'rxjs';
 import { ThemeProvider } from 'styled-components';
@@ -86,7 +85,7 @@ Object.defineProperty(window, 'localStorage', {
 });
 
 /** A utility for wrapping children in the providers required to run most tests */
-export const TestProviders = pure<Props>(
+export const TestProviders = React.memo<Props>(
   ({ children, store = createStore(state, apolloClientObservable), onDragEnd = jest.fn() }) => (
     <I18nProvider>
       <KibanaContextProvider services={services}>
@@ -102,7 +101,7 @@ export const TestProviders = pure<Props>(
   )
 );
 
-export const TestProviderWithoutDragAndDrop = pure<Props>(
+export const TestProviderWithoutDragAndDrop = React.memo<Props>(
   ({ children, store = createStore(state, apolloClientObservable) }) => (
     <I18nProvider>
       <ReduxStoreProvider store={store}>{children}</ReduxStoreProvider>
diff --git a/x-pack/legacy/plugins/siem/public/pages/404.tsx b/x-pack/legacy/plugins/siem/public/pages/404.tsx
index f806a5a7fcdd3..ba1cb4f40cbed 100644
--- a/x-pack/legacy/plugins/siem/public/pages/404.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/404.tsx
@@ -5,12 +5,11 @@
  */
 
 import React from 'react';
-import { pure } from 'recompose';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { WrapperPage } from '../components/wrapper_page';
 
-export const NotFoundPage = pure(() => (
+export const NotFoundPage = React.memo(() => (
   <WrapperPage>
     <FormattedMessage
       id="xpack.siem.pages.fourohfour.noContentFoundDescription"
@@ -18,4 +17,5 @@ export const NotFoundPage = pure(() => (
     />
   </WrapperPage>
 ));
+
 NotFoundPage.displayName = 'NotFoundPage';
diff --git a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx
index 2cc98930767dc..97f0a21928a8a 100644
--- a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx
@@ -6,7 +6,6 @@
 
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { pure } from 'recompose';
 import styled from 'styled-components';
 
 import { AutoSizer } from '../../components/auto_sizer';
@@ -56,7 +55,7 @@ const calculateFlyoutHeight = ({
   windowHeight: number;
 }): number => Math.max(0, windowHeight - globalHeaderSize);
 
-export const HomePage = pure(() => (
+export const HomePage: React.FC = () => (
   <AutoSizer detectAnyWindowResize={true} content>
     {({ measureRef, windowMeasurement: { height: windowHeight = 0 } }) => (
       <WrappedByAutoSizer data-test-subj="wrapped-by-auto-sizer" ref={measureRef}>
@@ -115,7 +114,7 @@ export const HomePage = pure(() => (
                     path={`/:pageName(${SiemPageName.timelines})`}
                     render={() => <Timelines />}
                   />
-                  <Route path="/link-to" component={LinkToPage} />
+                  <Route path="/link-to" render={props => <LinkToPage {...props} />} />
                   <Route
                     path="/ml-hosts"
                     render={({ location, match }) => (
@@ -128,7 +127,7 @@ export const HomePage = pure(() => (
                       <MlNetworkConditionalContainer location={location} url={match.url} />
                     )}
                   />
-                  <Route component={NotFoundPage} />
+                  <Route render={() => <NotFoundPage />} />
                 </Switch>
               </DragDropContextWrapper>
             )}
@@ -141,5 +140,6 @@ export const HomePage = pure(() => (
       </WrappedByAutoSizer>
     )}
   </AutoSizer>
-));
+);
+
 HomePage.displayName = 'HomePage';
diff --git a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_empty_page.tsx b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
index 69ef8579ea8cc..ecd1e4f378cc5 100644
--- a/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { pure } from 'recompose';
 import chrome from 'ui/chrome';
 import { documentationLinks } from 'ui/documentation_links';
 
@@ -15,7 +14,7 @@ import * as i18n from './translations';
 
 const basePath = chrome.getBasePath();
 
-export const HostsEmptyPage = pure(() => (
+export const HostsEmptyPage = React.memo(() => (
   <EmptyPage
     actionPrimaryIcon="gear"
     actionPrimaryLabel={i18n.EMPTY_ACTION_PRIMARY}
diff --git a/x-pack/legacy/plugins/siem/public/pages/network/network_empty_page.tsx b/x-pack/legacy/plugins/siem/public/pages/network/network_empty_page.tsx
index 6e121608e431d..34e7f49bd9bd5 100644
--- a/x-pack/legacy/plugins/siem/public/pages/network/network_empty_page.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/network/network_empty_page.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { pure } from 'recompose';
 import chrome from 'ui/chrome';
 import { documentationLinks } from 'ui/documentation_links';
 
@@ -15,7 +14,7 @@ import * as i18n from './translations';
 
 const basePath = chrome.getBasePath();
 
-export const NetworkEmptyPage = pure(() => (
+export const NetworkEmptyPage = React.memo(() => (
   <EmptyPage
     actionPrimaryIcon="gear"
     actionPrimaryLabel={i18n.EMPTY_ACTION_PRIMARY}
diff --git a/x-pack/legacy/plugins/siem/public/pages/overview/summary.tsx b/x-pack/legacy/plugins/siem/public/pages/overview/summary.tsx
index 13d2dd96730f2..7fd8f84129d89 100644
--- a/x-pack/legacy/plugins/siem/public/pages/overview/summary.tsx
+++ b/x-pack/legacy/plugins/siem/public/pages/overview/summary.tsx
@@ -7,10 +7,9 @@
 import { EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import { pure } from 'recompose';
 import { documentationLinks } from 'ui/documentation_links';
 
-export const Summary = pure(() => (
+export const Summary = React.memo(() => (
   <EuiFlexItem>
     <EuiText>
       <h2>
diff --git a/x-pack/legacy/plugins/siem/public/routes.tsx b/x-pack/legacy/plugins/siem/public/routes.tsx
index 9a132eb8d4fac..0e9bcf5dc5bfa 100644
--- a/x-pack/legacy/plugins/siem/public/routes.tsx
+++ b/x-pack/legacy/plugins/siem/public/routes.tsx
@@ -20,8 +20,8 @@ export const PageRouter: FC<RouterProps> = memo(({ history }) => (
   <ManageRoutesSpy>
     <Router history={history}>
       <Switch>
-        <Route path="/" component={HomePage} />
-        <Route component={NotFoundPage} />
+        <Route path="/" render={() => <HomePage />} />
+        <Route render={() => <NotFoundPage />} />
       </Switch>
     </Router>
   </ManageRoutesSpy>
diff --git a/x-pack/legacy/plugins/siem/server/kibana.index.ts b/x-pack/legacy/plugins/siem/server/kibana.index.ts
index 66ec436ea418f..d6db1c4ef5bb9 100644
--- a/x-pack/legacy/plugins/siem/server/kibana.index.ts
+++ b/x-pack/legacy/plugins/siem/server/kibana.index.ts
@@ -24,6 +24,7 @@ import { readRulesRoute } from './lib/detection_engine/routes/read_rules_route';
 import { findRulesRoute } from './lib/detection_engine/routes/find_rules_route';
 import { deleteRulesRoute } from './lib/detection_engine/routes/delete_rules_route';
 import { updateRulesRoute } from './lib/detection_engine/routes/update_rules_route';
+import { setSignalsStatusRoute } from './lib/detection_engine/routes/signals/open_close_signals_route';
 import { ServerFacade } from './types';
 import { deleteIndexRoute } from './lib/detection_engine/routes/index/delete_index_route';
 
@@ -54,6 +55,11 @@ export const initServerWithKibana = (
   deleteRulesRoute(kbnServer);
   findRulesRoute(kbnServer);
 
+  // Detection Engine Signals routes that have the REST endpoints of /api/detection_engine/signals
+  // POST /api/detection_engine/signals/status
+  // Example usage can be found in siem/server/lib/detection_engine/scripts/signals
+  setSignalsStatusRoute(kbnServer);
+
   // Detection Engine index routes that have the REST endpoints of /api/detection_engine/index
   // All REST index creation, policy management for spaces
   createIndexRoute(kbnServer);
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md b/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md
index 755727f9870f6..d82424c1c3bd3 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/README.md
@@ -154,3 +154,13 @@ logging.events:
 See these two README.md's pages for more references on the alerting and actions API:
 https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/alerting/README.md
 https://github.com/elastic/kibana/tree/master/x-pack/legacy/plugins/actions
+### Signals API
+
+To update the status of a signal or group of signals, the following scripts provide an example of how to
+go about doing so.
+` cd x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts`
+`./signals/put_signal_doc.sh` will post a sample signal doc into the signals index to play with
+`./signals/set_status_with_id.sh closed` will update the status of the sample signal to closed
+`./signals/set_status_with_id.sh open` will update the status of the sample signal to open
+`./signals/set_status_with_query.sh closed` will update the status of the signals in the result of the query to closed.
+`./signals/set_status_with_query.sh open` will update the status of the signals in the result of the query to open.
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/types.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/types.ts
index 843ba4b116779..cb1d59254923b 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/types.ts
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/alerts/types.ts
@@ -70,6 +70,16 @@ export type RuleAlertParamsRest = Omit<
   output_index: RuleAlertParams['outputIndex'];
 };
 
+export interface SignalsParams {
+  signalIds: string[] | undefined | null;
+  query: object | undefined | null;
+  status: 'open' | 'closed';
+}
+
+export type SignalsRestParams = Omit<SignalsParams, 'signalIds'> & {
+  signal_ids: SignalsParams['signalIds'];
+};
+
 export type OutputRuleAlertRest = RuleAlertParamsRest & {
   id: string;
   created_by: string | undefined | null;
@@ -150,6 +160,10 @@ export interface RulesRequest extends RequestFacade {
   payload: RuleAlertParamsRest;
 }
 
+export interface SignalsRequest extends RequestFacade {
+  payload: SignalsRestParams;
+}
+
 export interface UpdateRulesRequest extends RequestFacade {
   payload: UpdateRuleAlertParamsRest;
 }
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/_mock_server.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/_mock_server.ts
index 3c19ff6f1bb65..8b7f6c765e710 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/_mock_server.ts
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/_mock_server.ts
@@ -6,9 +6,10 @@
 
 import Hapi from 'hapi';
 import { KibanaConfig } from 'src/legacy/server/kbn_server';
+import { ElasticsearchPlugin } from 'src/legacy/core_plugins/elasticsearch';
+
 import { alertsClientMock } from '../../../../../../alerting/server/alerts_client.mock';
 import { actionsClientMock } from '../../../../../../actions/server/actions_client.mock';
-import { ElasticsearchPlugin } from 'src/legacy/core_plugins/elasticsearch';
 
 const defaultConfig = {
   'kibana.index': '.kibana',
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/request_responses.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/request_responses.ts
index e64153e81fe4a..c18891c032060 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/request_responses.ts
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/__mocks__/request_responses.ts
@@ -6,8 +6,11 @@
 
 import { ServerInjectOptions } from 'hapi';
 import { ActionResult } from '../../../../../../actions/server/types';
-import { RuleAlertParamsRest, RuleAlertType } from '../../alerts/types';
-import { DETECTION_ENGINE_RULES_URL } from '../../../../../common/constants';
+import { RuleAlertParamsRest, RuleAlertType, SignalsRestParams } from '../../alerts/types';
+import {
+  DETECTION_ENGINE_RULES_URL,
+  DETECTION_ENGINE_SIGNALS_STATUS_URL,
+} from '../../../../../common/constants';
 
 // The Omit of filter is because of a Hapi Server Typing issue that I am unclear
 // where it comes from. I would hope to remove the "filter" as an omit at some point
@@ -49,6 +52,20 @@ export const typicalFilterPayload = (): Partial<RuleAlertParamsRest> => ({
   filter: {},
 });
 
+export const typicalSetStatusSignalByIdsPayload = (): Partial<SignalsRestParams> => ({
+  signal_ids: ['somefakeid1', 'somefakeid2'],
+  status: 'closed',
+});
+
+export const typicalSetStatusSignalByQueryPayload = (): Partial<SignalsRestParams> => ({
+  query: { range: { '@timestamp': { gte: 'now-2M', lte: 'now/M' } } },
+  status: 'closed',
+});
+
+export const setStatusSignalMissingIdsAndQueryPayload = (): Partial<SignalsRestParams> => ({
+  status: 'closed',
+});
+
 export const getUpdateRequest = (): ServerInjectOptions => ({
   method: 'PUT',
   url: DETECTION_ENGINE_RULES_URL,
@@ -113,6 +130,22 @@ export const getCreateRequest = (): ServerInjectOptions => ({
   },
 });
 
+export const getSetSignalStatusByIdsRequest = (): ServerInjectOptions => ({
+  method: 'POST',
+  url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+  payload: {
+    ...typicalSetStatusSignalByIdsPayload(),
+  },
+});
+
+export const getSetSignalStatusByQueryRequest = (): ServerInjectOptions => ({
+  method: 'POST',
+  url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+  payload: {
+    ...typicalSetStatusSignalByQueryPayload(),
+  },
+});
+
 export const createActionResult = (): ActionResult => ({
   id: 'result-1',
   actionTypeId: 'action-id-1',
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.test.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.test.ts
index 690d9b11b1455..dd45490c778bf 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.test.ts
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.test.ts
@@ -4,12 +4,19 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { createRulesSchema, updateRulesSchema, findRulesSchema, queryRulesSchema } from './schemas';
+import {
+  createRulesSchema,
+  updateRulesSchema,
+  findRulesSchema,
+  queryRulesSchema,
+  setSignalsStatusSchema,
+} from './schemas';
 import {
   RuleAlertParamsRest,
   FindParamsRest,
   UpdateRuleAlertParamsRest,
   ThreatParams,
+  SignalsRestParams,
 } from '../alerts/types';
 
 describe('schemas', () => {
@@ -2006,186 +2013,187 @@ describe('schemas', () => {
         }).value.threats
       ).toBe(undefined);
     });
-  });
-  test('threats is not defaulted to undefined on update with empty array', () => {
-    expect(
-      updateRulesSchema.validate<Partial<UpdateRuleAlertParamsRest>>({
-        id: 'rule-1',
-        description: 'some description',
-        from: 'now-5m',
-        to: 'now',
-        index: ['index-1'],
-        name: 'some-name',
-        severity: 'severity',
-        interval: '5m',
-        type: 'query',
-        references: ['index-1'],
-        query: 'some query',
-        language: 'kuery',
-        max_signals: 1,
-        threats: [],
-      }).value.threats
-    ).toMatchObject([]);
-  });
-  test('threats is valid when updated with all sub-objects', () => {
-    const expected: ThreatParams[] = [
-      {
-        framework: 'fake',
-        tactic: {
-          id: 'fakeId',
-          name: 'fakeName',
-          reference: 'fakeRef',
-        },
-        techniques: [
-          {
-            id: 'techniqueId',
-            name: 'techniqueName',
-            reference: 'techniqueRef',
+
+    test('threats is not defaulted to undefined on update with empty array', () => {
+      expect(
+        updateRulesSchema.validate<Partial<UpdateRuleAlertParamsRest>>({
+          id: 'rule-1',
+          description: 'some description',
+          from: 'now-5m',
+          to: 'now',
+          index: ['index-1'],
+          name: 'some-name',
+          severity: 'severity',
+          interval: '5m',
+          type: 'query',
+          references: ['index-1'],
+          query: 'some query',
+          language: 'kuery',
+          max_signals: 1,
+          threats: [],
+        }).value.threats
+      ).toMatchObject([]);
+    });
+    test('threats is valid when updated with all sub-objects', () => {
+      const expected: ThreatParams[] = [
+        {
+          framework: 'fake',
+          tactic: {
+            id: 'fakeId',
+            name: 'fakeName',
+            reference: 'fakeRef',
           },
-        ],
-      },
-    ];
-    expect(
-      updateRulesSchema.validate<Partial<UpdateRuleAlertParamsRest>>({
-        id: 'rule-1',
-        description: 'some description',
-        from: 'now-5m',
-        to: 'now',
-        index: ['index-1'],
-        name: 'some-name',
-        severity: 'severity',
-        interval: '5m',
-        type: 'query',
-        references: ['index-1'],
-        query: 'some query',
-        language: 'kuery',
-        max_signals: 1,
-        threats: [
-          {
-            framework: 'fake',
-            tactic: {
-              id: 'fakeId',
-              name: 'fakeName',
-              reference: 'fakeRef',
+          techniques: [
+            {
+              id: 'techniqueId',
+              name: 'techniqueName',
+              reference: 'techniqueRef',
             },
-            techniques: [
-              {
-                id: 'techniqueId',
-                name: 'techniqueName',
-                reference: 'techniqueRef',
+          ],
+        },
+      ];
+      expect(
+        updateRulesSchema.validate<Partial<UpdateRuleAlertParamsRest>>({
+          id: 'rule-1',
+          description: 'some description',
+          from: 'now-5m',
+          to: 'now',
+          index: ['index-1'],
+          name: 'some-name',
+          severity: 'severity',
+          interval: '5m',
+          type: 'query',
+          references: ['index-1'],
+          query: 'some query',
+          language: 'kuery',
+          max_signals: 1,
+          threats: [
+            {
+              framework: 'fake',
+              tactic: {
+                id: 'fakeId',
+                name: 'fakeName',
+                reference: 'fakeRef',
               },
-            ],
-          },
-        ],
-      }).value.threats
-    ).toMatchObject(expected);
-  });
-  test('threats is invalid when updated with missing property framework', () => {
-    expect(
-      updateRulesSchema.validate<
-        Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
-          threats: Array<Partial<Omit<ThreatParams, 'framework'>>>;
-        }
-      >({
-        id: 'rule-1',
-        description: 'some description',
-        from: 'now-5m',
-        to: 'now',
-        index: ['index-1'],
-        name: 'some-name',
-        severity: 'severity',
-        interval: '5m',
-        type: 'query',
-        references: ['index-1'],
-        query: 'some query',
-        language: 'kuery',
-        max_signals: 1,
-        threats: [
-          {
-            tactic: {
-              id: 'fakeId',
-              name: 'fakeName',
-              reference: 'fakeRef',
+              techniques: [
+                {
+                  id: 'techniqueId',
+                  name: 'techniqueName',
+                  reference: 'techniqueRef',
+                },
+              ],
             },
-            techniques: [
-              {
-                id: 'techniqueId',
-                name: 'techniqueName',
-                reference: 'techniqueRef',
+          ],
+        }).value.threats
+      ).toMatchObject(expected);
+    });
+    test('threats is invalid when updated with missing property framework', () => {
+      expect(
+        updateRulesSchema.validate<
+          Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
+            threats: Array<Partial<Omit<ThreatParams, 'framework'>>>;
+          }
+        >({
+          id: 'rule-1',
+          description: 'some description',
+          from: 'now-5m',
+          to: 'now',
+          index: ['index-1'],
+          name: 'some-name',
+          severity: 'severity',
+          interval: '5m',
+          type: 'query',
+          references: ['index-1'],
+          query: 'some query',
+          language: 'kuery',
+          max_signals: 1,
+          threats: [
+            {
+              tactic: {
+                id: 'fakeId',
+                name: 'fakeName',
+                reference: 'fakeRef',
               },
-            ],
-          },
-        ],
-      }).error
-    ).toBeTruthy();
-  });
-  test('threats is invalid when updated with missing tactic sub-object', () => {
-    expect(
-      updateRulesSchema.validate<
-        Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
-          threats: Array<Partial<Omit<ThreatParams, 'tactic'>>>;
-        }
-      >({
-        id: 'rule-1',
-        description: 'some description',
-        from: 'now-5m',
-        to: 'now',
-        index: ['index-1'],
-        name: 'some-name',
-        severity: 'severity',
-        interval: '5m',
-        type: 'query',
-        references: ['index-1'],
-        query: 'some query',
-        language: 'kuery',
-        max_signals: 1,
-        threats: [
-          {
-            framework: 'fake',
-            techniques: [
-              {
+              techniques: [
+                {
+                  id: 'techniqueId',
+                  name: 'techniqueName',
+                  reference: 'techniqueRef',
+                },
+              ],
+            },
+          ],
+        }).error
+      ).toBeTruthy();
+    });
+    test('threats is invalid when updated with missing tactic sub-object', () => {
+      expect(
+        updateRulesSchema.validate<
+          Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
+            threats: Array<Partial<Omit<ThreatParams, 'tactic'>>>;
+          }
+        >({
+          id: 'rule-1',
+          description: 'some description',
+          from: 'now-5m',
+          to: 'now',
+          index: ['index-1'],
+          name: 'some-name',
+          severity: 'severity',
+          interval: '5m',
+          type: 'query',
+          references: ['index-1'],
+          query: 'some query',
+          language: 'kuery',
+          max_signals: 1,
+          threats: [
+            {
+              framework: 'fake',
+              techniques: [
+                {
+                  id: 'techniqueId',
+                  name: 'techniqueName',
+                  reference: 'techniqueRef',
+                },
+              ],
+            },
+          ],
+        }).error
+      ).toBeTruthy();
+    });
+    test('threats is invalid when updated with missing techniques', () => {
+      expect(
+        updateRulesSchema.validate<
+          Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
+            threats: Array<Partial<Omit<ThreatParams, 'techniques'>>>;
+          }
+        >({
+          id: 'rule-1',
+          description: 'some description',
+          from: 'now-5m',
+          to: 'now',
+          index: ['index-1'],
+          name: 'some-name',
+          severity: 'severity',
+          interval: '5m',
+          type: 'query',
+          references: ['index-1'],
+          query: 'some query',
+          language: 'kuery',
+          max_signals: 1,
+          threats: [
+            {
+              framework: 'fake',
+              tactic: {
                 id: 'techniqueId',
                 name: 'techniqueName',
                 reference: 'techniqueRef',
               },
-            ],
-          },
-        ],
-      }).error
-    ).toBeTruthy();
-  });
-  test('threats is invalid when updated with missing techniques', () => {
-    expect(
-      updateRulesSchema.validate<
-        Partial<Omit<UpdateRuleAlertParamsRest, 'threats'>> & {
-          threats: Array<Partial<Omit<ThreatParams, 'techniques'>>>;
-        }
-      >({
-        id: 'rule-1',
-        description: 'some description',
-        from: 'now-5m',
-        to: 'now',
-        index: ['index-1'],
-        name: 'some-name',
-        severity: 'severity',
-        interval: '5m',
-        type: 'query',
-        references: ['index-1'],
-        query: 'some query',
-        language: 'kuery',
-        max_signals: 1,
-        threats: [
-          {
-            framework: 'fake',
-            tactic: {
-              id: 'techniqueId',
-              name: 'techniqueName',
-              reference: 'techniqueRef',
             },
-          },
-        ],
-      }).error
-    ).toBeTruthy();
+          ],
+        }).error
+      ).toBeTruthy();
+    });
   });
 
   describe('find rules schema', () => {
@@ -2340,4 +2348,62 @@ describe('schemas', () => {
       ).toBeFalsy();
     });
   });
+
+  describe('set signal status schema', () => {
+    test('signal_ids and status is valid', () => {
+      expect(
+        setSignalsStatusSchema.validate<Partial<SignalsRestParams>>({
+          signal_ids: ['somefakeid'],
+          status: 'open',
+        }).error
+      ).toBeFalsy();
+    });
+
+    test('query and status is valid', () => {
+      expect(
+        setSignalsStatusSchema.validate<Partial<SignalsRestParams>>({
+          query: {},
+          status: 'open',
+        }).error
+      ).toBeFalsy();
+    });
+
+    test('signal_ids and missing status is invalid', () => {
+      expect(
+        setSignalsStatusSchema.validate<Partial<SignalsRestParams>>({
+          signal_ids: ['somefakeid'],
+        }).error
+      ).toBeTruthy();
+    });
+
+    test('query and missing status is invalid', () => {
+      expect(
+        setSignalsStatusSchema.validate<Partial<SignalsRestParams>>({
+          query: {},
+        }).error
+      ).toBeTruthy();
+    });
+
+    test('status is present but query or signal_ids is missing is invalid', () => {
+      expect(
+        setSignalsStatusSchema.validate<Partial<SignalsRestParams>>({
+          status: 'closed',
+        }).error
+      ).toBeTruthy();
+    });
+
+    test('signal_ids is present but status has wrong value', () => {
+      expect(
+        setSignalsStatusSchema.validate<
+          Partial<
+            Omit<SignalsRestParams, 'status'> & {
+              status: string;
+            }
+          >
+        >({
+          status: 'fakeVal',
+        }).error
+      ).toBeTruthy();
+    });
+  });
 });
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.ts
index 59d52c113cbf2..d1a7a01c72415 100644
--- a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.ts
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/schemas.ts
@@ -32,6 +32,7 @@ const risk_score = Joi.number()
   .greater(-1)
   .less(101);
 const severity = Joi.string();
+const status = Joi.string().valid('open', 'closed');
 const to = Joi.string();
 const type = Joi.string().valid('filter', 'query', 'saved_query');
 const queryFilter = Joi.string();
@@ -44,6 +45,8 @@ const per_page = Joi.number()
 const page = Joi.number()
   .min(1)
   .default(1);
+const signal_ids = Joi.array().items(Joi.string());
+const signal_status_query = Joi.object();
 const sort_field = Joi.string();
 const sort_order = Joi.string().valid('asc', 'desc');
 const tags = Joi.array().items(Joi.string());
@@ -213,3 +216,9 @@ export const findRulesSchema = Joi.object({
   }),
   sort_order,
 });
+
+export const setSignalsStatusSchema = Joi.object({
+  signal_ids,
+  query: signal_status_query,
+  status: status.required(),
+}).xor('signal_ids', 'query');
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals.test.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals.test.ts
new file mode 100644
index 0000000000000..3cb64586d6cb5
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals.test.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { createMockServer } from '../__mocks__/_mock_server';
+import { setSignalsStatusRoute } from './open_close_signals_route';
+import * as myUtils from '../utils';
+import { ServerInjectOptions } from 'hapi';
+import {
+  getSetSignalStatusByIdsRequest,
+  getSetSignalStatusByQueryRequest,
+  typicalSetStatusSignalByIdsPayload,
+  typicalSetStatusSignalByQueryPayload,
+  setStatusSignalMissingIdsAndQueryPayload,
+} from '../__mocks__/request_responses';
+import { DETECTION_ENGINE_SIGNALS_STATUS_URL } from '../../../../../common/constants';
+
+describe('set signal status', () => {
+  let { server, elasticsearch } = createMockServer();
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.spyOn(myUtils, 'getIndex').mockReturnValue('fakeindex');
+    ({ server, elasticsearch } = createMockServer());
+    elasticsearch.getCluster = jest.fn(() => ({
+      callWithRequest: jest.fn(() => true),
+    }));
+    setSignalsStatusRoute(server);
+  });
+
+  describe('status on signal', () => {
+    test('returns 200 when setting a status on a signal by ids', async () => {
+      const { statusCode } = await server.inject(getSetSignalStatusByIdsRequest());
+      expect(statusCode).toBe(200);
+      expect(myUtils.getIndex).toHaveReturnedWith('fakeindex');
+    });
+
+    test('returns 200 when setting a status on a signal by query', async () => {
+      const { statusCode } = await server.inject(getSetSignalStatusByQueryRequest());
+      expect(statusCode).toBe(200);
+    });
+  });
+
+  describe('validation', () => {
+    test('returns 200 if signal_ids and status are present', async () => {
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: typicalSetStatusSignalByIdsPayload(),
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(200);
+    });
+
+    test('returns 200 if query and status are present', async () => {
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: typicalSetStatusSignalByQueryPayload(),
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(200);
+    });
+
+    test('returns 400 if signal_ids and query are not present', async () => {
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: setStatusSignalMissingIdsAndQueryPayload(),
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(400);
+    });
+
+    test('returns 400 if signal_ids are present but status is not', async () => {
+      const { status, ...justIds } = typicalSetStatusSignalByIdsPayload();
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: justIds,
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(400);
+    });
+
+    test('returns 400 if query is present but status is not', async () => {
+      const { status, ...justTheQuery } = typicalSetStatusSignalByQueryPayload();
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: justTheQuery,
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(400);
+    });
+
+    test('returns 400 if query and signal_ids are present but status is not', async () => {
+      const allTogether = {
+        ...typicalSetStatusSignalByIdsPayload(),
+        ...typicalSetStatusSignalByQueryPayload(),
+      };
+      const { status, ...queryAndSignalIdsNoStatus } = allTogether;
+      const request: ServerInjectOptions = {
+        method: 'POST',
+        url: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+        payload: queryAndSignalIdsNoStatus,
+      };
+      const { statusCode } = await server.inject(request);
+      expect(statusCode).toBe(400);
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals_route.ts b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals_route.ts
new file mode 100644
index 0000000000000..b4152256fbb53
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/routes/signals/open_close_signals_route.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import Hapi from 'hapi';
+import { DETECTION_ENGINE_SIGNALS_STATUS_URL } from '../../../../../common/constants';
+import { SignalsRequest } from '../../alerts/types';
+import { setSignalsStatusSchema } from '../schemas';
+import { ServerFacade } from '../../../../types';
+import { transformError, getIndex } from '../utils';
+
+export const setSignalsStatusRouteDef = (server: ServerFacade): Hapi.ServerRoute => {
+  return {
+    method: 'POST',
+    path: DETECTION_ENGINE_SIGNALS_STATUS_URL,
+    options: {
+      tags: ['access:siem'],
+      validate: {
+        options: {
+          abortEarly: false,
+        },
+        payload: setSignalsStatusSchema,
+      },
+    },
+    async handler(request: SignalsRequest, headers) {
+      const { signal_ids: signalIds, query, status } = request.payload;
+      const index = getIndex(request, server);
+      const { callWithRequest } = request.server.plugins.elasticsearch.getCluster('data');
+      let queryObject;
+      if (signalIds) {
+        queryObject = { ids: { values: signalIds } };
+      }
+      if (query) {
+        queryObject = query;
+      }
+      try {
+        return callWithRequest(request, 'updateByQuery', {
+          index,
+          body: {
+            script: {
+              source: `ctx._source.signal.status = '${status}'`,
+              lang: 'painless',
+            },
+            query: queryObject,
+          },
+        });
+      } catch (exc) {
+        // error while getting or updating signal with id: id in signal index .siem-signals
+        return transformError(exc);
+      }
+    },
+  };
+};
+
+export const setSignalsStatusRoute = (server: ServerFacade) => {
+  server.route(setSignalsStatusRouteDef(server));
+};
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/put_signal_doc.sh b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/put_signal_doc.sh
new file mode 100755
index 0000000000000..dd107ae94ebbb
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/put_signal_doc.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+
+#
+# Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+# or more contributor license agreements. Licensed under the Elastic License;
+# you may not use this file except in compliance with the Elastic License.
+#
+
+set -e
+./check_env_variables.sh
+
+SIGNALS_INDEX=$(./get_signal_index.sh | jq ".name" -j)
+
+# Example: ./put_signal_doc.sh
+curl -s -k \
+  -H "Content-Type: application/json" \
+  -u ${ELASTICSEARCH_USERNAME}:${ELASTICSEARCH_PASSWORD} \
+  -d @./signals/sample_signal.json \
+  -X PUT ${ELASTICSEARCH_URL}/$SIGNALS_INDEX/_doc/45562a28e0dFakeSignalId \
+  | jq .
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/sample_signal.json b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/sample_signal.json
new file mode 100644
index 0000000000000..8cba054d4d205
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/sample_signal.json
@@ -0,0 +1,198 @@
+{
+  "@timestamp": "2019-11-27T00:11:45.677Z",
+  "host": {
+    "architecture": "x86_64",
+    "os": {
+      "kernel": "5.0.0-1015-gcp",
+      "codename": "disco",
+      "platform": "ubuntu",
+      "version": "19.04 (Disco Dingo)",
+      "family": "debian",
+      "name": "Ubuntu"
+    },
+    "id": "e6f890af316a25920c951acefc46bfef",
+    "name": "suricata-iowa",
+    "containerized": false,
+    "ip": [
+      "10.128.0.21",
+      "fe80::4001:aff:fe80:15"
+    ],
+    "mac": [
+      "42:01:0a:80:00:15"
+    ],
+    "hostname": "suricata-iowa"
+  },
+  "client": {
+    "ip": "10.128.0.21",
+    "port": 33814,
+    "packets": 2,
+    "bytes": 80
+  },
+  "user": {
+    "id": "0",
+    "name": "root"
+  },
+  "group": {
+    "id": "0",
+    "name": "root"
+  },
+  "server": {
+    "ip": "169.254.169.254",
+    "port": 80,
+    "packets": 3,
+    "bytes": 643
+  },
+  "system": {
+    "audit": {
+      "socket": {
+        "internal_version": "1.0.3",
+        "uid": 0,
+        "gid": 0,
+        "euid": 0,
+        "egid": 0,
+        "kernel_sock_address": "0xffff9e69fed14c80"
+      }
+    }
+  },
+  "network": {
+    "packets": 5,
+    "bytes": 723,
+    "community_id": "1:drz3M0ZoUnQI9BgaXVRhAwCGOsw=",
+    "direction": "outbound",
+    "type": "ipv4",
+    "transport": "tcp"
+  },
+  "flow": {
+    "final": true,
+    "complete": false
+  },
+  "source": {
+    "ip": "10.128.0.21",
+    "port": 33814,
+    "packets": 2,
+    "bytes": 80
+  },
+  "process": {
+    "args": [
+      "\/usr\/bin\/python3",
+      "\/usr\/bin\/google_network_daemon"
+    ],
+    "executable": "\/usr\/bin\/python3.7",
+    "created": "2019-11-04T15:01:04.190Z",
+    "pid": 808,
+    "name": "google_network_"
+  },
+  "destination": {
+    "bytes": 643,
+    "ip": "169.254.169.254",
+    "port": 80,
+    "packets": 3
+  },
+  "agent": {
+    "version": "8.0.0",
+    "type": "auditbeat",
+    "ephemeral_id": "d59f3431-3d93-401f-b7f7-557184bbe9c6",
+    "hostname": "suricata-iowa",
+    "id": "d67ace4c-c168-4527-a349-7740d4e9dfaa"
+  },
+  "event": {
+    "module": "system",
+    "dataset": "socket",
+    "kind": "signal",
+    "action": "network_flow",
+    "category": "network_traffic",
+    "start": "2019-11-27T00:11:34.865Z",
+    "end": "2019-11-27T00:11:34.866Z",
+    "duration": 1042842
+  },
+  "service": {
+    "type": "system"
+  },
+  "ecs": {
+    "version": "1.1.0"
+  },
+  "cloud": {
+    "provider": "gcp",
+    "instance": {
+      "id": "8744816015462516945",
+      "name": "suricata-iowa"
+    },
+    "machine": {
+      "type": "n1-standard-2"
+    },
+    "availability_zone": "us-central1-a",
+    "project": {
+      "id": "elastic-siem"
+    }
+  },
+  "signal": {
+    "parent": {
+      "id": "0_Ezqm4BHe9nqdOiBktm",
+      "type": "event",
+      "index": "auditbeat-8.0.0-2019.09.06-000022",
+      "depth": 1
+    },
+    "original_time": "2019-11-27T00:11:40.012Z",
+    "status": "open",
+    "rule": {
+      "id": "8d9bb7f1-9d8a-4f13-ae18-ccaf4ff61893",
+      "rule_id": "rule-1",
+      "false_positives": [
+        
+      ],
+      "max_signals": 100,
+      "risk_score": 1,
+      "description": "Detecting root and admin users",
+      "from": "now-6s",
+      "immutable": false,
+      "index": [
+        "auditbeat-*",
+        "filebeat-*",
+        "packetbeat-*",
+        "winlogbeat-*"
+      ],
+      "interval": "5s",
+      "language": "kuery",
+      "name": "Detect Root\/Admin Users",
+      "query": "user.name: root or user.name: admin",
+      "references": [
+        "http:\/\/www.example.com",
+        "https:\/\/ww.example.com"
+      ],
+      "severity": "high",
+      "tags": [
+        
+      ],
+      "type": "query",
+      "to": "now",
+      "enabled": true,
+      "created_by": "elastic",
+      "updated_by": "elastic",
+      "threats": [
+        {
+          "framework": "fake",
+          "technique": {
+            "reference": "techniqueRef",
+            "name": "techniqueName",
+            "id": "techniqueId"
+          },
+          "tactic": {
+            "reference": "fakeRef",
+            "name": "fakeName",
+            "id": "fakeId"
+          }
+        }
+      ]
+    },
+    "original_event": {
+      "module": "system",
+      "dataset": "socket",
+      "kind": "event",
+      "action": "network_flow",
+      "category": "network_traffic",
+      "start": "2019-11-27T00:11:34.865Z",
+      "end": "2019-11-27T00:11:34.866Z",
+      "duration": 1042842
+    }
+  }
+}
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_id.sh b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_id.sh
new file mode 100755
index 0000000000000..40c198638b15a
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_id.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+
+#
+# Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+# or more contributor license agreements. Licensed under the Elastic License;
+# you may not use this file except in compliance with the Elastic License.
+#
+
+set -e
+./check_env_variables.sh
+
+# Example: ./set_status_with_id.sh closed
+# Example: ./set_status_with_id.sh open
+  curl -s -k \
+  -H 'Content-Type: application/json' \
+  -H 'kbn-xsrf: 123' \
+  -u ${ELASTICSEARCH_USERNAME}:${ELASTICSEARCH_PASSWORD} \
+  -X POST ${KIBANA_URL}${SPACE_URL}/api/detection_engine/signals/status \
+  -d '{"signal_ids": ["45562a28e0dFakeSignalId"], "status": "'$1'"}' \
+  | jq .
diff --git a/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_query.sh b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_query.sh
new file mode 100755
index 0000000000000..50187c7b2fb77
--- /dev/null
+++ b/x-pack/legacy/plugins/siem/server/lib/detection_engine/scripts/signals/set_status_with_query.sh
@@ -0,0 +1,22 @@
+#!/bin/sh
+
+#
+# Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+# or more contributor license agreements. Licensed under the Elastic License;
+# you may not use this file except in compliance with the Elastic License.
+#
+
+set -e
+./check_env_variables.sh
+
+# Example: ./sigsnals/set_status_with_query.sh closed
+# Example: ./sigsnals/set_status_with_query.sh open
+  curl -s -k \
+  -H 'Content-Type: application/json' \
+  -H 'kbn-xsrf: 123' \
+  -u ${ELASTICSEARCH_USERNAME}:${ELASTICSEARCH_PASSWORD} \
+  -X POST ${KIBANA_URL}${SPACE_URL}/api/detection_engine/signals/status \
+  -d '{
+  "status": "'$1'",
+  "query": {"range":{"@timestamp":{"gte":"now-2M","lte":"now/M"}}}}' \
+  | jq .
diff --git a/x-pack/legacy/plugins/uptime/index.ts b/x-pack/legacy/plugins/uptime/index.ts
index 3cd0ffb1a2942..c8de623cb0a13 100644
--- a/x-pack/legacy/plugins/uptime/index.ts
+++ b/x-pack/legacy/plugins/uptime/index.ts
@@ -29,7 +29,7 @@ export const uptime = (kibana: any) =>
         }),
         main: 'plugins/uptime/app',
         order: 8900,
-        url: '/app/uptime/',
+        url: '/app/uptime#/',
       },
       home: ['plugins/uptime/register_feature'],
     },
diff --git a/x-pack/test/reporting/functional/reporting.js b/x-pack/test/reporting/functional/reporting.js
index 0c528a80b4334..b8a0789f1bff3 100644
--- a/x-pack/test/reporting/functional/reporting.js
+++ b/x-pack/test/reporting/functional/reporting.js
@@ -21,7 +21,9 @@ export default function ({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['reporting', 'common', 'dashboard', 'header', 'discover', 'visualize']);
   const log = getService('log');
 
-  describe('Reporting', () => {
+  // FLAKY: https://github.com/elastic/kibana/issues/45499
+  // FLAKY: https://github.com/elastic/kibana/issues/48721
+  describe.skip('Reporting', () => {
 
     before('initialize tests', async () => {
       await PageObjects.reporting.initTests();
@@ -73,8 +75,7 @@ export default function ({ getService, getPageObjects }) {
           await expectDisabledGenerateReportButton();
         });
 
-        // FLAKY: https://github.com/elastic/kibana/issues/45499
-        it.skip('becomes available when saved', async () => {
+        it('becomes available when saved', async () => {
           await PageObjects.dashboard.saveDashboard('mypdfdash');
           await PageObjects.reporting.openPdfReportingPanel();
           await expectEnabledGenerateReportButton();